fix: update arialabel and wrapper props

gjulivan · gjulivan · commit 38656973d032 · 2025-10-17T17:19:28.000+02:00
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/CHANGELOG.md b/packages/pluggableWidgets/checkbox-radio-selection-web/CHANGELOG.md
@@ -14,7 +14,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 
 - The Caption property now appears below Entity.
-- The Caption property is now only visible if Custom content is set to 'No'.
 - Moved the Group name attribute to the General tab in the General property group.
 
 ## [1.0.0] - 2025-08-25
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorConfig.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorConfig.ts
@@ -133,22 +133,6 @@ export function getProperties(
         });
     }
 
-    if (values.optionsSourceCustomContentType === "yes") {
-        if (values.source === "context" && values.optionsSourceType === "association") {
-            hidePropertiesIn(defaultProperties, values, [
-                "optionsSourceAssociationCaptionType",
-                "optionsSourceAssociationCaptionAttribute",
-                "optionsSourceAssociationCaptionExpression"
-            ]);
-        } else if (values.source === "database") {
-            hidePropertiesIn(defaultProperties, values, [
-                "optionsSourceDatabaseCaptionType",
-                "optionsSourceDatabaseCaptionAttribute",
-                "optionsSourceDatabaseCaptionExpression"
-            ]);
-        }
-    }
-
     return defaultProperties;
 }
 
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorPreview.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorPreview.tsx
@@ -22,6 +22,7 @@ export const preview = (props: CheckboxRadioSelectionPreviewProps): ReactElement
         labelId: `${id}-label`,
         readOnlyStyle: props.readOnlyStyle,
         ariaRequired: dynamic(false),
+        ariaLabel: dynamic(""),
         groupName: dynamic(`${id}-group`),
         noOptionsText: "No options available"
     };
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.tsx
@@ -19,6 +19,7 @@ export default function CheckboxRadioSelection(props: CheckboxRadioSelectionCont
         readOnlyStyle: props.readOnlyStyle,
         ariaRequired: props.ariaRequired,
         groupName: props.groupName,
+        ariaLabel: props.ariaLabel,
         noOptionsText: props.noOptionsText?.value ?? "No options available"
     };
 
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.xml b/packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.xml
@@ -276,7 +276,7 @@
                     <description />
                     <returnType type="Boolean" />
                 </property>
-                <property key="ariaLabel" type="string" defaultValue="" required="false">
+                <property key="ariaLabel" type="textTemplate" required="false">
                     <caption>Aria label</caption>
                     <description />
                 </property>
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/__tests__/CheckboxRadioSelection.spec.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/__tests__/CheckboxRadioSelection.spec.tsx
@@ -68,7 +68,7 @@ describe("CheckboxRadioSelection", () => {
         customEditabilityExpression: { status: "available", value: false } as any,
         readOnlyStyle: "bordered" as const,
         ariaRequired: { status: "available", value: false } as any,
-        ariaLabel: "",
+        ariaLabel: { status: "available", value: "" } as any,
         controlType: "checkbox" as const
     };
 
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/CheckboxSelection/CheckboxSelection.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/CheckboxSelection/CheckboxSelection.tsx
@@ -2,6 +2,7 @@ import classNames from "classnames";
 import { MouseEvent, ReactElement } from "react";
 import { MultiSelector, SelectionBaseProps } from "../../helpers/types";
 import { getValidationErrorId } from "../../helpers/utils";
+import { useWrapperProps } from "../../hooks/useWrapperProps";
 import { CaptionContent } from "../CaptionContent";
 import { ValidationAlert } from "@mendix/widget-plugin-component-kit/Alert";
 import { Placeholder } from "../Placeholder";
@@ -11,6 +12,7 @@ export function CheckboxSelection({
     tabIndex = 0,
     inputId,
     ariaRequired,
+    ariaLabel,
     readOnlyStyle,
     groupName,
     noOptionsText
@@ -34,15 +36,14 @@ export function CheckboxSelection({
 
     return (
         <div
-            className={classNames("widget-checkbox-radio-selection-list", {
-                "widget-checkbox-radio-selection-readonly": isReadOnly,
-                [`widget-checkbox-radio-selection-readonly-${readOnlyStyle}`]: isReadOnly
+            {...useWrapperProps({
+                inputId,
+                isReadOnly,
+                isCheckbox: true,
+                readOnlyStyle,
+                ariaRequired,
+                ariaLabel
             })}
-            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);
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/RadioSelection/RadioSelection.tsx b/packages/pluggableWidgets/checkbox-radio-selection-web/src/components/RadioSelection/RadioSelection.tsx
@@ -1,17 +1,19 @@
+import { If } from "@mendix/widget-plugin-component-kit/If";
 import classNames from "classnames";
 import { ChangeEvent, MouseEvent, ReactElement } from "react";
 import { SelectionBaseProps, SingleSelector } from "../../helpers/types";
 import { getValidationErrorId } from "../../helpers/utils";
+import { useWrapperProps } from "../../hooks/useWrapperProps";
 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";
 
 export function RadioSelection({
     selector,
     tabIndex = 0,
     inputId,
     ariaRequired,
+    ariaLabel,
     readOnlyStyle,
     groupName,
     noOptionsText
@@ -43,15 +45,14 @@ export function RadioSelection({
 
     return (
         <div
-            className={classNames("widget-checkbox-radio-selection-list", {
-                "widget-checkbox-radio-selection-readonly": isReadOnly,
-                [`widget-checkbox-radio-selection-readonly-${readOnlyStyle}`]: isReadOnly
+            {...useWrapperProps({
+                inputId,
+                isReadOnly,
+                isCheckbox: asSingleCheckbox,
+                readOnlyStyle,
+                ariaRequired,
+                ariaLabel
             })}
-            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;
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/types.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/types.ts
@@ -84,6 +84,7 @@ export interface SelectionBaseProps<Selector> {
     selector: Selector;
     tabIndex: number;
     ariaRequired: DynamicValue<boolean>;
+    ariaLabel: DynamicValue<string> | undefined;
     groupName: DynamicValue<string> | undefined;
     noOptionsText: string;
 }
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/utils.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/utils.ts
@@ -59,3 +59,7 @@ export function getCustomCaption(values: CheckboxRadioSelectionPreviewProps): st
 export function getValidationErrorId(inputId?: string): string | undefined {
     return inputId ? inputId + "-validation-message" : undefined;
 }
+
+export function getInputLabel(inputId: string): Element | null {
+    return document.querySelector(`label[for="${inputId}"]`);
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/src/hooks/useWrapperProps.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/src/hooks/useWrapperProps.ts
@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import { getInputLabel } from "../helpers/utils";
+import classNames from "classnames";
+import { ReadOnlyStyleEnum } from "../../typings/CheckboxRadioSelectionProps";
+import { DynamicValue } from "mendix";
+
+interface WrapperProps {
+    inputId: string;
+    isReadOnly: boolean;
+    isCheckbox: boolean;
+    readOnlyStyle: ReadOnlyStyleEnum;
+    ariaRequired: DynamicValue<boolean>;
+    ariaLabel: DynamicValue<string> | undefined;
+}
+
+export function useWrapperProps(props: WrapperProps): any {
+    const { inputId, isReadOnly, isCheckbox, readOnlyStyle, ariaRequired, ariaLabel } = props;
+
+    const inputLabel = getInputLabel(inputId);
+    const hasLabel = useMemo(() => Boolean(inputLabel), [inputLabel]);
+    const hasAriaLabel = useMemo(() => Boolean(ariaLabel && ariaLabel.value), [ariaLabel]);
+
+    return {
+        className: classNames("widget-checkbox-radio-selection-list", {
+            "widget-checkbox-radio-selection-readonly": isReadOnly,
+            [`widget-checkbox-radio-selection-readonly-${readOnlyStyle}`]: isReadOnly
+        }),
+        id: inputId,
+        role: isCheckbox ? "group" : "radiogroup",
+        "aria-labelledby": hasLabel ? `${inputId}-label` : undefined,
+        "aria-required": ariaRequired ? ariaRequired.value : undefined,
+        "aria-label": hasAriaLabel ? ariaLabel?.value : undefined
+    };
+}
diff --git a/packages/pluggableWidgets/checkbox-radio-selection-web/typings/CheckboxRadioSelectionProps.d.ts b/packages/pluggableWidgets/checkbox-radio-selection-web/typings/CheckboxRadioSelectionProps.d.ts
@@ -68,7 +68,7 @@ export interface CheckboxRadioSelectionContainerProps {
     readOnlyStyle: ReadOnlyStyleEnum;
     onChangeEvent?: ActionValue;
     ariaRequired: DynamicValue<boolean>;
-    ariaLabel: string;
+    ariaLabel?: DynamicValue<string>;
 }
 
 export interface CheckboxRadioSelectionPreviewProps {

Original file line number	Diff line number	Diff line change
`@@ -84,6 +84,7 @@ export interface SelectionBaseProps<Selector> {`
`84`	`84`	`selector: Selector;`
`85`	`85`	`tabIndex: number;`
`86`	`86`	`ariaRequired: DynamicValue<boolean>;`
	`87`	`+ ariaLabel: DynamicValue<string> \| undefined;`
`87`	`88`	`groupName: DynamicValue<string> \| undefined;`
`88`	`89`	`noOptionsText: string;`
`89`	`90`	`}`
Original file line number	Diff line number	Diff line change
`@@ -59,3 +59,7 @@ export function getCustomCaption(values: CheckboxRadioSelectionPreviewProps): st`
`59`	`59`	`export function getValidationErrorId(inputId?: string): string \| undefined {`
`60`	`60`	`return inputId ? inputId + "-validation-message" : undefined;`
`61`	`61`	`}`
	`62`	`+`
	`63`	`+export function getInputLabel(inputId: string): Element \| null {`
	`64`	+ return document.querySelector(`label[for="${inputId}"]`);
	`65`	`+}`