[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 ([#5292](https://github.com/elastic/eui/issues/5292))
+- Fixed an accessibility issue where `EuiColorPalettePicker` was not creating an accessible label for its button ([#5367](https://github.com/elastic/eui/issues/5367))
 - 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,10 @@ exports[`EuiColorPaletteDisplay is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <span
+    class="euiScreenReaderOnly"
+  />
+  <span
+    aria-hidden="true"
     class="euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
@@ -34,9 +38,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 +74,10 @@ exports[`EuiColorPaletteDisplay props size m is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <span
+    class="euiScreenReaderOnly"
+  />
+  <span
+    aria-hidden="true"
     class="euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
@@ -93,6 +106,10 @@ exports[`EuiColorPaletteDisplay props size s is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <span
+    class="euiScreenReaderOnly"
+  />
+  <span
+    aria-hidden="true"
     class="euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
@@ -121,6 +138,10 @@ exports[`EuiColorPaletteDisplay props size xs is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <span
+    class="euiScreenReaderOnly"
+  />
+  <span
+    aria-hidden="true"
     class="euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
@@ -149,6 +170,10 @@ exports[`EuiColorPaletteDisplay props type and palette are rendered with type fi
   data-test-subj="test subject string"
 >
   <span
+    class="euiScreenReaderOnly"
+  />
+  <span
+    aria-hidden="true"
     class="euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
@@ -174,6 +199,10 @@ exports[`EuiColorPaletteDisplay props type and palette are rendered with type fi
   data-test-subj="test subject string"
 >
   <span
+    class="euiScreenReaderOnly"
+  />
+  <span
+    aria-hidden="true"
     class="euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
@@ -196,19 +225,31 @@ 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-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 euiColorPaletteDisplay--sizeSmall"
-  data-test-subj="test subject string"
-  style="background:linear-gradient(to right, #54B399 0%, #D36086 53%, #9170B8 74%, #F5A700 100%)"
-/>
+Array [
+  <span
+    class="euiScreenReaderOnly"
+  />,
+  <span
+    aria-hidden="true"
+    aria-label="aria-label"
+    class="euiColorPaletteDisplay testClass1 testClass2 euiColorPaletteDisplay--sizeSmall"
+    data-test-subj="test subject string"
+    style="background:linear-gradient(to right, #54B399 0%, #D36086 53%, #9170B8 74%, #F5A700 100%)"
+  />,
+]
 `;
 
 exports[`EuiColorPaletteDisplay props type and palette are rendered with type gradient and palette without stops 1`] = `
-<span
-  aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 euiColorPaletteDisplay--sizeSmall"
-  data-test-subj="test subject string"
-  style="background:linear-gradient(to right, #1fb0b2 0%, #ffdb6d 25%, #ee9191 50%, #ffffff 75%, #888094 100%)"
-/>
+Array [
+  <span
+    class="euiScreenReaderOnly"
+  />,
+  <span
+    aria-hidden="true"
+    aria-label="aria-label"
+    class="euiColorPaletteDisplay testClass1 testClass2 euiColorPaletteDisplay--sizeSmall"
+    data-test-subj="test subject string"
+    style="background:linear-gradient(to right, #1fb0b2 0%, #ffdb6d 25%, #ee9191 50%, #ffffff 75%, #888094 100%)"
+  />,
+]
 `;

src/components/color_picker/color_palette_display/color_palette_display.tsx

@@ -34,6 +34,10 @@ export interface EuiColorPaletteDisplayShared {
    * Array of color `strings` or an array of #ColorStop. The stops must be numbers in an ordered range.
    */
   palette: string[] | ColorStop[];
+  /**
+   * Text `string` naming the color palette
+   */
+  title?: string;
 }
 
 interface DisplayGradient extends EuiColorPaletteDisplayGradientProps {
@@ -63,6 +67,7 @@ export const EuiColorPaletteDisplay: FunctionComponent<EuiColorPaletteDisplayPro
   palette,
   className,
   size = 's',
+  title,
   ...rest
 }) => {
   const classes = classnames(
@@ -77,12 +82,14 @@ export const EuiColorPaletteDisplay: FunctionComponent<EuiColorPaletteDisplayPro
         <EuiColorPaletteDisplayFixed
           className={classes}
           palette={palette}
+          title={title}
           {...rest}
         />
       ) : (
         <EuiColorPaletteDisplayGradient
           className={classes}
           palette={palette}
+          title={title}
           {...rest}
         />
       )}

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,15 @@ export const EuiColorPaletteDisplayFixed: FunctionComponent<EuiColorPaletteDispl
 
   return (
     <span {...rest}>
-      <span className="euiColorPaletteDisplayFixed__bleedArea">
+      <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,24 @@ export interface EuiColorPaletteDisplayGradientProps
 
 export const EuiColorPaletteDisplayGradient: FunctionComponent<EuiColorPaletteDisplayGradientProps> = ({
   palette,
+  title,
   style = {},
   ...rest
 }) => {
   const gradient = getLinearGradient(palette);
 
-  return <span style={{ ...style, background: gradient }} {...rest} />;
+  return (
+    <>
+      <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}
+      />
+    </>
+  );
 };