Bump xml2js, @azure/ms-rest-js and @azure/identity

Bumps [xml2js](https://github.com/Leonidas-from-XIV/node-xml2js) to 0.5.0 and updates ancestor dependencies [xml2js](https://github.com/Leonidas-from-XIV/node-xml2js), [@azure/ms-rest-js](https://github.com/Azure/ms-rest-js) and [@azure/identity](https://github.com/Azure/azure-sdk-for-js). These dependencies need to be updated together.


Updates `xml2js` from 0.4.23 to 0.5.0
- [Release notes](https://github.com/Leonidas-from-XIV/node-xml2js/releases)
- [Commits](https://github.com/Leonidas-from-XIV/node-xml2js/commits/0.5.0)

Updates `@azure/ms-rest-js` from 2.2.0 to 2.6.6
- [Release notes](https://github.com/Azure/ms-rest-js/releases)
- [Changelog](https://github.com/Azure/ms-rest-js/blob/master/Changelog.md)
- [Commits](https://github.com/Azure/ms-rest-js/commits)

Updates `@azure/identity` from 1.2.1 to 1.5.2
- [Release notes](https://github.com/Azure/azure-sdk-for-js/releases)
- [Changelog](https://github.com/Azure/azure-sdk-for-js/blob/main/documentation/Changelog-for-next-generation.md)
- [Commits](https://github.com/Azure/azure-sdk-for-js/compare/@azure/identity_1.2.1...@azure/identity_1.5.2)

---
updated-dependencies:
- dependency-name: xml2js
  dependency-type: indirect
- dependency-name: "@azure/ms-rest-js"
  dependency-type: indirect
- dependency-name: "@azure/identity"
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>

package.json

@@ -7,7 +7,7 @@
     "@azure/arm-cosmosdb": "9.1.0",
     "@azure/cosmos": "3.16.2",
     "@azure/cosmos-language-service": "0.0.5",
-    "@azure/identity": "1.2.1",
+    "@azure/identity": "1.5.2",
     "@azure/ms-rest-nodeauth": "3.0.7",
     "@azure/msal-browser": "2.14.2",
     "@babel/plugin-proposal-class-properties": "7.12.1",

src/Explorer/Controls/Tabs/TabComponent.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
 import "./TabComponent.less";
 
 export interface TabContent {
@@ -18,15 +19,11 @@ interface TabComponentProps {
   onTabIndexChange: (newIndex: number) => void;
   hideHeader: boolean;
 }
-interface TabRefs {
-  [key: string]: HTMLElement;
-}
 
 /**
  * We assume there's at least one tab
  */
 export class TabComponent extends React.Component<TabComponentProps> {
-  private tabRefs: TabRefs = {};
   public constructor(props: TabComponentProps) {
     super(props);
 
@@ -36,41 +33,11 @@ export class TabComponent extends React.Component<TabComponentProps> {
       throw new Error(msg);
     }
   }
-  state = {
-    activeTabIndex: this.props.currentTabIndex,
-  };
 
   private setActiveTab(index: number): void {
     this.setState({ activeTabIndex: index });
     this.props.onTabIndexChange(index);
   }
-  private setIndex = (index: number) => {
-    const tab = this.tabRefs[index];
-    if (tab) {
-      tab.focus();
-      this.setState({ activeTabIndex: index });
-    }
-  };
-  private handlekeypress = (event: React.KeyboardEvent<HTMLSpanElement>): void => {
-    const { tabs, onTabIndexChange } = this.props;
-    const { activeTabIndex } = this.state;
-    const count = tabs.length;
-
-    const prevTab = () => {
-      this.setIndex((activeTabIndex - 1 + count) % count);
-      onTabIndexChange((activeTabIndex - 1 + count) % count);
-    };
-    const nextTab = () => {
-      this.setIndex((activeTabIndex + 1) % count);
-      onTabIndexChange((activeTabIndex + 1) % count);
-    };
-
-    if (event.key === "ArrowLeft") {
-      prevTab();
-    } else if (event.key === "ArrowRight") {
-      nextTab();
-    }
-  };
 
   private renderTabTitles(): JSX.Element[] {
     return this.props.tabs.map((tab: Tab, index: number) => {
@@ -80,32 +47,26 @@ export class TabComponent extends React.Component<TabComponentProps> {
 
       let className = "toggleSwitch";
       let ariaselected;
-      let tabindex;
       if (index === this.props.currentTabIndex) {
         className += " selectedToggle";
         ariaselected = true;
-        tabindex = 0;
       } else {
         className += " unselectedToggle";
         ariaselected = false;
-        tabindex = -1;
       }
 
       return (
         <div className="tab" key={index}>
-          <span
+          <AccessibleElement
+            as="span"
             className={className}
             role="tab"
-            onClick={() => this.setActiveTab(index)}
-            onKeyDown={(event: React.KeyboardEvent<HTMLSpanElement>) => this.handlekeypress(event)}
-            onFocus={() => this.setState({ activeTabIndex: index })}
+            onActivated={() => this.setActiveTab(index)}
             aria-label={`Select tab: ${tab.title}`}
             aria-selected={ariaselected}
-            tabIndex={tabindex}
-            ref={(element) => (this.tabRefs[index] = element)}
           >
             {tab.title}
-          </span>
+          </AccessibleElement>
         </div>
       );
     });