[EuiSuperSelect] Fix regenerating and missing IDs (#5197)

* Fix regenerating screen reader ID * Fix undefined input ID - falls back to a generated ID if passed ID is undefined * Update snapshots to w/ new superselect ID * [PR feedback] Remove unnecessary input ID/aria-labelledby association * Update snapshots
elastic · Sep 20, 2021 · 17e44b6 · 17e44b6
1 parent 571ebc4
commit 17e44b6
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 27 deletions.
diff --git a/...onents/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/...onents/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -79,7 +79,7 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -157,7 +157,7 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -238,7 +238,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -300,7 +300,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -357,7 +357,7 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -434,7 +434,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl euiSuperSelect--isOpen__button"
             data-test-subj="colorPalettePicker"
             type="button"

diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`EuiSuperSelect is rendered 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -79,7 +79,7 @@ exports[`EuiSuperSelect props compressed is rendered 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl euiSuperSelectControl--compressed testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -130,7 +130,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl euiSuperSelect--isOpen__button"
             data-test-subj="superSelect"
             type="button"
@@ -291,7 +291,7 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl euiSuperSelectControl--fullWidth testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -348,7 +348,7 @@ exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl euiSuperSelectControl--inGroup testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -404,7 +404,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl euiSuperSelect--isOpen__button"
             data-test-subj="superSelect"
             type="button"
@@ -569,7 +569,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl euiSuperSelect--isOpen__button"
             data-test-subj="superSelect"
             type="button"
@@ -729,7 +729,7 @@ exports[`EuiSuperSelect props select component is rendered 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl"
             type="button"
           />
@@ -779,7 +779,7 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl"
             type="button"
           >

diff --git a/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
@@ -21,7 +21,7 @@ Array [
       <button
         aria-haspopup="true"
         aria-label="aria-label"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl testClass1 testClass2"
         data-test-subj="test subject string"
         type="button"
@@ -64,7 +64,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl euiSuperSelectControl--compressed"
         type="button"
       />
@@ -106,7 +106,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl"
         type="button"
       />
@@ -148,7 +148,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl"
         type="button"
       />
@@ -190,7 +190,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl euiSuperSelectControl--fullWidth"
         type="button"
       />
@@ -232,7 +232,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl euiSuperSelectControl-isInvalid"
         type="button"
       />
@@ -274,7 +274,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl euiSuperSelectControl-isLoading"
         type="button"
       />
@@ -319,7 +319,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl"
         type="button"
       >

diff --git a/src/components/form/super_select/super_select_control.tsx b/src/components/form/super_select/super_select_control.tsx
@@ -17,7 +17,7 @@ import classNames from 'classnames';
 import { CommonProps } from '../../common';
 
 import { EuiScreenReaderOnly } from '../../accessibility';
-import { htmlIdGenerator } from '../../../services/accessibility';
+import { useGeneratedHtmlId } from '../../../services/accessibility';
 import {
   EuiFormControlLayout,
   EuiFormControlLayoutProps,
@@ -108,7 +108,7 @@ export const EuiSuperSelectControl: <T extends string>(
     side: 'right',
   };
 
-  const screenReaderId = htmlIdGenerator()();
+  const screenReaderId = useGeneratedHtmlId();
 
   return (
     <Fragment>
@@ -145,7 +145,7 @@ export const EuiSuperSelectControl: <T extends string>(
           type="button"
           className={classes}
           aria-haspopup="true"
-          aria-labelledby={`${id} ${screenReaderId}`}
+          aria-labelledby={screenReaderId}
           {...rest}
         >
           {selectedValue}