Skip to content

[EuiSuperSelect] Add new placeholder API; clean up screen reader accessibility #6630

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

Merged
cee-chen merged 5 commits into from
Mar 7, 2023
Merged

[EuiSuperSelect] Add new placeholder API; clean up screen reader accessibility #6630

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bd0800c
Add `placeholder` prop, tests, and docs
cee-chen Mar 2, 2023
599a47c
[a11y cleanup] Remove unnecessary screen reader text
cee-chen Mar 2, 2023
2336109
[a11y cleanup] Remove labelledBy ID
cee-chen Mar 2, 2023
f1d22a5
changelog
cee-chen Mar 2, 2023
64d4e8d
[PR feedback] aria-label
cee-chen Mar 6, 2023
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
3 changes: 2 additions & 1 deletion src-docs/src/views/super_select/super_select_complex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default () => {
},
];

const [value, setValue] = useState('option_one');
const [value, setValue] = useState();

const onChange = (value) => {
setValue(value);
Expand All @@ -52,6 +52,7 @@ export default () => {
<EuiSuperSelect
options={options}
valueOfSelected={value}
placeholder="Select an option"
onChange={(value) => onChange(value)}
itemLayoutAlign="top"
hasDividers
Expand Down
22 changes: 15 additions & 7 deletions src-docs/src/views/super_select/super_select_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,13 +102,21 @@ export const SuperSelectExample = {
},
],
text: (
<p>
Both <EuiCode>inputDisplay</EuiCode> and{' '}
<EuiCode>dropdownDisplay</EuiCode> accept React nodes. Therefore you
can pass some descriptions with each option to show in the dropdown.
If your options will most likely be multi-line, add the{' '}
<EuiCode>hasDividers</EuiCode> prop to show borders between options.
</p>
<>
<p>
Both <EuiCode>inputDisplay</EuiCode> and{' '}
<EuiCode>dropdownDisplay</EuiCode> accept React nodes. Therefore you
can pass some descriptions with each option to show in the dropdown.
If your options will most likely be multi-line, add the{' '}
<EuiCode>hasDividers</EuiCode> prop to show borders between options.
</p>
<p>
A <EuiCode>placeholder</EuiCode> prop may also be passed that
accepts string as well as React nodes (to match your{' '}
<EuiCode>inputDisplay</EuiCode> if necessary). This placeholder will
only show when <EuiCode>valueOfSelected</EuiCode> is empty.
</p>
</>
),
props: {},
snippet: superSelectComplexSnippet,
Expand Down
124 changes: 0 additions & 124 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 @@ -18,12 +18,6 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="listbox"
aria-label="aria-label"
Expand Down Expand Up @@ -69,12 +63,6 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: Plain text as a custom option, is selected
</span>
<button
aria-haspopup="listbox"
aria-label="aria-label"
Expand Down Expand Up @@ -122,42 +110,6 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option:
<span
class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
>
<span
class="emotion-euiScreenReaderOnly"
>
Palette 1
</span>
<span
aria-hidden="true"
class="euiColorPaletteDisplayFixed__bleedArea"
>
<span
style="background-color:#1fb0b2;width:20%"
/>
<span
style="background-color:#ffdb6d;width:20%"
/>
<span
style="background-color:#ee9191;width:20%"
/>
<span
style="background-color:#ffffff;width:20%"
/>
<span
style="background-color:#888094;width:20%"
/>
</span>
</span>
, is selected
</span>
<button
aria-haspopup="listbox"
aria-label="aria-label"
Expand Down Expand Up @@ -233,23 +185,6 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option:
<span
class="emotion-euiScreenReaderOnly"
>
Linear Gradient
</span>
<span
aria-hidden="true"
class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
style="background:linear-gradient(to right, #1fb0b2 0%, #ffdb6d 25%, #ee9191 50%, #ffffff 75%, #888094 100%)"
/>
, is selected
</span>
<button
aria-haspopup="listbox"
aria-label="aria-label"
Expand Down Expand Up @@ -306,23 +241,6 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option:
<span
class="emotion-euiScreenReaderOnly"
>
Linear Gradient with stops
</span>
<span
aria-hidden="true"
class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
style="background:linear-gradient(to right, #54B399 0%, #D36086 53%, #9170B8 74%, #F5A700 100%)"
/>
, is selected
</span>
<button
aria-haspopup="listbox"
aria-label="aria-label"
Expand Down Expand Up @@ -379,12 +297,6 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: Palette 1, is selected
</span>
<button
aria-haspopup="listbox"
aria-label="aria-label"
Expand Down Expand Up @@ -432,42 +344,6 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option:
<span
class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
>
<span
class="emotion-euiScreenReaderOnly"
>
Palette 1
</span>
<span
aria-hidden="true"
class="euiColorPaletteDisplayFixed__bleedArea"
>
<span
style="background-color: rgb(31, 176, 178); width: 20%;"
/>
<span
style="background-color: rgb(255, 219, 109); width: 20%;"
/>
<span
style="background-color: rgb(238, 145, 145); width: 20%;"
/>
<span
style="background-color: rgb(255, 255, 255); width: 20%;"
/>
<span
style="background-color: rgb(136, 128, 148); width: 20%;"
/>
</span>
</span>
, is selected
</span>
<button
aria-haspopup="listbox"
class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
Expand Down
64 changes: 0 additions & 64 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 @@ -18,12 +18,6 @@ exports[`EuiSuperSelect is rendered 1`] = `
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
Copy link
Contributor

@1Copenut 1Copenut Mar 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, this not a good UX for screen readers.

</span>
<button
aria-haspopup="listbox"
aria-label="aria-label"
Expand Down Expand Up @@ -69,12 +63,6 @@ exports[`EuiSuperSelect props compressed is rendered 1`] = `
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="listbox"
aria-label="aria-label"
Expand Down Expand Up @@ -120,12 +108,6 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="listbox"
class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
Expand Down Expand Up @@ -183,7 +165,6 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
</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 @@ -269,12 +250,6 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="listbox"
aria-label="aria-label"
Expand Down Expand Up @@ -325,12 +300,6 @@ exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="listbox"
aria-label="aria-label"
Expand Down Expand Up @@ -381,12 +350,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: Option #1, is selected
</span>
<button
aria-haspopup="listbox"
class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
Expand Down Expand Up @@ -447,7 +410,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
<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 @@ -535,12 +497,6 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="listbox"
class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
Expand Down Expand Up @@ -598,7 +554,6 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
</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 @@ -684,12 +639,6 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: Option #2, is selected
</span>
<button
aria-haspopup="listbox"
class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
Expand Down Expand Up @@ -750,7 +699,6 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
<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 @@ -836,12 +784,6 @@ exports[`EuiSuperSelect props select component is rendered 1`] = `
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: , is selected
</span>
<button
aria-haspopup="listbox"
class="euiSuperSelectControl euiFormControlLayout--1icons"
Expand Down Expand Up @@ -885,12 +827,6 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="emotion-euiScreenReaderOnly"
id="euiSuperSelect__generated-id__screenreaderLabelId"
>
Select an option: Option #2, is selected
</span>
<button
aria-haspopup="listbox"
class="euiSuperSelectControl euiFormControlLayout--1icons"
Expand Down
Loading