From 17e44b6816eda4cdd669ee38841cde7e843ff956 Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Mon, 20 Sep 2021 10:32:13 -0700
Subject: [PATCH] [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
---
 .../color_palette_picker.test.tsx.snap         | 14 +++++++-------
 .../__snapshots__/super_select.test.tsx.snap   | 18 +++++++++---------
 .../super_select_control.test.tsx.snap         | 16 ++++++++--------
 .../form/super_select/super_select_control.tsx |  6 +++---
 4 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
index f1d6766915d..265099f3d19 100644
--- a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
+++ b/src/components/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
index 732e64ac9c5..70e22522b7b 100644
--- 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
index 1d95624e85a..de9fbe98cbc 100644
--- 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
index 3278077753d..0404b75da2b 100644
--- 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}