From bf4abcbfd4f7aef933a082568666a2fcb5865126 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Fri, 5 Jun 2020 17:39:54 -0400 Subject: [PATCH 1/2] decrustifying --- package.json | 4 +-- scripts/a11y-testing.js | 3 +- .../selectable/selectable_custom_render.js | 4 +-- .../selectable_list/selectable_list.tsx | 29 ++++++++++++++----- yarn.lock | 18 ++++++------ 5 files changed, 35 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index da337ac599e..f9481d22001 100644 --- a/package.json +++ b/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", diff --git a/scripts/a11y-testing.js b/scripts/a11y-testing.js index 6358d1d16be..39c9f5378b1 100644 --- a/scripts/a11y-testing.js +++ b/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"]', }, ], }) diff --git a/src-docs/src/views/selectable/selectable_custom_render.js b/src-docs/src/views/selectable/selectable_custom_render.js index 05d685ae5f7..2c0858ebe55 100644 --- a/src-docs/src/views/selectable/selectable_custom_render.js +++ b/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 ( <> diff --git a/src/components/selectable/selectable_list/selectable_list.tsx b/src/components/selectable/selectable_list/selectable_list.tsx index ab0221f84da..0731e92d53d 100644 --- a/src/components/selectable/selectable_list/selectable_list.tsx +++ b/src/components/selectable/selectable_list/selectable_list.tsx @@ -111,6 +111,7 @@ export class EuiSelectableList extends Component { }; listRef: FixedSizeList | null = null; + scrollableWrapperRef: HTMLDivElement | null = null; listBoxRef: HTMLUListElement | null = null; setListRef = (ref: FixedSizeList | null) => { @@ -121,6 +122,14 @@ export class EuiSelectableList extends Component { } }; + 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 { @@ -128,6 +137,7 @@ export class EuiSelectableList extends Component { searchable, singleSelection, 'aria-label': ariaLabel, + 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, } = this.props; @@ -137,20 +147,20 @@ export class EuiSelectableList extends Component { 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 +256,8 @@ export class EuiSelectableList extends Component { searchable, listId, 'aria-label': ariaLabel, + 'aria-labelledby': ariaLabelledby, + 'aria-describedby': ariaDescribedby, ...rest } = this.props; @@ -287,6 +299,7 @@ export class EuiSelectableList extends Component { {({ width, height }) => ( Date: Tue, 9 Jun 2020 12:07:39 -0400 Subject: [PATCH 2/2] removing unused ref --- src/components/selectable/selectable_list/selectable_list.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/selectable/selectable_list/selectable_list.tsx b/src/components/selectable/selectable_list/selectable_list.tsx index 0731e92d53d..949fbd102cb 100644 --- a/src/components/selectable/selectable_list/selectable_list.tsx +++ b/src/components/selectable/selectable_list/selectable_list.tsx @@ -111,7 +111,6 @@ export class EuiSelectableList extends Component { }; listRef: FixedSizeList | null = null; - scrollableWrapperRef: HTMLDivElement | null = null; listBoxRef: HTMLUListElement | null = null; setListRef = (ref: FixedSizeList | null) => {