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

packages/pluggableWidgets/combobox-web/src/Combobox.tsx

@@ -25,6 +25,7 @@ export default function Combobox(props: ComboboxContainerProps): ReactElement {
         noOptionsText: props.noOptionsText?.value,
         readOnlyStyle: props.readOnlyStyle,
         ariaRequired: props.ariaRequired,
+        ariaLabel: props.ariaLabel?.value,
         a11yConfig: {
             ariaLabels: {
                 clearSelection: props.clearButtonAriaLabel?.value ?? "",

packages/pluggableWidgets/combobox-web/src/Combobox.xml

@@ -339,6 +339,14 @@
                 </property>
             </propertyGroup>
             <propertyGroup caption="Aria labels">
+                <property key="ariaLabel" type="textTemplate" required="false">
+                    <caption>Aria label</caption>
+                    <description>Used to describe the combo box.</description>
+                    <translations>
+                        <translation lang="en_US">Combo box</translation>
+                        <translation lang="nl_NL">Keuzelijst</translation>
+                    </translations>
+                </property>
                 <property key="clearButtonAriaLabel" type="textTemplate" required="false">
                     <caption>Clear selection button</caption>
                     <description>Used to clear all selected values.</description>

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 inputLabel = getInputLabel(options.inputId);
+    const hasLabel = useMemo(() => Boolean(inputLabel), [inputLabel]);
+    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,
+        "aria-label": !hasLabel && options.ariaLabel ? options.ariaLabel : undefined
+    });
 
     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,20 @@ export function SingleSelection({
         ]
     );
 
+    const inputLabel = getInputLabel(options.inputId);
+    const hasLabel = useMemo(() => Boolean(inputLabel), [inputLabel]);
+
+    const inputProps = getInputProps(
+        {
+            disabled: selector.readOnly,
+            readOnly: selector.options.filterType === "none",
+            ref: inputRef,
+            "aria-required": ariaRequired.value,
+            "aria-label": !hasLabel && options.ariaLabel ? options.ariaLabel : undefined
+        },
+        { suppressRefError: true }
+    );
+
     return (
         <Fragment>
             <ComboboxWrapper
@@ -74,16 +90,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/types.ts

@@ -100,6 +100,7 @@ export interface SelectionBaseProps<Selector> {
     menuFooterContent?: ReactNode;
     tabIndex: number;
     ariaRequired: DynamicValue<boolean>;
+    ariaLabel?: string;
     a11yConfig: {
         ariaLabels: {
             clearSelection: string;

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}"]`);
+}

packages/pluggableWidgets/combobox-web/typings/ComboboxProps.d.ts

@@ -90,6 +90,7 @@ export interface ComboboxContainerProps {
     onEnterEvent?: ActionValue;
     onLeaveEvent?: ActionValue;
     ariaRequired: DynamicValue<boolean>;
+    ariaLabel?: DynamicValue<string>;
     clearButtonAriaLabel?: DynamicValue<string>;
     removeValueAriaLabel?: DynamicValue<string>;
     a11ySelectedValue?: DynamicValue<string>;
@@ -145,6 +146,7 @@ export interface ComboboxPreviewProps {
     onEnterEvent: {} | null;
     onLeaveEvent: {} | null;
     ariaRequired: string;
+    ariaLabel: string;
     clearButtonAriaLabel: string;
     removeValueAriaLabel: string;
     a11ySelectedValue: string;