diff --git a/apps/web/src/components/Table/ResponsiveTable/ResponsiveTable.tsx b/apps/web/src/components/Table/ResponsiveTable/ResponsiveTable.tsx index 432ae27a183..bf998aaed45 100644 --- a/apps/web/src/components/Table/ResponsiveTable/ResponsiveTable.tsx +++ b/apps/web/src/components/Table/ResponsiveTable/ResponsiveTable.tsx @@ -320,6 +320,10 @@ const ResponsiveTable = ({ }; } + const canSort = table + .getFlatHeaders() + .some((header) => header.column.getCanSort()); + return ( <> @@ -353,7 +357,7 @@ const ResponsiveTable = ({ {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( - + ))} ))} @@ -397,6 +401,15 @@ const ResponsiveTable = ({ )} )} + {canSort && ( + + {intl.formatMessage({ + defaultMessage: "Sort", + id: "LwruRb", + description: "Hint to let users know a table column can be sorted", + })} + + )} ); }; diff --git a/apps/web/src/components/Table/ResponsiveTable/SortButton.tsx b/apps/web/src/components/Table/ResponsiveTable/SortButton.tsx index 40afcc3ab66..6fe25b525e7 100644 --- a/apps/web/src/components/Table/ResponsiveTable/SortButton.tsx +++ b/apps/web/src/components/Table/ResponsiveTable/SortButton.tsx @@ -4,7 +4,7 @@ import ArrowDownIcon from "@heroicons/react/20/solid/ArrowDownIcon"; import ArrowUpIcon from "@heroicons/react/20/solid/ArrowUpIcon"; import ArrowsUpDownIcon from "@heroicons/react/20/solid/ArrowsUpDownIcon"; import LockClosedIcon from "@heroicons/react/24/solid/LockClosedIcon"; -import { ReactNode } from "react"; +import { ReactNode, useId } from "react"; import { Button } from "@gc-digital-talent/ui"; @@ -12,10 +12,18 @@ interface SortButtonProps { column: Column; children: ReactNode; locked?: boolean; + tableId: string; } -const SortButton = ({ column, locked, children }: SortButtonProps) => { +const SortButton = ({ + column, + locked, + tableId, + children, +}: SortButtonProps) => { const intl = useIntl(); + const id = useId(); + const ariaId = `${column.id}-${id}`; if (!column.getCanSort()) { // eslint-disable-next-line react/jsx-no-useless-fragment @@ -30,6 +38,8 @@ const SortButton = ({ column, locked, children }: SortButtonProps) => { return (