fix(Table): a11y issues in grouped headers

lumada-design · Sep 20, 2023 · e893086 · e893086
1 parent 2c1fc99
commit e893086
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 42 deletions.
diff --git a/packages/core/src/components/Table/TableHeader/TableHeader.tsx b/packages/core/src/components/Table/TableHeader/TableHeader.tsx
@@ -118,7 +118,7 @@ export const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(
     const type = typeProp || tableSectionContext?.type || "body";
     const isHeadCell = type === "head";
 
-    const scope = scopeProp ?? isHeadCell ? "col" : "row";
+    const scope = scopeProp ?? (isHeadCell ? "col" : "row");
 
     const Sort = useMemo(
       () => getSortIcon(sorted && sortDirection),

diff --git a/packages/core/src/components/Table/stories/TableHooks/TableHooks.tsx b/packages/core/src/components/Table/stories/TableHooks/TableHooks.tsx
@@ -1,7 +1,13 @@
 import { Fragment, useCallback, useMemo, useState } from "react";
+
 import range from "lodash/range";
+
 import type { StoryObj } from "@storybook/react";
+
 import { useGroupBy } from "react-table";
+
+import { css } from "@emotion/css";
+
 import {
   HvTable,
   HvTableBody,
@@ -32,6 +38,7 @@ import {
   Lock,
   Preview,
 } from "@hitachivantara/uikit-react-icons";
+
 import {
   makeData,
   getColumns,
@@ -1343,11 +1350,27 @@ const UseHvHeaderGroups = () => {
         <HvTableHead>
           {headerGroups.map((headerGroup) => (
             <HvTableRow {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map((col) => (
-                <HvTableHeader {...col.getHeaderProps()}>
-                  {col.render("Header")}
-                </HvTableHeader>
-              ))}
+              {headerGroup.headers.map((col) => {
+                if (col.depth === 1 && !col.parent) {
+                  return undefined;
+                }
+
+                return (
+                  <HvTableHeader
+                    {...col.getHeaderProps()}
+                    id={col.originalId || col.id}
+                    classes={{
+                      groupColumnMostRight: css({
+                        ":last-child": {
+                          borderRight: `1px solid ${theme.colors.atmo4}`,
+                        },
+                      }),
+                    }}
+                  >
+                    {col.render("Header")}
+                  </HvTableHeader>
+                );
+              })}
             </HvTableRow>
           ))}
         </HvTableHead>
@@ -1357,11 +1380,16 @@ const UseHvHeaderGroups = () => {
 
             return (
               <HvTableRow {...row.getRowProps()}>
-                {row.cells.map((cell) => (
-                  <HvTableCell {...cell.getCellProps()}>
-                    {cell.render("Cell")}
-                  </HvTableCell>
-                ))}
+                {row.cells.map((cell) => {
+                  const { id, parent } = cell.column;
+                  const headers = [id, parent?.id].filter(Boolean).join(" ");
+
+                  return (
+                    <HvTableCell {...cell.getCellProps()} headers={headers}>
+                      {cell.render("Cell")}
+                    </HvTableCell>
+                  );
+                })}
               </HvTableRow>
             );
           })}
@@ -1390,35 +1418,56 @@ const { getTableProps, getTableBodyProps, prepareRow, headerGroups, rows } =
 
 return (
   <HvTableContainer>
-    <HvTable {...getTableProps()}>
-      <HvTableHead>
-        {headerGroups.map((headerGroup) => (
-          <HvTableRow {...headerGroup.getHeaderGroupProps()}>
-            {headerGroup.headers.map((col) => (
-              <HvTableHeader {...col.getHeaderProps()}>
-                {col.render("Header")}
-              </HvTableHeader>
-            ))}
-          </HvTableRow>
-        ))}
-      </HvTableHead>
-      <HvTableBody {...getTableBodyProps()}>
-        {rows.map((row) => {
-          prepareRow(row);
+      <HvTable {...getTableProps()}>
+        <HvTableHead>
+          {headerGroups.map((headerGroup) => (
+            <HvTableRow {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map((col) => {
+                if (col.depth === 1 && !col.parent) {
+                  return undefined;
+                }
 
-          return (
-            <HvTableRow {...row.getRowProps()}>
-              {row.cells.map((cell) => (
-                <HvTableCell {...cell.getCellProps()}>
-                  {cell.render("Cell")}
-                </HvTableCell>
-              ))}
+                return (
+                  <HvTableHeader
+                    {...col.getHeaderProps()}
+                    id={col.originalId || col.id}
+                    classes={{
+                      groupColumnMostRight: css({
+                        ":last-child": {
+                          borderRight: \`1px solid \${theme.colors.atmo4}\`,
+                        },
+                      }),
+                    }}
+                  >
+                    {col.render("Header")}
+                  </HvTableHeader>
+                );
+              })}
             </HvTableRow>
-          );
-        })}
-      </HvTableBody>
-    </HvTable>
-  </HvTableContainer>
+          ))}
+        </HvTableHead>
+        <HvTableBody {...getTableBodyProps()}>
+          {rows.map((row) => {
+            prepareRow(row);
+
+            return (
+              <HvTableRow {...row.getRowProps()}>
+                {row.cells.map((cell) => {
+                  const { id, parent } = cell.column;
+                  const headers = [id, parent?.id].filter(Boolean).join(" ");
+
+                  return (
+                    <HvTableCell {...cell.getCellProps()} headers={headers}>
+                      {cell.render("Cell")}
+                    </HvTableCell>
+                  );
+                })}
+              </HvTableRow>
+            );
+          })}
+        </HvTableBody>
+      </HvTable>
+    </HvTableContainer>
 );`,
       },
     },

diff --git a/packages/core/src/components/Table/stories/storiesUtils.tsx b/packages/core/src/components/Table/stories/storiesUtils.tsx
@@ -187,13 +187,30 @@ export const getGroupedColumns = (): HvTableColumnConfig<
   AssetEvent,
   string
 >[] => [
-  { Header: "Title", accessor: "name", style: { minWidth: 120 } },
-  { Header: "Time", accessor: "createdDate", style: { minWidth: 100 } },
-  { Header: "Event Type", accessor: "eventType", style: { minWidth: 100 } },
   {
+    Header: "Title",
+    accessor: "name",
+    style: { minWidth: 120 },
+  },
+  {
+    Header: "Time",
+    accessor: "createdDate",
+    style: { minWidth: 100 },
+  },
+  {
+    Header: "Event Type",
+    accessor: "eventType",
+    style: { minWidth: 100 },
+  },
+  {
+    id: "eventInfo",
     Header: "Event Info",
     columns: [
-      { Header: "Status", accessor: "status", style: { width: 140 } },
+      {
+        Header: "Status",
+        accessor: "status",
+        style: { width: 140 },
+      },
       {
         Header: "Probability",
         accessor: "riskScore",