feat: cell-level keyboard navigation for Table (#1211)

BREAKING CHANGE

* feat: table with inputs, initial edit mode code

* feat: keyboardNavigation prop

* fix: passing compact prop, focus management, dev story

* fix: focusable styling

* chore: tests

* fix: snapshots

* fix: add screen reader text

* fix: storyshots

* fix: improve screen reader instructions

* fix: storyshot

* fix: role

* fix: storyshots

* feat: version upgrade to fd-styles 0.12.0-rc.64

* Revert "feat: version upgrade to fd-styles 0.12.0-rc.64"

This reverts commit 262b97d.

* fix: syles upgrade to incorrect branch revert to 0.12.0-rc.44

* fix: pr feedback

* fix: storyshot

* fix: size limit 240 KB

* fix: typos

* fix: Table snapshot

Co-authored-by: Mike <[email protected]>

Author: jacobdevera

.size-limit

@@ -3,6 +3,6 @@
     name: "Fundamental-React Size",
     webpack: true,
     path: "lib/index.js",
-    limit: "236 KB"
+    limit: "240 KB"
   }
 ]

src/Popover/Popover.js

@@ -8,7 +8,7 @@ import Popper from '../utils/_Popper';
 import PropTypes from 'prop-types';
 import shortId from '../utils/shortId';
 import tabbable from 'tabbable';
-import { POPOVER_TYPES, POPPER_PLACEMENTS, POPPER_SIZING_TYPES } from '../utils/constants';
+import { GridSelector, POPOVER_TYPES, POPPER_PLACEMENTS, POPPER_SIZING_TYPES } from '../utils/constants';
 import React, { Component } from 'react';
 import 'fundamental-styles/dist/popover.css';
 
@@ -71,10 +71,10 @@ class Popover extends Component {
         this.handleOutsideClick();
 
         if (this.controlRef) {
-            if (tabbable.isTabbable(this.controlRef)) {
+            if (tabbable.isFocusable(this.controlRef)) {
                 this.controlRef.focus();
             } else {
-                const firstTabbableNode = tabbable(this.controlRef)[0];
+                const firstTabbableNode = this.controlRef.querySelectorAll(GridSelector.FOCUSABLE)[0];
                 firstTabbableNode && firstTabbableNode.focus();
             }
         }

src/Table/Table.js

@@ -1,15 +1,23 @@
 import classnames from 'classnames';
+import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
+import GridManager from '../utils/gridManager/gridManager';
+import keycode from 'keycode';
 import PropTypes from 'prop-types';
-import React from 'react';
+import shortid from 'shortid';
+import React, { useCallback, useRef, useState } from 'react';
 import 'fundamental-styles/dist/table.css';
 
 /** A **Table** is a set of tabular data. Line items can support `data`, `images` and `actions`. */
-const Table = React.forwardRef(({ headers, tableData, className, tableBodyClassName,
+const Table = React.forwardRef(({ headers, tableData, className, compact, condensed, keyboardNavigation, localizedText, tableBodyClassName,
     tableBodyProps, tableBodyRowProps, tableCellClassName, tableCheckboxClassName, tableHeaderClassName, tableHeaderProps,
     tableHeaderRowClassName, tableHeaderRowProps, tableRowClassName, richTable, ...props }, ref) => {
 
     const tableClasses = classnames(
         'fd-table',
+        {
+            'fd-table--compact': compact,
+            'fd-table--condensed': condensed
+        },
         className
     );
 
@@ -20,6 +28,9 @@ const Table = React.forwardRef(({ headers, tableData, className, tableBodyClassN
 
     const tableHeaderRowClasses = classnames(
         'fd-table__row',
+        {
+            'fd-table__row--focusable': keyboardNavigation === 'row'
+        },
         tableHeaderRowClassName
     );
 
@@ -30,11 +41,17 @@ const Table = React.forwardRef(({ headers, tableData, className, tableBodyClassN
 
     const tableRowClasses = classnames(
         'fd-table__row',
+        {
+            'fd-table__cell--focusable': keyboardNavigation === 'row'
+        },
         tableRowClassName
     );
 
     const tableCellClasses = classnames(
         'fd-table__cell',
+        {
+            'fd-table__cell--focusable': keyboardNavigation === 'cell'
+        },
         tableCellClassName
     );
 
@@ -44,17 +61,67 @@ const Table = React.forwardRef(({ headers, tableData, className, tableBodyClassN
         tableCheckboxClassName
     );
 
+    const useHookWithRefCallback = () => {
+        const newRef = useRef(null);
+        const setRef = useCallback(node => {
+            if (node && keyboardNavigation !== 'none') {
+                gridManager.current.attachTo({ gridNode: node, onFocusCell, onToggleEditMode });
+            }
+            newRef.current = node;
+        }, []);
+
+        return setRef;
+    };
+
+    const captionId = shortid.generate();
+    const gridManager = useRef(new GridManager());
+    const tableRef = ref || useHookWithRefCallback();
+    const [instructionsText, setInstructionsText] = useState('');
+
+    const onToggleEditMode = (enable) => {
+        setInstructionsText(enable ? localizedText.editModeDisable : '');
+    };
+
+    const onFocusCell = (cell, event) => {
+        const { row, col } = cell;
+        const key = event.which || event.keyCode;
+        const navigatedHorizontally = (key === keycode.codes.left || key === keycode.codes.right) && col > 0;
+        const navigatedVertically = (key === keycode.codes.up || key === keycode.codes.down) && row > 0;
+        if (gridManager.current?.editMode) {
+            setInstructionsText(localizedText.editModeDisable);
+        } else {
+            let newInstructionsText = '';
+            if (navigatedVertically) {
+                newInstructionsText += `${localizedText.row} ${row} `;
+            } else if (navigatedHorizontally) {
+                newInstructionsText += `${localizedText.column} ${col} ${headers[col]} `;
+            } else {
+                newInstructionsText += `${localizedText.arrowKeys} `;
+            }
+            if (gridManager.current?.isEditableCell(cell)) {
+                newInstructionsText += localizedText.editModeEnable;
+            }
+            setInstructionsText(newInstructionsText);
+        }
+    };
+
     let checkboxHeader;
-    let displayHeaders = headers;
+    let displayHeaders = [...headers];
 
     if (richTable) {
         checkboxHeader = <th className={tableCheckboxClasses}>{headers[0]}</th>;
-        displayHeaders = headers.splice(1, headers.length);
+        displayHeaders = displayHeaders.splice(1, headers.length);
     }
 
     return (
-        <table {...props} className={tableClasses}
-            ref={ref}>
+        <table {...props} aria-describedby={captionId}
+            className={tableClasses}
+            ref={tableRef}
+            role={keyboardNavigation ? 'grid' : 'table'}>
+            <caption aria-live='polite' className='fd-table__caption'
+                id={captionId}>
+                {instructionsText}
+            </caption>
             <thead className={tableHeaderClasses} {...tableHeaderProps}>
                 <tr className={tableHeaderRowClasses} {...tableHeaderRowProps}>
                     {richTable && checkboxHeader}
@@ -66,7 +133,8 @@ const Table = React.forwardRef(({ headers, tableData, className, tableBodyClassN
             <tbody className={tableBodyClasses} {...tableBodyProps}>
                 {tableData.map((row, index) => {
                     let rowProps, checkboxCell;
-                    let displayRows = row.rowData;
+                    let displayCells = [...row.rowData];
+
                     if (tableBodyRowProps) {
                         rowProps = (typeof tableBodyRowProps === 'function'
                             ? tableBodyRowProps(row, index)
@@ -80,7 +148,7 @@ const Table = React.forwardRef(({ headers, tableData, className, tableBodyClassN
                                 {row.rowData[0]}
                             </td>
                         );
-                        displayRows = row.rowData.splice(1, row.rowData.length);
+                        displayCells = displayCells.splice(1, row.rowData.length);
                     }
 
                     return (
@@ -90,8 +158,11 @@ const Table = React.forwardRef(({ headers, tableData, className, tableBodyClassN
                             aria-selected={row?.rowData[0]?.props?.checked}
                             key={index}>
                             {richTable && checkboxCell}
-                            {displayRows.map((rowData, cellIndex) => {
-                                return <td className={tableCellClasses} key={cellIndex}>{rowData}</td>;
+                            {displayCells.map((cellData, cellIndex) => {
+                                if (cellData.type?.propTypes?.compact) {
+                                    cellData = React.cloneElement(cellData, { compact: compact || condensed });
+                                }
+                                return <td className={tableCellClasses} key={cellIndex}>{cellData}</td>;
                             })}
                         </tr>
                     );
@@ -106,14 +177,33 @@ Table.displayName = 'Table';
 Table.propTypes = {
     /** Array of localized text strings for the column headers */
     headers: PropTypes.array.isRequired,
-    /** Array of objects that contain one property: `rowData` (an array of strings containing data for each column in the row) */
+    /** Array of objects that contain one property: `rowData` (an array of nodes containing data for each column in the row) */
     tableData: PropTypes.arrayOf(
         PropTypes.shape({
             rowData: PropTypes.array
         }).isRequired
     ).isRequired,
     /** CSS class(es) to add to the element */
     className: PropTypes.string,
+    /** Set to **true** to enable compact mode */
+    compact: PropTypes.bool,
+    /** Set to **true** to enable condensed mode */
+    condensed: PropTypes.bool,
+    /** Determines the type of keyboard navigation for the table. Set to `'cell'` for cell-level navigation or `'row'` for row-level navigation */
+    keyboardNavigation: PropTypes.oneOf(['none', 'cell', 'row']),
+    /** Localized text to be updated based on location/language */
+    localizedText: CustomPropTypes.i18n({
+        /** Localized string informing screen reader users the table can be navigated by arrow keys */
+        arrowKeys: PropTypes.string,
+        /** Localized string informing screen reader users the current cell can be edited  */
+        editModeEnable: PropTypes.string,
+        /** Localized string informing screen reader users how to return to cell navigation */
+        editModeDisable: PropTypes.string,
+        /** Localized string for 'row' */
+        row: PropTypes.string,
+        /** Localized string for 'column' */
+        column: PropTypes.string
+    }),
     /** Set to **true** if Table contains checkboxes */
     richTable: PropTypes.bool,
     /** Additional classes to be added to the `<tbody>` element */
@@ -142,4 +232,15 @@ Table.propTypes = {
     tableRowClassName: PropTypes.string
 };
 
+Table.defaultProps = {
+    keyboardNavigation: 'none',
+    localizedText: {
+        arrowKeys: 'Use arrow keys to navigate between cells',
+        editModeEnable: 'Press Enter to edit this cell',
+        editModeDisable: 'Press Escape to return to cell navigation',
+        row: 'row',
+        column: 'column'
+    }
+};
+
 export default Table;