diff --git a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md index fbe69d84b6..24165a80b2 100644 --- a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md +++ b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md @@ -18,6 +18,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - We improved virtual scrolling behavior when horizontal scrolling is present due to grid size. +- We improved screen reader support for selection feature. + ### 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 ccaf2820ad..87433234f2 100644 --- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx @@ -1,12 +1,20 @@ 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 { useCustomPagination, usePaginationConfig, usePaginationVM, useTexts } from "../model/hooks/injection-hooks"; +import { + useCustomPagination, + useDatagridConfig, + usePaginationConfig, + usePaginationVM, + useTexts +} from "../model/hooks/injection-hooks"; import { Pagination } from "./Pagination"; export const WidgetFooter = observer(function WidgetFooter(): ReactElement | null { + const config = useDatagridConfig(); const pgConfig = usePaginationConfig(); const paging = usePaginationVM(); const { loadMoreButtonCaption } = useTexts(); @@ -25,6 +33,9 @@ export const WidgetFooter = observer(function WidgetFooter(): ReactElement | nul 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}  |