updated snapshot

.eslintrc.js

@@ -3,8 +3,8 @@ module.exports = {
     browser: true,
     es6: true,
   },
-  plugins: ["@typescript-eslint", "no-null", "prefer-arrow", "react-hooks"],
+  plugins: ["@typescript-eslint", "no-null", "prefer-arrow", "react-hooks", "jsx-a11y"],
-  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:jsx-a11y/recommended"],
   globals: {
     Atomics: "readonly",
     SharedArrayBuffer: "readonly",
@@ -34,6 +34,7 @@ module.exports = {
     },
   ],
   rules: {
+    "jsx-a11y/anchor-is-valid": 1,
     "no-console": ["error", { allow: ["error", "warn", "dir"] }],
     curly: "error",
     "@typescript-eslint/switch-exhaustiveness-check": "error",

package-lock.json

@@ -6723,6 +6723,12 @@
       "integrity": "sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=",
       "dev": true
     },
+    "ast-types-flow": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
+      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=",
+      "dev": true
+    },
     "astral-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
@@ -6784,6 +6790,12 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
+    "axe-core": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.2.0.tgz",
+      "integrity": "sha512-1uIESzroqpaTzt9uX48HO+6gfnKu3RwvWdCcWSrX4csMInJfCo1yvKPNXCwXFRpJqRW25tiASb6No0YH57PXqg==",
+      "dev": true
+    },
     "axios": {
       "version": "0.21.1",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
@@ -6799,6 +6811,12 @@
         }
       }
     },
+    "axobject-query": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
+      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
+      "dev": true
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -9087,6 +9105,12 @@
         "d3-transition": "2"
       }
     },
+    "damerau-levenshtein": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
+      "integrity": "sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==",
+      "dev": true
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -10436,6 +10460,43 @@
         "@typescript-eslint/experimental-utils": "^2.5.0"
       }
     },
+    "eslint-plugin-jsx-a11y": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.4.1.tgz",
+      "integrity": "sha512-0rGPJBbwHoGNPU73/QCLP/vveMlM1b1Z9PponxO87jfr6tuH5ligXbDT6nHSSzBC8ovX2Z+BQu7Bk5D/Xgq9zg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "aria-query": "^4.2.2",
+        "array-includes": "^3.1.1",
+        "ast-types-flow": "^0.0.7",
+        "axe-core": "^4.0.2",
+        "axobject-query": "^2.2.0",
+        "damerau-levenshtein": "^1.0.6",
+        "emoji-regex": "^9.0.0",
+        "has": "^1.0.3",
+        "jsx-ast-utils": "^3.1.0",
+        "language-tags": "^1.0.5"
+      },
+      "dependencies": {
+        "emoji-regex": {
+          "version": "9.2.2",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+          "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+          "dev": true
+        },
+        "jsx-ast-utils": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz",
+          "integrity": "sha512-EIsmt3O3ljsU6sot/J4E1zDRxfBNrhjyf/OKjlydwgEimQuznlM4Wv7U+ueONJMyEn1WRE0K8dhi3dVAXYT24Q==",
+          "dev": true,
+          "requires": {
+            "array-includes": "^3.1.2",
+            "object.assign": "^4.1.2"
+          }
+        }
+      }
+    },
     "eslint-plugin-no-null": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-no-null/-/eslint-plugin-no-null-1.0.2.tgz",
@@ -18239,6 +18300,21 @@
       "resolved": "https://registry.npmjs.org/labella/-/labella-1.1.4.tgz",
       "integrity": "sha1-xsxaNA6N80DrM1YzaD6lm4KMMi0="
     },
+    "language-subtag-registry": {
+      "version": "0.3.21",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
+      "integrity": "sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==",
+      "dev": true
+    },
+    "language-tags": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
+      "integrity": "sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=",
+      "dev": true,
+      "requires": {
+        "language-subtag-registry": "~0.3.2"
+      }
+    },
     "lcid": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",

package.json

@@ -142,6 +142,7 @@
     "enzyme-to-json": "3.6.1",
     "eslint": "7.8.1",
     "eslint-cli": "1.1.1",
+    "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.2",
     "eslint-plugin-react-hooks": "4.2.0",

src/Common/CollapsedResourceTree.tsx

@@ -14,17 +14,23 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
     <div id="mini" className={!isLeftPaneExpanded ? "mini toggle-mini" : "hiddenMain"}>
       <div className="main-nav nav">
         <ul className="nav">
-          <li
+          <li className="resourceTreeCollapse" id="collapseToggleLeftPaneButton" aria-label="Expand Tree">
-            className="resourceTreeCollapse"
+            <span
-            id="collapseToggleLeftPaneButton"
+              className="leftarrowCollapsed"
+              onClick={toggleLeftPaneExpanded}
               role="button"
               tabIndex={0}
-            aria-label="Expand Tree"
+              onKeyDown={toggleLeftPaneExpanded}
             >
-            <span className="leftarrowCollapsed" onClick={toggleLeftPaneExpanded}>
               <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
             </span>
-            <span className="collectionCollapsed" onClick={toggleLeftPaneExpanded}>
+            <span
+              className="collectionCollapsed"
+              onClick={toggleLeftPaneExpanded}
+              role="button"
+              tabIndex={0}
+              onKeyDown={toggleLeftPaneExpanded}
+            >
               <span data-bind="text: collectionTitle" />
             </span>
           </li>

src/Common/EntityValue.tsx

@@ -40,7 +40,6 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
         <TextField
           label={entityValueLabel && entityValueLabel}
           id="entityTimeId"
-          autoFocus
           type="time"
           value={entityTimeValue}
           onChange={onEntityTimeValueChange}
@@ -55,7 +54,6 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
       label={entityValueLabel && entityValueLabel}
       className="addEntityTextField"
       id="entityValueId"
-      autoFocus
       disabled={isEntityValueDisable}
       type={entityValueType}
       placeholder={entityValuePlaceholder}

src/Common/ResourceTree.tsx

@@ -41,6 +41,7 @@ export const ResourceTree: FunctionComponent<ResourceTreeProps> = ({
                 tabIndex={0}
                 aria-label="Collapse Tree"
                 title="Collapse Tree"
+                onKeyDown={toggleLeftPaneExpanded}
               >
                 <img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
               </span>

src/Common/TableEntity.tsx

@@ -96,7 +96,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
         <TextField
           label={entityPropertyLabel && entityPropertyLabel}
           id="entityPropertyId"
-          autoFocus
           disabled={isPropertyTypeDisable}
           placeholder={entityPropertyPlaceHolder}
           value={entityProperty}

src/Common/Upload/Upload.tsx

@@ -47,7 +47,7 @@ export const Upload: FunctionComponent<UploadProps> = ({
       props.onUpload(event);
     }
   };
-  const title = label + " to upload";
+
   return (
     <div>
       <span className="renewUploadItemsHeader">{label}</span>
@@ -67,7 +67,7 @@ export const Upload: FunctionComponent<UploadProps> = ({
           role="button"
         />
         <a href="#" id="fileImportLinkNotebook" onClick={onImportLinkClick} onKeyPress={onImportLinkKeyPress}>
-          <Image className="fileImportImg" src={FolderIcon} alt={title} title={title} />
+          <Image className="fileImportImg" src={FolderIcon} alt={label} title={label} />
         </a>
       </Stack>
     </div>

src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less

@@ -32,6 +32,9 @@
             .errorLink {
                 cursor: pointer;
             }
+            .errorLinkColor {
+                color: @AccentMediumHigh;
+            }
         }
 
         .paneErrorIcon {

src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.tsx

@@ -25,6 +25,7 @@ export class RadioSwitchComponent extends React.Component<RadioSwitchComponentPr
       <div className="radioSwitchComponent">
         {this.props.choices.map((choice: Choice) => (
           <span
+            role="button"
             tabIndex={0}
             key={choice.key}
             onClick={() => this.onSelect(choice)}

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx

@@ -122,7 +122,7 @@ export class IndexingPolicyComponent extends React.Component<
         {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
           <MessageBar messageBarType={MessageBarType.warning}>{indexingPolicynUnsavedWarningMessage}</MessageBar>
         )}
-        <div className="settingsV2IndexingPolicyEditor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
+        <div className="settingsV2IndexingPolicyEditor" role="button" tabIndex={0} ref={this.indexingPolicyDiv}></div>
       </Stack>
     );
   }

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`IndexingPolicyComponent renders 1`] = `
   />
   <div
     className="settingsV2IndexingPolicyEditor"
+    role="button"
     tabIndex={0}
   />
 </Stack>

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -113,7 +113,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           aria-label="Autoscale mode"
           checked={isAutoscaleSelected}
           type="radio"
-          role="radio"
           tabIndex={0}
           onChange={(e) => handleOnChangeMode(e, "Autoscale")}
         />
@@ -124,7 +123,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           aria-label="Manual mode"
           checked={!isAutoscaleSelected}
           type="radio"
-          role="radio"
           tabIndex={0}
           onChange={(e) => handleOnChangeMode(e, "Manual")}
         />

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -655,7 +655,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           className="throughputInputRadioBtn"
           key=".0:$.0"
           onChange={[Function]}
-          role="radio"
           tabIndex={0}
           type="radio"
         />
@@ -671,7 +670,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           className="throughputInputRadioBtn"
           key=".0:$.2"
           onChange={[Function]}
-          role="radio"
           tabIndex={0}
           type="radio"
         />

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -120,6 +120,7 @@ export class NotificationConsoleComponent extends React.Component<
           onClick={() => this.expandCollapseConsole()}
           onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
           tabIndex={0}
+          role="button"
         >
           <div className="statusBar">
             <span className="dataTypeIcons">
@@ -179,7 +180,7 @@ export class NotificationConsoleComponent extends React.Component<
                 onKeyDown={(event: React.KeyboardEvent<HTMLSpanElement>) => this.onClearNotificationsKeyPress(event)}
                 tabIndex={0}
               >
-                <img src={ClearIcon} alt="clear notifications image" />
+                <img src={ClearIcon} alt="clear notifications" />
                 Clear Notifications
               </span>
             </div>

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
     id="notificationConsoleHeader"
     onClick={[Function]}
     onKeyDown={[Function]}
+    role="button"
     tabIndex={0}
   >
     <div
@@ -150,7 +151,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           tabIndex={0}
         >
           <img
-            alt="clear notifications image"
+            alt="clear notifications"
             src=""
           />
           Clear Notifications
@@ -173,6 +174,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
     id="notificationConsoleHeader"
     onClick={[Function]}
     onKeyDown={[Function]}
+    role="button"
     tabIndex={0}
   >
     <div
@@ -316,7 +318,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           tabIndex={0}
         >
           <img
-            alt="clear notifications image"
+            alt="clear notifications"
             src=""
           />
           Clear Notifications

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -139,7 +139,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 aria-checked={this.state.createNewDatabase}
                 name="databaseType"
                 type="radio"
-                role="radio"
                 id="databaseCreateNew"
                 tabIndex={0}
                 onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
@@ -153,7 +152,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 aria-checked={!this.state.createNewDatabase}
                 name="databaseType"
                 type="radio"
-                role="radio"
                 tabIndex={0}
                 onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
               />
@@ -175,7 +173,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   size={40}
                   className="panelTextField"
                   aria-label="New database id"
-                  autoFocus
                   value={this.state.newDatabaseId}
                   onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                     this.setState({ newDatabaseId: event.target.value })
@@ -287,7 +284,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   aria-label="Turn on indexing"
                   aria-checked={this.state.enableIndexing}
                   type="radio"
-                  role="radio"
                   tabIndex={0}
                   onChange={this.onTurnOnIndexing.bind(this)}
                 />
@@ -299,7 +295,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   aria-label="Turn off indexing"
                   aria-checked={!this.state.enableIndexing}
                   type="radio"
-                  role="radio"
                   tabIndex={0}
                   onChange={this.onTurnOffIndexing.bind(this)}
                 />
@@ -342,7 +337,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     aria-checked={!this.state.isSharded}
                     name="unsharded"
                     type="radio"
-                    role="radio"
                     id="unshardedOption"
                     tabIndex={0}
                     onChange={this.onUnshardedRadioBtnChange.bind(this)}
@@ -356,7 +350,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     aria-checked={this.state.isSharded}
                     name="sharded"
                     type="radio"
-                    role="radio"
                     id="shardedOption"
                     tabIndex={0}
                     onChange={this.onShardedRadioBtnChange.bind(this)}
@@ -480,7 +473,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                             : "Comma separated paths e.g. /firstName,/address/zipCode"
                         }
                         className="panelTextField"
-                        autoFocus
                         value={uniqueKey}
                         onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                           const uniqueKeys = this.state.uniqueKeys.map((uniqueKey: string, j: number) => {
@@ -594,7 +586,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         aria-checked={this.state.enableAnalyticalStore}
                         name="analyticalStore"
                         type="radio"
-                        role="radio"
                         id="enableAnalyticalStoreBtn"
                         tabIndex={0}
                         onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
@@ -609,7 +600,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         aria-checked={!this.state.enableAnalyticalStore}
                         name="analyticalStore"
                         type="radio"
-                        role="radio"
                         id="disableAnalyticalStoreBtn"
                         tabIndex={0}
                         onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -202,7 +202,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
             placeholder={databaseIdPlaceHolder}
             value={databaseId}
             onChange={handleonChangeDBId}
-            autoFocus
             style={{ fontSize: 12 }}
             styles={{ root: { width: 300 } }}
           />

src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap

@@ -33,7 +33,6 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
         aria-label="Database id"
         aria-required="true"
         autoComplete="off"
-        autoFocus={true}
         id="database-id"
         onChange={[Function]}
         pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -120,7 +120,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
             <Text variant="small">Confirm by typing the {collectionName.toLowerCase()} id</Text>
             <TextField
               id="confirmCollectionId"
-              autoFocus
               value={inputCollectionName}
               styles={{ fieldGroup: { width: 300 } }}
               onChange={(event, newInput?: string) => {

src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap

@@ -33,6 +33,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
       <div
         className="contextual-pane-out"
         onClick={[Function]}
+        onKeyDown={[Function]}
       />
       <div
         className="contextual-pane"
@@ -1165,7 +1166,9 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   className="errorLink"
                   hidden={true}
                   onClick={[Function]}
+                  onKeyDown={[Function]}
                   role="link"
+                  tabIndex={0}
                 >
                   More details
                 </a>
@@ -1198,7 +1201,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   </span>
                 </Text>
                 <StyledTextFieldBase
-                  autoFocus={true}
                   id="confirmCollectionId"
                   onChange={[Function]}
                   styles={
@@ -1211,7 +1213,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   value=""
                 >
                   <TextFieldBase
-                    autoFocus={true}
                     deferredValidationTime={200}
                     id="confirmCollectionId"
                     onChange={[Function]}
@@ -1504,7 +1505,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         >
                           <input
                             aria-invalid={false}
-                            autoFocus={true}
                             className="ms-TextField-field field-115"
                             id="confirmCollectionId"
                             onBlur={[Function]}
@@ -3664,6 +3664,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           hidden={true}
         >
           <img
+            alt="loader"
             className="dataExplorerLoader"
             src=""
           />

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -1,5 +1,5 @@
-import { useBoolean } from "@fluentui/react-hooks";
 import { Text, TextField } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useState } from "react";
 import { Areas } from "../../Common/Constants";
 import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
@@ -134,7 +134,6 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
           <Text variant="small">Confirm by typing the database id</Text>
           <TextField
             id="confirmDatabaseId"
-            autoFocus
             styles={{ fieldGroup: { width: 300 } }}
             onChange={(event, newInput?: string) => {
               setDatabaseInput(newInput);

src/Explorer/Panes/ExecuteSprocParamsPane/InputParameter.tsx

@@ -63,7 +63,6 @@ export const InputParameter: FunctionComponent<InputParameterProps> = ({
         <TextField
           label={inputLabel && inputLabel}
           id="confirmCollectionId"
-          autoFocus
           value={paramValue}
           onChange={onParamValueChange}
         />

src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap

@@ -24,6 +24,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
       <div
         className="contextual-pane-out"
         onClick={[Function]}
+        onKeyDown={[Function]}
       />
       <div
         className="contextual-pane"
@@ -1156,7 +1157,9 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   className="errorLink"
                   hidden={true}
                   onClick={[Function]}
+                  onKeyDown={[Function]}
                   role="link"
+                  tabIndex={0}
                 >
                   More details
                 </a>
@@ -2709,14 +2712,12 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       </DropdownBase>
                     </Dropdown>
                     <StyledTextFieldBase
-                      autoFocus={true}
                       id="confirmCollectionId"
                       key=".0:$.1"
                       label="Value"
                       onChange={[Function]}
                     >
                       <TextFieldBase
-                        autoFocus={true}
                         deferredValidationTime={200}
                         id="confirmCollectionId"
                         label="Value"
@@ -3302,7 +3303,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                               <input
                                 aria-invalid={false}
                                 aria-labelledby="TextFieldLabel6"
-                                autoFocus={true}
                                 className="ms-TextField-field field-85"
                                 id="confirmCollectionId"
                                 onBlur={[Function]}
@@ -4864,7 +4864,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       </DropdownBase>
                     </Dropdown>
                     <StyledTextFieldBase
-                      autoFocus={true}
                       id="confirmCollectionId"
                       key=".0:$.1"
                       label="Param"
@@ -4872,7 +4871,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       value=""
                     >
                       <TextFieldBase
-                        autoFocus={true}
                         deferredValidationTime={200}
                         id="confirmCollectionId"
                         label="Param"
@@ -5459,7 +5457,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                               <input
                                 aria-invalid={false}
                                 aria-labelledby="TextFieldLabel10"
-                                autoFocus={true}
                                 className="ms-TextField-field field-85"
                                 id="confirmCollectionId"
                                 onBlur={[Function]}
@@ -8227,6 +8224,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
           hidden={true}
         >
           <img
+            alt="loader"
             className="dataExplorerLoader"
             src=""
           />

src/Explorer/Panes/GenericRightPaneComponent/GenericRightPaneComponent.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { IconButton, PrimaryButton } from "@fluentui/react";
 import React, { FunctionComponent, ReactNode } from "react";
 import ErrorRedIcon from "../../../../images/error_red.svg";
@@ -67,7 +68,14 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
             <span className="formErrors" title={formError}>
               {formError}
             </span>
-            <a className="errorLink" role="link" hidden={!formErrorDetail} onClick={expandConsole}>
+            <a
+              className="errorLink"
+              role="link"
+              hidden={!formErrorDetail}
+              onClick={expandConsole}
+              tabIndex={0}
+              onKeyDown={expandConsole}
+            >
               More details
             </a>
           </span>
@@ -97,7 +105,7 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
   const renderLoadingScreen = (): JSX.Element => {
     return (
       <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!isExecuting}>
-        <img className="dataExplorerLoader" src={LoadingIndicatorIcon} />
+        <img className="dataExplorerLoader" src={LoadingIndicatorIcon} alt="loader" />
       </div>
     );
   };
@@ -111,7 +119,7 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
 
   return (
     <div tabIndex={-1} onKeyDown={onKeyDown}>
-      <div className="contextual-pane-out" onClick={onClose}></div>
+      <div className="contextual-pane-out" onClick={onClose} onKeyDown={onClose}></div>
       <div className="contextual-pane" id={id} style={{ height: panelHeight }} onKeyDown={onKeyDown}>
         <div className="panelContentWrapper">
           {renderPanelHeader()}

src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx

@@ -1,5 +1,5 @@
-import { useBoolean } from "@fluentui/react-hooks";
 import { IImageProps, Image, ImageFit, Stack, TextField } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useState } from "react";
 import folderIcon from "../../../../images/folder_16x16.svg";
 import { logError } from "../../../Common/Logger";
@@ -115,7 +115,6 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
               id="confirmCollectionId"
               label="Select a query document"
               value={selectedFileName}
-              autoFocus
               readOnly
               styles={{ fieldGroup: { width: 300 } }}
             />

src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap

@@ -22,7 +22,6 @@ exports[`Load Query Pane should render Default properly 1`] = `
         horizontal={true}
       >
         <StyledTextFieldBase
-          autoFocus={true}
           id="confirmCollectionId"
           label="Select a query document"
           readOnly={true}

src/Explorer/Panes/PanelComponent.less

@@ -89,6 +89,7 @@
     .paneErrorLink {
       cursor: pointer;
       font-size: @mediumFontSize;
+      color: @AccentMediumHigh;
     }
   }
 }

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -40,7 +40,13 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
           )}
         </Text>
         {showErrorDetails && (
-          <a className="paneErrorLink" role="link" onClick={openNotificationConsole}>
+          <a
+            className="paneErrorLink"
+            role="link"
+            onClick={openNotificationConsole}
+            tabIndex={0}
+            onKeyDown={openNotificationConsole}
+          >
             More details
           </a>
         )}

src/Explorer/Panes/PanelLoadingScreen.tsx

@@ -3,6 +3,6 @@ import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares
 
 export const PanelLoadingScreen: React.FunctionComponent = () => (
   <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer">
-    <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
+    <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} alt="Loader" />
   </div>
 );

src/Explorer/Panes/StringInputPane/StringInputPane.tsx

@@ -109,7 +109,6 @@ export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
           label={inputLabel}
           name="collectionIdConfirmation"
           value={stringInput}
-          autoFocus
           required
           onChange={(event: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) =>
             setStringInput(newValue)

src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap

@@ -1002,6 +1002,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       <div
         className="contextual-pane-out"
         onClick={[Function]}
+        onKeyDown={[Function]}
       />
       <div
         className="contextual-pane"
@@ -2134,7 +2135,9 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                   className="errorLink"
                   hidden={true}
                   onClick={[Function]}
+                  onKeyDown={[Function]}
                   role="link"
+                  tabIndex={0}
                 >
                   More details
                 </a>
@@ -2146,7 +2149,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
           >
             <StyledTextFieldBase
               aria-label="Enter new directory name"
-              autoFocus={true}
               label="Enter new directory name"
               name="collectionIdConfirmation"
               onChange={[Function]}
@@ -2155,7 +2157,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
             >
               <TextFieldBase
                 aria-label="Enter new directory name"
-                autoFocus={true}
                 deferredValidationTime={200}
                 label="Enter new directory name"
                 name="collectionIdConfirmation"
@@ -2745,7 +2746,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                       <input
                         aria-invalid={false}
                         aria-labelledby="TextFieldLabel5"
-                        autoFocus={true}
                         className="ms-TextField-field field-65"
                         id="TextField3"
                         name="collectionIdConfirmation"
@@ -4556,6 +4556,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
           hidden={true}
         >
           <img
+            alt="loader"
             className="dataExplorerLoader"
             src=""
           />

src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/index.test.tsx.snap

@@ -28,6 +28,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
       <div
         className="contextual-pane-out"
         onClick={[Function]}
+        onKeyDown={[Function]}
       />
       <div
         className="contextual-pane"
@@ -1160,7 +1161,9 @@ exports[`Table query select Panel should render Default properly 1`] = `
                   className="errorLink"
                   hidden={true}
                   onClick={[Function]}
+                  onKeyDown={[Function]}
                   role="link"
+                  tabIndex={0}
                 >
                   More details
                 </a>
@@ -4194,6 +4197,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
           hidden={true}
         >
           <img
+            alt="loader"
             className="dataExplorerLoader"
             src=""
           />

src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap

@@ -1332,7 +1332,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           </span>
         </Text>
         <StyledTextFieldBase
-          autoFocus={true}
           id="confirmDatabaseId"
           onChange={[Function]}
           styles={
@@ -1344,7 +1343,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           }
         >
           <TextFieldBase
-            autoFocus={true}
             deferredValidationTime={200}
             id="confirmDatabaseId"
             onChange={[Function]}
@@ -1636,7 +1634,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                 >
                   <input
                     aria-invalid={false}
-                    autoFocus={true}
                     className="ms-TextField-field field-109"
                     id="confirmDatabaseId"
                     onBlur={[Function]}

src/Explorer/Tabs/Tabs.tsx

@@ -42,6 +42,7 @@ function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
       aria-controls={tab.tabId}
       tabIndex={0}
       role="tab"
+      onFocus={() => setHovering(true)}
     >
       <span className="tabNavContentContainer">
         <a data-toggle="tab" href={"#" + tab.tabId} tabIndex={-1}>

src/HostedExplorer.tsx

@@ -1,24 +1,24 @@
-import { useBoolean } from "@fluentui/react-hooks";
 import { initializeIcons } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
 import * as React from "react";
 import { render } from "react-dom";
 import ChevronRight from "../images/chevron-right.svg";
 import "../less/hostedexplorer.less";
 import { AuthType } from "./AuthType";
-import { ConnectExplorer } from "./Platform/Hosted/Components/ConnectExplorer";
 import { DatabaseAccount } from "./Contracts/DataModels";
-import { DirectoryPickerPanel } from "./Platform/Hosted/Components/DirectoryPickerPanel";
-import { AccountSwitcher } from "./Platform/Hosted/Components/AccountSwitcher";
 import "./Explorer/Menus/NavBar/MeControlComponent.less";
-import { useTokenMetadata } from "./hooks/usePortalAccessToken";
-import { MeControl } from "./Platform/Hosted/Components/MeControl";
-import "./Platform/Hosted/ConnectScreen.less";
-import "./Shared/appInsights";
-import { SignInButton } from "./Platform/Hosted/Components/SignInButton";
 import { useAADAuth } from "./hooks/useAADAuth";
-import { FeedbackCommandButton } from "./Platform/Hosted/Components/FeedbackCommandButton";
+import { useTokenMetadata } from "./hooks/usePortalAccessToken";
 import { HostedExplorerChildFrame } from "./HostedExplorerChildFrame";
+import { AccountSwitcher } from "./Platform/Hosted/Components/AccountSwitcher";
+import { ConnectExplorer } from "./Platform/Hosted/Components/ConnectExplorer";
+import { DirectoryPickerPanel } from "./Platform/Hosted/Components/DirectoryPickerPanel";
+import { FeedbackCommandButton } from "./Platform/Hosted/Components/FeedbackCommandButton";
+import { MeControl } from "./Platform/Hosted/Components/MeControl";
+import { SignInButton } from "./Platform/Hosted/Components/SignInButton";
+import "./Platform/Hosted/ConnectScreen.less";
 import { extractMasterKeyfromConnectionString } from "./Platform/Hosted/HostedUtils";
+import "./Shared/appInsights";
 
 initializeIcons();
 
@@ -86,8 +86,10 @@ const App: React.FunctionComponent = () => {
             <span
               className="title"
               onClick={() => window.open("https://portal.azure.com", "_blank")}
-              tabIndex={0}
               title="Go to Azure Portal"
+              onKeyDown={() => window.open("https://portal.azure.com", "_blank")}
+              role="button"
+              tabIndex={0}
             >
               Microsoft Azure
             </span>

src/Platform/Hosted/Components/ConnectExplorer.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
 import { useBoolean } from "@fluentui/react-hooks";
-import { HttpHeaders } from "../../../Common/Constants";
+import * as React from "react";
-import { GenerateTokenResponse } from "../../../Contracts/DataModels";
-import { configContext } from "../../../ConfigContext";
 import { AuthType } from "../../../AuthType";
+import { HttpHeaders } from "../../../Common/Constants";
+import { configContext } from "../../../ConfigContext";
+import { GenerateTokenResponse } from "../../../Contracts/DataModels";
 import { isResourceTokenConnectionString } from "../Helpers/ResourceTokenUtils";
 
 interface Props {
@@ -75,16 +75,16 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
               <p className="connectExplorerContent">
                 <input className="filterbtnstyle" type="submit" value="Connect" />
               </p>
-              <p className="switchConnectTypeText" onClick={login}>
+              <div className="switchConnectTypeText" onClick={login} onKeyDown={login} role="button" tabIndex={0}>
                 Sign In with Azure Account
-              </p>
+              </div>
             </form>
           ) : (
             <div id="connectWithAad">
               <input className="filterbtnstyle" type="button" value="Sign In" onClick={login} />
-              <p className="switchConnectTypeText" onClick={showForm}>
+              <div className="switchConnectTypeText" onClick={showForm} onKeyDown={showForm} role="button" tabIndex={0}>
                 Connect to your account with connection string
-              </p>
+              </div>
             </div>
           )}
         </div>