diff --git a/packages/pluggableWidgets/combobox-web/CHANGELOG.md b/packages/pluggableWidgets/combobox-web/CHANGELOG.md index 1a970c9dd4..c8c3386633 100644 --- a/packages/pluggableWidgets/combobox-web/CHANGELOG.md +++ b/packages/pluggableWidgets/combobox-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- We fixed an issue where validation was not connected to combobox, causing issues for screenreaders. + ## [2.6.0] - 2025-09-26 ### Changed diff --git a/packages/pluggableWidgets/combobox-web/src/components/ComboboxWrapper.tsx b/packages/pluggableWidgets/combobox-web/src/components/ComboboxWrapper.tsx index fcb8b380b2..7138d396ba 100644 --- a/packages/pluggableWidgets/combobox-web/src/components/ComboboxWrapper.tsx +++ b/packages/pluggableWidgets/combobox-web/src/components/ComboboxWrapper.tsx @@ -14,8 +14,8 @@ interface ComboboxWrapperProps extends PropsWithChildren { validation?: string; isLoading: boolean; isMultiselectActive?: boolean; + errorId?: string; } - export const ComboboxWrapper = forwardRef( (props: ComboboxWrapperProps, ref: RefObject): ReactElement => { const { @@ -26,7 +26,8 @@ export const ComboboxWrapper = forwardRef( validation, children, isLoading, - isMultiselectActive + isMultiselectActive, + errorId } = props; const { id, onClick } = getToggleButtonProps(); @@ -56,7 +57,7 @@ export const ComboboxWrapper = forwardRef( )} - {validation && {validation}} + {validation && {validation}} ); } diff --git a/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx b/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx index baa56c606d..e16176c1bd 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 { createElement, Fragment, KeyboardEvent, ReactElement, useMemo, useRef } from "react"; import { ClearButton } from "../../assets/icons"; import { MultiSelector, SelectionBaseProps } from "../../helpers/types"; -import { getInputLabel, getSelectedCaptionsPlaceholder } from "../../helpers/utils"; +import { getInputLabel, getSelectedCaptionsPlaceholder, getValidationErrorId } from "../../helpers/utils"; import { useDownshiftMultiSelectProps } from "../../hooks/useDownshiftMultiSelectProps"; import { useLazyLoading } from "../../hooks/useLazyLoading"; import { ComboboxWrapper } from "../ComboboxWrapper"; @@ -38,6 +38,7 @@ export function MultiSelection({ const isSelectedItemsBoxStyle = selector.selectedItemsStyle === "boxes"; const isOptionsSelected = selector.isOptionsSelected(); const inputLabel = getInputLabel(options.inputId); + const errorId = getValidationErrorId(options.inputId); const hasLabel = useMemo(() => Boolean(inputLabel), [inputLabel]); const inputProps = getInputProps({ ...getDropdownProps( @@ -96,6 +97,7 @@ export function MultiSelection({ validation={selector.validation} isLoading={lazyLoading && selector.options.isLoading} isMultiselectActive={selectedItems?.length > 0} + errorId={errorId} >
{memoizedselectedCaptions}
diff --git a/packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx b/packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx index 3e23bee840..e81642d1a2 100644 --- a/packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx +++ b/packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx @@ -2,7 +2,7 @@ import classNames from "classnames"; import { createElement, Fragment, ReactElement, useMemo, useRef } from "react"; import { ClearButton } from "../../assets/icons"; import { SelectionBaseProps, SingleSelector } from "../../helpers/types"; -import { getInputLabel } from "../../helpers/utils"; +import { getInputLabel, getValidationErrorId } from "../../helpers/utils"; import { useDownshiftSingleSelectProps } from "../../hooks/useDownshiftSingleSelectProps"; import { useLazyLoading } from "../../hooks/useLazyLoading"; import { ComboboxWrapper } from "../ComboboxWrapper"; @@ -57,6 +57,7 @@ export function SingleSelection({ ); const inputLabel = getInputLabel(options.inputId); + const errorId = getValidationErrorId(options.inputId); const hasLabel = useMemo(() => Boolean(inputLabel), [inputLabel]); const inputProps = getInputProps( @@ -69,7 +70,6 @@ export function SingleSelection({ }, { suppressRefError: true } ); - return (
( - +export const ValidationAlert = ({ className, children, id }: ValidationAlertProps): ReactElement => ( + {children} ); -export const Alert = ({ className, bootstrapStyle, children, role }: AlertProps): ReactNode => +export const Alert = ({ className, bootstrapStyle, children, role, id }: AlertProps): ReactNode => Children.count(children) > 0 ? ( -
+
{children}
) : null;