From 27d129e6891a8dbaf8b91844c8db6cc2bbbdfa3b Mon Sep 17 00:00:00 2001
From: sunilyadav840 <sy00733526@techmahindra.com>
Date: Fri, 1 Oct 2021 11:51:27 +0530
Subject: [PATCH] configure and fixed eslint jsx-a11y issues

---
 .eslintrc.js                                  |  1 -
 less/documentDB.less                          |  3 ++
 src/Common/Upload/Upload.tsx                  | 10 +++-
 .../CollapsibleSectionComponent.test.tsx.snap |  2 +-
 .../IndexingPolicyComponent.test.tsx.snap     |  1 -
 .../ThroughputInput.test.tsx.snap             |  4 --
 .../EditorNeighborsComponent.tsx              | 10 +++-
 .../EditorNodePropertiesComponent.tsx         |  4 +-
 ...ditorNodePropertiesComponent.test.tsx.snap |  6 +--
 ...NotificationConsoleComponent.test.tsx.snap |  6 ++-
 .../AddDatabasePanel.test.tsx.snap            |  1 -
 ...teCollectionConfirmationPane.test.tsx.snap |  3 --
 .../ExecuteSprocParamsPane.test.tsx.snap      | 18 +++----
 .../__snapshots__/LoadQueryPane.test.tsx.snap |  1 -
 .../Panes/PanelInfoErrorComponent.tsx         | 10 +++-
 .../StringInputPane.test.tsx.snap             |  3 --
 ...eteDatabaseConfirmationPanel.test.tsx.snap |  3 --
 src/Explorer/SplashScreen/SplashScreen.less   | 25 +++++-----
 src/Explorer/SplashScreen/SplashScreen.tsx    | 49 ++++++++++---------
 .../Tabs/QueryTab/QueryTabComponent.tsx       | 21 +++++---
 .../StoredProcedureTabComponent.tsx           |  7 ++-
 21 files changed, 100 insertions(+), 88 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 74f83d9ad..e292cb2bd 100644
--- a/.eslintrc.js
+++ b/.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",
diff --git a/less/documentDB.less b/less/documentDB.less
index 79e9435c3..8e4e76539 100644
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -3079,3 +3079,6 @@ settings-pane {
   background: white;
   height: 100%;
 }
+.moreOption {
+  color: #337ab7;
+}
\ No newline at end of file
diff --git a/src/Common/Upload/Upload.tsx b/src/Common/Upload/Upload.tsx
index 3feb4fdfd..d2fbfec90 100644
--- a/src/Common/Upload/Upload.tsx
+++ b/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>
   );
diff --git a/src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap b/src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap
index 675a79239..ee3212b4d 100644
--- a/src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap
+++ b/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]}
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap
index 1f66324f5..fa1942a9f 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap
@@ -13,7 +13,6 @@ exports[`IndexingPolicyComponent renders 1`] = `
   />
   <div
     className="settingsV2IndexingPolicyEditor"
-    tabIndex={0}
   />
 </Stack>
 `;
diff --git a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
index 0798c01ef..23d18b125 100644
--- a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
+++ b/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"
         />
diff --git a/src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx b/src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx
index c77fc2852..ff50b9650 100644
--- a/src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx
+++ b/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">
-                <img src={DeleteIcon} alt="Delete" onClick={() => this.removeAddedEdgeToNeighbor(index)} />
+              <span
+                className="rightPaneTrashIcon rightPaneBtns"
+                role="button"
+                onKeyPress={() => this.removeAddedEdgeToNeighbor(index)}
+                onClick={() => this.removeAddedEdgeToNeighbor(index)}
+                tabIndex={0}
+              >
+                <img src={DeleteIcon} alt="Delete" />
               </span>
             </td>
           </tr>
diff --git a/src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.tsx b/src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.tsx
index 271c90ba9..43d2bdbf0 100644
--- a/src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.tsx
+++ b/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);
                   }}
diff --git a/src/Explorer/Graph/GraphExplorerComponent/__snapshots__/EditorNodePropertiesComponent.test.tsx.snap b/src/Explorer/Graph/GraphExplorerComponent/__snapshots__/EditorNodePropertiesComponent.test.tsx.snap
index adffe505b..366f9d454 100644
--- a/src/Explorer/Graph/GraphExplorerComponent/__snapshots__/EditorNodePropertiesComponent.test.tsx.snap
+++ b/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"
         >
diff --git a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
index 9b0e62449..7d76e590f 100644
--- a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
+++ b/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
diff --git a/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap b/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap
index 9c4bbaa32..9fdf07081 100644
--- a/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap
+++ b/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="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
index de359f986..19d572834 100644
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
+++ b/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]}
diff --git a/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap b/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
index 4e673b39c..725c1d636 100644
--- a/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
+++ b/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>
diff --git a/src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap b/src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap
index ee120f01a..bd615108f 100644
--- a/src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap
+++ b/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}
diff --git a/src/Explorer/Panes/PanelInfoErrorComponent.tsx b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
index e5fc317fe..ca1942c46 100644
--- a/src/Explorer/Panes/PanelInfoErrorComponent.tsx
+++ b/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>
diff --git a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
index 0c1815afe..04000962b 100644
--- a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
+++ b/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"
diff --git a/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
index 5613a797e..13350518d 100644
--- a/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
+++ b/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]}
diff --git a/src/Explorer/SplashScreen/SplashScreen.less b/src/Explorer/SplashScreen/SplashScreen.less
index d30a52be3..e5177d8ec 100644
--- a/src/Explorer/SplashScreen/SplashScreen.less
+++ b/src/Explorer/SplashScreen/SplashScreen.less
@@ -108,7 +108,8 @@
             }
 
             .oneLineContent {
-              margin-top: 4px;
+              margin-top: 6px;
+              margin-left: 6px;
             }
 
             .twoLineContent {
@@ -133,18 +134,18 @@
           .flex-display();
           .flex-direction();
 
-          >.title {
-            color: @BaseDark;
-            padding: 0px;
-            font-size: 12px;
-          }
-          >.description {
-            color: @BaseDark;
-          }
+            .title {
+              color: @BaseDark;
+              padding: 0px;
+              font-size: 12px;
+            }
+            .description {
+              color: @BaseDark;
+            }
 
-          &:not(:hover):not(:focus) {
-            background-color: @BaseLow;
-          }
+            &:not(:hover):not(:focus) {
+              background-color: @BaseLow;
+            }
         }
 
         &.commonTasks {
diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx
index d13644bd7..44f8e47dd 100644
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -128,18 +128,18 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               <div className="title">Common Tasks</div>
               <ul>
                 {commonTaskItems.map((item) => (
-                  <li
-                    className="focusable"
-                    key={`${item.title}${item.description}`}
-                    onClick={item.onClick}
-                    onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
-                    tabIndex={0}
-                    role="button"
-                  >
-                    <img src={item.iconSrc} alt="" />
-                    <span className="oneLineContent" title={item.info}>
-                      {item.title}
-                    </span>
+                  <li className="focusable" key={`${item.title}${item.description}`}>
+                    <div
+                      onClick={item.onClick}
+                      onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
+                      tabIndex={0}
+                      role="button"
+                    >
+                      <img src={item.iconSrc} alt="" />
+                      <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
-                    className="tipContainer focusable"
-                    key={`${item.title}${item.description}`}
-                    onClick={item.onClick}
-                    onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
-                    tabIndex={0}
-                    role="link"
-                  >
-                    <div className="title" title={item.info}>
-                      {item.title}
+                  <li className="tipContainer focusable" key={`${item.title}${item.description}`}>
+                    <div
+                      onClick={item.onClick}
+                      onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
+                      tabIndex={0}
+                      role="button"
+                      className="tipsWrapper"
+                    >
+                      <div className="title" title={item.info}>
+                        {item.title}
+                      </div>
+                      <div className="description">{item.description}</div>
                     </div>
-                    <div className="description">{item.description}</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>
diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
index 01865246f..9c6116fe0 100644
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/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)}>
-                                      <span>Load more</span>
+                                    <div
+                                      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>
diff --git a/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx b/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx
index b0d156b44..7c0968b94 100644
--- a/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx
+++ b/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>