Merge pull request #2561 from github/enable-a11y-linting-rules

Enable accessibility linting rules and comment out existing violations

Author: robertbrignull

extensions/ql-vscode/.eslintrc.js

@@ -65,10 +65,6 @@ const baseConfig = {
     "import/no-namespace": "off",
     "import/no-unresolved": "off",
     "import/no-webpack-loader-syntax": "off",
-    "jsx-a11y/anchor-is-valid": "off",
-    "jsx-a11y/no-noninteractive-element-interactions": "off",
-    "jsx-a11y/no-static-element-interactions": "off",
-    "jsx-a11y/click-events-have-key-events": "off",
     "no-invalid-this": "off",
     "no-fallthrough": "off",
     "no-console": "off",

extensions/ql-vscode/src/view/compare/CompareTable.tsx

@@ -46,6 +46,12 @@ export default function CompareTable(props: Props) {
       <thead>
         <tr>
           <td>
+            {/*
+              eslint-disable-next-line
+              jsx-a11y/anchor-is-valid,
+              jsx-a11y/click-events-have-key-events,
+              jsx-a11y/no-static-element-interactions
+            */}
             <a
               onClick={() => openQuery("from")}
               className="vscode-codeql__compare-open"
@@ -54,6 +60,12 @@ export default function CompareTable(props: Props) {
             </a>
           </td>
           <td>
+            {/*
+              eslint-disable-next-line
+              jsx-a11y/anchor-is-valid,
+              jsx-a11y/click-events-have-key-events,
+              jsx-a11y/no-static-element-interactions
+            */}
             <a
               onClick={() => openQuery("to")}
               className="vscode-codeql__compare-open"

extensions/ql-vscode/src/view/results/alert-table.tsx

@@ -111,6 +111,10 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
       return (
         <span>
           No Alerts. See{" "}
+          {/*
+              eslint-disable-next-line
+              jsx-a11y/anchor-is-valid,
+            */}
           <a href="#" onClick={this.props.showRawResults}>
             raw results
           </a>
@@ -316,6 +320,10 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
               {...selectableZebraStripe(resultRowIsSelected, resultIndex)}
               key={resultIndex}
             >
+              {/*
+                  eslint-disable-next-line
+                  jsx-a11y/no-noninteractive-element-interactions
+                */}
               <td
                 className="vscode-codeql__icon-cell vscode-codeql__dropdown-cell"
                 onMouseDown={toggler(indices)}
@@ -353,6 +361,10 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
                   <td className="vscode-codeql__icon-cell">
                     <span className="vscode-codeql__vertical-rule"></span>
                   </td>
+                  {/*
+                      eslint-disable-next-line
+                      jsx-a11y/no-noninteractive-element-interactions
+                    */}
                   <td
                     className="vscode-codeql__icon-cell vscode-codeql__dropdown-cell"
                     onMouseDown={toggler([pathKey])}

extensions/ql-vscode/src/view/results/result-table-utils.tsx

@@ -98,14 +98,20 @@ export function renderLocation(
   const resolvableLoc = tryGetResolvableLocation(loc);
   if (databaseUri !== undefined && resolvableLoc !== undefined) {
     return (
-      <a
-        href="#"
-        className="vscode-codeql__result-table-location-link"
-        title={title}
-        onClick={jumpToLocationHandler(resolvableLoc, databaseUri, callback)}
-      >
-        {displayLabel}
-      </a>
+      <>
+        {/*
+            eslint-disable-next-line
+            jsx-a11y/anchor-is-valid,
+          */}
+        <a
+          href="#"
+          className="vscode-codeql__result-table-location-link"
+          title={title}
+          onClick={jumpToLocationHandler(resolvableLoc, databaseUri, callback)}
+        >
+          {displayLabel}
+        </a>
+      </>
     );
   } else {
     return <span title={title}>{displayLabel}</span>;

extensions/ql-vscode/src/view/results/result-tables.tsx

@@ -327,6 +327,10 @@ export class ResultTables extends React.Component<
         </button>
         <div className={tableHeaderItemClassName}>{this.props.queryName}</div>
         <div className={tableHeaderItemClassName}>
+          {/*
+              eslint-disable-next-line
+              jsx-a11y/anchor-is-valid
+            */}
           <a
             href="#"
             onClick={openQuery}