Align table with NHS.UK frontend

Author: colinrotherham

docs/upgrade-to-6.0.md

@@ -402,6 +402,36 @@ For accessibility reasons, you must make the following changes:
 - remove the `disableHeadingFocus` prop
 - remove custom `onClick` handlers
 
+### Tables
+
+To align with NHS.UK frontend, you must make the following changes:
+
+- rename the `Table` prop `isResponsive` to `responsive`
+- rename the `Table.Cell` prop `isNumeric` to `format="numeric"`
+- remove unnecessary role attributes from tables, sections, rows and cells
+
+```patch
+- <Table caption="Number of cases" isResponsive>
++ <Table caption="Number of cases" responsive>
+-   <Table.Head role="rowgroup">
++   <Table.Head>
+-     <Table.Row role="row">
++     <Table.Row>
+        <Table.Cell>Location</Table.Cell>
+        <Table.Cell>Number of cases</Table.Cell>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
+-     <Table.Row role="row">
++     <Table.Row>
+        <Table.Cell>England</Table.Cell>
+-       <Table.Cell isNumeric>4,000</Table.Cell>
++       <Table.Cell format="numeric">4,000</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+```
+
 ### Textarea
 
 You must rename the `Textarea` prop `textareaRef` to `ref` for consistency with other components:

src/components/content-presentation/table/Table.tsx

@@ -10,20 +10,30 @@ import TablePanel from './components/TablePanel';
 import TableContext, { ITableContext } from './TableContext';
 
 export interface TableProps extends ComponentPropsWithoutRef<'table'> {
+  firstCellIsHeader?: boolean;
   responsive?: boolean;
   caption?: ReactNode;
   captionProps?: TableCaptionProps;
 }
 
 const TableComponent = forwardRef<HTMLTableElement, TableProps>((props, forwardedRef) => {
-  const { caption, captionProps, children, className, responsive = false, ...rest } = props;
+  const {
+    caption,
+    captionProps,
+    children,
+    className,
+    firstCellIsHeader = false,
+    responsive = false,
+    ...rest
+  } = props;
 
-  const [headings, setHeadings] = useState<string[]>([]);
+  const [headings, setHeadings] = useState<ReactNode[]>([]);
 
   const contextValue: ITableContext = useMemo(() => {
     return {
-      isResponsive: Boolean(responsive),
+      firstCellIsHeader,
       headings,
+      responsive,
       setHeadings,
     };
   }, [responsive, headings, setHeadings]);
@@ -36,6 +46,7 @@ const TableComponent = forwardRef<HTMLTableElement, TableProps>((props, forwarde
           { 'nhsuk-table-responsive': responsive },
           className,
         )}
+        role={responsive ? 'table' : undefined}
         ref={forwardedRef}
         {...rest}
       >

src/components/content-presentation/table/TableContext.ts

@@ -1,15 +1,17 @@
-import { createContext } from 'react';
+import { ReactNode, createContext } from 'react';
 
 export interface ITableContext {
-  isResponsive: boolean;
-  headings: string[];
-  setHeadings(headings: string[]): void;
+  firstCellIsHeader: boolean;
+  headings: ReactNode[];
+  responsive: boolean;
+  setHeadings(headings: ReactNode[]): void;
 }
 
 const TableContext = createContext<ITableContext>({
   /* eslint-disable @typescript-eslint/no-empty-function */
-  isResponsive: false,
+  firstCellIsHeader: false,
   headings: [],
+  responsive: false,
   setHeadings: () => {},
 });
 

src/components/content-presentation/table/TableHelpers.ts

@@ -9,7 +9,7 @@ export const getHeadingsFromChildren = (children: ReactNode): string[] => {
   const headings: string[] = [];
   Children.map(children, (child) => {
     if (isTableCell(child)) {
-      headings.push(child.props.children.toString());
+      headings.push(child.props.children);
     }
   });
   return headings;

src/components/content-presentation/table/components/TableCell.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import React, { ComponentPropsWithoutRef, FC, useContext } from 'react';
 import useDevWarning from '@util/hooks/UseDevWarning';
+import TableContext, { ITableContext } from '../TableContext';
 import TableSectionContext, { TableSection } from '../TableSectionContext';
 
 const CellOutsideOfSectionWarning =
@@ -9,36 +10,47 @@ const CellOutsideOfSectionWarning =
 export interface TableCellProps
   extends ComponentPropsWithoutRef<'th'>,
     ComponentPropsWithoutRef<'td'> {
-  _responsive?: boolean;
-  _responsiveHeading?: string;
-  isNumeric?: boolean;
+  index?: number;
+  format?: 'numeric';
 }
 
-const TableCell: FC<TableCellProps> = ({
-  className,
-  _responsive = false,
-  _responsiveHeading = '',
-  isNumeric,
-  children,
-  ...rest
-}) => {
-  const section = useContext(TableSectionContext);
+const TableCell: FC<TableCellProps> = ({ className, format, children, index = -1, ...rest }) => {
+  const { firstCellIsHeader, headings, responsive } = useContext<ITableContext>(TableContext);
+  const section = useContext<TableSection>(TableSectionContext);
+
   useDevWarning(CellOutsideOfSectionWarning, () => section === TableSection.NONE);
 
-  const cellClass = section === TableSection.HEAD ? 'nhsuk-table__header' : 'nhsuk-table__cell';
-  const classes = classNames(cellClass, { [`${cellClass}--numeric`]: isNumeric }, className);
+  const isColHeader = section === TableSection.HEAD;
+  const isRowHeader = section === TableSection.BODY && firstCellIsHeader && index === 0;
 
   return (
     <>
-      {section === TableSection.HEAD ? (
-        <th className={classes} scope="col" {...rest}>
+      {isColHeader || isRowHeader ? (
+        <th
+          className={classNames(
+            'nhsuk-table__header',
+            { [`nhsuk-table__header--${format}`]: !!format && !isRowHeader },
+            className,
+          )}
+          scope={isRowHeader ? 'row' : 'col'}
+          role={isRowHeader ? 'rowheader' : responsive ? 'columnheader' : undefined}
+          {...rest}
+        >
           {children}
         </th>
       ) : (
-        <td className={classes} role={_responsive ? 'cell' : undefined} {...rest}>
-          {_responsive && (
+        <td
+          className={classNames(
+            'nhsuk-table__cell',
+            { [`nhsuk-table__cell--${format}`]: !!format },
+            className,
+          )}
+          role={responsive ? 'cell' : undefined}
+          {...rest}
+        >
+          {responsive && !!headings[index] && (
             <span className="nhsuk-table-responsive__heading" aria-hidden>
-              {_responsiveHeading}
+              {headings[index]}{' '}
             </span>
           )}
           {children}

src/components/content-presentation/table/components/TableHead.tsx

@@ -1,14 +1,23 @@
-import React, { ComponentPropsWithoutRef, FC } from 'react';
+import React, { ComponentPropsWithoutRef, FC, useContext } from 'react';
 import classNames from 'classnames';
+import TableContext, { ITableContext } from '../TableContext';
 import TableSectionContext, { TableSection } from '../TableSectionContext';
 
-const TableHead: FC<ComponentPropsWithoutRef<'thead'>> = ({ children, className, ...rest }) => (
-  <thead className={classNames('nhsuk-table__head', className)} {...rest}>
-    <TableSectionContext.Provider value={TableSection.HEAD}>
-      {children}
-    </TableSectionContext.Provider>
-  </thead>
-);
+const TableHead: FC<ComponentPropsWithoutRef<'thead'>> = ({ children, className, ...rest }) => {
+  const { responsive } = useContext<ITableContext>(TableContext);
+
+  return (
+    <thead
+      className={classNames('nhsuk-table__head', className)}
+      role={responsive ? 'rowgroup' : undefined}
+      {...rest}
+    >
+      <TableSectionContext.Provider value={TableSection.HEAD}>
+        {children}
+      </TableSectionContext.Provider>
+    </thead>
+  );
+};
 
 TableHead.displayName = 'Table.Head';
 

src/components/content-presentation/table/components/TableRow.tsx

@@ -13,35 +13,27 @@ import TableSectionContext, { TableSection } from '../TableSectionContext';
 
 const TableRow: FC<ComponentPropsWithoutRef<'tr'>> = ({ children, className, ...rest }) => {
   const section = useContext(TableSectionContext);
-  const { isResponsive, headings, setHeadings } = useContext(TableContext);
+  const { responsive, setHeadings } = useContext(TableContext);
 
   useEffect(() => {
-    if (isResponsive && section === TableSection.HEAD) {
+    if (responsive && section === TableSection.HEAD) {
       setHeadings(getHeadingsFromChildren(children));
     }
-  }, [isResponsive, section, children]);
+  }, [responsive, section, children]);
 
-  if (isResponsive && section === TableSection.BODY) {
-    const tableCells = Children.map(children, (child, index) => {
-      if (isTableCell(child)) {
-        return cloneElement(child, {
-          _responsive: isResponsive,
-          _responsiveHeading: `${headings[index] || ''} `,
-        });
-      }
-      return child;
-    });
-
-    return (
-      <tr className={classNames('nhsuk-table__row', className)} {...rest}>
-        {tableCells}
-      </tr>
-    );
-  }
+  const tableCells = Children.map(children, (child, index) => {
+    return section === TableSection.BODY && isTableCell(child)
+      ? cloneElement(child, { index })
+      : child;
+  });
 
   return (
-    <tr className={classNames('nhsuk-table__row', className)} {...rest}>
-      {children}
+    <tr
+      className={classNames('nhsuk-table__row', className)}
+      role={responsive ? 'row' : undefined}
+      {...rest}
+    >
+      {tableCells}
     </tr>
   );
 };

src/components/content-presentation/table/components/__tests__/Table.test.tsx

@@ -3,16 +3,57 @@ import { renderClient, renderServer } from '@util/components';
 import Table from '../..';
 
 describe('Table', () => {
+  const Example = (props: Parameters<typeof Table>[0]) => (
+    <Table caption="Skin symptoms and possible causes" {...props}>
+      <Table.Head>
+        <Table.Row>
+          <Table.Cell>Skin Symptoms</Table.Cell>
+          <Table.Cell>Possible cause</Table.Cell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>Blisters on lips or around the mouth</Table.Cell>
+          <Table.Cell>cold sores</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Itchy, dry, cracked, sore</Table.Cell>
+          <Table.Cell>eczema</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Itchy blisters</Table.Cell>
+          <Table.Cell>shingles, chickenpox</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  );
+
   it('matches snapshot', async () => {
-    const { container } = await renderClient(<Table />, {
+    const { container } = await renderClient(<Example />, {
+      className: 'nhsuk-table',
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('matches snapshot when responsive', async () => {
+    const { container } = await renderClient(<Example responsive />, {
+      className: 'nhsuk-table-responsive',
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('matches snapshot when first cell is header', async () => {
+    const { container } = await renderClient(<Example firstCellIsHeader />, {
       className: 'nhsuk-table',
     });
 
     expect(container).toMatchSnapshot();
   });
 
   it('matches snapshot (via server)', async () => {
-    const { container, element } = await renderServer(<Table />, {
+    const { container, element } = await renderServer(<Example />, {
       className: 'nhsuk-table',
     });
 

src/components/content-presentation/table/components/__tests__/TableCell.test.tsx

@@ -68,7 +68,7 @@ describe('Table.Cell', () => {
     expect(cellWrapper).toBeTruthy();
   });
 
-  it('adds responsive heading when _responsive=True', () => {
+  it('adds responsive heading when responsive', () => {
     const { container } = render(
       <Table responsive>
         <Table.Head>
@@ -90,12 +90,12 @@ describe('Table.Cell', () => {
     expect(spanWrapper?.textContent).toBe('TestHeading ');
   });
 
-  it('adds the numeric class when isNumeric is true', () => {
+  it('adds the numeric class when `format: numeric` is set', () => {
     const { container } = render(
       <table>
         <tbody>
           <tr>
-            <Table.Cell data-test="cell" isNumeric />
+            <Table.Cell data-test="cell" format="numeric" />
           </tr>
         </tbody>
       </table>,
@@ -105,12 +105,12 @@ describe('Table.Cell', () => {
     expect(cell).toBeTruthy();
   });
 
-  it('adds the numeric header class when isNumeric is true', () => {
+  it('adds the numeric header class when `format: numeric` is set', () => {
     const { container } = render(
       <table>
         <Table.Head>
           <tr>
-            <Table.Cell data-test="cell" isNumeric />
+            <Table.Cell data-test="cell" format="numeric" />
           </tr>
         </Table.Head>
       </table>,
@@ -120,7 +120,7 @@ describe('Table.Cell', () => {
     expect(cell).toBeTruthy();
   });
 
-  it('does not add the numeric header when isNumeric is false', () => {
+  it('does not add the numeric header when `format: numeric` is omitted', () => {
     const { container } = render(
       <table>
         <Table.Head>