fix: connect combobox input to validation message, set aria-invalid

Author: HedwigJDoets

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

@@ -14,8 +14,8 @@ interface ComboboxWrapperProps extends PropsWithChildren {
     validation?: string;
     isLoading: boolean;
     isMultiselectActive?: boolean;
+    inputId: string;
 }
-
 export const ComboboxWrapper = forwardRef(
     (props: ComboboxWrapperProps, ref: RefObject<HTMLDivElement>): ReactElement => {
         const {
@@ -26,7 +26,8 @@ export const ComboboxWrapper = forwardRef(
             validation,
             children,
             isLoading,
-            isMultiselectActive
+            isMultiselectActive,
+            inputId
         } = props;
         const { id, onClick } = getToggleButtonProps();
 
@@ -56,7 +57,7 @@ export const ComboboxWrapper = forwardRef(
                         </div>
                     )}
                 </div>
-                {validation && <ValidationAlert>{validation}</ValidationAlert>}
+                {validation && <ValidationAlert referenceId={inputId}>{validation}</ValidationAlert>}
             </Fragment>
         );
     }

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

@@ -96,6 +96,7 @@ export function MultiSelection({
                 validation={selector.validation}
                 isLoading={lazyLoading && selector.options.isLoading}
                 isMultiselectActive={selectedItems?.length > 0}
+                inputId={options.inputId}
             >
                 <div
                     className={classNames(
@@ -139,6 +140,8 @@ export function MultiSelection({
                         placeholder=" "
                         {...inputProps}
                         aria-labelledby={hasLabel ? inputProps["aria-labelledby"] : undefined}
+                        aria-describedby={selector.validation ? options.inputId + "-error" : undefined}
+                        aria-invalid={!!selector.validation}
                     />
                     <InputPlaceholder isEmpty={selectedItems.length <= 0}>{memoizedselectedCaptions}</InputPlaceholder>
                 </div>

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

@@ -69,7 +69,8 @@ export function SingleSelection({
         },
         { suppressRefError: true }
     );
-
+    console.log(inputProps);
+    console.log(options);
     return (
         <Fragment>
             <ComboboxWrapper
@@ -79,6 +80,7 @@ export function SingleSelection({
                 getToggleButtonProps={getToggleButtonProps}
                 validation={selector.validation}
                 isLoading={lazyLoading && selector.options.isLoading}
+                inputId={options.inputId}
             >
                 <div
                     className={classNames("widget-combobox-selected-items", {
@@ -93,6 +95,8 @@ export function SingleSelection({
                         {...inputProps}
                         placeholder=" "
                         aria-labelledby={hasLabel ? inputProps["aria-labelledby"] : undefined}
+                        aria-describedby={selector.validation ? options.inputId + "-error" : undefined}
+                        aria-invalid={!!selector.validation}
                     />
                     <InputPlaceholder
                         isEmpty={!selector.currentId || !selector.caption.render(selectedItem, "label")}

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

@@ -5,24 +5,35 @@ export interface AlertProps {
     children?: ReactNode;
     className?: string;
     bootstrapStyle: "default" | "primary" | "success" | "info" | "warning" | "danger";
+    inputElementId?: string;
     role?: string;
 }
 
 export interface ValidationAlertProps {
     children?: ReactNode;
     className?: string;
+    referenceId?: string;
 }
 
 // cloning from https://gitlab.rnd.mendix.com/appdev/appdev/-/blob/master/client/src/widgets/web/helpers/Alert.tsx
-export const ValidationAlert = ({ className, children }: ValidationAlertProps): ReactElement => (
-    <Alert className={classNames("mx-validation-message", className)} bootstrapStyle="danger" role="alert">
+export const ValidationAlert = ({ className, children, referenceId }: ValidationAlertProps): ReactElement => (
+    <Alert
+        className={classNames("mx-validation-message", className)}
+        bootstrapStyle="danger"
+        role="alert"
+        inputElementId={referenceId}
+    >
         {children}
     </Alert>
 );
 
-export const Alert = ({ className, bootstrapStyle, children, role }: AlertProps): ReactNode =>
+export const Alert = ({ className, bootstrapStyle, children, role, inputElementId }: AlertProps): ReactNode =>
     Children.count(children) > 0 ? (
-        <div className={classNames(`alert alert-${bootstrapStyle}`, className)} role={role}>
+        <div
+            className={classNames(`alert alert-${bootstrapStyle}`, className)}
+            role={role}
+            id={inputElementId + "-error"}
+        >
             {children}
         </div>
     ) : null;