diff --git a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md index b2524d0efb..85b08a377d 100644 --- a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md +++ b/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. diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx index 4f5211c4b7..36551871f7 100644 --- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx +++ b/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 (
+ + +
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllModule.container.ts b/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllModule.container.ts index 1d86ba4f7c..5784ae7083 100644 --- a/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllModule.container.ts +++ b/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(); diff --git a/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionAriaLive.tsx b/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionAriaLive.tsx new file mode 100644 index 0000000000..7ea88f4b45 --- /dev/null +++ b/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 ( + + {texts.selectedCountText} + + ); +}); diff --git a/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionCounter.tsx b/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionCounter.tsx index 978025e56d..53aea617c2 100644 --- a/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionCounter.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionCounter.tsx @@ -8,9 +8,7 @@ export const SelectionCounter = observer(function SelectionCounter() { return (
- - {selectionCountStore.selectedCountText} - + {selectionCountStore.selectedCountText}  |