From eefcefd6f021e9367247a98a29ee37fa9f23818a Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 16 Sep 2021 15:02:19 -0700
Subject: [PATCH 1/5] Fix regenerating screen reader ID

---
 src/components/form/super_select/super_select_control.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/form/super_select/super_select_control.tsx b/src/components/form/super_select/super_select_control.tsx
index 3278077753d..395591a36af 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>

From d014de5c4297c9ed7fc8233e5fddb2e7fe518f4d Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 16 Sep 2021 15:07:43 -0700
Subject: [PATCH 2/5] Fix undefined input ID - falls back to a generated ID if
 passed ID is undefined

---
 src/components/form/super_select/super_select_control.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/form/super_select/super_select_control.tsx b/src/components/form/super_select/super_select_control.tsx
index 395591a36af..63c160b7d51 100644
--- a/src/components/form/super_select/super_select_control.tsx
+++ b/src/components/form/super_select/super_select_control.tsx
@@ -108,13 +108,14 @@ export const EuiSuperSelectControl: <T extends string>(
     side: 'right',
   };
 
+  const inputId = useGeneratedHtmlId({ conditionalId: id });
   const screenReaderId = useGeneratedHtmlId();
 
   return (
     <Fragment>
       <input
         type="hidden"
-        id={id}
+        id={inputId}
         name={name}
         defaultValue={selectDefaultValue}
         value={value}
@@ -145,7 +146,7 @@ export const EuiSuperSelectControl: <T extends string>(
           type="button"
           className={classes}
           aria-haspopup="true"
-          aria-labelledby={`${id} ${screenReaderId}`}
+          aria-labelledby={`${inputId} ${screenReaderId}`}
           {...rest}
         >
           {selectedValue}

From b3fcf69ab850ce6eaf6a65eb44285ceb8827766b Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 16 Sep 2021 15:10:23 -0700
Subject: [PATCH 3/5] Update snapshots to w/ new superselect ID

---
 .../color_palette_picker.test.tsx.snap        | 21 ++++++++++-----
 .../__snapshots__/super_select.test.tsx.snap  | 27 ++++++++++++-------
 .../super_select_control.test.tsx.snap        | 24 +++++++++++------
 3 files changed, 48 insertions(+), 24 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..046190e4103 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
@@ -9,6 +9,7 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value=""
       />
@@ -27,7 +28,7 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -61,6 +62,7 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value="custom"
       />
@@ -79,7 +81,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 generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -115,6 +117,7 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value="paletteFixed"
       />
@@ -157,7 +160,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 generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -215,6 +218,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value="paletteLinear"
       />
@@ -238,7 +242,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 generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -277,6 +281,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value="paletteLinearStops"
       />
@@ -300,7 +305,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 generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -339,6 +344,7 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value="paletteFixed"
       />
@@ -357,7 +363,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 generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -393,6 +399,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value="paletteFixed"
       />
@@ -434,7 +441,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 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..9507ed53d6e 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
@@ -9,6 +9,7 @@ exports[`EuiSuperSelect is rendered 1`] = `
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value=""
       />
@@ -27,7 +28,7 @@ exports[`EuiSuperSelect is rendered 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -61,6 +62,7 @@ exports[`EuiSuperSelect props compressed is rendered 1`] = `
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value=""
       />
@@ -79,7 +81,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 generated-id"
             class="euiSuperSelectControl euiSuperSelectControl--compressed testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -113,6 +115,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value=""
       />
@@ -130,7 +133,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 generated-id"
             class="euiSuperSelectControl euiSuperSelect--isOpen__button"
             data-test-subj="superSelect"
             type="button"
@@ -273,6 +276,7 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value=""
       />
@@ -291,7 +295,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 generated-id"
             class="euiSuperSelectControl euiSuperSelectControl--fullWidth testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -325,6 +329,7 @@ exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value=""
       />
@@ -348,7 +353,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 generated-id"
             class="euiSuperSelectControl euiSuperSelectControl--inGroup testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -387,6 +392,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value="1"
       />
@@ -404,7 +410,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 generated-id"
             class="euiSuperSelectControl euiSuperSelect--isOpen__button"
             data-test-subj="superSelect"
             type="button"
@@ -552,6 +558,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value=""
       />
@@ -569,7 +576,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 generated-id"
             class="euiSuperSelectControl euiSuperSelect--isOpen__button"
             data-test-subj="superSelect"
             type="button"
@@ -712,6 +719,7 @@ exports[`EuiSuperSelect props select component is rendered 1`] = `
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value=""
       />
@@ -729,7 +737,7 @@ exports[`EuiSuperSelect props select component is rendered 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id generated-id"
             class="euiSuperSelectControl"
             type="button"
           />
@@ -762,6 +770,7 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
   >
     <div>
       <input
+        id="generated-id"
         type="hidden"
         value="2"
       />
@@ -779,7 +788,7 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
+            aria-labelledby="generated-id 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..033833f360a 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
@@ -3,6 +3,7 @@
 exports[`EuiSuperSelectControl is rendered 1`] = `
 Array [
   <input
+    id="generated-id"
     type="hidden"
     value=""
   />,
@@ -21,7 +22,7 @@ Array [
       <button
         aria-haspopup="true"
         aria-label="aria-label"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id generated-id"
         class="euiSuperSelectControl testClass1 testClass2"
         data-test-subj="test subject string"
         type="button"
@@ -47,6 +48,7 @@ Array [
 exports[`EuiSuperSelectControl props compressed is rendered 1`] = `
 Array [
   <input
+    id="generated-id"
     type="hidden"
     value=""
   />,
@@ -64,7 +66,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id generated-id"
         class="euiSuperSelectControl euiSuperSelectControl--compressed"
         type="button"
       />
@@ -89,6 +91,7 @@ Array [
 exports[`EuiSuperSelectControl props disabled options are rendered 1`] = `
 Array [
   <input
+    id="generated-id"
     type="hidden"
     value=""
   />,
@@ -106,7 +109,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id generated-id"
         class="euiSuperSelectControl"
         type="button"
       />
@@ -131,6 +134,7 @@ Array [
 exports[`EuiSuperSelectControl props empty value option is rendered 1`] = `
 Array [
   <input
+    id="generated-id"
     type="hidden"
     value=""
   />,
@@ -148,7 +152,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id generated-id"
         class="euiSuperSelectControl"
         type="button"
       />
@@ -173,6 +177,7 @@ Array [
 exports[`EuiSuperSelectControl props fullWidth is rendered 1`] = `
 Array [
   <input
+    id="generated-id"
     type="hidden"
     value=""
   />,
@@ -190,7 +195,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id generated-id"
         class="euiSuperSelectControl euiSuperSelectControl--fullWidth"
         type="button"
       />
@@ -215,6 +220,7 @@ Array [
 exports[`EuiSuperSelectControl props isInvalid is rendered 1`] = `
 Array [
   <input
+    id="generated-id"
     type="hidden"
     value=""
   />,
@@ -232,7 +238,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id generated-id"
         class="euiSuperSelectControl euiSuperSelectControl-isInvalid"
         type="button"
       />
@@ -257,6 +263,7 @@ Array [
 exports[`EuiSuperSelectControl props isLoading is rendered 1`] = `
 Array [
   <input
+    id="generated-id"
     type="hidden"
     value=""
   />,
@@ -274,7 +281,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id generated-id"
         class="euiSuperSelectControl euiSuperSelectControl-isLoading"
         type="button"
       />
@@ -302,6 +309,7 @@ Array [
 exports[`EuiSuperSelectControl props value option is rendered 1`] = `
 Array [
   <input
+    id="generated-id"
     type="hidden"
     value="1"
   />,
@@ -319,7 +327,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="undefined generated-id"
+        aria-labelledby="generated-id generated-id"
         class="euiSuperSelectControl"
         type="button"
       >

From bc396257aa1d721480a36498a5e59d8b2c46e42c Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 20 Sep 2021 09:27:32 -0700
Subject: [PATCH 4/5] [PR feedback] Remove unnecessary input ID/aria-labelledby
 association

---
 src/components/form/super_select/super_select_control.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/form/super_select/super_select_control.tsx b/src/components/form/super_select/super_select_control.tsx
index 63c160b7d51..0404b75da2b 100644
--- a/src/components/form/super_select/super_select_control.tsx
+++ b/src/components/form/super_select/super_select_control.tsx
@@ -108,14 +108,13 @@ export const EuiSuperSelectControl: <T extends string>(
     side: 'right',
   };
 
-  const inputId = useGeneratedHtmlId({ conditionalId: id });
   const screenReaderId = useGeneratedHtmlId();
 
   return (
     <Fragment>
       <input
         type="hidden"
-        id={inputId}
+        id={id}
         name={name}
         defaultValue={selectDefaultValue}
         value={value}
@@ -146,7 +145,7 @@ export const EuiSuperSelectControl: <T extends string>(
           type="button"
           className={classes}
           aria-haspopup="true"
-          aria-labelledby={`${inputId} ${screenReaderId}`}
+          aria-labelledby={screenReaderId}
           {...rest}
         >
           {selectedValue}

From 96e079b0a2a92fff6f69bc18d01d3f05c9789994 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 20 Sep 2021 09:28:14 -0700
Subject: [PATCH 5/5] Update snapshots

---
 .../color_palette_picker.test.tsx.snap        | 21 +++++----------
 .../__snapshots__/super_select.test.tsx.snap  | 27 +++++++------------
 .../super_select_control.test.tsx.snap        | 24 ++++++-----------
 3 files changed, 24 insertions(+), 48 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 046190e4103..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
@@ -9,7 +9,6 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value=""
       />
@@ -28,7 +27,7 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="generated-id generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -62,7 +61,6 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value="custom"
       />
@@ -81,7 +79,7 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="generated-id generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -117,7 +115,6 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value="paletteFixed"
       />
@@ -160,7 +157,7 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="generated-id generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -218,7 +215,6 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value="paletteLinear"
       />
@@ -242,7 +238,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="generated-id generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -281,7 +277,6 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value="paletteLinearStops"
       />
@@ -305,7 +300,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="generated-id generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -344,7 +339,6 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value="paletteFixed"
       />
@@ -363,7 +357,7 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="generated-id generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -399,7 +393,6 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value="paletteFixed"
       />
@@ -441,7 +434,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            aria-labelledby="generated-id 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 9507ed53d6e..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
@@ -9,7 +9,6 @@ exports[`EuiSuperSelect is rendered 1`] = `
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value=""
       />
@@ -28,7 +27,7 @@ exports[`EuiSuperSelect is rendered 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="generated-id generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -62,7 +61,6 @@ exports[`EuiSuperSelect props compressed is rendered 1`] = `
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value=""
       />
@@ -81,7 +79,7 @@ exports[`EuiSuperSelect props compressed is rendered 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="generated-id generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl euiSuperSelectControl--compressed testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -115,7 +113,6 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value=""
       />
@@ -133,7 +130,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            aria-labelledby="generated-id generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl euiSuperSelect--isOpen__button"
             data-test-subj="superSelect"
             type="button"
@@ -276,7 +273,6 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value=""
       />
@@ -295,7 +291,7 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="generated-id generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl euiSuperSelectControl--fullWidth testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -329,7 +325,6 @@ exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value=""
       />
@@ -353,7 +348,7 @@ exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
           <button
             aria-haspopup="true"
             aria-label="aria-label"
-            aria-labelledby="generated-id generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl euiSuperSelectControl--inGroup testClass1 testClass2"
             data-test-subj="test subject string"
             type="button"
@@ -392,7 +387,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value="1"
       />
@@ -410,7 +404,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            aria-labelledby="generated-id generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl euiSuperSelect--isOpen__button"
             data-test-subj="superSelect"
             type="button"
@@ -558,7 +552,6 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value=""
       />
@@ -576,7 +569,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            aria-labelledby="generated-id generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl euiSuperSelect--isOpen__button"
             data-test-subj="superSelect"
             type="button"
@@ -719,7 +712,6 @@ exports[`EuiSuperSelect props select component is rendered 1`] = `
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value=""
       />
@@ -737,7 +729,7 @@ exports[`EuiSuperSelect props select component is rendered 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            aria-labelledby="generated-id generated-id"
+            aria-labelledby="generated-id"
             class="euiSuperSelectControl"
             type="button"
           />
@@ -770,7 +762,6 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
   >
     <div>
       <input
-        id="generated-id"
         type="hidden"
         value="2"
       />
@@ -788,7 +779,7 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            aria-labelledby="generated-id 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 033833f360a..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
@@ -3,7 +3,6 @@
 exports[`EuiSuperSelectControl is rendered 1`] = `
 Array [
   <input
-    id="generated-id"
     type="hidden"
     value=""
   />,
@@ -22,7 +21,7 @@ Array [
       <button
         aria-haspopup="true"
         aria-label="aria-label"
-        aria-labelledby="generated-id generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl testClass1 testClass2"
         data-test-subj="test subject string"
         type="button"
@@ -48,7 +47,6 @@ Array [
 exports[`EuiSuperSelectControl props compressed is rendered 1`] = `
 Array [
   <input
-    id="generated-id"
     type="hidden"
     value=""
   />,
@@ -66,7 +64,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="generated-id generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl euiSuperSelectControl--compressed"
         type="button"
       />
@@ -91,7 +89,6 @@ Array [
 exports[`EuiSuperSelectControl props disabled options are rendered 1`] = `
 Array [
   <input
-    id="generated-id"
     type="hidden"
     value=""
   />,
@@ -109,7 +106,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="generated-id generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl"
         type="button"
       />
@@ -134,7 +131,6 @@ Array [
 exports[`EuiSuperSelectControl props empty value option is rendered 1`] = `
 Array [
   <input
-    id="generated-id"
     type="hidden"
     value=""
   />,
@@ -152,7 +148,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="generated-id generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl"
         type="button"
       />
@@ -177,7 +173,6 @@ Array [
 exports[`EuiSuperSelectControl props fullWidth is rendered 1`] = `
 Array [
   <input
-    id="generated-id"
     type="hidden"
     value=""
   />,
@@ -195,7 +190,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="generated-id generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl euiSuperSelectControl--fullWidth"
         type="button"
       />
@@ -220,7 +215,6 @@ Array [
 exports[`EuiSuperSelectControl props isInvalid is rendered 1`] = `
 Array [
   <input
-    id="generated-id"
     type="hidden"
     value=""
   />,
@@ -238,7 +232,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="generated-id generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl euiSuperSelectControl-isInvalid"
         type="button"
       />
@@ -263,7 +257,6 @@ Array [
 exports[`EuiSuperSelectControl props isLoading is rendered 1`] = `
 Array [
   <input
-    id="generated-id"
     type="hidden"
     value=""
   />,
@@ -281,7 +274,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="generated-id generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl euiSuperSelectControl-isLoading"
         type="button"
       />
@@ -309,7 +302,6 @@ Array [
 exports[`EuiSuperSelectControl props value option is rendered 1`] = `
 Array [
   <input
-    id="generated-id"
     type="hidden"
     value="1"
   />,
@@ -327,7 +319,7 @@ Array [
       </span>
       <button
         aria-haspopup="true"
-        aria-labelledby="generated-id generated-id"
+        aria-labelledby="generated-id"
         class="euiSuperSelectControl"
         type="button"
       >