Skip to content

Commit 52dfa04

Browse files
HedwigJDoetsgjulivan
authored andcommitted
fix: connect combobox input to validation message, set aria-invalid
1 parent 5486635 commit 52dfa04

File tree

4 files changed

+27
-8
lines changed

4 files changed

+27
-8
lines changed

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ interface ComboboxWrapperProps extends PropsWithChildren {
1414
validation?: string;
1515
isLoading: boolean;
1616
isMultiselectActive?: boolean;
17+
inputId: string;
1718
}
18-
1919
export const ComboboxWrapper = forwardRef(
2020
(props: ComboboxWrapperProps, ref: RefObject<HTMLDivElement>): ReactElement => {
2121
const {
@@ -26,7 +26,8 @@ export const ComboboxWrapper = forwardRef(
2626
validation,
2727
children,
2828
isLoading,
29-
isMultiselectActive
29+
isMultiselectActive,
30+
inputId
3031
} = props;
3132
const { id, onClick } = getToggleButtonProps();
3233

@@ -56,7 +57,7 @@ export const ComboboxWrapper = forwardRef(
5657
</div>
5758
)}
5859
</div>
59-
{validation && <ValidationAlert>{validation}</ValidationAlert>}
60+
{validation && <ValidationAlert referenceId={inputId}>{validation}</ValidationAlert>}
6061
</Fragment>
6162
);
6263
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ export function MultiSelection({
9696
validation={selector.validation}
9797
isLoading={lazyLoading && selector.options.isLoading}
9898
isMultiselectActive={selectedItems?.length > 0}
99+
inputId={options.inputId}
99100
>
100101
<div
101102
className={classNames(
@@ -139,6 +140,8 @@ export function MultiSelection({
139140
placeholder=" "
140141
{...inputProps}
141142
aria-labelledby={hasLabel ? inputProps["aria-labelledby"] : undefined}
143+
aria-describedby={selector.validation ? options.inputId + "-error" : undefined}
144+
aria-invalid={!!selector.validation}
142145
/>
143146
<InputPlaceholder isEmpty={selectedItems.length <= 0}>{memoizedselectedCaptions}</InputPlaceholder>
144147
</div>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@ export function SingleSelection({
6969
},
7070
{ suppressRefError: true }
7171
);
72-
72+
console.log(inputProps);
73+
console.log(options);
7374
return (
7475
<Fragment>
7576
<ComboboxWrapper
@@ -79,6 +80,7 @@ export function SingleSelection({
7980
getToggleButtonProps={getToggleButtonProps}
8081
validation={selector.validation}
8182
isLoading={lazyLoading && selector.options.isLoading}
83+
inputId={options.inputId}
8284
>
8385
<div
8486
className={classNames("widget-combobox-selected-items", {
@@ -93,6 +95,8 @@ export function SingleSelection({
9395
{...inputProps}
9496
placeholder=" "
9597
aria-labelledby={hasLabel ? inputProps["aria-labelledby"] : undefined}
98+
aria-describedby={selector.validation ? options.inputId + "-error" : undefined}
99+
aria-invalid={!!selector.validation}
96100
/>
97101
<InputPlaceholder
98102
isEmpty={!selector.currentId || !selector.caption.render(selectedItem, "label")}

packages/shared/widget-plugin-component-kit/src/Alert.tsx

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,35 @@ export interface AlertProps {
55
children?: ReactNode;
66
className?: string;
77
bootstrapStyle: "default" | "primary" | "success" | "info" | "warning" | "danger";
8+
inputElementId?: string;
89
role?: string;
910
}
1011

1112
export interface ValidationAlertProps {
1213
children?: ReactNode;
1314
className?: string;
15+
referenceId?: string;
1416
}
1517

1618
// cloning from https://gitlab.rnd.mendix.com/appdev/appdev/-/blob/master/client/src/widgets/web/helpers/Alert.tsx
17-
export const ValidationAlert = ({ className, children }: ValidationAlertProps): ReactElement => (
18-
<Alert className={classNames("mx-validation-message", className)} bootstrapStyle="danger" role="alert">
19+
export const ValidationAlert = ({ className, children, referenceId }: ValidationAlertProps): ReactElement => (
20+
<Alert
21+
className={classNames("mx-validation-message", className)}
22+
bootstrapStyle="danger"
23+
role="alert"
24+
inputElementId={referenceId}
25+
>
1926
{children}
2027
</Alert>
2128
);
2229

23-
export const Alert = ({ className, bootstrapStyle, children, role }: AlertProps): ReactNode =>
30+
export const Alert = ({ className, bootstrapStyle, children, role, inputElementId }: AlertProps): ReactNode =>
2431
Children.count(children) > 0 ? (
25-
<div className={classNames(`alert alert-${bootstrapStyle}`, className)} role={role}>
32+
<div
33+
className={classNames(`alert alert-${bootstrapStyle}`, className)}
34+
role={role}
35+
id={inputElementId + "-error"}
36+
>
2637
{children}
2738
</div>
2839
) : null;

0 commit comments

Comments
 (0)