diff --git a/packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/MultiSelection.spec.tsx.snap b/packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/MultiSelection.spec.tsx.snap index 4c3a62d324..e067d4a728 100644 --- a/packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/MultiSelection.spec.tsx.snap +++ b/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" diff --git a/packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/SingleSelection.spec.tsx.snap b/packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/SingleSelection.spec.tsx.snap index f5c22b8218..21eff47ec7 100644 --- a/packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/SingleSelection.spec.tsx.snap +++ b/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" diff --git a/packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/StaticSelection.spec.tsx.snap b/packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/StaticSelection.spec.tsx.snap index f933d6aa10..e6188ccc4b 100644 --- a/packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/StaticSelection.spec.tsx.snap +++ b/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" diff --git a/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx b/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx index 1b12725c9c..2399949ceb 100644 --- a/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx +++ b/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(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} /> {memoizedselectedCaptions} diff --git a/packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx b/packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx index 47d64be1a5..6bb58b6187 100644 --- a/packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx +++ b/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 (