From a757fc639e5d5871623366a7e41e62dcf28bbd92 Mon Sep 17 00:00:00 2001
From: Bethany Dunfield <bethany.dunfield@civicactions.com>
Date: Fri, 8 Dec 2023 13:37:16 -0700
Subject: [PATCH 1/2] WCMS-14283: Improve keyboard accessibility for data table

---
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 src/components/Datatable/Datatable.jsx        |  6 +-
 .../Datatable/TruncatedResizeableTHead.jsx    | 78 ++++++++++++++-----
 src/components/Datatable/datatable.scss       |  6 +-
 5 files changed, 72 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c6d6e3ed..ff409383 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@civicactions/cmsds-open-data-components",
-      "version": "2.1.4",
+      "version": "2.1.5",
       "license": "GPL-3.0",
       "dependencies": {
         "@popperjs/core": "^2.11.6",
diff --git a/package.json b/package.json
index 2edf5613..0b51e0a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "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
index 82c07f57..c88d9014 100644
--- 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
index 707dbf88..76b0b042 100644
--- 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
index d6dfb478..b74824cc 100644
--- 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;

From 711f0ea29bccdb306401cb9711d97f8fcc9706e6 Mon Sep 17 00:00:00 2001
From: Bethany Dunfield <bethany.dunfield@civicactions.com>
Date: Tue, 12 Dec 2023 13:59:43 -0700
Subject: [PATCH 2/2] Bump to 2.2.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ff409383..d0e8a35b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "2.1.5",
+  "version": "2.2.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@civicactions/cmsds-open-data-components",
-      "version": "2.1.5",
+      "version": "2.2.0",
       "license": "GPL-3.0",
       "dependencies": {
         "@popperjs/core": "^2.11.6",
diff --git a/package.json b/package.json
index 0b51e0a8..78300e94 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "2.1.5",
+  "version": "2.2.0",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "dist/main.js",
   "source": "src/index.ts",