[WC-3114] CheckboxRadio: Validation alert addition

packages/pluggableWidgets/checkbox-radio-selection-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We added a missing validation alert.
+
 ## [1.0.0] - 2025-08-25
 
 ### Added

packages/pluggableWidgets/checkbox-radio-selection-web/src/components/CheckboxSelection/CheckboxSelection.tsx

@@ -1,7 +1,9 @@
 import classNames from "classnames";
 import { createElement, MouseEvent, ReactElement } from "react";
 import { MultiSelector, SelectionBaseProps } from "../../helpers/types";
+import { getValidationErrorId } from "../../helpers/utils";
 import { CaptionContent } from "../CaptionContent";
+import { ValidationAlert } from "@mendix/widget-plugin-component-kit/Alert";
 import { Placeholder } from "../Placeholder";
 
 export function CheckboxSelection({
@@ -18,13 +20,18 @@ export function CheckboxSelection({
     const isReadOnly = selector.readOnly;
     const name = groupName?.value ?? inputId;
 
+    const validation = selector.validation;
+    const errorId = getValidationErrorId(inputId);
+
     const handleChange = (optionId: string, checked: boolean): void => {
         if (!isReadOnly) {
             const newSelection = checked ? [...currentIds, optionId] : currentIds.filter(id => id !== optionId);
             selector.setValue(newSelection);
         }
     };
 
+    const isSingleCheckbox = options.length === 1;
+
     return (
         <div
             className={classNames("widget-checkbox-radio-selection-list", {
@@ -34,6 +41,8 @@ export function CheckboxSelection({
             role="group"
             aria-labelledby={`${inputId}-label`}
             aria-required={ariaRequired?.value}
+            aria-describedby={!isSingleCheckbox && selector.validation ? errorId : undefined}
+            aria-invalid={!isSingleCheckbox && selector.validation ? true : undefined}
         >
             {options.map((optionId, index) => {
                 const isSelected = currentIds.includes(optionId);
@@ -55,6 +64,8 @@ export function CheckboxSelection({
                             disabled={isReadOnly}
                             tabIndex={tabIndex}
                             onChange={e => handleChange(optionId, e.target.checked)}
+                            aria-describedby={isSingleCheckbox && selector.validation ? errorId : undefined}
+                            aria-invalid={isSingleCheckbox && selector.validation ? true : undefined}
                         />
                         <CaptionContent
                             onClick={(e: MouseEvent<HTMLDivElement>) => {
@@ -71,6 +82,7 @@ export function CheckboxSelection({
                 );
             })}
             {options.length === 0 && <Placeholder noOptionsText={noOptionsText} />}
+            {validation && <ValidationAlert id={errorId}>{validation}</ValidationAlert>}
         </div>
     );
 }

packages/pluggableWidgets/checkbox-radio-selection-web/src/components/RadioSelection/RadioSelection.tsx

@@ -1,7 +1,9 @@
 import classNames from "classnames";
 import { ChangeEvent, createElement, MouseEvent, ReactElement } from "react";
 import { SelectionBaseProps, SingleSelector } from "../../helpers/types";
+import { getValidationErrorId } from "../../helpers/utils";
 import { CaptionContent } from "../CaptionContent";
+import { ValidationAlert } from "@mendix/widget-plugin-component-kit/Alert";
 import { Placeholder } from "../Placeholder";
 import { If } from "@mendix/widget-plugin-component-kit/If";
 
@@ -24,6 +26,9 @@ export function RadioSelection({
     const isReadOnly = selector.readOnly;
     const name = groupName?.value ?? inputId;
 
+    const validation = selector.validation;
+    const errorId = getValidationErrorId(inputId);
+
     const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
         if (isReadOnly) {
             return;
@@ -45,6 +50,8 @@ export function RadioSelection({
             role={asSingleCheckbox ? "group" : "radiogroup"}
             aria-labelledby={`${inputId}-label`}
             aria-required={ariaRequired?.value}
+            aria-describedby={!asSingleCheckbox && selector.validation ? errorId : undefined}
+            aria-invalid={!asSingleCheckbox && selector.validation ? true : undefined}
         >
             {options.map((optionId, index) => {
                 const isSelected = currentId === optionId;
@@ -70,6 +77,8 @@ export function RadioSelection({
                                 disabled={isReadOnly}
                                 tabIndex={tabIndex}
                                 onChange={handleChange}
+                                aria-describedby={asSingleCheckbox && selector.validation ? errorId : undefined}
+                                aria-invalid={asSingleCheckbox && selector.validation ? true : undefined}
                             />
                         </If>
                         <CaptionContent
@@ -89,6 +98,7 @@ export function RadioSelection({
                 );
             })}
             {options.length === 0 && <Placeholder noOptionsText={noOptionsText} />}
+            {validation && <ValidationAlert id={errorId}>{validation}</ValidationAlert>}
         </div>
     );
 }

packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/utils.ts

@@ -55,3 +55,7 @@ export function getCustomCaption(values: CheckboxRadioSelectionPreviewProps): st
     }
     return emptyStringFormat;
 }
+
+export function getValidationErrorId(inputId?: string): string | undefined {
+    return inputId ? inputId + "-validation-message" : undefined;
+}