diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index cd65311b3a..cc6de8359f 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -8,7 +8,7 @@ import { TimesIcon } from '../icons/times'; import { TimesCircleIcon } from '../icons/timescircle'; import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils'; import { MultiSelectBase } from './MultiSelectBase'; import { MultiSelectPanel } from './MultiSelectPanel'; @@ -1174,7 +1174,9 @@ export const MultiSelect = React.memo( }, ptm('hiddenInputWrapper') ); - + const inputId = React.useMemo(() => { + return props.inputId ?? UniqueComponentId(); + }, [props.inputId]); const inputProps = mergeProps( { ref: inputRef, @@ -1186,6 +1188,7 @@ export const MultiSelect = React.memo( onKeyDown: onKeyDown, role: 'combobox', 'aria-expanded': overlayVisibleState, + 'aria-controls': `${inputId}-multi-selectbox`, disabled: props.disabled, tabIndex: !props.disabled ? props.tabIndex : -1, value: getLabel(), @@ -1213,6 +1216,7 @@ export const MultiSelect = React.memo( ref={overlayRef} visibleOptions={visibleOptions} {...props} + listId={`${inputId}-multi-selectbox`} onClick={onPanelClick} onOverlayHide={hide} filterValue={filterValue} diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index 4187e0860f..c17b58ff9a 100644 --- a/components/lib/multiselect/MultiSelectPanel.js +++ b/components/lib/multiselect/MultiSelectPanel.js @@ -217,7 +217,8 @@ export const MultiSelectPanel = React.memo( style: options.style, className: classNames(options.className, cx('list', { virtualScrollerProps: props.virtualScrollerOptions })), role: 'listbox', - 'aria-multiselectable': true + 'aria-multiselectable': true, + id: props.listId }, getPTOptions('list') ); @@ -244,7 +245,8 @@ export const MultiSelectPanel = React.memo( { className: cx('list'), role: 'listbox', - 'aria-multiselectable': true + 'aria-multiselectable': true, + id: props.listId }, getPTOptions('list') );