configure and fixed eslint jsx-a11y issues

.eslintrc.js

@@ -34,7 +34,6 @@ module.exports = {
     },
   ],
   rules: {
-    "jsx-a11y/anchor-is-valid": 1,
     "no-console": ["error", { allow: ["error", "warn", "dir"] }],
     curly: "error",
     "@typescript-eslint/switch-exhaustiveness-check": "error",

less/documentDB.less

@@ -3079,3 +3079,6 @@ settings-pane {
   background: white;
   height: 100%;
 }
+.moreOption {
+  color: #337ab7;
+}

src/Common/Upload/Upload.tsx

@@ -66,9 +66,15 @@ export const Upload: FunctionComponent<UploadProps> = ({
           onChange={onUpload}
           role="button"
         />
-        <a href="#" id="fileImportLinkNotebook" onClick={onImportLinkClick} onKeyPress={onImportLinkKeyPress}>
+        <span
+          id="fileImportLinkNotebook"
+          role="button"
+          tabIndex={0}
+          onClick={onImportLinkClick}
+          onKeyPress={onImportLinkKeyPress}
+        >
           <Image className="fileImportImg" src={FolderIcon} alt={title} title={title} />
-        </a>
+        </span>
       </Stack>
     </div>
   );

src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`CollapsibleSectionComponent renders 1`] = `
 <Fragment>
   <Stack
     aria-expanded={true}
-    aria-name="Advanced"
+    aria-label="Advanced"
     className="collapsibleSection"
     horizontal={true}
     onClick={[Function]}

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

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

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

@@ -654,12 +654,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       >
         <input
           aria-label="Autoscale mode"
-          aria-required={true}
           checked={true}
           className="throughputInputRadioBtn"
           key=".0:$.0"
           onChange={[Function]}
-          role="radio"
           tabIndex={0}
           type="radio"
         />
@@ -671,12 +669,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
         </span>
         <input
           aria-label="Manual mode"
-          aria-required={true}
           checked={false}
           className="throughputInputRadioBtn"
           key=".0:$.2"
           onChange={[Function]}
-          role="radio"
           tabIndex={0}
           type="radio"
         />

src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx

@@ -214,8 +214,14 @@ export class EditorNeighborsComponent extends React.Component<EditorNeighborsCom
               />
             </td>
             <td className="actionCol">
-              <span className="rightPaneTrashIcon rightPaneBtns">
+              <span
-                <img src={DeleteIcon} alt="Delete" onClick={() => this.removeAddedEdgeToNeighbor(index)} />
+                className="rightPaneTrashIcon rightPaneBtns"
+                role="button"
+                onKeyPress={() => this.removeAddedEdgeToNeighbor(index)}
+                onClick={() => this.removeAddedEdgeToNeighbor(index)}
+                tabIndex={0}
+              >
+                <img src={DeleteIcon} alt="Delete" />
               </span>
             </td>
           </tr>

src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.tsx

@@ -123,7 +123,7 @@ export class EditorNodePropertiesComponent extends React.Component<EditorNodePro
           <select
             className="typeSelect"
             value={singleValue.type}
-            onChange={(e) => {
+            onBlur={(e) => {
               singleValue.type = e.target.value as ViewModels.InputPropertyValueTypeString;
               if (singleValue.type === "null") {
                 singleValue.value = undefined;
@@ -217,7 +217,7 @@ export class EditorNodePropertiesComponent extends React.Component<EditorNodePro
                 <select
                   className="typeSelect"
                   value={firstValue.type}
-                  onChange={(e) => {
+                  onBlur={(e) => {
                     firstValue.type = e.target.value as ViewModels.InputPropertyValueTypeString;
                     this.props.onUpdateProperties(this.props.editedProperties);
                   }}

src/Explorer/Graph/GraphExplorerComponent/__snapshots__/EditorNodePropertiesComponent.test.tsx.snap

@@ -93,7 +93,7 @@ exports[`<EditorNodePropertiesComponent /> renders component 1`] = `
       <td>
         <select
           className="typeSelect"
-          onChange={[Function]}
+          onBlur={[Function]}
           required={true}
           value="string"
         >
@@ -282,7 +282,7 @@ exports[`<EditorNodePropertiesComponent /> renders proper unicode 1`] = `
       <td>
         <select
           className="typeSelect"
-          onChange={[Function]}
+          onBlur={[Function]}
           required={true}
           value="string"
         >
@@ -344,7 +344,7 @@ exports[`<EditorNodePropertiesComponent /> renders proper unicode 1`] = `
       <td>
         <select
           className="typeSelect"
-          onChange={[Function]}
+          onBlur={[Function]}
           required={true}
           value="string"
         >

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 icon"
             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 icon"
             src=""
           />
           Clear Notifications

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/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap

@@ -41,7 +41,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             </Text>
             <StyledTextFieldBase
               ariaLabel="Confirm by typing the container id"
-              autoFocus={true}
               id="confirmCollectionId"
               onChange={[Function]}
               styles={
@@ -55,7 +54,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             >
               <TextFieldBase
                 ariaLabel="Confirm by typing the container id"
-                autoFocus={true}
                 deferredValidationTime={200}
                 id="confirmCollectionId"
                 onChange={[Function]}
@@ -349,7 +347,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       <input
                         aria-invalid={false}
                         aria-label="Confirm by typing the container id"
-                        autoFocus={true}
                         className="ms-TextField-field field-57"
                         id="confirmCollectionId"
                         onBlur={[Function]}

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

@@ -4328,6 +4328,9 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   </TextFieldBase>
                 </StyledTextFieldBase>
                 <div
+                  onClick={[Function]}
+                  onKeyPress={[Function]}
+                  role="button"
                   tabIndex={0}
                 >
                   <StyledImageBase
@@ -4335,8 +4338,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     className="addRemoveIconLabel"
                     height={30}
                     id="deleteparam"
-                    onClick={[Function]}
-                    role="button"
                     src=""
                     width={20}
                   >
@@ -4345,8 +4346,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       className="addRemoveIconLabel"
                       height={30}
                       id="deleteparam"
-                      onClick={[Function]}
-                      role="button"
                       src=""
                       styles={[Function]}
                       theme={
@@ -4638,10 +4637,8 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
                           id="deleteparam"
                           key="fabricImage"
-                          onClick={[Function]}
                           onError={[Function]}
                           onLoad={[Function]}
-                          role="button"
                           src=""
                         />
                       </div>
@@ -4649,6 +4646,9 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   </StyledImageBase>
                 </div>
                 <div
+                  onClick={[Function]}
+                  onKeyPress={[Function]}
+                  role="button"
                   tabIndex={0}
                 >
                   <StyledImageBase
@@ -4656,8 +4656,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     className="addRemoveIconLabel"
                     height={30}
                     id="addparam"
-                    onClick={[Function]}
-                    role="button"
                     src=""
                     width={20}
                   >
@@ -4666,8 +4664,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       className="addRemoveIconLabel"
                       height={30}
                       id="addparam"
-                      onClick={[Function]}
-                      role="button"
                       src=""
                       styles={[Function]}
                       theme={
@@ -4959,10 +4955,8 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
                           id="addparam"
                           key="fabricImage"
-                          onClick={[Function]}
                           onError={[Function]}
                           onLoad={[Function]}
-                          role="button"
                           src=""
                         />
                       </div>

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

@@ -17,7 +17,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/PanelInfoErrorComponent.tsx

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

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

@@ -56,7 +56,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]}
@@ -65,7 +64,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"
@@ -655,7 +653,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                   <input
                     aria-invalid={false}
                     aria-labelledby="TextFieldLabel2"
-                    autoFocus={true}
                     className="ms-TextField-field field-56"
                     id="TextField0"
                     name="collectionIdConfirmation"

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

@@ -368,7 +368,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
           </Text>
           <StyledTextFieldBase
             ariaLabel="Confirm by typing the database id"
-            autoFocus={true}
             id="confirmDatabaseId"
             onChange={[Function]}
             styles={
@@ -381,7 +380,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
           >
             <TextFieldBase
               ariaLabel="Confirm by typing the database id"
-              autoFocus={true}
               deferredValidationTime={200}
               id="confirmDatabaseId"
               onChange={[Function]}
@@ -674,7 +672,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                     <input
                       aria-invalid={false}
                       aria-label="Confirm by typing the database id"
-                      autoFocus={true}
                       className="ms-TextField-field field-60"
                       id="confirmDatabaseId"
                       onBlur={[Function]}

src/Explorer/SplashScreen/SplashScreen.less

@@ -108,7 +108,8 @@
             }
 
             .oneLineContent {
-              margin-top: 4px;
+              margin-top: 6px;
+              margin-left: 6px;
             }
 
             .twoLineContent {
@@ -133,12 +134,12 @@
           .flex-display();
           .flex-direction();
 
-          >.title {
+            .title {
               color: @BaseDark;
               padding: 0px;
               font-size: 12px;
             }
-          >.description {
+            .description {
               color: @BaseDark;
             }
 

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -128,9 +128,8 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               <div className="title">Common Tasks</div>
               <ul>
                 {commonTaskItems.map((item) => (
-                  <li
+                  <li className="focusable" key={`${item.title}${item.description}`}>
-                    className="focusable"
+                    <div
-                    key={`${item.title}${item.description}`}
                       onClick={item.onClick}
                       onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
                       tabIndex={0}
@@ -140,6 +139,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                       <span className="oneLineContent" title={item.info}>
                         {item.title}
                       </span>
+                    </div>
                   </li>
                 ))}
               </ul>
@@ -165,22 +165,23 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               <div className="title">Tips</div>
               <ul>
                 {tipsItems.map((item) => (
-                  <li
+                  <li className="tipContainer focusable" key={`${item.title}${item.description}`}>
-                    className="tipContainer focusable"
+                    <div
-                    key={`${item.title}${item.description}`}
                       onClick={item.onClick}
                       onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
                       tabIndex={0}
-                    role="link"
+                      role="button"
+                      className="tipsWrapper"
                     >
                       <div className="title" title={item.info}>
                         {item.title}
                       </div>
                       <div className="description">{item.description}</div>
+                    </div>
                   </li>
                 ))}
                 <li>
-                  <a role="link" href={SplashScreen.seeMoreItemUrl} rel="noreferrer" target="_blank" tabIndex={0}>
+                  <a href={SplashScreen.seeMoreItemUrl} rel="noreferrer" target="_blank" tabIndex={0}>
                     {SplashScreen.seeMoreItemTitle}
                   </a>
                 </li>

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -966,10 +966,15 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                                 <>
                                   <span className="queryResultDivider">|</span>
                                   <span className="queryResultNextEnable">
-                                    <a onClick={this.onFetchNextPageClick.bind(this)}>
+                                    <div
-                                      <span>Load more</span>
+                                      onClick={this.onFetchNextPageClick.bind(this)}
+                                      role="button"
+                                      tabIndex={0}
+                                      onKeyPress={this.onFetchNextPageClick.bind(this)}
+                                    >
+                                      <span className="moreOption">Load more</span>
                                       <img className="queryResultnextImg" src={QueryEditorNext} alt="Fetch next page" />
-                                    </a>
+                                    </div>
                                   </span>
                                 </>
                               )}
@@ -1015,7 +1020,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                                 </div>
                                 {this.state.isQueryMetricsEnabled && (
                                   <div className="downloadMetricsLinkContainer">
-                                    <a
+                                    <span
                                       id="downloadMetricsLink"
                                       role="button"
                                       tabIndex={0}
@@ -1030,7 +1035,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                                         alt="download query metrics csv"
                                       />
                                       <span>Per-partition query metrics (CSV)</span>
-                                    </a>
+                                    </span>
                                   </div>
                                 )}
                               </div>
@@ -1044,7 +1049,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                           <div className="errorContent">
                             <span className="errorMessage">{this.state.error}</span>
                             <span className="errorDetailsLink">
-                              <a
+                              <span
                                 onClick={() => this.onErrorDetailsClick()}
                                 onKeyPress={(event: React.KeyboardEvent<HTMLAnchorElement>) =>
                                   this.onErrorDetailsKeyPress(event)
@@ -1052,9 +1057,11 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                                 id="error-display"
                                 tabIndex={0}
                                 aria-label="Error details link"
+                                role="button"
+                                className="moreOption"
                               >
                                 More details
-                              </a>
+                              </span>
                             </span>
                           </div>
                         </div>

src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx

@@ -579,13 +579,16 @@ export default class StoredProcedureTabComponent extends React.Component<
               <div className="errorContent">
                 <span className="errorMessage">{this.state.error}</span>
                 <span className="errorDetailsLink">
-                  <a
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    className="moreOption"
                     aria-label="Error details link"
                     onClick={() => this.onErrorDetailsClick()}
                     onKeyPress={(event: React.KeyboardEvent<HTMLAnchorElement>) => this.onErrorDetailsKeyPress(event)}
                   >
                     More details
-                  </a>
+                  </span>
                 </span>
               </div>
             </div>