Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[a11y] Announce table row count to ATs #12429

Merged
merged 6 commits into from
Jan 10, 2025
Merged

[a11y] Announce table row count to ATs #12429

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
050a861
announce row count change
esizer Jan 8, 2025
d95a8a8
fix announcement for client side tables
esizer Jan 9, 2025
a4aacb3
fix formatting
esizer Jan 9, 2025
73328f4
update copy
esizer Jan 10, 2025
0f39160
fix intl variable name
esizer Jan 10, 2025
2fd1dc1
fix plural other string
esizer Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 34 additions & 2 deletions apps/web/src/components/Table/ResponsiveTable/ResponsiveTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useSearchParams } from "react-router";
import { useIntl } from "react-intl";
import isEqual from "lodash/isEqual";
import debounce from "lodash/debounce";
import type { ColumnDef } from "@tanstack/react-table";
import {
getCoreRowModel,
Expand All @@ -10,10 +11,10 @@ import {
useReactTable,
} from "@tanstack/react-table";
import isEmpty from "lodash/isEmpty";
import { ReactNode, useEffect, useId, useMemo } from "react";
import { ReactNode, useEffect, useId, useMemo, useRef } from "react";

import { empty, notEmpty } from "@gc-digital-talent/helpers";
import { Loading } from "@gc-digital-talent/ui";
import { Loading, useAnnouncer } from "@gc-digital-talent/ui";

import Table from "./Table";
import SearchForm from "./SearchForm";
Expand Down Expand Up @@ -91,6 +92,8 @@ const ResponsiveTable = <TData extends object, TFilters = object>({
}: TableProps<TData, TFilters>) => {
const id = useId();
const intl = useIntl();
const { announce } = useAnnouncer();
const hasUpdatedRows = useRef<boolean>(false);
const [, setSearchParams] = useSearchParams();
const isInternalSearch = search && search.internal;
const memoizedColumns = useMemo(() => {
Expand Down Expand Up @@ -320,6 +323,35 @@ const ResponsiveTable = <TData extends object, TFilters = object>({
};
}

const totalRows = paginationAdjusted?.total;
const debouncedAnnouncement = debounce((count: number) => {
announce(
intl.formatMessage(
{
defaultMessage:
"{total, plural, =0 {0 results found} =1 {1 result found} other {# result found}}",
id: "uZYkk1",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't working right, it is reading out "total, plural..." for me

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, forgot the variable name was not total 😅

Fixed in fix intl variable name

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't
other {# result found}}
Be
other {# results found}}
?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay, I tihnk I finally got it 😆

fix plural other string

description:
"Message announced to assistive technology when number of items in a table changes",
},
{ count },
),
);
}, 300);

useEffect(() => {
const hasItems = typeof totalRows !== "undefined" && totalRows !== null;
if (hasItems && !hasUpdatedRows.current) {
hasUpdatedRows.current = true;
return;
}
if (hasItems && hasUpdatedRows.current) {
debouncedAnnouncement(totalRows ?? 0);
}
// Note, exhaustive-deps causes over announcing
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [totalRows]);

return (
<>
<Table.Controls add={add}>
Expand Down
4 changes: 4 additions & 0 deletions apps/web/src/lang/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11514,6 +11514,10 @@
"defaultMessage": "Exigences essentielles",
"description": "Sub title for the pool core requirements"
},
"uZYkk1": {
"defaultMessage": "{total, plural, =0 {0 résultats trouvés} =1 {1 résultat trouvé} other { # résultats trouvés}}",
"description": "Message announced to assistive technology when number of items in a table changes"
},
"uZuEHk": {
"defaultMessage": "Sélectionnez cette option si l'emploi était dans l'Armée canadienne, dans l'Aviation royale canadienne ou dans la Marine royale canadienne, dans la Force régulière ou dans la Force de réserve.",
"description": "Description for the caf employment category option in work experience"
Expand Down
Loading