configure eslint-plugin-jsx-a11y

2025-12-20 09:20:16 +00:00 · 2021-09-30 19:53:04 +05:30
parent 6ca8e3c6f4
commit fb9f97b43a
32 changed files with 146 additions and 79 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,8 +3,8 @@ module.exports = {
    browser: true,
    es6: true,
  },
-  plugins: ["@typescript-eslint", "no-null", "prefer-arrow", "react-hooks"],
-  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  plugins: ["@typescript-eslint", "no-null", "prefer-arrow", "react-hooks", "jsx-a11y"],
+  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",
--- a/package-lock.json
+++ b/package-lock.json
@@ -6809,6 +6809,11 @@
      "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="
+    },
    "astral-regex": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
@@ -6876,6 +6881,11 @@
      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
    },
+    "axe-core": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.3.tgz",
+      "integrity": "sha512-/lqqLAmuIPi79WYfRpy2i8z+x+vxU3zX2uAm0gs1q52qTuKwolOj1P8XbufpXcsydrpKx2yGn2wzAnxCMV86QA=="
+    },
    "axios": {
      "version": "0.21.1",
      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
@@ -6891,6 +6901,11 @@
        }
      }
    },
+    "axobject-query": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
+      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
+    },
    "babel-code-frame": {
      "version": "6.26.0",
      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -8878,6 +8893,11 @@
        "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=="
+    },
    "dashdash": {
      "version": "1.14.1",
      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -10171,6 +10191,64 @@
        "@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==",
+      "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=="
+        },
+        "get-intrinsic": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+          "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+          "requires": {
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1"
+          }
+        },
+        "jsx-ast-utils": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz",
+          "integrity": "sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==",
+          "requires": {
+            "array-includes": "^3.1.3",
+            "object.assign": "^4.1.2"
+          },
+          "dependencies": {
+            "array-includes": {
+              "version": "3.1.3",
+              "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.3.tgz",
+              "integrity": "sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==",
+              "requires": {
+                "call-bind": "^1.0.2",
+                "define-properties": "^1.1.3",
+                "es-abstract": "^1.18.0-next.2",
+                "get-intrinsic": "^1.1.1",
+                "is-string": "^1.0.5"
+              }
+            }
+          }
+        }
+      }
+    },
    "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",
@@ -18065,6 +18143,19 @@
      "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=="
+    },
+    "language-tags": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
+      "integrity": "sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=",
+      "requires": {
+        "language-subtag-registry": "~0.3.2"
+      }
+    },
    "lcid": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
    "dom-to-image": "2.6.0",
    "dotenv": "8.2.0",
    "eslint-plugin-jest": "23.13.2",
+    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.20.0",
    "hasher": "1.2.0",
    "html2canvas": "1.0.0-rc.5",
--- a/src/Common/CollapsedResourceTree.tsx
+++ b/src/Common/CollapsedResourceTree.tsx
@@ -31,17 +31,15 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
    <div id="mini" className={!isLeftPaneExpanded ? "mini toggle-mini" : "hiddenMain"}>
      <div className="main-nav nav">
        <ul className="nav">
-          <li
-            className="resourceTreeCollapse"
-            id="collapseToggleLeftPaneButton"
-            role="button"
-            tabIndex={0}
-            aria-label="Expand Tree"
-            onClick={toggleLeftPaneExpanded}
-            onKeyPress={onKeyPressToggleLeftPaneExpanded}
-            ref={focusButton}
-          >
-            <span className="leftarrowCollapsed">
+          <li className="resourceTreeCollapse" id="collapseToggleLeftPaneButton" aria-label="Expand Tree">
+            <span
+              className="leftarrowCollapsed"
+              role="button"
+              tabIndex={0}
+              onClick={toggleLeftPaneExpanded}
+              onKeyPress={onKeyPressToggleLeftPaneExpanded}
+              ref={focusButton}
+            >
              <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
            </span>
            <span className="collectionCollapsed">
--- a/src/Common/EntityValue.tsx
+++ b/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}
--- a/src/Common/TableEntity.tsx
+++ b/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}
--- a/src/Explorer/Controls/Accordion/AccordionComponent.tsx
+++ b/src/Explorer/Controls/Accordion/AccordionComponent.tsx
@@ -55,7 +55,13 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
  public render(): JSX.Element {
    return (
      <div className="accordionItemContainer">
-        <div className="accordionItemHeader" onClick={this.onHeaderClick} onKeyPress={this.onHeaderKeyPress}>
+        <div
+          className="accordionItemHeader"
+          onClick={this.onHeaderClick}
+          onKeyPress={this.onHeaderKeyPress}
+          role="button"
+          tabIndex={0}
+        >
          {this.renderCollapseExpandIcon()}
          {this.props.title}
        </div>
@@ -74,8 +80,6 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
        className="expandCollapseIcon"
        src={this.state.isExpanded ? TriangleDownIcon : TriangleRightIcon}
        alt="Hide"
-        tabIndex={0}
-        role="button"
      />
    );
  }
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
@@ -49,7 +49,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
          onClick={this.toggleCollapsed}
          onKeyPress={this.onKeyPress}
          tabIndex={0}
-          aria-name="Advanced"
+          aria-label="Advanced"
          role="button"
          aria-expanded={this.state.isExpanded}
        >
--- a/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
+++ b/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
@@ -188,12 +188,13 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
        ref={(ref: HTMLElement) => {
          this.expandButtonElt = ref;
        }}
+        role="button"
        onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => this.onLauncherKeyDown(e)}
      >
        <div className="commandDropdownLauncher">
          <span className="partialSplitter" />
          <span className="expandDropdown">
-            <img src={CollapseChevronDownIcon} />
+            <img src={CollapseChevronDownIcon} alt="Collapse down icon" />
          </span>
        </div>
        <div
--- a/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
+++ b/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
@@ -150,7 +150,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
          To write a new query, open a new query tab and enter the desired query. Once ready to save, click on Save
          Query and follow the prompt in order to save the query.
        </div>
-        <img {...bannerProps} />
+        <img {...bannerProps} alt="Save query helper banner" />
      </div>
    );
  }
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
+++ b/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" ref={this.indexingPolicyDiv}></div>
      </Stack>
    );
  }
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -118,10 +118,8 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
        <input
          className="throughputInputRadioBtn"
          aria-label="Autoscale mode"
-          aria-required={true}
          checked={isAutoscaleSelected}
          type="radio"
-          role="radio"
          tabIndex={0}
          onChange={(e) => handleOnChangeMode(e, "Autoscale")}
        />
@@ -132,8 +130,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
          aria-label="Manual mode"
          checked={!isAutoscaleSelected}
          type="radio"
-          aria-required={true}
-          role="radio"
          tabIndex={0}
          onChange={(e) => handleOnChangeMode(e, "Manual")}
        />
--- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
+++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
@@ -132,7 +132,6 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                onLabelChange(event);
              }}
-              autoFocus
            />
            <div className="actionCol"></div>
          </div>
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -103,6 +103,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">
@@ -162,7 +163,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 icon" />
                Clear Notifications
              </span>
            </div>
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -173,7 +173,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)}
@@ -187,7 +186,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)}
              />
@@ -209,7 +207,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                  size={40}
                  className="panelTextField"
                  aria-label="New database id"
-                  autoFocus
                  tabIndex={0}
                  value={this.state.newDatabaseId}
                  onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
@@ -320,7 +317,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)}
                />
@@ -332,7 +328,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)}
                />
@@ -375,7 +370,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)}
@@ -389,7 +383,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)}
@@ -515,7 +508,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) => {
@@ -574,7 +566,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)}
@@ -589,7 +580,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)}
--- a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
+++ b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
@@ -210,7 +210,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
            placeholder={databaseIdPlaceHolder}
            value={databaseId}
            onChange={handleonChangeDBId}
-            autoFocus
            styles={getTextFieldStyles()}
          />

--- a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
+++ b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
@@ -169,7 +169,6 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
              aria-label="Create new keyspace"
              checked={keyspaceCreateNew}
              type="radio"
-              role="radio"
              tabIndex={0}
              onChange={() => {
                setKeyspaceCreateNew(true);
@@ -184,7 +183,6 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
              aria-label="Use existing keyspace"
              checked={!keyspaceCreateNew}
              type="radio"
-              role="radio"
              tabIndex={0}
              onChange={() => {
                setKeyspaceCreateNew(false);
@@ -208,7 +206,6 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
                value={newKeyspaceId}
                onChange={(e, newValue) => setNewKeyspaceId(newValue)}
                ariaLabel="Keyspace id"
-                autoFocus
              />

              {!isServerlessAccount() && (
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx
+++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx
@@ -119,7 +119,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) => {
--- a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
+++ b/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
@@ -129,7 +129,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);
--- a/src/Explorer/Panes/ExecuteSprocParamsPane/InputParameter.tsx
+++ b/src/Explorer/Panes/ExecuteSprocParamsPane/InputParameter.tsx
@@ -69,25 +69,11 @@ export const InputParameter: FunctionComponent<InputParameterProps> = ({
        />
        {isAddRemoveVisible && (
          <>
-            <div tabIndex={0}>
-              <Image
-                {...imageProps}
-                src={EntityCancelIcon}
-                alt="Delete param"
-                id="deleteparam"
-                role="button"
-                onClick={onDeleteParamKeyPress}
-              />
+            <div tabIndex={0} onClick={onDeleteParamKeyPress} role="button" onKeyPress={onDeleteParamKeyPress}>
+              <Image {...imageProps} src={EntityCancelIcon} alt="Delete param" id="deleteparam" />
            </div>
-            <div tabIndex={0}>
-              <Image
-                {...imageProps}
-                src={AddPropertyIcon}
-                alt="Add param"
-                id="addparam"
-                role="button"
-                onClick={onAddNewParamKeyPress}
-              />
+            <div tabIndex={0} onClick={onAddNewParamKeyPress} role="button" onKeyPress={onAddNewParamKeyPress}>
+              <Image {...imageProps} src={AddPropertyIcon} alt="Add param" id="addparam" />
            </div>
          </>
        )}
--- a/src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx
+++ b/src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx
@@ -92,7 +92,6 @@ export const LoadQueryPane: FunctionComponent = (): JSX.Element => {
              id="confirmCollectionId"
              label="Select a query document"
              value={selectedFileName}
-              autoFocus
              readOnly
              styles={{ fieldGroup: { width: 300 } }}
            />
--- a/src/Explorer/Panes/PanelInfoErrorComponent.tsx
+++ b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
@@ -48,7 +48,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
          )}
        </Text>
        {showErrorDetails && (
-          <a className="paneErrorLink" role="link" onClick={expandConsole}>
+          <a className="paneErrorLink" role="link" onClick={expandConsole} onKeyPress={expandConsole} tabIndex={0}>
            More details
          </a>
        )}
--- a/src/Explorer/Panes/PanelLoadingScreen.tsx
+++ b/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="loading indicator" />
  </div>
 );
--- a/src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
+++ b/src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
@@ -146,7 +146,6 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({ explorer
            <TextField
              id="saveQueryInput"
              label="Name"
-              autoFocus
              styles={{ fieldGroup: { width: 300 } }}
              onChange={(event, newInput?: string) => {
                setQueryName(newInput);
--- a/src/Explorer/Panes/StringInputPane/StringInputPane.tsx
+++ b/src/Explorer/Panes/StringInputPane/StringInputPane.tsx
@@ -97,7 +97,6 @@ export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
          label={inputLabel}
          name="collectionIdConfirmation"
          value={stringInput}
-          autoFocus
          required
          onChange={(event: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) =>
            setStringInput(newValue)
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -53,6 +53,7 @@ function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
      tabIndex={0}
      role="tab"
      ref={focusTab}
+      onFocus={() => setHovering(true)}
    >
      <span className="tabNavContentContainer">
        <a data-toggle="tab" href={"#" + tab.tabId} tabIndex={-1}>
--- a/src/Explorer/Tabs/TriggerTabContent.tsx
+++ b/src/Explorer/Tabs/TriggerTabContent.tsx
@@ -295,8 +295,6 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
          className="trigger-field"
          label="Trigger Id"
          id="entityTimeId"
-          autoFocus
-          required
          type="text"
          pattern="[^/?#\\]*[^/?# \\]"
          placeholder="Enter the new trigger id"
--- a/src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx
+++ b/src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx
@@ -276,7 +276,6 @@ export default class UserDefinedFunctionTabContent extends Component<
          className="trigger-field"
          label="User Defined Function Id"
          id="entityTimeId"
-          autoFocus
          required
          readOnly={!isUdfIdEditable}
          type="text"
--- a/src/HostedExplorer.tsx
+++ b/src/HostedExplorer.tsx
@@ -89,6 +89,8 @@ const App: React.FunctionComponent = () => {
              onClick={() => window.open("https://portal.azure.com", "_blank")}
              tabIndex={0}
              title="Go to Azure Portal"
+              role="button"
+              onKeyDown={() => window.open("https://portal.azure.com", "_blank")}
            >
              Microsoft Azure
            </span>
--- a/src/Index.tsx
+++ b/src/Index.tsx
@@ -33,13 +33,23 @@ const Index = (): JSX.Element => {
        <div
          id="Quickstart"
          onClick={quickstart_click}
+          onKeyPress={quickstart_click}
+          role="button"
+          tabIndex={0}
          className={navigationSelection === "quickstart" ? "topSelected" : ""}
        >
          <img id="imgiconwidth1" src={Quickstart} alt="Open Quick Start" />
          <span className="menuQuickStart">Quickstart</span>
        </div>

-        <div id="Explorer" onClick={explorer_click} className={navigationSelection === "explorer" ? "topSelected" : ""}>
+        <div
+          id="Explorer"
+          onClick={explorer_click}
+          className={navigationSelection === "explorer" ? "topSelected" : ""}
+          role="button"
+          tabIndex={0}
+          onKeyPress={explorer_click}
+        >
          <img id="imgiconwidth1" src={Explorer} alt="Open Data Explorer" />
          <span className="menuExplorer">Explorer</span>
        </div>
@@ -53,11 +63,11 @@ const Index = (): JSX.Element => {
      </nav>

      {navigationSelection === "quickstart" && (
-        <iframe name="quickstart" className="iframe" src="quickstart.html"></iframe>
+        <iframe name="quickstart" className="iframe" src="quickstart.html" title="Quick Start"></iframe>
      )}

      {navigationSelection === "explorer" && (
-        <iframe name="explorer" className="iframe" src="explorer.html?platform=Emulator"></iframe>
+        <iframe name="explorer" className="iframe" src="explorer.html?platform=Emulator" title="Explorer"></iframe>
      )}
    </React.Fragment>
  );
--- a/src/Platform/Hosted/Components/ConnectExplorer.tsx
+++ b/src/Platform/Hosted/Components/ConnectExplorer.tsx
@@ -77,16 +77,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>
--- a/tsconfig.strict.json
+++ b/tsconfig.strict.json
@@ -8,6 +8,7 @@
    "noUnusedParameters": true
  },
  "files": [
+    "./src/SelfServe/GraphAPICompute/GraphAPICompute.types.ts",
    "./src/AuthType.ts",
    "./src/Bindings/ReactBindingHandler.ts",
    "./src/Common/ArrayHashMap.ts",