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

CHANGELOG.md

@@ -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 its ([#5292](https://github.com/elastic/eui/issues/5292))
 - Fixed `EuiErrorBoundary` overflow scrolling by wrapping contents in `EuiCodeBlock` ([#5359](https://github.com/elastic/eui/pull/5359))
 
 ## [`41.0.0`](https://github.com/elastic/eui/tree/v41.0.0)

src-docs/src/views/form_compressed/complex_example.js

@@ -97,6 +97,12 @@ export default () => {
     },
   ];
 
+  const superSelectOptions = [
+    { value: 'option_one', inputDisplay: 'Option one' },
+    { value: 'option_two', inputDisplay: 'Option two' },
+    { value: 'option_three', inputDisplay: 'Option three' },
+  ];
+
   const selectTooltipContent =
     'Otherwise use an EuiToolTip around the label of the form row.';
 
@@ -112,6 +118,7 @@ export default () => {
     granularityToggleButtonsIdSelected,
     setGranularityToggleButtonsIdSelected,
   ] = useState(granularityToggleButtonId__2);
+  const [superSelectValue] = useState(superSelectOptions[0].value);
 
   const onPopoverSliderValueChange = (e) => {
     setPopoverSliderValues(e.target.value);
@@ -241,11 +248,8 @@ export default () => {
 
       <EuiFormRow label="Select one" display="columnCompressed">
         <EuiSuperSelect
-          options={[
-            { value: 'option_one', inputDisplay: 'Option one' },
-            { value: 'option_two', inputDisplay: 'Option two' },
-            { value: 'option_three', inputDisplay: 'Option three' },
-          ]}
+          options={superSelectOptions}
+          valueOfSelected={superSelectValue}
           compressed
         />
       </EuiFormRow>

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

@@ -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"
@@ -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"
@@ -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
@@ -152,12 +150,16 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
                 />
               </span>
             </span>
+            <div
+              class="euiScreenReaderOnly"
+            >
+              Palette 1
+            </div>
             , 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"
@@ -185,6 +187,11 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
                 />
               </span>
             </span>
+            <div
+              class="euiScreenReaderOnly"
+            >
+              Palette 1
+            </div>
           </button>
           <div
             class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
@@ -226,19 +233,23 @@ 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
               class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
               style="background:linear-gradient(to right, #1fb0b2 0%, #ffdb6d 25%, #ee9191 50%, #ffffff 75%, #888094 100%)"
             />
+            <div
+              class="euiScreenReaderOnly"
+            >
+              Linear Gradient
+            </div>
             , 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"
@@ -247,6 +258,11 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
               class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
               style="background:linear-gradient(to right, #1fb0b2 0%, #ffdb6d 25%, #ee9191 50%, #ffffff 75%, #888094 100%)"
             />
+            <div
+              class="euiScreenReaderOnly"
+            >
+              Linear Gradient
+            </div>
           </button>
           <div
             class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
@@ -288,19 +304,23 @@ 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
               class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
               style="background:linear-gradient(to right, #54B399 0%, #D36086 53%, #9170B8 74%, #F5A700 100%)"
             />
+            <div
+              class="euiScreenReaderOnly"
+            >
+              Linear Gradient with stops
+            </div>
             , 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"
@@ -309,6 +329,11 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
               class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
               style="background:linear-gradient(to right, #54B399 0%, #D36086 53%, #9170B8 74%, #F5A700 100%)"
             />
+            <div
+              class="euiScreenReaderOnly"
+            >
+              Linear Gradient with stops
+            </div>
           </button>
           <div
             class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
@@ -350,14 +375,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"
@@ -404,7 +428,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
@@ -430,11 +454,15 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
                 />
               </span>
             </span>
+            <div
+              class="euiScreenReaderOnly"
+            >
+              Palette 1
+            </div>
             , 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"
@@ -462,6 +490,11 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
                 />
               </span>
             </span>
+            <div
+              class="euiScreenReaderOnly"
+            >
+              Palette 1
+            </div>
           </button>
           <div
             class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"

src/components/color_picker/color_palette_picker/color_palette_picker.tsx

@@ -16,6 +16,7 @@ import { ColorStop } from '../color_stops';
 
 import { EuiSuperSelectProps } from '../../form/super_select';
 import { EuiColorPaletteDisplay } from '../color_palette_display';
+import { EuiScreenReaderOnly } from '../../accessibility/screen_reader';
 
 export interface EuiColorPalettePickerPaletteTextProps extends CommonProps {
   /**
@@ -115,14 +116,25 @@ export const EuiColorPalettePicker: FunctionComponent<EuiColorPalettePickerProps
   const getPalette = ({
     type,
     palette,
+    title,
   }:
     | EuiColorPalettePickerPaletteFixedProps
     | EuiColorPalettePickerPaletteGradientProps) => {
     // Working around ExclusiveUnion
     return type === 'gradient' ? (
-      <EuiColorPaletteDisplay type={type} palette={palette} />
+      <React.Fragment>
+        <EuiColorPaletteDisplay type={type} palette={palette} />
+        <EuiScreenReaderOnly>
+          <div>{title}</div>
+        </EuiScreenReaderOnly>
+      </React.Fragment>
     ) : (
-      <EuiColorPaletteDisplay type={type} palette={palette} />
+      <React.Fragment>
+        <EuiColorPaletteDisplay type={type} palette={palette} />
+        <EuiScreenReaderOnly>
+          <div>{title}</div>
+        </EuiScreenReaderOnly>
+      </React.Fragment>
     );
   };