[WC-2595] Add aria label for select all, rework 3 state checkbox (#1573)

r0b1n · web-flow · commit 0cbc6faf18ad · 2025-05-26T09:51:06.000+02:00
diff --git a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-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 improved accessibility by making it possible to specify label for Select all checkbox.
+
 ### Fixed
 
 - We fixed an issue with column selector popup positioning.
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -109,6 +109,7 @@ const Container = observer((props: Props): ReactElement => {
             exportDialogLabel={props.exportDialogLabel?.value}
             cancelExportLabel={props.cancelExportLabel?.value}
             selectRowLabel={props.selectRowLabel?.value}
+            selectAllRowsLabel={props.selectAllRowsLabel?.value}
             visibleColumns={columnsStore.visibleColumns}
             availableColumns={columnsStore.availableColumns}
             setIsResizing={(status: boolean) => columnsStore.setIsResizing(status)}
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml b/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
@@ -420,6 +420,13 @@
                         <translation lang="en_US">Select row</translation>
                     </translations>
                 </property>
+                <property key="selectAllRowsLabel" type="textTemplate" required="false">
+                    <caption>Select all row</caption>
+                    <description>If selection is enabled, assistive technology will read this upon reaching 'Select all' checkbox.</description>
+                    <translations>
+                        <translation lang="en_US">Select all rows</translation>
+                    </translations>
+                </property>
             </propertyGroup>
         </propertyGroup>
     </properties>
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/CheckboxColumnHeader.tsx b/packages/pluggableWidgets/datagrid-web/src/components/CheckboxColumnHeader.tsx
@@ -1,11 +1,13 @@
-import { ThreeStateCheckBox } from "@mendix/widget-plugin-grid/components/ThreeStateCheckBox";
-import { Fragment, ReactElement, createElement } from "react";
+import { ThreeStateCheckBox } from "@mendix/widget-plugin-component-kit/ThreeStateCheckBox";
+import { Fragment, ReactElement, createElement, useCallback } from "react";
 import { useWidgetProps } from "../helpers/useWidgetProps";
 
 export function CheckboxColumnHeader(): ReactElement {
-    const { selectActionHelper, selectionStatus } = useWidgetProps();
+    const { selectActionHelper, selectionStatus, selectAllRowsLabel } = useWidgetProps();
     const { showCheckboxColumn, showSelectAllToggle, onSelectAll } = selectActionHelper;
 
+    const onChange = useCallback(() => onSelectAll(), [onSelectAll]);
+
     if (showCheckboxColumn === false) {
         return <Fragment />;
     }
@@ -17,7 +19,13 @@ export function CheckboxColumnHeader(): ReactElement {
             throw new Error("Don't know how to render checkbox with selectionStatus=unknown");
         }
 
-        checkbox = <ThreeStateCheckBox value={selectionStatus} onChange={onSelectAll} />;
+        checkbox = (
+            <ThreeStateCheckBox
+                value={selectionStatus}
+                onChange={onChange}
+                aria-label={selectAllRowsLabel ?? "Select all rows"}
+            />
+        );
     }
 
     return (
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -64,6 +64,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     exportDialogLabel?: string;
     cancelExportLabel?: string;
     selectRowLabel?: string;
+    selectAllRowsLabel?: string;
     isLoading: boolean;
     isFetchingNextBatch: boolean;
     loadingType: LoadingTypeEnum;
diff --git a/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts b/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
@@ -145,6 +145,7 @@ export interface DatagridContainerProps {
     exportDialogLabel?: DynamicValue<string>;
     cancelExportLabel?: DynamicValue<string>;
     selectRowLabel?: DynamicValue<string>;
+    selectAllRowsLabel?: DynamicValue<string>;
 }
 
 export interface DatagridPreviewProps {
@@ -194,4 +195,5 @@ export interface DatagridPreviewProps {
     exportDialogLabel: string;
     cancelExportLabel: string;
     selectRowLabel: string;
+    selectAllRowsLabel: string;
 }
diff --git a/packages/pluggableWidgets/selection-helper-web/CHANGELOG.md b/packages/pluggableWidgets/selection-helper-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- Internal improvements.
+
 ## [1.0.3] - 2023-10-13
 
 ### Fixed
diff --git a/packages/pluggableWidgets/selection-helper-web/package.json b/packages/pluggableWidgets/selection-helper-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/selection-helper-web",
     "widgetName": "SelectionHelper",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",
diff --git a/packages/pluggableWidgets/selection-helper-web/src/components/SelectionHelperComponent.tsx b/packages/pluggableWidgets/selection-helper-web/src/components/SelectionHelperComponent.tsx
@@ -1,5 +1,5 @@
 import { createElement, CSSProperties, ReactElement, ReactNode, useMemo } from "react";
-import { ThreeStateCheckBox } from "@mendix/widget-plugin-grid/components/ThreeStateCheckBox";
+import { ThreeStateCheckBox } from "@mendix/widget-plugin-component-kit/ThreeStateCheckBox";
 
 interface Props {
     type: "checkbox" | "custom";
diff --git a/packages/pluggableWidgets/selection-helper-web/src/package.xml b/packages/pluggableWidgets/selection-helper-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="SelectionHelper" version="1.0.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="SelectionHelper" version="1.0.4" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="SelectionHelper.xml" />
         </widgetFiles>
diff --git a/packages/shared/widget-plugin-component-kit/src/ThreeStateCheckBox.tsx b/packages/shared/widget-plugin-component-kit/src/ThreeStateCheckBox.tsx
@@ -1,15 +1,14 @@
-import { createElement, ReactElement, useEffect, useRef } from "react";
+import { createElement, InputHTMLAttributes, ReactElement, useEffect, useRef } from "react";
+import classNames from "classnames";
 
 export type ThreeStateCheckBoxEnum = "all" | "some" | "none";
 
-export interface ThreeStateCheckBoxProps {
-    id?: string;
-    disabled?: boolean;
+export interface ThreeStateCheckBoxProps
+    extends Omit<InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> {
     value: ThreeStateCheckBoxEnum;
-    onChange?: () => void;
 }
 
-export function ThreeStateCheckBox({ id, disabled, value, onChange }: ThreeStateCheckBoxProps): ReactElement {
+export function ThreeStateCheckBox({ value, className, ...props }: ThreeStateCheckBoxProps): ReactElement {
     const checkboxRef = useRef<HTMLInputElement | null>(null);
     useEffect(() => {
         if (!checkboxRef.current) {
@@ -24,13 +23,11 @@ export function ThreeStateCheckBox({ id, disabled, value, onChange }: ThreeState
 
     return (
         <input
-            id={id}
+            {...props}
             type="checkbox"
-            className="three-state-checkbox"
+            className={classNames("three-state-checkbox", className)}
             ref={checkboxRef}
             checked={value !== "none"}
-            disabled={disabled}
-            onChange={onChange}
         />
     );
 }
diff --git a/packages/shared/widget-plugin-component-kit/src/__tests__/ThreeStateCheckBox.spec.tsx b/packages/shared/widget-plugin-component-kit/src/__tests__/ThreeStateCheckBox.spec.tsx
@@ -0,0 +1,31 @@
+import { createElement } from "react";
+import { render } from "@testing-library/react";
+import { ThreeStateCheckBox, ThreeStateCheckBoxEnum } from "../ThreeStateCheckBox";
+
+describe("ThreeStateCheckBox", () => {
+    const renderComponent = (value: ThreeStateCheckBoxEnum) =>
+        render(
+            <ThreeStateCheckBox value={value} className="test-class" aria-label="Test Checkbox" onChange={jest.fn()} />
+        );
+
+    it("matches snapshot when value is 'all'", () => {
+        const { asFragment, container } = renderComponent("all");
+        expect(asFragment()).toMatchSnapshot();
+
+        expect(container.querySelector("input")?.indeterminate).toBe(false);
+    });
+
+    it("matches snapshot when value is 'some'", () => {
+        const { asFragment, container } = renderComponent("some");
+        expect(asFragment()).toMatchSnapshot();
+
+        expect(container.querySelector("input")?.indeterminate).toBe(true);
+    });
+
+    it("matches snapshot when value is 'none'", () => {
+        const { asFragment, container } = renderComponent("none");
+        expect(asFragment()).toMatchSnapshot();
+
+        expect(container.querySelector("input")?.indeterminate).toBe(false);
+    });
+});
diff --git a/packages/shared/widget-plugin-component-kit/src/__tests__/__snapshots__/ThreeStateCheckBox.spec.tsx.snap b/packages/shared/widget-plugin-component-kit/src/__tests__/__snapshots__/ThreeStateCheckBox.spec.tsx.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThreeStateCheckBox matches snapshot when value is 'all' 1`] = `
+<DocumentFragment>
+  <input
+    aria-label="Test Checkbox"
+    checked=""
+    class="three-state-checkbox test-class"
+    type="checkbox"
+  />
+</DocumentFragment>
+`;
+
+exports[`ThreeStateCheckBox matches snapshot when value is 'none' 1`] = `
+<DocumentFragment>
+  <input
+    aria-label="Test Checkbox"
+    class="three-state-checkbox test-class"
+    type="checkbox"
+  />
+</DocumentFragment>
+`;
+
+exports[`ThreeStateCheckBox matches snapshot when value is 'some' 1`] = `
+<DocumentFragment>
+  <input
+    aria-label="Test Checkbox"
+    checked=""
+    class="three-state-checkbox test-class"
+    type="checkbox"
+  />
+</DocumentFragment>
+`;
diff --git a/packages/shared/widget-plugin-grid/src/components/ThreeStateCheckBox.tsx b/packages/shared/widget-plugin-grid/src/components/ThreeStateCheckBox.tsx

Original file line number	Diff line number	Diff line change
`@@ -145,6 +145,7 @@ export interface DatagridContainerProps {`
`145`	`145`	`exportDialogLabel?: DynamicValue<string>;`
`146`	`146`	`cancelExportLabel?: DynamicValue<string>;`
`147`	`147`	`selectRowLabel?: DynamicValue<string>;`
	`148`	`+ selectAllRowsLabel?: DynamicValue<string>;`
`148`	`149`	`}`
`149`	`150`
`150`	`151`	`export interface DatagridPreviewProps {`
`@@ -194,4 +195,5 @@ export interface DatagridPreviewProps {`
`194`	`195`	`exportDialogLabel: string;`
`195`	`196`	`cancelExportLabel: string;`
`196`	`197`	`selectRowLabel: string;`
	`198`	`+ selectAllRowsLabel: string;`
`197`	`199`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@mendix/selection-helper-web",`
`3`	`3`	`"widgetName": "SelectionHelper",`
`4`		`- "version": "1.0.3",`
	`4`	`+ "version": "1.0.4",`
`5`	`5`	`"description": "",`
`6`	`6`	`"copyright": "© Mendix Technology BV 2025. All rights reserved.",`
`7`	`7`	`"license": "Apache-2.0",`