Merge pull request #151 from GetDKAN/WCMS-14283

WCMS-14283: Improve keyboard accessibility for data table
GetDKAN · Dec 12, 2023 · d324226 · d324226
2 parents 34021af + 711f0ea
commit d324226
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "dist/main.js",
   "source": "src/index.ts",

diff --git a/src/components/Datatable/Datatable.jsx b/src/components/Datatable/Datatable.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   useReactTable,
   flexRender,
@@ -21,6 +21,7 @@ const DataTable = ({
   loading = false,
 }) => {
   const [ sorting, setSorting ] = React.useState([])
+  const [ariaLiveFeedback, setAriaLiveFeedback] = useState('')
   const columnHelper = createColumnHelper()
   const table_columns = columns.map((col) => {
     if (col.cell) {
@@ -81,7 +82,7 @@ const DataTable = ({
         className="dc-c-datatable"
       >
         {canResize
-          ? <TruncatedResizeableTHead table={table} sortElement={sortElement} />
+          ? <TruncatedResizeableTHead table={table} sortElement={sortElement} setAriaLiveFeedback={setAriaLiveFeedback} />
           : <FixedSizeTHead table={table} sortElement={sortElement} />
         }
         {loading ? (
@@ -120,6 +121,7 @@ const DataTable = ({
           </tbody>
         )}
         </table>
+        <div className='sr-only' aria-live='assertive' aria-atomic='true'>{ariaLiveFeedback}</div>
     </div>
   )
 }

diff --git a/src/components/Datatable/TruncatedResizeableTHead.jsx b/src/components/Datatable/TruncatedResizeableTHead.jsx
@@ -1,16 +1,8 @@
-import React from 'react';
-import {
-  useReactTable,
-  flexRender,
-  getCoreRowModel,
-  createColumnHelper,
-  ColumnResizeMode,
-  ColumnDef,
-  getSortedRowModel,
-  SortingState,
-} from "@tanstack/react-table";
+import React, { useState } from 'react';
+import { flexRender } from "@tanstack/react-table";
 
-const TruncatedResizeableTHead = ({table, sortElement}) => {
+const TruncatedResizeableTHead = ({table, sortElement, setAriaLiveFeedback}) => {
+  const [columnResizing, setColumnResizing] = useState('');
   return(
     <thead className="dc-thead--truncated dc-thead--resizeable">
       {table.getHeaderGroups().map(headerGroup => (
@@ -28,7 +20,7 @@ const TruncatedResizeableTHead = ({table, sortElement}) => {
               }
               className="ds-u-border-y--2 ds-u-padding--2 ds-u-border--dark  ds-u-font-weight--bold dc-c-table-header-cell"
               >
-                <div onClick={header.column.getToggleSortingHandler()}>
+                <div>
                   <span style={{maxWidth: header.getSize() - 16}} >
                     {header.isPlaceholder
                       ? null
@@ -37,22 +29,72 @@ const TruncatedResizeableTHead = ({table, sortElement}) => {
                           header.getContext()
                       )}
                   </span>
-                  <span
+                  <button
+                    onClick={header.column.getToggleSortingHandler()}
                     {...{
                       className: header.column.getCanSort()
-                        ? `cursor-pointer select-none ${sortElement(header.column.getIsSorted())}`
+                        ? `cursor-pointer select-none ds-u-focus-visible ${sortElement(header.column.getIsSorted())}`
                         : '',
                     }}
+                    aria-label={`${header.column.columnDef.header} sort order`}
                   />
                 </div>
-                <span
+                <button
                   {...{
                     onMouseDown: header.getResizeHandler(),
                     onTouchStart: header.getResizeHandler(),
-                    className: `dc-c-resize-handle ${
-                      header.column.getIsResizing() ? 'isResizing' : ''
+                    className: `dc-c-resize-handle ds-u-focus-visible ${
+                      header.column.getIsResizing() || header.column.id == columnResizing ? 'isResizing' : ''
                     }`,
                   }}
+                  aria-label={`Resize ${header.column.columnDef.header} column`}
+                  onKeyDown={(e) => {
+                    const columnSizingObject = table.getState().columnSizing;
+                    switch (e.key) {
+                      case 'Enter':
+                      case ' ':
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (columnResizing) {
+                          // end resizing
+                          setColumnResizing('')
+                          setAriaLiveFeedback(`${header.column.columnDef.header} dropped.`)
+                        } else {
+                          // start resizing
+                          setColumnResizing(header.column.id)
+                          setAriaLiveFeedback(`${header.column.columnDef.header} grabbed.`)
+                        }
+                        break;
+
+                      case 'Escape':
+                        if (columnResizing) {
+                          setColumnResizing('')
+                          setAriaLiveFeedback(`${header.column.columnDef.header} dropped.`)
+                        }
+                        break;
+                        case 'ArrowRight':
+                          e.preventDefault();
+                          e.stopPropagation();
+                          if (columnResizing) {
+                            columnSizingObject[header.column.id] = header.getSize() + 10;
+                            table.setColumnSizing(columnSizingObject);
+                            setAriaLiveFeedback(`${header.column.columnDef.header} has been resized. The new width is ${header.getSize()} pixels.`);
+                          }
+                          break;
+                        case 'ArrowLeft':
+                          e.preventDefault();
+                          e.stopPropagation();
+                          if (columnResizing) {
+                            columnSizingObject[header.column.id] = header.getSize() - 10;
+                            table.setColumnSizing(columnSizingObject);
+                            setAriaLiveFeedback(`${header.column.columnDef.header} has been resized. The new width is ${header.getSize()} pixels.`)
+                          }
+                          break;
+                    }
+                  }}
+                  onBlur={() => {
+                    setColumnResizing('')
+                  }}
                 />
               </th>
             )

diff --git a/src/components/Datatable/datatable.scss b/src/components/Datatable/datatable.scss
@@ -25,13 +25,15 @@
     top: 0;
     bottom: 0;
     right: 0;
-    position: absolute;
+    position: absolute !important;
     background-color: #{var(--color-gray-light)};
     width: 10px;
     cursor: col-resize;
     min-width: 10px;
     display: block;
     margin-left: -10px;
+    padding: 0;
+    border: none;
     z-index: 1;
     &.isResizing,
     &:hover {
@@ -58,6 +60,8 @@
 .dc-c-sort--desc {
   padding-left: 8px;
   padding-right: 16px;
+  border: none;
+  background: none;
   &::after {
     font-family: 'Font Awesome 5 Pro';
     display: inline;