improve sort with hints

GCTC-NTGC · Jan 10, 2025 · 2372f18 · 2372f18
1 parent de0ce61
commit 2372f18
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/apps/web/src/components/Table/ResponsiveTable/ResponsiveTable.tsx b/apps/web/src/components/Table/ResponsiveTable/ResponsiveTable.tsx
@@ -320,6 +320,10 @@ const ResponsiveTable = <TData extends object, TFilters = object>({
     };
   }
 
+  const canSort = table
+    .getFlatHeaders()
+    .some((header) => header.column.getCanSort());
+
   return (
     <>
       <Table.Controls add={add}>
@@ -353,7 +357,7 @@ const ResponsiveTable = <TData extends object, TFilters = object>({
                 {table.getHeaderGroups().map((headerGroup) => (
                   <Table.HeadRow key={headerGroup.id}>
                     {headerGroup.headers.map((header) => (
-                      <Table.HeadCell key={header.id} header={header} />
+                      <Table.HeadCell key={header.id} id={id} header={header} />
                     ))}
                   </Table.HeadRow>
                 ))}
@@ -397,6 +401,15 @@ const ResponsiveTable = <TData extends object, TFilters = object>({
           )}
         </>
       )}
+      {canSort && (
+        <span id={`sortHint-${id}`} data-h2-display="base(none)">
+          {intl.formatMessage({
+            defaultMessage: "Sort",
+            id: "LwruRb",
+            description: "Hint to let users know a table column can be sorted",
+          })}
+        </span>
+      )}
     </>
   );
 };

diff --git a/apps/web/src/components/Table/ResponsiveTable/SortButton.tsx b/apps/web/src/components/Table/ResponsiveTable/SortButton.tsx
@@ -4,18 +4,26 @@ 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";
 
 interface SortButtonProps<T> {
   column: Column<T, unknown>;
   children: ReactNode;
   locked?: boolean;
+  tableId: string;
 }
 
-const SortButton = <T,>({ column, locked, children }: SortButtonProps<T>) => {
+const SortButton = <T,>({
+  column,
+  locked,
+  tableId,
+  children,
+}: SortButtonProps<T>) => {
   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 = <T,>({ column, locked, children }: SortButtonProps<T>) => {
 
   return (
     <Button
+      id={ariaId}
+      aria-labelledby={`${ariaId} sortHint-${tableId}`}
       mode="inline"
       color="whiteFixed"
       fontSize="caption"

diff --git a/apps/web/src/components/Table/ResponsiveTable/Table.tsx b/apps/web/src/components/Table/ResponsiveTable/Table.tsx
@@ -119,14 +119,15 @@ type CellHTMLProps = DetailedHTMLProps<
 
 type HeadCellProps<T> = {
   header: Header<T, unknown>;
+  id: string;
 } & CellHTMLProps;
 
-const HeadCell = <T,>({ header, ...rest }: HeadCellProps<T>) => {
+const HeadCell = <T,>({ header, id, ...rest }: HeadCellProps<T>) => {
   const isRowSelect = header.column.columnDef.meta?.isRowSelect;
   const shouldShrink = header.column.columnDef.meta?.shrink;
   const sortingLocked = header.column.columnDef.meta?.sortingLocked;
   const sortDirection = header.column.getIsSorted();
-  let ariaSort: AriaSort = "none";
+  let ariaSort: AriaSort = undefined;
   if (sortDirection) {
     ariaSort = sortDirection === "asc" ? "ascending" : "descending";
   }
@@ -151,7 +152,7 @@ const HeadCell = <T,>({ header, ...rest }: HeadCellProps<T>) => {
       {...rest}
     >
       {header.isPlaceholder ? null : (
-        <SortButton column={header.column} locked={sortingLocked}>
+        <SortButton tableId={id} column={header.column} locked={sortingLocked}>
           {flexRender(header.column.columnDef.header, header.getContext())}
         </SortButton>
       )}