From 3c6f23ced34b37e5fadd8b6b0c78ad3eb29f6496 Mon Sep 17 00:00:00 2001
From: andrewvasilchuk <andrew.d.vasilchuk@gmail.com>
Date: Thu, 7 Jul 2022 00:24:41 +0300
Subject: [PATCH] fix(combobox): associate label with button

---
 .../__snapshots__/index.spec.js.snap          | 56 +++++++++----------
 ui/components/combobox/index.jsx              |  2 +-
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/ui/components/combobox/__tests__/__snapshots__/index.spec.js.snap b/ui/components/combobox/__tests__/__snapshots__/index.spec.js.snap
index cd0523d7e6..01c276df8f 100644
--- a/ui/components/combobox/__tests__/__snapshots__/index.spec.js.snap
+++ b/ui/components/combobox/__tests__/__snapshots__/index.spec.js.snap
@@ -28,9 +28,9 @@ exports[`Combobox with a Dialog dropdown renders a closed, readonly dialog combo
             aria-controls="popover-id-01"
             aria-expanded="false"
             aria-haspopup="dialog"
-            aria-labelledby="combobox-label-id-19 combobox-id-01-selected-value"
+            aria-labelledby="combobox-label-id-19 combobox-id-01"
             className="slds-input_faux slds-combobox__input"
-            id="combobox-id-01-selected-value"
+            id="combobox-id-01"
             onBlur={[Function]}
             onFocus={[Function]}
             type="button"
@@ -126,9 +126,9 @@ exports[`Combobox with a Dialog dropdown renders an open, readonly dialog combob
             aria-controls="popover-id-01"
             aria-expanded="true"
             aria-haspopup="dialog"
-            aria-labelledby="combobox-label-id-20 combobox-id-01-selected-value"
+            aria-labelledby="combobox-label-id-20 combobox-id-01"
             className="slds-input_faux slds-combobox__input"
-            id="combobox-id-01-selected-value"
+            id="combobox-id-01"
             onBlur={[Function]}
             onFocus={[Function]}
             type="button"
@@ -1428,9 +1428,9 @@ exports[`render combobox render autocomplete entity combobox with single selecti
             aria-controls="listbox-id-01"
             aria-expanded="false"
             aria-haspopup="listbox"
-            aria-labelledby="combobox-label-id-13 combobox-id-01-selected-value"
+            aria-labelledby="combobox-label-id-13 combobox-id-01"
             className="slds-input_faux slds-combobox__input slds-combobox__input-value"
-            id="combobox-id-01-selected-value"
+            id="combobox-id-01"
             onBlur={[Function]}
             onFocus={[Function]}
             type="button"
@@ -1604,9 +1604,9 @@ exports[`render combobox render base combobox 1`] = `
             aria-controls="listbox-id-01"
             aria-expanded="true"
             aria-haspopup="listbox"
-            aria-labelledby="combobox-label-id-1 combobox-id-01-selected-value"
+            aria-labelledby="combobox-label-id-1 combobox-id-01"
             className="slds-input_faux slds-combobox__input slds-has-focus slds-combobox__input-value"
-            id="combobox-id-01-selected-value"
+            id="combobox-id-01"
             onBlur={[Function]}
             onFocus={[Function]}
             type="button"
@@ -2084,9 +2084,9 @@ exports[`render combobox render grouped combobox 1`] = `
                     aria-controls="objectswitcher-listbox-id-01"
                     aria-expanded="false"
                     aria-haspopup="listbox"
-                    aria-labelledby="combobox-label-id-15 combobox-id-01-object-switcher-selected-value"
+                    aria-labelledby="combobox-label-id-15 combobox-id-01-object-switcher"
                     className="slds-input_faux slds-combobox__input slds-combobox__input-value"
-                    id="combobox-id-01-object-switcher-selected-value"
+                    id="combobox-id-01-object-switcher"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     type="button"
@@ -2655,9 +2655,9 @@ exports[`render combobox render grouped combobox displaying options based on use
                     aria-controls="objectswitcher-listbox-id-01"
                     aria-expanded="false"
                     aria-haspopup="listbox"
-                    aria-labelledby="combobox-label-id-16 combobox-id-01-object-switcher-selected-value"
+                    aria-labelledby="combobox-label-id-16 combobox-id-01-object-switcher"
                     className="slds-input_faux slds-combobox__input slds-combobox__input-value"
-                    id="combobox-id-01-object-switcher-selected-value"
+                    id="combobox-id-01-object-switcher"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     type="button"
@@ -3242,9 +3242,9 @@ exports[`render combobox render grouped combobox with selections made in collaps
                     aria-controls="objectswitcher-listbox-id-01"
                     aria-expanded="false"
                     aria-haspopup="listbox"
-                    aria-labelledby="combobox-label-id-17 combobox-id-01-object-switcher-selected-value"
+                    aria-labelledby="combobox-label-id-17 combobox-id-01-object-switcher"
                     className="slds-input_faux slds-combobox__input slds-combobox__input-value"
-                    id="combobox-id-01-object-switcher-selected-value"
+                    id="combobox-id-01-object-switcher"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     type="button"
@@ -4220,9 +4220,9 @@ exports[`render combobox render grouped combobox with selections made in expande
                     aria-controls="objectswitcher-listbox-id-01"
                     aria-expanded="false"
                     aria-haspopup="listbox"
-                    aria-labelledby="combobox-label-id-18 combobox-id-01-object-switcher-selected-value"
+                    aria-labelledby="combobox-label-id-18 combobox-id-01-object-switcher"
                     className="slds-input_faux slds-combobox__input slds-combobox__input-value"
-                    id="combobox-id-01-object-switcher-selected-value"
+                    id="combobox-id-01-object-switcher"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     type="button"
@@ -5146,7 +5146,7 @@ exports[`render combobox render multiple selections in a closed combobox 1`] = `
 >
   <label
     className="slds-form-element__label"
-    htmlFor="combobox-id-8"
+    htmlFor="combobox-id-7"
     id="combobox-label-id-3"
   >
     Relate To
@@ -5168,9 +5168,9 @@ exports[`render combobox render multiple selections in a closed combobox 1`] = `
             aria-controls="listbox-id-8"
             aria-expanded="false"
             aria-haspopup="listbox"
-            aria-labelledby="combobox-label-id-3 combobox-id-8-selected-value"
+            aria-labelledby="combobox-label-id-3 combobox-id-7"
             className="slds-input_faux slds-combobox__input slds-combobox__input-value"
-            id="combobox-id-8-selected-value"
+            id="combobox-id-7"
             onBlur={[Function]}
             onFocus={[Function]}
             type="button"
@@ -5536,7 +5536,7 @@ exports[`render combobox render single selection in an open combobox 1`] = `
 >
   <label
     className="slds-form-element__label"
-    htmlFor="combobox-id-5"
+    htmlFor="combobox-id-4"
     id="combobox-label-id-2"
   >
     Relate To
@@ -5559,9 +5559,9 @@ exports[`render combobox render single selection in an open combobox 1`] = `
             aria-controls="listbox-id-6"
             aria-expanded="true"
             aria-haspopup="listbox"
-            aria-labelledby="combobox-label-id-2 combobox-id-5-selected-value"
+            aria-labelledby="combobox-label-id-2 combobox-id-4"
             className="slds-input_faux slds-combobox__input slds-has-focus slds-combobox__input-value"
-            id="combobox-id-5-selected-value"
+            id="combobox-id-4"
             onBlur={[Function]}
             onFocus={[Function]}
             type="button"
@@ -6014,9 +6014,9 @@ exports[`render combobox renders different styles of options in the listbox 1`]
             aria-controls="listbox-id-01"
             aria-expanded="true"
             aria-haspopup="listbox"
-            aria-labelledby="combobox-label-id-5 combobox-id-01-selected-value"
+            aria-labelledby="combobox-label-id-5 combobox-id-01"
             className="slds-input_faux slds-combobox__input slds-has-focus slds-combobox__input-value"
-            id="combobox-id-01-selected-value"
+            id="combobox-id-01"
             onBlur={[Function]}
             onFocus={[Function]}
             type="button"
@@ -6248,9 +6248,9 @@ exports[`render combobox renders different styles of options in the listbox with
             aria-controls="listbox-id-01"
             aria-expanded="true"
             aria-haspopup="listbox"
-            aria-labelledby="combobox-label-id-6 combobox-id-01-selected-value"
+            aria-labelledby="combobox-label-id-6 combobox-id-01"
             className="slds-input_faux slds-combobox__input slds-has-focus slds-combobox__input-value"
-            id="combobox-id-01-selected-value"
+            id="combobox-id-01"
             onBlur={[Function]}
             onFocus={[Function]}
             type="button"
@@ -6760,9 +6760,9 @@ exports[`render combobox renders groups in a listbox 1`] = `
             aria-controls="listbox-id-01"
             aria-expanded="true"
             aria-haspopup="listbox"
-            aria-labelledby="combobox-label-id-4 combobox-id-01-selected-value"
+            aria-labelledby="combobox-label-id-4 combobox-id-01"
             className="slds-input_faux slds-combobox__input slds-has-focus"
-            id="combobox-id-01-selected-value"
+            id="combobox-id-01"
             onBlur={[Function]}
             onFocus={[Function]}
             type="button"
diff --git a/ui/components/combobox/index.jsx b/ui/components/combobox/index.jsx
index 05b946f8fc..ca99e73afc 100644
--- a/ui/components/combobox/index.jsx
+++ b/ui/components/combobox/index.jsx
@@ -168,7 +168,7 @@ const ComboboxInput = ({
       {leftInputIcon && leftInputIcon}
       {selectOnly ? (
         <ComboboxInputFaux
-          id={`${id}-selected-value`}
+          id={id}
           {...{
             hasFocus,
             isDisabled,