Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[EuiSuperSelect] Adding generated IDs to create accessible label and description #5364

Merged
merged 11 commits into from
Nov 17, 2021
Merged

[EuiSuperSelect] Adding generated IDs to create accessible label and description #5364

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c55e713
Adding generated IDs to create accessible label and description
1Copenut Nov 9, 2021
5672587
Fixed CHANGELOG merge conflict.
1Copenut Nov 9, 2021
bfe5fa6
Refactoring props for cleaner implementation
1Copenut Nov 10, 2021
e0de6db
Removing unnecessary prop from EuiColorPalettePicker
1Copenut Nov 10, 2021
356a986
Adding screen reader only titles for Color Palette Picker
1Copenut Nov 10, 2021
0bb616b
Removing extra ternary logic in Color Palette Picker
1Copenut Nov 10, 2021
9924f5b
Editing CHANGELOG message for mis-spelling.
1Copenut Nov 10, 2021
dcac44f
Adding inline comment to explain a11y intent
1Copenut Nov 10, 2021
b69ff5e
Refactoring to use spread operator to pass title prop
1Copenut Nov 10, 2021
c4b91da
Adding conditional checks to avoid empty SR-only spans.
1Copenut Nov 15, 2021
a676423
Revising describedby helper text after screen reader testing.
1Copenut Nov 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

- Fixed an `EuiDataGrid` race condition where grid rows had incorrect heights if loaded in before CSS ([#5284](https://github.com/elastic/eui/pull/5284))
- Fixed an accessibility issue where `EuiDataGrid` cells weren't owned by `role=row` elements ([#5285](https://github.com/elastic/eui/pull/5285))
- Fixed an accessibility issue where `EuiSuperSelect` was not creating accessible labels for `div[role="listbox"]` ([#5292](https://github.com/elastic/eui/issues/5292))
1Copenut marked this conversation as resolved.
Show resolved Hide resolved

## [`41.0.0`](https://github.com/elastic/eui/tree/v41.0.0)

Expand Down
35 changes: 14 additions & 21 deletions ...onents/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,13 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="true"
aria-haspopup="listbox"
aria-label="aria-label"
aria-labelledby="generated-id"
class="euiSuperSelectControl testClass1 testClass2"
data-test-subj="test subject string"
type="button"
Expand Down Expand Up @@ -72,14 +71,13 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: Plain text as a custom option, is selected
</span>
<button
aria-haspopup="true"
aria-haspopup="listbox"
aria-label="aria-label"
aria-labelledby="generated-id"
class="euiSuperSelectControl testClass1 testClass2"
data-test-subj="test subject string"
type="button"
Expand Down Expand Up @@ -126,7 +124,7 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option:
<span
Expand Down Expand Up @@ -155,9 +153,8 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
, is selected
</span>
<button
aria-haspopup="true"
aria-haspopup="listbox"
aria-label="aria-label"
aria-labelledby="generated-id"
class="euiSuperSelectControl testClass1 testClass2"
data-test-subj="test subject string"
type="button"
Expand Down Expand Up @@ -226,7 +223,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option:
<span
Expand All @@ -236,9 +233,8 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
, is selected
</span>
<button
aria-haspopup="true"
aria-haspopup="listbox"
aria-label="aria-label"
aria-labelledby="generated-id"
class="euiSuperSelectControl testClass1 testClass2"
data-test-subj="test subject string"
type="button"
Expand Down Expand Up @@ -288,7 +284,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option:
<span
Expand All @@ -298,9 +294,8 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
, is selected
</span>
<button
aria-haspopup="true"
aria-haspopup="listbox"
aria-label="aria-label"
aria-labelledby="generated-id"
class="euiSuperSelectControl testClass1 testClass2"
data-test-subj="test subject string"
type="button"
Expand Down Expand Up @@ -350,14 +345,13 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: Palette 1, is selected
</span>
<button
aria-haspopup="true"
aria-haspopup="listbox"
aria-label="aria-label"
aria-labelledby="generated-id"
class="euiSuperSelectControl testClass1 testClass2"
data-test-subj="test subject string"
type="button"
Expand Down Expand Up @@ -404,7 +398,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option:
<span
Expand Down Expand Up @@ -433,8 +427,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
, is selected
</span>
<button
aria-haspopup="true"
aria-labelledby="generated-id"
aria-haspopup="listbox"
class="euiSuperSelectControl euiSuperSelect--isOpen__button"
data-test-subj="colorPalettePicker"
type="button"
Expand Down
2 changes: 2 additions & 0 deletions src/components/color_picker/color_palette_picker/color_palette_picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ export const EuiColorPalettePicker: FunctionComponent<EuiColorPalettePickerProps
palettes,
append,
prepend,
screenReaderId,
1Copenut marked this conversation as resolved.
Show resolved Hide resolved
selectionDisplay = 'palette',
...rest
}) => {
Expand Down Expand Up @@ -163,6 +164,7 @@ export const EuiColorPalettePicker: FunctionComponent<EuiColorPalettePickerProps
fullWidth={fullWidth}
append={append}
prepend={prepend}
screenReaderId={screenReaderId}
{...rest}
/>
);
Expand Down
66 changes: 32 additions & 34 deletions src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,13 @@ exports[`EuiSuperSelect is rendered 1`] = `
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="true"
aria-haspopup="listbox"
aria-label="aria-label"
aria-labelledby="generated-id"
class="euiSuperSelectControl testClass1 testClass2"
data-test-subj="test subject string"
type="button"
Expand Down Expand Up @@ -72,14 +71,13 @@ exports[`EuiSuperSelect props compressed is rendered 1`] = `
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="true"
aria-haspopup="listbox"
aria-label="aria-label"
aria-labelledby="generated-id"
class="euiSuperSelectControl euiSuperSelectControl--compressed testClass1 testClass2"
data-test-subj="test subject string"
type="button"
Expand Down Expand Up @@ -124,13 +122,12 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="true"
aria-labelledby="generated-id"
aria-haspopup="listbox"
class="euiSuperSelectControl euiSuperSelect--isOpen__button"
data-test-subj="superSelect"
type="button"
Expand Down Expand Up @@ -192,11 +189,13 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
<div>
<p
class="euiScreenReaderOnly"
role="alert"
id="euiSuperSelect__generated-id__screenreaderDescribeId"
>
You are in a form selector of 2 items and must select a single option. Use the up and down keys to navigate or escape to close.
</p>
<div
aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
aria-labelledby="euiSuperSelect__generated-id__screenreaderLabelId"
class="euiSuperSelect__listbox"
role="listbox"
tabindex="0"
Expand Down Expand Up @@ -284,14 +283,13 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="true"
aria-haspopup="listbox"
aria-label="aria-label"
aria-labelledby="generated-id"
class="euiSuperSelectControl euiSuperSelectControl--fullWidth testClass1 testClass2"
data-test-subj="test subject string"
type="button"
Expand Down Expand Up @@ -341,14 +339,13 @@ exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="true"
aria-haspopup="listbox"
aria-label="aria-label"
aria-labelledby="generated-id"
class="euiSuperSelectControl euiSuperSelectControl--inGroup testClass1 testClass2"
data-test-subj="test subject string"
type="button"
Expand Down Expand Up @@ -398,13 +395,12 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: Option #1, is selected
</span>
<button
aria-haspopup="true"
aria-labelledby="generated-id"
aria-haspopup="listbox"
class="euiSuperSelectControl euiSuperSelect--isOpen__button"
data-test-subj="superSelect"
type="button"
Expand Down Expand Up @@ -468,12 +464,14 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
<div>
<p
class="euiScreenReaderOnly"
role="alert"
id="euiSuperSelect__generated-id__screenreaderDescribeId"
>
You are in a form selector of 2 items and must select a single option. Use the up and down keys to navigate or escape to close.
</p>
<div
aria-activedescendant="1"
aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
aria-labelledby="euiSuperSelect__generated-id__screenreaderLabelId"
class="euiSuperSelect__listbox"
role="listbox"
tabindex="0"
Expand Down Expand Up @@ -563,13 +561,12 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="true"
aria-labelledby="generated-id"
aria-haspopup="listbox"
class="euiSuperSelectControl euiSuperSelect--isOpen__button"
data-test-subj="superSelect"
type="button"
Expand Down Expand Up @@ -631,11 +628,13 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
<div>
<p
class="euiScreenReaderOnly"
role="alert"
id="euiSuperSelect__generated-id__screenreaderDescribeId"
>
You are in a form selector of 2 items and must select a single option. Use the up and down keys to navigate or escape to close.
</p>
<div
aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
aria-labelledby="euiSuperSelect__generated-id__screenreaderLabelId"
class="euiSuperSelect__listbox"
role="listbox"
tabindex="0"
Expand Down Expand Up @@ -723,13 +722,12 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: Option #2, is selected
</span>
<button
aria-haspopup="true"
aria-labelledby="generated-id"
aria-haspopup="listbox"
class="euiSuperSelectControl euiSuperSelect--isOpen__button"
data-test-subj="superSelect"
type="button"
Expand Down Expand Up @@ -793,12 +791,14 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
<div>
<p
class="euiScreenReaderOnly"
role="alert"
id="euiSuperSelect__generated-id__screenreaderDescribeId"
>
You are in a form selector of 2 items and must select a single option. Use the up and down keys to navigate or escape to close.
</p>
<div
aria-activedescendant="2"
aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
aria-labelledby="euiSuperSelect__generated-id__screenreaderLabelId"
class="euiSuperSelect__listbox"
role="listbox"
tabindex="0"
Expand Down Expand Up @@ -886,13 +886,12 @@ exports[`EuiSuperSelect props select component is rendered 1`] = `
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="true"
aria-labelledby="generated-id"
aria-haspopup="listbox"
class="euiSuperSelectControl"
type="button"
/>
Expand Down Expand Up @@ -936,13 +935,12 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
>
<span
class="euiScreenReaderOnly"
id="generated-id"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: Option #2, is selected
</span>
<button
aria-haspopup="true"
aria-labelledby="generated-id"
aria-haspopup="listbox"
class="euiSuperSelectControl"
type="button"
>
Expand Down
Loading