feat(combobox-web): integrate label check in MultiSelection and SingleSelection

Author: samuelreichert

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

@@ -4,6 +4,7 @@ import { ClearButton } from "../../assets/icons";
 import { MultiSelector, SelectionBaseProps } from "../../helpers/types";
 import { getSelectedCaptionsPlaceholder } from "../../helpers/utils";
 import { useDownshiftMultiSelectProps } from "../../hooks/useDownshiftMultiSelectProps";
+import { useHasLabel } from "../../hooks/useHasLabel";
 import { useLazyLoading } from "../../hooks/useLazyLoading";
 import { ComboboxWrapper } from "../ComboboxWrapper";
 import { InputPlaceholder } from "../Placeholder";
@@ -37,6 +38,34 @@ 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 hasLabel = useHasLabel(inputProps.id);
 
     const memoizedselectedCaptions = useMemo(
         () => getSelectedCaptionsPlaceholder(selector, selectedItems),
@@ -106,35 +135,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

@@ -3,6 +3,7 @@ import { Fragment, ReactElement, createElement, useMemo, useRef } from "react";
 import { ClearButton } from "../../assets/icons";
 import { SelectionBaseProps, SingleSelector } from "../../helpers/types";
 import { useDownshiftSingleSelectProps } from "../../hooks/useDownshiftSingleSelectProps";
+import { useHasLabel } from "../../hooks/useHasLabel";
 import { useLazyLoading } from "../../hooks/useLazyLoading";
 import { ComboboxWrapper } from "../ComboboxWrapper";
 import { InputPlaceholder } from "../Placeholder";
@@ -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,17 @@ export function SingleSelection({
         ]
     );
 
+    const inputProps = getInputProps(
+        {
+            disabled: selector.readOnly,
+            readOnly: selector.options.filterType === "none",
+            ref: inputRef,
+            "aria-required": ariaRequired.value
+        },
+        { suppressRefError: true }
+    );
+    const hasLabel = useHasLabel(inputProps.id);
+
     return (
         <Fragment>
             <ComboboxWrapper
@@ -74,16 +87,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")}