Skip to content

Commit 599a47c

Browse files
cee-chencee-chen
committed
[a11y cleanup] Remove unnecessary screen reader text
- it's not being announced on Tab in any case, because it's outside the button - it's only accessible via SR navigation + it also announces weirdly for when values are missing or react nodes - `aria-haspopup="listbox"` already covers describing the button's function as a select/listbox
1 parent bd0800c commit 599a47c

4 files changed

Lines changed: 0 additions & 243 deletions

File tree

‎src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap‎

Lines changed: 0 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,6 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
1818
<div
1919
class="euiFormControlLayout__childrenWrapper"
2020
>
21-
<span
22-
class="emotion-euiScreenReaderOnly"
23-
id="euiSuperSelect__generated-id__screenreaderLabelId"
24-
>
25-
Select an option: , is selected
26-
</span>
2721
<button
2822
aria-haspopup="listbox"
2923
aria-label="aria-label"
@@ -69,12 +63,6 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
6963
<div
7064
class="euiFormControlLayout__childrenWrapper"
7165
>
72-
<span
73-
class="emotion-euiScreenReaderOnly"
74-
id="euiSuperSelect__generated-id__screenreaderLabelId"
75-
>
76-
Select an option: Plain text as a custom option, is selected
77-
</span>
7866
<button
7967
aria-haspopup="listbox"
8068
aria-label="aria-label"
@@ -122,42 +110,6 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
122110
<div
123111
class="euiFormControlLayout__childrenWrapper"
124112
>
125-
<span
126-
class="emotion-euiScreenReaderOnly"
127-
id="euiSuperSelect__generated-id__screenreaderLabelId"
128-
>
129-
Select an option:
130-
<span
131-
class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
132-
>
133-
<span
134-
class="emotion-euiScreenReaderOnly"
135-
>
136-
Palette 1
137-
</span>
138-
<span
139-
aria-hidden="true"
140-
class="euiColorPaletteDisplayFixed__bleedArea"
141-
>
142-
<span
143-
style="background-color:#1fb0b2;width:20%"
144-
/>
145-
<span
146-
style="background-color:#ffdb6d;width:20%"
147-
/>
148-
<span
149-
style="background-color:#ee9191;width:20%"
150-
/>
151-
<span
152-
style="background-color:#ffffff;width:20%"
153-
/>
154-
<span
155-
style="background-color:#888094;width:20%"
156-
/>
157-
</span>
158-
</span>
159-
, is selected
160-
</span>
161113
<button
162114
aria-haspopup="listbox"
163115
aria-label="aria-label"
@@ -233,23 +185,6 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
233185
<div
234186
class="euiFormControlLayout__childrenWrapper"
235187
>
236-
<span
237-
class="emotion-euiScreenReaderOnly"
238-
id="euiSuperSelect__generated-id__screenreaderLabelId"
239-
>
240-
Select an option:
241-
<span
242-
class="emotion-euiScreenReaderOnly"
243-
>
244-
Linear Gradient
245-
</span>
246-
<span
247-
aria-hidden="true"
248-
class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
249-
style="background:linear-gradient(to right, #1fb0b2 0%, #ffdb6d 25%, #ee9191 50%, #ffffff 75%, #888094 100%)"
250-
/>
251-
, is selected
252-
</span>
253188
<button
254189
aria-haspopup="listbox"
255190
aria-label="aria-label"
@@ -306,23 +241,6 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
306241
<div
307242
class="euiFormControlLayout__childrenWrapper"
308243
>
309-
<span
310-
class="emotion-euiScreenReaderOnly"
311-
id="euiSuperSelect__generated-id__screenreaderLabelId"
312-
>
313-
Select an option:
314-
<span
315-
class="emotion-euiScreenReaderOnly"
316-
>
317-
Linear Gradient with stops
318-
</span>
319-
<span
320-
aria-hidden="true"
321-
class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
322-
style="background:linear-gradient(to right, #54B399 0%, #D36086 53%, #9170B8 74%, #F5A700 100%)"
323-
/>
324-
, is selected
325-
</span>
326244
<button
327245
aria-haspopup="listbox"
328246
aria-label="aria-label"
@@ -379,12 +297,6 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
379297
<div
380298
class="euiFormControlLayout__childrenWrapper"
381299
>
382-
<span
383-
class="emotion-euiScreenReaderOnly"
384-
id="euiSuperSelect__generated-id__screenreaderLabelId"
385-
>
386-
Select an option: Palette 1, is selected
387-
</span>
388300
<button
389301
aria-haspopup="listbox"
390302
aria-label="aria-label"
@@ -432,42 +344,6 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
432344
<div
433345
class="euiFormControlLayout__childrenWrapper"
434346
>
435-
<span
436-
class="emotion-euiScreenReaderOnly"
437-
id="euiSuperSelect__generated-id__screenreaderLabelId"
438-
>
439-
Select an option:
440-
<span
441-
class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
442-
>
443-
<span
444-
class="emotion-euiScreenReaderOnly"
445-
>
446-
Palette 1
447-
</span>
448-
<span
449-
aria-hidden="true"
450-
class="euiColorPaletteDisplayFixed__bleedArea"
451-
>
452-
<span
453-
style="background-color: rgb(31, 176, 178); width: 20%;"
454-
/>
455-
<span
456-
style="background-color: rgb(255, 219, 109); width: 20%;"
457-
/>
458-
<span
459-
style="background-color: rgb(238, 145, 145); width: 20%;"
460-
/>
461-
<span
462-
style="background-color: rgb(255, 255, 255); width: 20%;"
463-
/>
464-
<span
465-
style="background-color: rgb(136, 128, 148); width: 20%;"
466-
/>
467-
</span>
468-
</span>
469-
, is selected
470-
</span>
471347
<button
472348
aria-haspopup="listbox"
473349
class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"

‎src/components/form/super_select/__snapshots__/super_select.test.tsx.snap‎

Lines changed: 0 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,6 @@ exports[`EuiSuperSelect is rendered 1`] = `
1818
<div
1919
class="euiFormControlLayout__childrenWrapper"
2020
>
21-
<span
22-
class="emotion-euiScreenReaderOnly"
23-
id="euiSuperSelect__generated-id__screenreaderLabelId"
24-
>
25-
Select an option: , is selected
26-
</span>
2721
<button
2822
aria-haspopup="listbox"
2923
aria-label="aria-label"
@@ -69,12 +63,6 @@ exports[`EuiSuperSelect props compressed is rendered 1`] = `
6963
<div
7064
class="euiFormControlLayout__childrenWrapper"
7165
>
72-
<span
73-
class="emotion-euiScreenReaderOnly"
74-
id="euiSuperSelect__generated-id__screenreaderLabelId"
75-
>
76-
Select an option: , is selected
77-
</span>
7866
<button
7967
aria-haspopup="listbox"
8068
aria-label="aria-label"
@@ -120,12 +108,6 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
120108
<div
121109
class="euiFormControlLayout__childrenWrapper"
122110
>
123-
<span
124-
class="emotion-euiScreenReaderOnly"
125-
id="euiSuperSelect__generated-id__screenreaderLabelId"
126-
>
127-
Select an option: , is selected
128-
</span>
129111
<button
130112
aria-haspopup="listbox"
131113
class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
@@ -183,7 +165,6 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
183165
</p>
184166
<div
185167
aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
186-
aria-labelledby="euiSuperSelect__generated-id__screenreaderLabelId"
187168
class="euiSuperSelect__listbox"
188169
role="listbox"
189170
tabindex="0"
@@ -269,12 +250,6 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
269250
<div
270251
class="euiFormControlLayout__childrenWrapper"
271252
>
272-
<span
273-
class="emotion-euiScreenReaderOnly"
274-
id="euiSuperSelect__generated-id__screenreaderLabelId"
275-
>
276-
Select an option: , is selected
277-
</span>
278253
<button
279254
aria-haspopup="listbox"
280255
aria-label="aria-label"
@@ -325,12 +300,6 @@ exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
325300
<div
326301
class="euiFormControlLayout__childrenWrapper"
327302
>
328-
<span
329-
class="emotion-euiScreenReaderOnly"
330-
id="euiSuperSelect__generated-id__screenreaderLabelId"
331-
>
332-
Select an option: , is selected
333-
</span>
334303
<button
335304
aria-haspopup="listbox"
336305
aria-label="aria-label"
@@ -381,12 +350,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
381350
<div
382351
class="euiFormControlLayout__childrenWrapper"
383352
>
384-
<span
385-
class="emotion-euiScreenReaderOnly"
386-
id="euiSuperSelect__generated-id__screenreaderLabelId"
387-
>
388-
Select an option: Option #1, is selected
389-
</span>
390353
<button
391354
aria-haspopup="listbox"
392355
class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
@@ -447,7 +410,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
447410
<div
448411
aria-activedescendant="1"
449412
aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
450-
aria-labelledby="euiSuperSelect__generated-id__screenreaderLabelId"
451413
class="euiSuperSelect__listbox"
452414
role="listbox"
453415
tabindex="0"
@@ -535,12 +497,6 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
535497
<div
536498
class="euiFormControlLayout__childrenWrapper"
537499
>
538-
<span
539-
class="emotion-euiScreenReaderOnly"
540-
id="euiSuperSelect__generated-id__screenreaderLabelId"
541-
>
542-
Select an option: , is selected
543-
</span>
544500
<button
545501
aria-haspopup="listbox"
546502
class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
@@ -598,7 +554,6 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
598554
</p>
599555
<div
600556
aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
601-
aria-labelledby="euiSuperSelect__generated-id__screenreaderLabelId"
602557
class="euiSuperSelect__listbox"
603558
role="listbox"
604559
tabindex="0"
@@ -684,12 +639,6 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
684639
<div
685640
class="euiFormControlLayout__childrenWrapper"
686641
>
687-
<span
688-
class="emotion-euiScreenReaderOnly"
689-
id="euiSuperSelect__generated-id__screenreaderLabelId"
690-
>
691-
Select an option: Option #2, is selected
692-
</span>
693642
<button
694643
aria-haspopup="listbox"
695644
class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
@@ -750,7 +699,6 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
750699
<div
751700
aria-activedescendant="2"
752701
aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
753-
aria-labelledby="euiSuperSelect__generated-id__screenreaderLabelId"
754702
class="euiSuperSelect__listbox"
755703
role="listbox"
756704
tabindex="0"
@@ -836,12 +784,6 @@ exports[`EuiSuperSelect props select component is rendered 1`] = `
836784
<div
837785
class="euiFormControlLayout__childrenWrapper"
838786
>
839-
<span
840-
class="emotion-euiScreenReaderOnly"
841-
id="euiSuperSelect__generated-id__screenreaderLabelId"
842-
>
843-
Select an option: , is selected
844-
</span>
845787
<button
846788
aria-haspopup="listbox"
847789
class="euiSuperSelectControl euiFormControlLayout--1icons"
@@ -885,12 +827,6 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
885827
<div
886828
class="euiFormControlLayout__childrenWrapper"
887829
>
888-
<span
889-
class="emotion-euiScreenReaderOnly"
890-
id="euiSuperSelect__generated-id__screenreaderLabelId"
891-
>
892-
Select an option: Option #2, is selected
893-
</span>
894830
<button
895831
aria-haspopup="listbox"
896832
class="euiSuperSelectControl euiFormControlLayout--1icons"

0 commit comments

Comments
 (0)