[WC-2949]: fix accessibility issue on combobox label

packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/MultiSelection.spec.tsx.snap

@@ -18,7 +18,6 @@ exports[`Combo box (Association) renders combobox widget 1`] = `
           aria-autocomplete="list"
           aria-controls="downshift-0-menu"
           aria-expanded="false"
-          aria-labelledby="comboBox1-label"
           aria-required="true"
           autocomplete="off"
           class="widget-combobox-input"
@@ -129,7 +128,6 @@ exports[`Combo box (Association) toggles combobox menu on: input CLICK(focus) /
           aria-autocomplete="list"
           aria-controls="downshift-2-menu"
           aria-expanded="false"
-          aria-labelledby="comboBox1-label"
           aria-required="true"
           autocomplete="off"
           class="widget-combobox-input"
@@ -240,7 +238,6 @@ exports[`Combo box (Association) toggles combobox menu on: input TOGGLE BUTTON 1
           aria-autocomplete="list"
           aria-controls="downshift-6-menu"
           aria-expanded="false"
-          aria-labelledby="comboBox1-label"
           aria-required="true"
           autocomplete="off"
           class="widget-combobox-input"

packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/SingleSelection.spec.tsx.snap

@@ -18,7 +18,6 @@ exports[`Combo box (Association) renders combobox widget 1`] = `
           aria-autocomplete="list"
           aria-controls="downshift-0-menu"
           aria-expanded="false"
-          aria-labelledby="comboBox1-label"
           aria-required="true"
           autocomplete="off"
           class="widget-combobox-input"

packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/StaticSelection.spec.tsx.snap

@@ -18,7 +18,6 @@ exports[`Combo box (Static values) renders combobox widget 1`] = `
           aria-autocomplete="list"
           aria-controls="downshift-0-menu"
           aria-expanded="false"
-          aria-labelledby="comboBox1-label"
           aria-required="true"
           autocomplete="off"
           class="widget-combobox-input"

packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import { Fragment, KeyboardEvent, ReactElement, createElement, useMemo, useRef } from "react";
 import { ClearButton } from "../../assets/icons";
 import { MultiSelector, SelectionBaseProps } from "../../helpers/types";
-import { getSelectedCaptionsPlaceholder } from "../../helpers/utils";
+import { getInputLabel, getSelectedCaptionsPlaceholder } from "../../helpers/utils";
 import { useDownshiftMultiSelectProps } from "../../hooks/useDownshiftMultiSelectProps";
 import { useLazyLoading } from "../../hooks/useLazyLoading";
 import { ComboboxWrapper } from "../ComboboxWrapper";
@@ -37,6 +37,36 @@ export function MultiSelection({
     const inputRef = useRef<HTMLInputElement>(null);
     const isSelectedItemsBoxStyle = selector.selectedItemsStyle === "boxes";
     const isOptionsSelected = selector.isOptionsSelected();
+    const inputProps = getInputProps({
+        ...getDropdownProps(
+            {
+                preventKeyAction: isOpen
+            },
+            { suppressRefError: true }
+        ),
+        ref: inputRef,
+        onKeyDown: (event: KeyboardEvent) => {
+            if (
+                (event.key === "Backspace" && inputRef.current?.selectionStart === 0) ||
+                (event.key === "ArrowLeft" && isSelectedItemsBoxStyle && inputRef.current?.selectionStart === 0)
+            ) {
+                setActiveIndex(selectedItems.length - 1);
+            }
+            if (event.key === " ") {
+                if (highlightedIndex >= 0) {
+                    toggleSelectedItem(highlightedIndex);
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            }
+        },
+        disabled: selector.readOnly,
+        readOnly: selector.options.filterType === "none",
+        "aria-required": ariaRequired.value
+    });
+
+    const inputLabel = getInputLabel(inputProps.id);
+    const hasLabel = useMemo(() => Boolean(inputLabel), [inputLabel]);
 
     const memoizedselectedCaptions = useMemo(
         () => getSelectedCaptionsPlaceholder(selector, selectedItems),
@@ -106,35 +136,8 @@ export function MultiSelection({
                         })}
                         tabIndex={tabIndex}
                         placeholder=" "
-                        {...getInputProps({
-                            ...getDropdownProps(
-                                {
-                                    preventKeyAction: isOpen
-                                },
-                                { suppressRefError: true }
-                            ),
-                            ref: inputRef,
-                            onKeyDown: (event: KeyboardEvent) => {
-                                if (
-                                    (event.key === "Backspace" && inputRef.current?.selectionStart === 0) ||
-                                    (event.key === "ArrowLeft" &&
-                                        isSelectedItemsBoxStyle &&
-                                        inputRef.current?.selectionStart === 0)
-                                ) {
-                                    setActiveIndex(selectedItems.length - 1);
-                                }
-                                if (event.key === " ") {
-                                    if (highlightedIndex >= 0) {
-                                        toggleSelectedItem(highlightedIndex);
-                                        event.preventDefault();
-                                        event.stopPropagation();
-                                    }
-                                }
-                            },
-                            disabled: selector.readOnly,
-                            readOnly: selector.options.filterType === "none",
-                            "aria-required": ariaRequired.value
-                        })}
+                        {...inputProps}
+                        aria-labelledby={hasLabel ? inputProps["aria-labelledby"] : undefined}
                     />
                     <InputPlaceholder isEmpty={selectedItems.length <= 0}>{memoizedselectedCaptions}</InputPlaceholder>
                 </div>

packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx

@@ -2,6 +2,7 @@ import classNames from "classnames";
 import { Fragment, ReactElement, createElement, useMemo, useRef } from "react";
 import { ClearButton } from "../../assets/icons";
 import { SelectionBaseProps, SingleSelector } from "../../helpers/types";
+import { getInputLabel } from "../../helpers/utils";
 import { useDownshiftSingleSelectProps } from "../../hooks/useDownshiftSingleSelectProps";
 import { useLazyLoading } from "../../hooks/useLazyLoading";
 import { ComboboxWrapper } from "../ComboboxWrapper";
@@ -44,6 +45,7 @@ export function SingleSelection({
 
     const selectedItemCaption = useMemo(
         () => selector.caption.render(selectedItem, "label"),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         [
             selectedItem,
             selector.status,
@@ -54,6 +56,19 @@ export function SingleSelection({
         ]
     );
 
+    const inputProps = getInputProps(
+        {
+            disabled: selector.readOnly,
+            readOnly: selector.options.filterType === "none",
+            ref: inputRef,
+            "aria-required": ariaRequired.value
+        },
+        { suppressRefError: true }
+    );
+
+    const inputLabel = getInputLabel(inputProps.id);
+    const hasLabel = useMemo(() => Boolean(inputLabel), [inputLabel]);
+
     return (
         <Fragment>
             <ComboboxWrapper
@@ -74,16 +89,9 @@ export function SingleSelection({
                             "widget-combobox-input-nofilter": selector.options.filterType === "none"
                         })}
                         tabIndex={tabIndex}
-                        {...getInputProps(
-                            {
-                                disabled: selector.readOnly,
-                                readOnly: selector.options.filterType === "none",
-                                ref: inputRef,
-                                "aria-required": ariaRequired.value
-                            },
-                            { suppressRefError: true }
-                        )}
+                        {...inputProps}
                         placeholder=" "
+                        aria-labelledby={hasLabel ? inputProps["aria-labelledby"] : undefined}
                     />
                     <InputPlaceholder
                         isEmpty={!selector.currentId || !selector.caption.render(selectedItem, "label")}

packages/pluggableWidgets/combobox-web/src/helpers/utils.ts

@@ -149,3 +149,7 @@ function sortSelections(
     }
     return newValueIds;
 }
+
+export function getInputLabel(inputId: string): Element | null {
+    return document.querySelector(`label[for="${inputId}"]`);
+}