[Feature Branch] EuiSelectable accessibility

CHANGELOG.md

@@ -1,9 +1,18 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
-
 - Added `paddingSize` prop to `EuiCard` ([#3638](https://github.com/elastic/eui/pull/3638))
 - Added `isClearable` and `placeholder` options to `EuiColorPicker` ([#3689](https://github.com/elastic/eui/pull/3689))
 - Added SASS helper files for EUI theme globals ([#3691](https://github.com/elastic/eui/pull/3691))
 
+**Breaking changes**
+
+- Significant accessibility refactor of `EuiSelectable` ([#3169](https://github.com/elastic/eui/pull/3169))
+  - `react-virtualized` replaced with `react-window`
+  - `virtualizedProps` on `EuiSelectableOptionsList` renamed to `windowProps`
+  - Removed `rootId` and added `makeOptionId`, `listId`, and `setActiveOptionIndex` to `EuiSelectableList`
+  - Added `listId` to `EuiSelectableSearch`
+  - `options` passed into `EuiSelectable` cannot have an `id`
+  - Requires an `onChange` to be passed into `EuiSelectableSearch`
+
 ## [`26.3.0`](https://github.com/elastic/eui/tree/v26.3.0)
 
 - Expanded `EuiBasicTable`'s default action's name configuration to accept any React node ([#3688](https://github.com/elastic/eui/pull/3688))

package.json

@@ -52,7 +52,8 @@
     "@types/numeral": "^0.0.25",
     "@types/react-beautiful-dnd": "^12.1.2",
     "@types/react-input-autosize": "^2.0.2",
-    "@types/react-virtualized": "^9.18.7",
+    "@types/react-virtualized-auto-sizer": "^1.0.0",
+    "@types/react-window": "^1.8.1",
     "chroma-js": "^2.0.4",
     "classnames": "^2.2.5",
     "highlight.js": "^9.12.0",
@@ -66,7 +67,8 @@
     "react-focus-lock": "^1.17.7",
     "react-input-autosize": "^2.2.2",
     "react-is": "~16.3.0",
-    "react-virtualized": "^9.21.2",
+    "react-virtualized-auto-sizer": "^1.0.2",
+    "react-window": "^1.8.5",
     "resize-observer-polyfill": "^1.5.0",
     "tabbable": "^3.0.0",
     "text-diff": "^1.0.1",
@@ -101,8 +103,8 @@
     "@typescript-eslint/eslint-plugin": "^3.2.0",
     "@typescript-eslint/parser": "^3.2.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/combo_box/combo_box_example.js

@@ -252,8 +252,8 @@ export const ComboBoxExample = {
       text: (
         <p>
           <strong>EuiComboBoxList</strong> uses{' '}
-          <EuiLink href="https://github.com/bvaughn/react-virtualized">
-            react-virtualized
+          <EuiLink href="https://github.com/bvaughn/react-window">
+            react-window
           </EuiLink>{' '}
           to only render visible options to be super fast no matter how many
           options there are.

src-docs/src/views/selectable/data.ts

@@ -15,7 +15,6 @@ export const Options: EuiSelectableOption[] = [
   },
   {
     label: 'Dione',
-    id: 'id_dione',
   },
   {
     label: 'Iapetus',

src-docs/src/views/selectable/selectable.tsx

@@ -8,6 +8,7 @@ export default () => {
 
   return (
     <EuiSelectable
+      aria-label="Basic example"
       options={options}
       listProps={{ bordered: true }}
       onChange={newOptions => setOptions(newOptions)}>

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

@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from 'react';
+import React, { useState } from 'react';
 
 import {
   EuiBadge,
@@ -13,7 +13,6 @@ import { createDataStore } from '../tables/data_store';
 export default () => {
   const countries = createDataStore().countries.map(country => {
     return {
-      id: country.code,
       label: `${country.name}`,
       prepend: country.flag,
       append: <EuiBadge>{country.code}</EuiBadge>,
@@ -26,7 +25,7 @@ export default () => {
   });
 
   const [options, setOptions] = useState(countries);
-  const [useCustomContent, setUseCustomContent] = useState(countries);
+  const [useCustomContent, setUseCustomContent] = useState(false);
 
   const onChange = options => {
     setOptions(options);
@@ -38,13 +37,13 @@ export default () => {
 
   const renderCountryOption = (option, searchValue) => {
     return (
-      <Fragment>
+      <>
         <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>
         <br />
         <EuiTextColor color="subdued">
           <small>I am secondary content, I am!</small>
         </EuiTextColor>
-      </Fragment>
+      </>
     );
   };
 
@@ -61,27 +60,28 @@ export default () => {
   }
 
   return (
-    <Fragment>
+    <>
       <EuiSwitch
-        label="Custom content with no icons"
+        label="Custom content"
         checked={useCustomContent}
         onChange={onCustom}
       />
 
       <EuiSpacer />
 
       <EuiSelectable
+        aria-label="Selectable example with custom list items"
         searchable
         options={options}
         onChange={onChange}
         {...customProps}>
         {(list, search) => (
-          <Fragment>
+          <>
             {search}
             {list}
-          </Fragment>
+          </>
         )}
       </EuiSelectable>
-    </Fragment>
+    </>
   );
 };

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

@@ -104,6 +104,7 @@ export const SelectableExample = {
       },
       demo: <Selectable />,
       snippet: `<EuiSelectable
+  aria-label="Basic example"
   options={[{ label: '' }, { label: '' }]}
   onChange={newOptions => setOptions(newOptions)}
   listProps={{ bordered: true }}>
@@ -141,6 +142,7 @@ export const SelectableExample = {
       props: { EuiSelectable },
       demo: <SelectableSearch />,
       snippet: `<EuiSelectable
+  aria-label="Searchable example"
   searchable
   searchProps={{
     'data-test-subj': dataTestSubj,
@@ -183,13 +185,13 @@ export const SelectableExample = {
       demo: <SelectableSingle />,
       snippet: `
       <EuiSelectable
-        options={options}
-        onChange={newOptions => setOptions(newOptions)}
-        singleSelection={true}
-        listProps={{ bordered: true }}>
-        {list => list}
-      </EuiSelectable>
-    `,
+  aria-label="Single selection example"
+  options={options}
+  onChange={newOptions => setOptions(newOptions)}
+  singleSelection={true}
+  listProps={{ bordered: true }}>
+  {list => list}
+</EuiSelectable>`,
     },
     {
       title: 'Sizing and containers',
@@ -255,6 +257,7 @@ export const SelectableExample = {
       props: { EuiSelectable },
       demo: <SelectableExclusion />,
       snippet: `<EuiSelectable
+  aria-label="Example supporting exclusions"
   allowExclusions
   options={[]}
   onChange={newOptions => setOptions(newOptions)}>

src-docs/src/views/selectable/selectable_exclusion.tsx

@@ -8,6 +8,7 @@ export default () => {
 
   return (
     <EuiSelectable
+      aria-label="Example of Selectable supporting exclusions"
       allowExclusions
       options={options}
       onChange={newOptions => setOptions(newOptions)}>

src-docs/src/views/selectable/selectable_messages.tsx

@@ -30,7 +30,11 @@ export default () => {
         checked={isLoading}
       />
       <EuiSpacer />
-      <EuiSelectable options={[]} style={{ width: 200 }} isLoading={isLoading}>
+      <EuiSelectable
+        aria-label="Messaging example"
+        options={[]}
+        style={{ width: 200 }}
+        isLoading={isLoading}>
         {list => (useCustomMessage && !isLoading ? customMessage : list)}
       </EuiSelectable>
     </Fragment>

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

@@ -99,6 +99,7 @@ export default () => {
       {isFlyoutVisible && (
         <EuiFlyout ownFocus onClose={closeFlyout} aria-labelledby="flyoutTitle">
           <EuiSelectable
+            aria-label="Popover example"
             searchable
             options={countries}
             onChange={onFlyoutChange}
@@ -135,6 +136,7 @@ export default () => {
       <EuiSpacer />
 
       <EuiSelectable
+        aria-label="Bordered selectable example"
         options={options}
         onChange={() => {}}
         style={{ width: 300 }}

src-docs/src/views/selectable/selectable_search.tsx

@@ -9,6 +9,7 @@ export default () => {
   return (
     <Fragment>
       <EuiSelectable
+        aria-label="Searchable example"
         searchable
         searchProps={{
           'data-test-subj': 'selectableSearchHere',

src-docs/src/views/selectable/selectable_single.tsx

@@ -13,6 +13,7 @@ export default () => {
 
   return (
     <EuiSelectable
+      aria-label="Single selection example"
       options={options}
       onChange={newOptions => setOptions(newOptions)}
       singleSelection={true}