Misc cleanup after resurecting

package.json

@@ -102,8 +102,8 @@
     "@typescript-eslint/eslint-plugin": "^2.27.0",
     "@typescript-eslint/parser": "^2.27.0",
     "autoprefixer": "^7.1.5",
-    "axe-core": "^3.3.2",
-    "axe-puppeteer": "^1.0.0",
+    "axe-core": "^3.5.4",
+    "axe-puppeteer": "^1.1.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.1.0",

scripts/a11y-testing.js

@@ -38,7 +38,6 @@ const docsPages = async (root, page) => {
     `${root}#/forms/color-selection`,
     `${root}#/forms/code-editor`,
     `${root}#/forms/date-picker`,
-    `${root}#/forms/selectable`,
     `${root}#/forms/suggest`,
     `${root}#/forms/super-date-picker`,
     `${root}#/elastic-charts/creating-charts`,
@@ -102,7 +101,7 @@ const printResult = result =>
           { id: 'color-contrast', enabled: false },
           {
             id: 'scrollable-region-focusable',
-            matches: '[role="grid"]',
+            selector: '[data-skip-axe="scrollable-region-focusable"]',
           },
         ],
       })

src-docs/src/views/selectable/selectable_custom_render.js

@@ -26,7 +26,7 @@ export default () => {
   });
 
   const [options, setOptions] = useState(countries);
-  const [useCustomContent, setUseCustomContent] = useState(countries);
+  const [useCustomContent, setUseCustomContent] = useState(false);
 
   const onChange = options => {
     setOptions(options);
@@ -63,7 +63,7 @@ export default () => {
   return (
     <>
       <EuiSwitch
-        label="Custom content with no icons"
+        label="Custom content"
         checked={useCustomContent}
         onChange={onCustom}
       />

src/components/selectable/selectable_list/selectable_list.tsx

@@ -121,13 +121,22 @@ export class EuiSelectableList extends Component<EuiSelectableListProps> {
     }
   };
 
+  removeScrollableTabStop = (ref: HTMLDivElement | null) => {
+    // Firefox adds a tab stop for scrollable containers
+    // We handle this inside so need to stop firefox from doing its thing
+    if (ref) {
+      ref.setAttribute('tabindex', '-1');
+    }
+  };
+
   setListBoxRef = (ref: HTMLUListElement | null) => {
     this.listBoxRef = ref;
     const {
       listId,
       searchable,
       singleSelection,
       'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
       'aria-describedby': ariaDescribedby,
     } = this.props;
 
@@ -137,20 +146,20 @@ export class EuiSelectableList extends Component<EuiSelectableListProps> {
 
       if (searchable !== true) {
         ref.setAttribute('tabindex', '0');
+
+        if (singleSelection !== 'always' && singleSelection !== true) {
+          ref.setAttribute('aria-multiselectable', 'true');
+        }
       }
 
       if (typeof ariaLabel === 'string') {
         ref.setAttribute('aria-label', ariaLabel);
-      } else if (typeof ariaDescribedby === 'string') {
-        ref.setAttribute('aria-describedby', ariaDescribedby);
+      } else if (typeof ariaLabelledby === 'string') {
+        ref.setAttribute('aria-labelledby', ariaLabelledby);
       }
 
-      if (
-        singleSelection !== 'always' &&
-        singleSelection !== true &&
-        searchable !== true
-      ) {
-        ref.setAttribute('aria-multiselectable', 'true');
+      if (typeof ariaDescribedby === 'string') {
+        ref.setAttribute('aria-labelledby', ariaDescribedby);
       }
     }
   };
@@ -246,6 +255,8 @@ export class EuiSelectableList extends Component<EuiSelectableListProps> {
       searchable,
       listId,
       'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      'aria-describedby': ariaDescribedby,
       ...rest
     } = this.props;
 
@@ -287,6 +298,7 @@ export class EuiSelectableList extends Component<EuiSelectableListProps> {
           {({ width, height }) => (
             <FixedSizeList
               ref={this.setListRef}
+              outerRef={this.removeScrollableTabStop}
               className="euiSelectableList__list"
               data-skip-axe="scrollable-region-focusable"
               width={width}

yarn.lock

@@ -2200,17 +2200,17 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
-axe-core@^3.1.2, axe-core@^3.3.2:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.4.0.tgz#a57ee620c182d5389aff229586aaae06bc541abe"
-  integrity sha512-5C0OdgxPv/DrQguO6Taj5F1dY5OlkWg4SVmZIVABFYKWlnAc5WTLPzG+xJSgIwf2fmY+NiNGiZXhXx2qT0u/9Q==
+axe-core@^3.5.3, axe-core@^3.5.4:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.4.tgz#5a7b49ba8c989cd59cde219810ccfb0b7cf72e97"
+  integrity sha512-JRuxixN5bPHre+815qnyqBQzNpRTqGxLWflvjr4REpGZ5o0WXm+ik2IS4PZ01EnacWmVRB4jCPWFiYENMiiasA==
 
-axe-puppeteer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/axe-puppeteer/-/axe-puppeteer-1.0.0.tgz#cebbeec2c65a2e0cb7d5fd1e7aef26c5f71895a4"
-  integrity sha512-hTF3u4mtatgTN7fsLVyVgbRdNc15ngjDcTEuqhn9A7ugqLhLCryJWp9fzqZkNlrW8awPcxugyTwLPR7mRdPZmA==
+axe-puppeteer@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/axe-puppeteer/-/axe-puppeteer-1.1.0.tgz#efcf0666a7d8fefec6930b4b6ec3476c403d1b91"
+  integrity sha512-VS17Y1rDQe6A0PdeTPxwOSBfmOdj6efgxyre9cN1du1snnVilczSDtQsgifBKBlzoL/3DKfGpgIi+N+zrzODOg==
   dependencies:
-    axe-core "^3.1.2"
+    axe-core "^3.5.3"
 
 axios@^0.18.1:
   version "0.18.1"