feat(combobox-web): add ariaLabel support for MultiSelection, and SingleSelection

Author: samuelreichert

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/components/MultiSelection/MultiSelection.tsx

@@ -37,6 +37,8 @@ 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(
             {
@@ -62,12 +64,10 @@ export function MultiSelection({
         },
         disabled: selector.readOnly,
         readOnly: selector.options.filterType === "none",
-        "aria-required": ariaRequired.value
+        "aria-required": ariaRequired.value,
+        "aria-label": !hasLabel && options.ariaLabel ? options.ariaLabel : undefined
     });
 
-    const inputLabel = getInputLabel(inputProps.id);
-    const hasLabel = useMemo(() => Boolean(inputLabel), [inputLabel]);
-
     const memoizedselectedCaptions = useMemo(
         () => getSelectedCaptionsPlaceholder(selector, selectedItems),
         [selector, selectedItems]

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

@@ -56,19 +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-required": ariaRequired.value,
+            "aria-label": !hasLabel && options.ariaLabel ? options.ariaLabel : undefined
         },
         { suppressRefError: true }
     );
 
-    const inputLabel = getInputLabel(inputProps.id);
-    const hasLabel = useMemo(() => Boolean(inputLabel), [inputLabel]);
-
     return (
         <Fragment>
             <ComboboxWrapper

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;