Fixed eslint-jsx-a11 issue

.eslintrc.js

@@ -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",

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/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

@@ -57,7 +57,6 @@ export class ThroughputInput extends React.Component<ThroughputInputProps, Throu
             aria-label="Autoscale mode"
             checked={this.state.isAutoscaleSelected}
             type="radio"
-            role="radio"
             tabIndex={0}
             onChange={this.onAutoscaleRadioBtnChange.bind(this)}
           />
@@ -68,7 +67,6 @@ export class ThroughputInput extends React.Component<ThroughputInputProps, Throu
             aria-label="Manual mode"
             checked={!this.state.isAutoscaleSelected}
             type="radio"
-            role="radio"
             tabIndex={0}
             onChange={this.onManualRadioBtnChange.bind(this)}
           />

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/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

@@ -28,21 +28,27 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
   >
     <div
       onKeyDown={[Function]}
+      role="button"
       tabIndex={-1}
     >
       <div
         className="contextual-pane-out"
         onClick={[Function]}
+        onKeyDown={[Function]}
+        role="button"
+        tabIndex={0}
       />
       <div
         className="contextual-pane"
         id="deleteCollectionpane"
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "height": NaN,
           }
         }
+        tabIndex={0}
       >
         <div
           className="panelContentWrapper"
@@ -1161,14 +1167,16 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   className="formErrors"
                   title=""
                 />
-                <a
+                <div
-                  className="errorLink"
+                  className="errorLink errorLinkColor"
                   hidden={true}
                   onClick={[Function]}
+                  onKeyDown={[Function]}
                   role="link"
+                  tabIndex={0}
                 >
                   More details
-                </a>
+                </div>
               </span>
             </div>
           </div>
@@ -1198,7 +1206,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   </span>
                 </Text>
                 <StyledTextFieldBase
-                  autoFocus={true}
                   id="confirmCollectionId"
                   onChange={[Function]}
                   styles={
@@ -1211,7 +1218,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   value=""
                 >
                   <TextFieldBase
-                    autoFocus={true}
                     deferredValidationTime={200}
                     id="confirmCollectionId"
                     onChange={[Function]}
@@ -1504,7 +1510,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         >
                           <input
                             aria-invalid={false}
-                            autoFocus={true}
                             className="ms-TextField-field field-215"
                             id="confirmCollectionId"
                             onBlur={[Function]}
@@ -3664,6 +3669,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           hidden={true}
         >
           <img
+            alt="Loader img"
             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

@@ -19,21 +19,27 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
   >
     <div
       onKeyDown={[Function]}
+      role="button"
       tabIndex={-1}
     >
       <div
         className="contextual-pane-out"
         onClick={[Function]}
+        onKeyDown={[Function]}
+        role="button"
+        tabIndex={0}
       />
       <div
         className="contextual-pane"
         id="executesprocparamspane"
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "height": NaN,
           }
         }
+        tabIndex={0}
       >
         <div
           className="panelContentWrapper"
@@ -1152,14 +1158,16 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   className="formErrors"
                   title=""
                 />
-                <a
+                <div
-                  className="errorLink"
+                  className="errorLink errorLinkColor"
                   hidden={true}
                   onClick={[Function]}
+                  onKeyDown={[Function]}
                   role="link"
+                  tabIndex={0}
                 >
                   More details
-                </a>
+                </div>
               </span>
             </div>
           </div>
@@ -2709,14 +2717,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 +3308,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 +4869,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 +4876,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       value=""
                     >
                       <TextFieldBase
-                        autoFocus={true}
                         deferredValidationTime={200}
                         id="confirmCollectionId"
                         label="Param"
@@ -5459,7 +5462,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 +8229,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
           hidden={true}
         >
           <img
+            alt="Loader img"
             className="dataExplorerLoader"
             src=""
           />

src/Explorer/Panes/GenericRightPaneComponent/GenericRightPaneComponent.tsx

@@ -67,9 +67,16 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
             <span className="formErrors" title={formError}>
               {formError}
             </span>
-            <a className="errorLink" role="link" hidden={!formErrorDetail} onClick={expandConsole}>
+            <div
+              className="errorLink errorLinkColor"
+              role="link"
+              hidden={!formErrorDetail}
+              onClick={expandConsole}
+              tabIndex={0}
+              onKeyDown={expandConsole}
+            >
               More details
-            </a>
+            </div>
           </span>
         </div>
       </div>
@@ -97,7 +104,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 img" />
       </div>
     );
   };
@@ -110,9 +117,16 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
   };
 
   return (
-    <div tabIndex={-1} onKeyDown={onKeyDown}>
+    <div tabIndex={-1} onKeyDown={onKeyDown} role="button">
-      <div className="contextual-pane-out" onClick={onClose}></div>
+      <div className="contextual-pane-out" onClick={onClose} role="button" tabIndex={0} onKeyDown={onClose}></div>
-      <div className="contextual-pane" id={id} style={{ height: panelHeight }} onKeyDown={onKeyDown}>
+      <div
+        className="contextual-pane"
+        id={id}
+        style={{ height: panelHeight }}
+        onKeyDown={onKeyDown}
+        role="button"
+        tabIndex={0}
+      >
         <div className="panelContentWrapper">
           {renderPanelHeader()}
           {renderErrorSection()}

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

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

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/RightPaneForm/RightPaneForm.tsx

@@ -78,9 +78,16 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
   };
 
   return (
-    <div tabIndex={-1} onKeyDown={onKeyDown}>
+    <div tabIndex={-1} onKeyDown={onKeyDown} role="button">
-      <div className="contextual-pane-out" onClick={onClose}></div>
+      <div className="contextual-pane-out" onClick={onClose} role="button" tabIndex={0} onKeyDown={onClose}></div>
-      <div className="contextual-pane" id={id} style={{ height: panelHeight }} onKeyDown={onKeyDown}>
+      <div
+        className="contextual-pane"
+        id={id}
+        style={{ height: panelHeight }}
+        onKeyDown={onKeyDown}
+        role="button"
+        tabIndex={0}
+      >
         <div className="panelContentWrapper">
           {renderPanelHeader()}
           <PanelInfoErrorComponent {...panelInfoErrorProps} />

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

@@ -15,21 +15,27 @@ exports[`Load Query Pane should render Default properly 1`] = `
 >
   <div
     onKeyDown={[Function]}
+    role="button"
     tabIndex={-1}
   >
     <div
       className="contextual-pane-out"
       onClick={[MockFunction]}
+      onKeyDown={[MockFunction]}
+      role="button"
+      tabIndex={0}
     />
     <div
       className="contextual-pane"
       id="loadQueryPane"
       onKeyDown={[Function]}
+      role="button"
       style={
         Object {
           "height": NaN,
         }
       }
+      tabIndex={0}
     >
       <div
         className="panelContentWrapper"

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

@@ -1294,21 +1294,27 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
   >
     <div
       onKeyDown={[Function]}
+      role="button"
       tabIndex={-1}
     >
       <div
         className="contextual-pane-out"
         onClick={[Function]}
+        onKeyDown={[Function]}
+        role="button"
+        tabIndex={0}
       />
       <div
         className="contextual-pane"
         id="stringInputPane"
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "height": NaN,
           }
         }
+        tabIndex={0}
       >
         <div
           className="panelContentWrapper"
@@ -2427,14 +2433,16 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                   className="formErrors"
                   title=""
                 />
-                <a
+                <div
-                  className="errorLink"
+                  className="errorLink errorLinkColor"
                   hidden={true}
                   onClick={[Function]}
+                  onKeyDown={[Function]}
                   role="link"
+                  tabIndex={0}
                 >
                   More details
-                </a>
+                </div>
               </span>
             </div>
           </div>
@@ -2443,7 +2451,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]}
@@ -2452,7 +2459,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"
@@ -3042,7 +3048,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-165"
                         id="TextField3"
                         name="collectionIdConfirmation"
@@ -4853,6 +4858,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
           hidden={true}
         >
           <img
+            alt="Loader img"
             className="dataExplorerLoader"
             src=""
           />

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

@@ -23,21 +23,27 @@ exports[`Table query select Panel should render Default properly 1`] = `
   >
     <div
       onKeyDown={[Function]}
+      role="button"
       tabIndex={-1}
     >
       <div
         className="contextual-pane-out"
         onClick={[Function]}
+        onKeyDown={[Function]}
+        role="button"
+        tabIndex={0}
       />
       <div
         className="contextual-pane"
         id="querySelectPane"
         onKeyDown={[Function]}
+        role="button"
         style={
           Object {
             "height": NaN,
           }
         }
+        tabIndex={0}
       >
         <div
           className="panelContentWrapper"
@@ -1156,14 +1162,16 @@ exports[`Table query select Panel should render Default properly 1`] = `
                   className="formErrors"
                   title=""
                 />
-                <a
+                <div
-                  className="errorLink"
+                  className="errorLink errorLinkColor"
                   hidden={true}
                   onClick={[Function]}
+                  onKeyDown={[Function]}
                   role="link"
+                  tabIndex={0}
                 >
                   More details
-                </a>
+                </div>
               </span>
             </div>
           </div>
@@ -4194,6 +4202,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
           hidden={true}
         >
           <img
+            alt="Loader img"
             className="dataExplorerLoader"
             src=""
           />

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

@@ -1629,7 +1629,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           </span>
         </Text>
         <StyledTextFieldBase
-          autoFocus={true}
           id="confirmDatabaseId"
           onChange={[Function]}
           styles={
@@ -1641,7 +1640,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           }
         >
           <TextFieldBase
-            autoFocus={true}
             deferredValidationTime={200}
             id="confirmDatabaseId"
             onChange={[Function]}
@@ -1933,7 +1931,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                 >
                   <input
                     aria-invalid={false}
-                    autoFocus={true}
                     className="ms-TextField-field field-209"
                     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/Main.tsx

@@ -131,7 +131,12 @@ const App: React.FunctionComponent = () => {
                           aria-label="Refresh tree"
                           title="Refresh tree"
                         >
-                          <img className="refreshcol" src={refreshImg} data-bind="attr: { alt: refreshTreeTitle }" />
+                          <img
+                            className="refreshcol"
+                            src={refreshImg}
+                            data-bind="attr: { alt: refreshTreeTitle }"
+                            alt="Refresh"
+                          />
                         </span>
                         <span
                           className="padimgcolrefresh1"
@@ -169,9 +174,7 @@ const App: React.FunctionComponent = () => {
                     <li
                       className="resourceTreeCollapse"
                       id="collapseToggleLeftPaneButton"
-                      role="button"
                       data-bind="event: { keypress: toggleLeftPaneExpandedKeyPress }"
-                      tabIndex={0}
                       aria-label="Expand Tree"
                     >
                       <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>