[WC-3084] feat: add aria live in dg footer

packages/pluggableWidgets/datagrid-web/CHANGELOG.md

@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - We added missing dutch translations for Datagrid 2.
 
+- We added screen reader support for a11y.
+
 ### Added
 
 - We added a new property for export to excel. The new property allows to set the cell export type and also the format for type number and date.

packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx

@@ -1,6 +1,7 @@
 import { If } from "@mendix/widget-plugin-component-kit/If";
 import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
+import { SelectionAriaLive } from "../features/selection-counter/SelectionAriaLive";
 import { SelectionCounter } from "../features/selection-counter/SelectionCounter";
 import { useSelectionCounterViewModel } from "../features/selection-counter/injection-hooks";
 import { useDatagridConfig, usePaginationService, useTexts } from "../model/hooks/injection-hooks";
@@ -14,6 +15,9 @@ export const WidgetFooter = observer(function WidgetFooter(): ReactElement {
 
     return (
         <div className="widget-datagrid-footer table-footer">
+            <If condition={config.selectionEnabled}>
+                <SelectionAriaLive />
+            </If>
             <div className="widget-datagrid-paging-bottom">
                 <div className="widget-datagrid-pb-start">
                     <If condition={selectionCounterVM.isBottomCounterVisible}>

packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllModule.container.ts

@@ -4,7 +4,7 @@ import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-
 import { Container, injected } from "brandi";
 
 import { SelectAllFeature } from "@mendix/widget-plugin-grid/select-all/select-all.feature";
-import { selectAllEmitter, selectAllTextsStore } from "@mendix/widget-plugin-grid/select-all/select-all.model";
+import { selectAllEmitter } from "@mendix/widget-plugin-grid/select-all/select-all.model";
 import { SelectAllBarStore } from "@mendix/widget-plugin-grid/select-all/SelectAllBar.store";
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
 import { MainGateProps } from "../../../typings/MainGateProps";
@@ -13,21 +13,12 @@ import { CORE_TOKENS as CORE, DG_TOKENS as DG, SA_TOKENS } from "../../model/tok
 import { SelectAllBarViewModel } from "./SelectAllBar.viewModel";
 import { SelectionProgressDialogViewModel } from "./SelectionProgressDialog.viewModel";
 
-injected(
-    selectAllTextsStore,
-    SA_TOKENS.gate,
-    CORE.selection.selectedCount,
-    CORE.selection.selectedCounterTextsStore,
-    CORE.atoms.totalCount,
-    CORE.selection.isAllItemsSelected
-);
-
 injected(
     SelectAllBarViewModel,
     SA_TOKENS.emitter,
     SA_TOKENS.barStore,
     CORE.selection.selectedCounterTextsStore,
-    SA_TOKENS.selectAllTextsStore,
+    CORE.selection.selectAllTexts,
     SA_TOKENS.enableSelectAll
 );
 
@@ -62,7 +53,6 @@ export class SelectAllModule extends Container {
         this.bind(SA_TOKENS.emitter).toInstance(selectAllEmitter).inSingletonScope();
         this.bind(DG.query).toInstance(DatasourceService).inSingletonScope();
         this.bind(SA_TOKENS.selectAllService).toInstance(SelectAllService).inSingletonScope();
-        this.bind(SA_TOKENS.selectAllTextsStore).toInstance(selectAllTextsStore).inSingletonScope();
         this.bind(SA_TOKENS.selectAllBarVM).toInstance(SelectAllBarViewModel).inSingletonScope();
         this.bind(SA_TOKENS.selectionDialogVM).toInstance(SelectionProgressDialogViewModel).inSingletonScope();
         this.bind(SA_TOKENS.feature).toInstance(SelectAllFeature).inSingletonScope();

packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionAriaLive.tsx

@@ -0,0 +1,12 @@
+import { observer } from "mobx-react-lite";
+import { useSelectionCounterTexts } from "./injection-hooks";
+
+export const SelectionAriaLive = observer(function SelectionAriaLive() {
+    const texts = useSelectionCounterTexts();
+
+    return (
+        <span className="sr-only" aria-live="polite" aria-atomic="true">
+            {texts.selectedCountText}
+        </span>
+    );
+});

packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionCounter.tsx

@@ -8,9 +8,7 @@ export const SelectionCounter = observer(function SelectionCounter() {
 
     return (
         <div className="widget-datagrid-selection-counter">
-            <span className="widget-datagrid-selection-text" aria-live="polite" aria-atomic="true">
-                {selectionCountStore.selectedCountText}
-            </span>
+            <span className="widget-datagrid-selection-text">{selectionCountStore.selectedCountText}</span>
             &nbsp;|&nbsp;
             <button className="widget-datagrid-btn-link" onClick={() => selectActions.clearSelection()}>
                 {selectionCountStore.clearButtonLabel}

packages/pluggableWidgets/datagrid-web/src/features/selection-counter/injection-hooks.ts

@@ -1,4 +1,5 @@
 import { createInjectionHooks } from "brandi-react";
-import { DG_TOKENS } from "../../model/tokens";
+import { CORE_TOKENS, DG_TOKENS } from "../../model/tokens";
 
 export const [useSelectionCounterViewModel] = createInjectionHooks(DG_TOKENS.selectionCounterVM);
+export const [useSelectionCounterTexts] = createInjectionHooks(CORE_TOKENS.selection.selectedCounterTextsStore);

packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts

@@ -9,6 +9,7 @@ import {
 import {
     isAllItemsSelectedAtom,
     isCurrentPageSelectedAtom,
+    selectAllTextsStore,
     selectedCountMultiAtom,
     selectionCounterTextsStore
 } from "@mendix/widget-plugin-grid/core/models/selection.model";
@@ -47,6 +48,14 @@ injected(selectedCountMultiAtom, CORE.mainGate);
 injected(selectionCounterTextsStore, CORE.mainGate, CORE.selection.selectedCount);
 injected(PageSizeStore, CORE.initPageSize.optional);
 
+injected(
+    selectAllTextsStore,
+    CORE.mainGate,
+    CORE.selection.selectedCount,
+    CORE.selection.selectedCounterTextsStore,
+    CORE.atoms.totalCount,
+    CORE.selection.isAllItemsSelected
+);
 // other
 injected(TextsService, CORE.mainGate);
 
@@ -82,6 +91,7 @@ export class RootContainer extends Container {
         this.bind(CORE.selection.selectedCounterTextsStore).toInstance(selectionCounterTextsStore).inTransientScope();
         this.bind(CORE.selection.isAllItemsSelected).toInstance(isAllItemsSelectedAtom).inTransientScope();
         this.bind(CORE.texts).toInstance(TextsService).inTransientScope();
+        this.bind(CORE.selection.selectAllTexts).toInstance(selectAllTextsStore).inTransientScope();
 
         // paging
         this.bind(CORE.atoms.pageSize).toInstance(pageSizeAtom).inTransientScope();

packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts

@@ -24,3 +24,4 @@ export const [useClickActionHelper] = createInjectionHooks(DG.clickActionHelper)
 export const [useFocusService] = createInjectionHooks(DG.focusService);
 export const [useCheckboxEventsHandler] = createInjectionHooks(DG.checkboxEventsHandler);
 export const [useCellEventsHandler] = createInjectionHooks(DG.cellEventsHandler);
+export const [useSelectAllTexts] = createInjectionHooks(CORE.selection.selectAllTexts);

packages/pluggableWidgets/datagrid-web/src/model/tokens.ts

@@ -5,6 +5,7 @@ import { ClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActio
 import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
 import { VirtualGridLayout } from "@mendix/widget-plugin-grid/keyboard-navigation/VirtualGridLayout";
 import {
+    ObservableSelectAllTexts,
     QueryService,
     SelectActionsService,
     SelectAllService,
@@ -13,11 +14,7 @@ import {
     TaskProgressService
 } from "@mendix/widget-plugin-grid/main";
 import { SelectAllFeature } from "@mendix/widget-plugin-grid/select-all/select-all.feature";
-import {
-    BarStore,
-    ObservableSelectAllTexts,
-    SelectAllEvents
-} from "@mendix/widget-plugin-grid/select-all/select-all.model";
+import { BarStore, SelectAllEvents } from "@mendix/widget-plugin-grid/select-all/select-all.model";
 import { SelectionCounterViewModel } from "@mendix/widget-plugin-grid/selection-counter/SelectionCounter.viewModel-atoms";
 import { ComputedAtom, DerivedPropsGate, Emitter } from "@mendix/widget-plugin-mobx-kit/main";
 import { token } from "brandi";
@@ -75,7 +72,8 @@ export const CORE_TOKENS = {
         selectedCounterTextsStore: token<{
             clearSelectionButtonLabel: string;
             selectedCountText: string;
-        }>("@store:selectedCounterTextsStore")
+        }>("@store:selectedCounterTextsStore"),
+        selectAllTexts: token<ObservableSelectAllTexts>("@store:SelectAllTexts")
     },
 
     setupService: token<DatagridSetupService>("DatagridSetupService"),
@@ -140,7 +138,6 @@ export const SA_TOKENS = {
     emitter: token<Emitter<SelectAllEvents>>("SelectAllEmitter"),
     gate: token<DerivedPropsGate<MainGateProps>>("MainGateForSelectAllContainer"),
     progressService: token<TaskProgressService>("SelectAllProgressService"),
-    selectAllTextsStore: token<ObservableSelectAllTexts>("SelectAllTextsStore"),
     selectAllBarVM: token<SelectAllBarViewModel>("SelectAllBarViewModel"),
     selectAllService: token<SelectAllService>("SelectAllService"),
     selectionDialogVM: token<SelectionProgressDialogViewModel>("SelectionProgressDialogViewModel"),

packages/shared/widget-plugin-grid/src/core/models/selection.model.ts

@@ -105,3 +105,40 @@ export function selectionCounterTextsStore(
         }
     });
 }
+
+export interface ObservableSelectAllTexts {
+    selectionStatus: string;
+    selectAllLabel: string;
+}
+
+/** @injectable */
+export function selectAllTextsStore(
+    gate: DerivedPropsGate<{
+        allSelectedText?: DynamicValue<string>;
+        selectAllTemplate?: DynamicValue<string>;
+        selectAllText?: DynamicValue<string>;
+    }>,
+    selectedCount: ComputedAtom<number>,
+    selectedTexts: { selectedCountText: string },
+    totalCount: ComputedAtom<number>,
+    isAllItemsSelected: ComputedAtom<boolean>
+): ObservableSelectAllTexts {
+    return observable({
+        get selectAllLabel() {
+            const selectAllFormat = gate.props.selectAllTemplate?.value || "Select all %d rows in the data source";
+            const selectAllText = gate.props.selectAllText?.value || "Select all rows in the data source";
+            const total = totalCount.get();
+            if (total > 0) return selectAllFormat.replace("%d", `${total}`);
+            return selectAllText;
+        },
+        get selectionStatus() {
+            if (isAllItemsSelected.get()) return this.allSelectedText;
+            return selectedTexts.selectedCountText;
+        },
+        get allSelectedText() {
+            const str = gate.props.allSelectedText?.value ?? "All %d rows selected.";
+            const count = selectedCount.get();
+            return str.replace("%d", `${count}`);
+        }
+    });
+}

packages/shared/widget-plugin-grid/src/main.ts

@@ -1,4 +1,5 @@
 export { DatasourceService } from "./core/Datasource.service";
+export * from "./core/models/selection.model";
 export { ProgressService } from "./core/Progress.service";
 export { createClickActionHelper } from "./helpers/createClickActionHelper";
 export type { QueryService } from "./interfaces/QueryService";

packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts

@@ -1,12 +1,5 @@
-import {
-    ComputedAtom,
-    createEmitter,
-    DerivedPropsGate,
-    disposeBatch,
-    Emitter
-} from "@mendix/widget-plugin-mobx-kit/main";
-import { DynamicValue } from "mendix";
-import { observable, reaction } from "mobx";
+import { ComputedAtom, createEmitter, disposeBatch, Emitter } from "@mendix/widget-plugin-mobx-kit/main";
+import { reaction } from "mobx";
 
 export type ServiceEvents = {
     loadstart: ProgressEvent;
@@ -33,43 +26,6 @@ export function selectAllEmitter(): Emitter<SelectAllEvents> {
     return createEmitter<SelectAllEvents>();
 }
 
-export interface ObservableSelectAllTexts {
-    selectionStatus: string;
-    selectAllLabel: string;
-}
-
-/** @injectable */
-export function selectAllTextsStore(
-    gate: DerivedPropsGate<{
-        allSelectedText?: DynamicValue<string>;
-        selectAllTemplate?: DynamicValue<string>;
-        selectAllText?: DynamicValue<string>;
-    }>,
-    selectedCount: ComputedAtom<number>,
-    selectedTexts: { selectedCountText: string },
-    totalCount: ComputedAtom<number>,
-    isAllItemsSelected: ComputedAtom<boolean>
-): ObservableSelectAllTexts {
-    return observable({
-        get selectAllLabel() {
-            const selectAllFormat = gate.props.selectAllTemplate?.value || "Select all %d rows in the data source";
-            const selectAllText = gate.props.selectAllText?.value || "Select all rows in the data source";
-            const total = totalCount.get();
-            if (total > 0) return selectAllFormat.replace("%d", `${total}`);
-            return selectAllText;
-        },
-        get selectionStatus() {
-            if (isAllItemsSelected.get()) return this.allSelectedText;
-            return selectedTexts.selectedCountText;
-        },
-        get allSelectedText() {
-            const str = gate.props.allSelectedText?.value ?? "All %d rows selected.";
-            const count = selectedCount.get();
-            return str.replace("%d", `${count}`);
-        }
-    });
-}
-
 export interface BarStore {
     pending: boolean;
     visible: boolean;