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

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 - 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 listbox ([#5364](https://github.com/elastic/eui/pull/5364))
+- Fixed an accessibility issue where `EuiColorPalettePicker` was not creating an accessible label for its button ([#5364](https://github.com/elastic/eui/pull/5364))
 - 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_display/__snapshots__/color_palette_display.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`EuiColorPaletteDisplay is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <span
+    aria-hidden="true"
     class="euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
@@ -34,9 +35,14 @@ exports[`EuiColorPaletteDisplay props HTML attributes accepts span attributes 1`
   class="euiColorPaletteDisplay testClass1 testClass2 euiColorPaletteDisplay--sizeSmall"
   data-test-subj="test subject string"
   id="id"
-  title="title"
 >
   <span
+    class="euiScreenReaderOnly"
+  >
+    title
+  </span>
+  <span
+    aria-hidden="true"
     class="euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
@@ -65,6 +71,7 @@ exports[`EuiColorPaletteDisplay props size m is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <span
+    aria-hidden="true"
     class="euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
@@ -93,6 +100,7 @@ exports[`EuiColorPaletteDisplay props size s is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <span
+    aria-hidden="true"
     class="euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
@@ -121,6 +129,7 @@ exports[`EuiColorPaletteDisplay props size xs is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <span
+    aria-hidden="true"
     class="euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
@@ -149,6 +158,7 @@ exports[`EuiColorPaletteDisplay props type and palette are rendered with type fi
   data-test-subj="test subject string"
 >
   <span
+    aria-hidden="true"
     class="euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
@@ -174,6 +184,7 @@ exports[`EuiColorPaletteDisplay props type and palette are rendered with type fi
   data-test-subj="test subject string"
 >
   <span
+    aria-hidden="true"
     class="euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
@@ -197,6 +208,7 @@ exports[`EuiColorPaletteDisplay props type and palette are rendered with type fi
 
 exports[`EuiColorPaletteDisplay props type and palette are rendered with type gradient and palette with stops 1`] = `
 <span
+  aria-hidden="true"
   aria-label="aria-label"
   class="euiColorPaletteDisplay testClass1 testClass2 euiColorPaletteDisplay--sizeSmall"
   data-test-subj="test subject string"
@@ -206,6 +218,7 @@ exports[`EuiColorPaletteDisplay props type and palette are rendered with type gr
 
 exports[`EuiColorPaletteDisplay props type and palette are rendered with type gradient and palette without stops 1`] = `
 <span
+  aria-hidden="true"
   aria-label="aria-label"
   class="euiColorPaletteDisplay testClass1 testClass2 euiColorPaletteDisplay--sizeSmall"
   data-test-subj="test subject string"

src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx

@@ -9,6 +9,7 @@
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import { CommonProps } from '../../common';
 import { getFixedLinearGradient } from '../utils';
+import { EuiScreenReaderOnly } from '../../accessibility/screen_reader';
 import { EuiColorPaletteDisplayShared } from './color_palette_display';
 
 export interface EuiColorPaletteDisplayFixedProps
@@ -23,6 +24,7 @@ interface paletteItem {
 
 export const EuiColorPaletteDisplayFixed: FunctionComponent<EuiColorPaletteDisplayFixedProps> = ({
   palette,
+  title,
   ...rest
 }) => {
   const fixedGradient = getFixedLinearGradient(palette);
@@ -36,7 +38,17 @@ export const EuiColorPaletteDisplayFixed: FunctionComponent<EuiColorPaletteDispl
 
   return (
     <span {...rest}>
-      <span className="euiColorPaletteDisplayFixed__bleedArea">
+      {title && (
+        <EuiScreenReaderOnly>
+          <span>{title}</span>
+        </EuiScreenReaderOnly>
+      )}
+      <span
+        // aria-hidden="true" is to ensure color blocks are ignored by screen readers,
+        // and the only accessible text for options is the EuiScreenReaderOnly {title}
+        aria-hidden="true"
+        className="euiColorPaletteDisplayFixed__bleedArea"
+      >
         {paletteStops}
       </span>
     </span>

src/components/color_picker/color_palette_display/color_palette_display_gradient.tsx

@@ -9,6 +9,7 @@
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import { CommonProps } from '../../common';
 import { getLinearGradient } from '../utils';
+import { EuiScreenReaderOnly } from '../../accessibility/screen_reader';
 import { EuiColorPaletteDisplayShared } from './color_palette_display';
 
 export interface EuiColorPaletteDisplayGradientProps
@@ -18,10 +19,26 @@ export interface EuiColorPaletteDisplayGradientProps
 
 export const EuiColorPaletteDisplayGradient: FunctionComponent<EuiColorPaletteDisplayGradientProps> = ({
   palette,
+  title,
   style = {},
   ...rest
 }) => {
   const gradient = getLinearGradient(palette);
 
-  return <span style={{ ...style, background: gradient }} {...rest} />;
+  return (
+    <>
+      {title && (
+        <EuiScreenReaderOnly>
+          <span>{title}</span>
+        </EuiScreenReaderOnly>
+      )}
+      <span
+        // aria-hidden="true" is to ensure color blocks are ignored by screen readers,
+        // and the only accessible text for options is the EuiScreenReaderOnly {title}
+        aria-hidden="true"
+        style={{ ...style, background: gradient }}
+        {...rest}
+      />
+    </>
+  );
 };