fix: add validation error ID to CheckboxSelection and RadioSelection

Author: yordan-st

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

@@ -1,6 +1,7 @@
 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";
@@ -20,6 +21,7 @@ export function CheckboxSelection({
     const name = groupName?.value ?? inputId;
 
     const validation = selector.validation;
+    const errorId = getValidationErrorId(inputId);
 
     const handleChange = (optionId: string, checked: boolean): void => {
         if (!isReadOnly) {
@@ -74,7 +76,7 @@ export function CheckboxSelection({
                 );
             })}
             {options.length === 0 && <Placeholder noOptionsText={noOptionsText} />}
-            {validation && <ValidationAlert>{validation}</ValidationAlert>}
+            {validation && <ValidationAlert referenceId={errorId}>{validation}</ValidationAlert>}
         </div>
     );
 }

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

@@ -1,6 +1,7 @@
 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";
@@ -26,6 +27,7 @@ export function RadioSelection({
     const name = groupName?.value ?? inputId;
 
     const validation = selector.validation;
+    const errorId = getValidationErrorId(inputId);
 
     const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
         if (isReadOnly) {
@@ -92,7 +94,7 @@ export function RadioSelection({
                 );
             })}
             {options.length === 0 && <Placeholder noOptionsText={noOptionsText} />}
-            {validation && <ValidationAlert>{validation}</ValidationAlert>}
+            {validation && <ValidationAlert referenceId={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;
+}