[WC-3077] CheckboxRadio: Enhance properties

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

@@ -9,6 +9,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - We added a missing validation alert.
+- Added aria-label property
+
+### Changed
+
+- The Caption property now appears below Entity.
+- Moved the Group name attribute to the General tab in the General property group.
 
 ## [1.0.0] - 2025-08-25
 

packages/pluggableWidgets/checkbox-radio-selection-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/checkbox-radio-selection-web",
     "widgetName": "CheckboxRadioSelection",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "Configurable radio buttons and check box widget",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

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"
     };

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"
     };
 

packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.xml

@@ -59,6 +59,44 @@
                     </selectionTypes>
                 </property>
             </propertyGroup>
+            <propertyGroup caption="Store value">
+                <property key="optionsSourceDatabaseValueAttribute" type="attribute" dataSource="optionsSourceDatabaseDataSource">
+                    <caption>Value</caption>
+                    <description />
+                    <attributeTypes>
+                        <attributeType name="String" />
+                        <attributeType name="Integer" />
+                        <attributeType name="Long" />
+                        <attributeType name="Enum" />
+                    </attributeTypes>
+                </property>
+                <property key="databaseAttributeString" type="attribute" setLabel="true" required="false">
+                    <caption>Target attribute</caption>
+                    <description />
+                    <attributeTypes>
+                        <attributeType name="String" />
+                        <attributeType name="Integer" />
+                        <attributeType name="Long" />
+                        <attributeType name="Enum" />
+                    </attributeTypes>
+                </property>
+            </propertyGroup>
+            <!-- END DATABASE / STRING -->
+            <propertyGroup caption="Attribute">
+                <!-- ASSOCIATION -->
+                <property key="attributeAssociation" type="association" selectableObjects="optionsSourceAssociationDataSource" required="true" setLabel="true">
+                    <caption>Entity</caption>
+                    <description />
+                    <associationTypes>
+                        <associationType name="Reference" />
+                        <associationType name="ReferenceSet" />
+                    </associationTypes>
+                </property>
+                <property key="optionsSourceAssociationDataSource" type="datasource" isList="true" required="false">
+                    <caption>Selectable objects</caption>
+                    <description />
+                </property>
+            </propertyGroup>
             <propertyGroup caption="Caption">
                 <!-- CAPTIONS -->
                 <property key="optionsSourceAssociationCaptionType" type="enumeration" defaultValue="attribute">
@@ -103,44 +141,6 @@
                 </property>
                 <!-- END CAPTIONS -->
             </propertyGroup>
-            <propertyGroup caption="Store value">
-                <property key="optionsSourceDatabaseValueAttribute" type="attribute" dataSource="optionsSourceDatabaseDataSource">
-                    <caption>Value</caption>
-                    <description />
-                    <attributeTypes>
-                        <attributeType name="String" />
-                        <attributeType name="Integer" />
-                        <attributeType name="Long" />
-                        <attributeType name="Enum" />
-                    </attributeTypes>
-                </property>
-                <property key="databaseAttributeString" type="attribute" setLabel="true" required="false">
-                    <caption>Target attribute</caption>
-                    <description />
-                    <attributeTypes>
-                        <attributeType name="String" />
-                        <attributeType name="Integer" />
-                        <attributeType name="Long" />
-                        <attributeType name="Enum" />
-                    </attributeTypes>
-                </property>
-            </propertyGroup>
-            <!-- END DATABASE / STRING -->
-            <propertyGroup caption="Attribute">
-                <!-- ASSOCIATION -->
-                <property key="attributeAssociation" type="association" selectableObjects="optionsSourceAssociationDataSource" required="true" setLabel="true">
-                    <caption>Entity</caption>
-                    <description />
-                    <associationTypes>
-                        <associationType name="Reference" />
-                        <associationType name="ReferenceSet" />
-                    </associationTypes>
-                </property>
-                <property key="optionsSourceAssociationDataSource" type="datasource" isList="true" required="false">
-                    <caption>Selectable objects</caption>
-                    <description />
-                </property>
-            </propertyGroup>
             <!-- END OPTIONS SOURCE -->
             <!-- STATIC-->
             <propertyGroup caption="Values">
@@ -214,6 +214,11 @@
                         <enumerationValue key="radio">Radio button</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="groupName" type="expression" required="false">
+                    <caption>Group name</caption>
+                    <description>Name for the group of associated inputs</description>
+                    <returnType type="String" />
+                </property>
                 <!-- END MISC PROPS -->
             </propertyGroup>
             <!-- END GENERAL -->
@@ -271,10 +276,9 @@
                     <description />
                     <returnType type="Boolean" />
                 </property>
-                <property key="groupName" type="expression" required="false">
-                    <caption>Group name</caption>
+                <property key="ariaLabel" type="textTemplate" required="false">
+                    <caption>Aria label</caption>
                     <description />
-                    <returnType type="String" />
                 </property>
             </propertyGroup>
         </propertyGroup>

packages/pluggableWidgets/checkbox-radio-selection-web/src/__tests__/CheckboxRadioSelection.spec.tsx

@@ -68,6 +68,7 @@ describe("CheckboxRadioSelection", () => {
         customEditabilityExpression: { status: "available", value: false } as any,
         readOnlyStyle: "bordered" as const,
         ariaRequired: { status: "available", value: false } as any,
+        ariaLabel: { status: "available", value: "" } as any,
         controlType: "checkbox" as const
     };
 

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);

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;

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;
 }

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}"]`);
+}

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
+    };
+}

packages/pluggableWidgets/checkbox-radio-selection-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="CheckboxRadioSelection" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="CheckboxRadioSelection" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="CheckboxRadioSelection.xml" />
         </widgetFiles>

packages/pluggableWidgets/checkbox-radio-selection-web/typings/CheckboxRadioSelectionProps.d.ts

@@ -45,29 +45,30 @@ export interface CheckboxRadioSelectionContainerProps {
     attributeBoolean: EditableValue<boolean>;
     optionsSourceDatabaseDataSource?: ListValue;
     optionsSourceDatabaseItemSelection?: SelectionSingleValue | SelectionMultiValue;
+    optionsSourceDatabaseValueAttribute?: ListAttributeValue<string | Big>;
+    databaseAttributeString?: EditableValue<string | Big>;
+    attributeAssociation: ReferenceValue | ReferenceSetValue;
+    optionsSourceAssociationDataSource?: ListValue;
     optionsSourceAssociationCaptionType: OptionsSourceAssociationCaptionTypeEnum;
     optionsSourceDatabaseCaptionType: OptionsSourceDatabaseCaptionTypeEnum;
     optionsSourceAssociationCaptionAttribute?: ListAttributeValue<string>;
     optionsSourceDatabaseCaptionAttribute?: ListAttributeValue<string>;
     optionsSourceAssociationCaptionExpression?: ListExpressionValue<string>;
     optionsSourceDatabaseCaptionExpression?: ListExpressionValue<string>;
-    optionsSourceDatabaseValueAttribute?: ListAttributeValue<string | Big>;
-    databaseAttributeString?: EditableValue<string | Big>;
-    attributeAssociation: ReferenceValue | ReferenceSetValue;
-    optionsSourceAssociationDataSource?: ListValue;
     staticAttribute: EditableValue<string | Big | boolean | Date>;
     optionsSourceStaticDataSource: OptionsSourceStaticDataSourceType[];
     noOptionsText?: DynamicValue<string>;
     optionsSourceCustomContentType: OptionsSourceCustomContentTypeEnum;
     optionsSourceAssociationCustomContent?: ListWidgetValue;
     optionsSourceDatabaseCustomContent?: ListWidgetValue;
     controlType: ControlTypeEnum;
+    groupName?: DynamicValue<string>;
     customEditability: CustomEditabilityEnum;
     customEditabilityExpression: DynamicValue<boolean>;
     readOnlyStyle: ReadOnlyStyleEnum;
     onChangeEvent?: ActionValue;
     ariaRequired: DynamicValue<boolean>;
-    groupName?: DynamicValue<string>;
+    ariaLabel?: DynamicValue<string>;
 }
 
 export interface CheckboxRadioSelectionPreviewProps {
@@ -80,28 +81,29 @@ export interface CheckboxRadioSelectionPreviewProps {
     attributeBoolean: string;
     optionsSourceDatabaseDataSource: {} | { caption: string } | { type: string } | null;
     optionsSourceDatabaseItemSelection: "Single" | "Multi" | "None";
+    optionsSourceDatabaseValueAttribute: string;
+    databaseAttributeString: string;
+    attributeAssociation: string;
+    optionsSourceAssociationDataSource: {} | { caption: string } | { type: string } | null;
     optionsSourceAssociationCaptionType: OptionsSourceAssociationCaptionTypeEnum;
     optionsSourceDatabaseCaptionType: OptionsSourceDatabaseCaptionTypeEnum;
     optionsSourceAssociationCaptionAttribute: string;
     optionsSourceDatabaseCaptionAttribute: string;
     optionsSourceAssociationCaptionExpression: string;
     optionsSourceDatabaseCaptionExpression: string;
-    optionsSourceDatabaseValueAttribute: string;
-    databaseAttributeString: string;
-    attributeAssociation: string;
-    optionsSourceAssociationDataSource: {} | { caption: string } | { type: string } | null;
     staticAttribute: string;
     optionsSourceStaticDataSource: OptionsSourceStaticDataSourcePreviewType[];
     noOptionsText: string;
     optionsSourceCustomContentType: OptionsSourceCustomContentTypeEnum;
     optionsSourceAssociationCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     optionsSourceDatabaseCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     controlType: ControlTypeEnum;
+    groupName: string;
     customEditability: CustomEditabilityEnum;
     customEditabilityExpression: string;
     readOnlyStyle: ReadOnlyStyleEnum;
     onChangeEvent: {} | null;
     onChangeDatabaseEvent: {} | null;
     ariaRequired: string;
-    groupName: string;
+    ariaLabel: string;
 }