adds the ability to change the table role (#1076)

helpscout · Jun 30, 2022 · e815a30 · e815a30
1 parent 54b0eab
commit e815a30
Show file tree

Hide file tree

Showing 6 changed files with 208 additions and 87 deletions.
diff --git a/src/components/Table/Table.Head.jsx b/src/components/Table/Table.Head.jsx
@@ -17,6 +17,7 @@ function TableHead({
   selected,
   selectionKey,
   sortedInfo,
+  tableRole,
   withSelectableRows,
 }) {
   function handleChange(_, checked) {
@@ -51,6 +52,7 @@ function TableHead({
               column={column}
               isLoading={isLoading}
               sortedInfo={sortedInfo}
+              tableRole={tableRole}
             />
           ))}
       </tr>

diff --git a/src/components/Table/Table.HeaderCell.jsx b/src/components/Table/Table.HeaderCell.jsx
@@ -15,20 +15,28 @@ import {
   generateCustomHeaderCell,
 } from './Table.utils'
 
-export default function HeaderCell({ column, isLoading, sortedInfo }) {
+export default function HeaderCell({
+  column,
+  isLoading,
+  sortedInfo,
+  tableRole,
+}) {
   const sorterBtnId = Array.isArray(column.columnKey)
     ? `${column.columnKey.join('_')}_${column.sortKey}_sorter`
     : `${column.columnKey}_${column.sortKey}_sorter`
 
-  function getColumnSortStatus() {
+  function isTableSortedByThisColumn() {
     const colKey = Array.isArray(column.columnKey)
       ? column.sortKey
       : column.columnKey
 
-    const isTableSortedByThisColumn =
+    return (
       !isNil(sortedInfo) && sortedInfo.order && sortedInfo.columnKey === colKey
+    )
+  }
 
-    if (isTableSortedByThisColumn) {
+  function getColumnSortStatus() {
+    if (isTableSortedByThisColumn()) {
       return sortedInfo.order
     }
 
@@ -81,6 +89,7 @@ export default function HeaderCell({ column, isLoading, sortedInfo }) {
 
     if (isSortable) {
       const columnSortStatus = getColumnSortStatus()
+      const isSorted = isTableSortedByThisColumn()
 
       return (
         <SortableCellUI
@@ -91,6 +100,11 @@ export default function HeaderCell({ column, isLoading, sortedInfo }) {
           )}
         >
           <SortableCellContentUI
+            aria-label={
+              isSorted &&
+              tableRole !== 'table' &&
+              `Sorted by ${sortedInfo.columnKey} ${columnSortStatus}`
+            }
             align={column.align}
             className={`${TABLE_CLASSNAME}__SortableHeaderCell__title`}
             onClick={handleClick}
@@ -122,7 +136,7 @@ export default function HeaderCell({ column, isLoading, sortedInfo }) {
       className={generateCellClassNames(column, 'HeaderCell')}
       align={column.align}
       cellWidth={column.width}
-      aria-sort={getColumnSortStatus()}
+      aria-sort={tableRole === 'table' ? getColumnSortStatus() : null}
     >
       {renderCellContents()}
     </HeaderCellUI>

diff --git a/src/components/Table/Table.css.js b/src/components/Table/Table.css.js
@@ -81,8 +81,8 @@ export const TableUI = styled('table')`
     background: linear-gradient(
       to right,
       ${props => props.theme.bgFocusIndicator},
-      ${props => props.theme.bgFocusIndicator} 3px,
-      transparent 3px,
+      ${props => props.theme.bgFocusIndicator} 2px,
+      transparent 2px,
       transparent 100%
     );
   }

diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx
@@ -49,6 +49,7 @@ export function Table({
   },
   tableClassName,
   tableDescription,
+  tableRole = 'table',
   tableWidth = { min: '700px' },
   withColumnChooser = false,
   withFocusableRows = false,
@@ -145,6 +146,7 @@ export function Table({
               withSelectableRows && 'selection-enabled',
               tableClassName
             )}
+            role={tableRole}
             tableWidth={tableWidth}
             withTallRows={withTallRows}
           >
@@ -160,6 +162,7 @@ export function Table({
                 state.selectedRows.length === state.currentTableData.length
               }
               sortedInfo={sortedInfo}
+              tableRole={tableRole}
               withSelectableRows={withSelectableRows}
             />
             <TableBody
@@ -258,6 +261,8 @@ Table.propTypes = {
   tableClassName: PropTypes.string,
   /** Description of the table contents for accessibility */
   tableDescription: PropTypes.string.isRequired,
+  /** Change the default role of the table */
+  tableRole: PropTypes.string,
   /** The `<table>` width */
   tableWidth: PropTypes.shape({ min: PropTypes.string, max: PropTypes.string }),
   /** An object to customize the visual appearance of the table. See [Skins.md](/src/components/Table/docs/Skins.md) */