refactor: use buttons for sortable <th>s (#898)

* refactor: use buttons for sortable <th>s

* refactor: announce sorting to screen readers

* refactor: fix MenuItem padding override

frontend/src/component/common/Announcer/AnnouncerContext/AnnouncerContext.test.tsx

@@ -0,0 +1,27 @@
+import { render } from 'utils/testRenderer';
+import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider';
+import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext';
+import { useContext, useEffect } from 'react';
+import { screen } from '@testing-library/react';
+
+test('AnnouncerContext', async () => {
+    const TestComponent = () => {
+        const { setAnnouncement } = useContext(AnnouncerContext);
+
+        useEffect(() => {
+            setAnnouncement('Foo');
+            setAnnouncement('Bar');
+        }, [setAnnouncement]);
+
+        return null;
+    };
+
+    render(
+        <AnnouncerProvider>
+            <TestComponent />
+        </AnnouncerProvider>
+    );
+
+    expect(screen.getByRole('status')).not.toHaveTextContent('Foo');
+    expect(screen.getByRole('status')).toHaveTextContent('Bar');
+});

frontend/src/component/common/Announcer/AnnouncerContext/AnnouncerContext.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export interface IAnnouncerContext {
+    setAnnouncement: React.Dispatch<React.SetStateAction<string | undefined>>;
+}
+
+const setAnnouncementPlaceholder = () => {
+    throw new Error('setAnnouncement called outside AnnouncerContext');
+};
+
+// AnnouncerContext announces messages to screen readers through a live region.
+// Call setAnnouncement to broadcast a new message to the screen reader.
+export const AnnouncerContext = React.createContext<IAnnouncerContext>({
+    setAnnouncement: setAnnouncementPlaceholder,
+});

frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.styles.ts

@@ -0,0 +1,13 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles({
+    container: {
+        clip: 'rect(0 0 0 0)',
+        clipPath: 'inset(50%)',
+        zIndex: -1,
+        width: 1,
+        height: 1,
+        margin: -1,
+        padding: 0,
+    },
+});

frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.tsx

@@ -0,0 +1,23 @@
+import React, { ReactElement } from 'react';
+import { useStyles } from 'component/common/Announcer/AnnouncerElement/AnnouncerElement.styles';
+
+interface IAnnouncerElementProps {
+    announcement?: string;
+}
+
+export const AnnouncerElement = ({
+    announcement,
+}: IAnnouncerElementProps): ReactElement => {
+    const styles = useStyles();
+
+    return (
+        <div
+            role="status"
+            aria-live="polite"
+            aria-atomic
+            className={styles.container}
+        >
+            {announcement}
+        </div>
+    );
+};

frontend/src/component/common/Announcer/AnnouncerProvider/AnnouncerProvider.tsx

@@ -0,0 +1,27 @@
+import React, { ReactElement, useMemo, useState, ReactNode } from 'react';
+import { AnnouncerContext } from '../AnnouncerContext/AnnouncerContext';
+import { AnnouncerElement } from 'component/common/Announcer/AnnouncerElement/AnnouncerElement';
+
+interface IAnnouncerProviderProps {
+    children: ReactNode;
+}
+
+export const AnnouncerProvider = ({
+    children,
+}: IAnnouncerProviderProps): ReactElement => {
+    const [announcement, setAnnouncement] = useState<string>();
+
+    const value = useMemo(
+        () => ({
+            setAnnouncement,
+        }),
+        [setAnnouncement]
+    );
+
+    return (
+        <AnnouncerContext.Provider value={value}>
+            {children}
+            <AnnouncerElement announcement={announcement} />
+        </AnnouncerContext.Provider>
+    );
+};

frontend/src/component/common/Table/TableCellSortable/TableCellSortable.styles.ts

@@ -22,4 +22,10 @@ export const useStyles = makeStyles(theme => ({
             },
         },
     },
+    sortButton: {
+        all: 'unset',
+        '&:focus-visible, &:active': {
+            outline: 'revert',
+        },
+    },
 }));

frontend/src/component/common/Table/TableCellSortable/TableCellSortable.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useContext } from 'react';
 import { TableCell } from '@material-ui/core';
 import classnames from 'classnames';
 import {
@@ -9,6 +9,7 @@ import {
 import { IUsersSort, UsersSortType } from 'hooks/useUsersSort';
 import ConditionallyRender from 'component/common/ConditionallyRender';
 import { useStyles } from 'component/common/Table/TableCellSortable/TableCellSortable.styles';
+import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext';
 
 // Add others as needed, e.g. UsersSortType | FeaturesSortType
 type SortType = UsersSortType;
@@ -29,23 +30,37 @@ export const TableCellSortable = ({
     setSort,
     children,
 }: ITableCellSortableProps) => {
+    const { setAnnouncement } = useContext(AnnouncerContext);
     const styles = useStyles();
 
-    return (
+    const ariaSort =
-        <TableCell
+        sort.type === name
-            className={classnames(
+            ? sort.desc
+                ? 'descending'
+                : 'ascending'
+            : undefined;
+
+    const cellClassName = classnames(
         className,
         styles.tableCellHeaderSortable,
         sort.type === name && 'sorted'
-            )}
+    );
-            onClick={() =>
+
+    const onSortClick = () => {
         setSort(prev => ({
             desc: !Boolean(prev.desc),
             type: name,
-                }))
+        }));
-            }
+        setAnnouncement(
-        >
+            `Sorted table by ${name}, ${sort.desc ? 'ascending' : 'descending'}`
+        );
+    };
+
+    return (
+        <TableCell aria-sort={ariaSort} className={cellClassName}>
+            <button className={styles.sortButton} onClick={onSortClick}>
                 {children}
+            </button>
             <ConditionallyRender
                 condition={sort.type === name}
                 show={

frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts

@@ -48,4 +48,10 @@ export const useStyles = makeStyles(theme => ({
         color: theme.palette.primary.main,
         fontWeight: theme.fontWeight.bold,
     },
+    sortButton: {
+        all: 'unset',
+        '&:focus-visible, &:active': {
+            outline: 'revert',
+        },
+    },
 }));

frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useContext } from 'react';
 import {
     Table,
     TableBody,
@@ -18,6 +18,7 @@ import {
 import PaginateUI from 'component/common/PaginateUI/PaginateUI';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { createGlobalStateHook } from 'hooks/useGlobalState';
+import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext';
 interface IFeatureToggleListNewProps {
     features: IFeatureToggleListItem[];
     loading: boolean;
@@ -83,6 +84,7 @@ const FeatureToggleListNew = ({
     projectId,
 }: IFeatureToggleListNewProps) => {
     const styles = useStyles();
+    const { setAnnouncement } = useContext(AnnouncerContext);
     const [sortOpt, setSortOpt] = useFeatureToggLeProjectSort();
     const [sortedFeatures, setSortedFeatures] = useState(
         sortList([...features], sortOpt)
@@ -116,6 +118,12 @@ const FeatureToggleListNew = ({
         setSortOpt(newSortOpt);
         setSortedFeatures(sortList([...features], newSortOpt));
         setPageIndex(0);
+
+        setAnnouncement(
+            `Sorted table by ${field}, ${
+                sortOpt.direction ? 'ascending' : 'descending'
+            }`
+        );
     };
 
     const getEnvironments = () => {
@@ -163,6 +171,14 @@ const FeatureToggleListNew = ({
         });
     };
 
+    const ariaSort = (field: string) => {
+        return field === sortOpt.field
+            ? sortOpt.direction
+                ? 'ascending'
+                : 'descending'
+            : undefined;
+    };
+
     return (
         <>
             <Table>
@@ -176,13 +192,15 @@ const FeatureToggleListNew = ({
                                 styles.tableCellHeaderSortable
                             )}
                             align="left"
+                            aria-sort={ariaSort('lastSeenAt')}
                         >
-                            <span
+                            <button
                                 data-loading
                                 onClick={() => updateSort('lastSeenAt')}
+                                className={styles.sortButton}
                             >
                                 Last use
-                            </span>
+                            </button>
                         </TableCell>
                         <TableCell
                             className={classnames(
@@ -192,13 +210,15 @@ const FeatureToggleListNew = ({
                                 styles.tableCellHeaderSortable
                             )}
                             align="center"
+                            aria-sort={ariaSort('type')}
                         >
-                            <span
+                            <button
                                 data-loading
                                 onClick={() => updateSort('type')}
+                                className={styles.sortButton}
                             >
                                 Type
-                            </span>
+                            </button>
                         </TableCell>
                         <TableCell
                             className={classnames(
@@ -208,13 +228,15 @@ const FeatureToggleListNew = ({
                                 styles.tableCellHeaderSortable
                             )}
                             align="left"
+                            aria-sort={ariaSort('name')}
                         >
-                            <span
+                            <button
                                 data-loading
                                 onClick={() => updateSort('name')}
+                                className={styles.sortButton}
                             >
                                 Name
-                            </span>
+                            </button>
                         </TableCell>
                         <TableCell
                             className={classnames(
@@ -224,13 +246,15 @@ const FeatureToggleListNew = ({
                                 styles.tableCellHeaderSortable
                             )}
                             align="left"
+                            aria-sort={ariaSort('createdAt')}
                         >
-                            <span
+                            <button
                                 data-loading
                                 onClick={() => updateSort('createdAt')}
+                                className={styles.sortButton}
                             >
                                 Created
-                            </span>
+                            </button>
                         </TableCell>
                         {getEnvironments().map((env: any) => {
                             return (

frontend/src/component/menu/Header/NavigationLink/NavigationLink.styles.ts

@@ -23,6 +23,9 @@ export const useStyles = makeStyles(theme => ({
         color: '#000',
         height: '100%',
         width: '100%',
+        '&&': {
+            // Override MenuItem's built-in padding.
             padding: '0.5rem 1rem',
         },
+    },
 }));

frontend/src/index.tsx

@@ -12,6 +12,7 @@ import AccessProvider from 'component/providers/AccessProvider/AccessProvider';
 import { getBasePath } from 'utils/formatPath';
 import { FeedbackCESProvider } from 'component/feedback/FeedbackCESContext/FeedbackCESProvider';
 import UIProvider from 'component/providers/UIProvider/UIProvider';
+import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider';
 
 ReactDOM.render(
     <DndProvider backend={HTML5Backend}>
@@ -19,10 +20,12 @@ ReactDOM.render(
             <AccessProvider>
                 <Router basename={`${getBasePath()}`}>
                     <MainThemeProvider>
+                        <AnnouncerProvider>
                             <FeedbackCESProvider>
                                 <ScrollTop />
                                 <Route path="/" component={App} />
                             </FeedbackCESProvider>
+                        </AnnouncerProvider>
                     </MainThemeProvider>
                 </Router>
             </AccessProvider>