FI-2094: Improve tooltip a11y (#386)

* update notistack * add focus to icons with tooltips * update snackbar styles * add copy tooltip * add tooltip to header icon --------- Co-authored-by: Alyssa Wang <awang@mitre.org>
inferno-framework · Aug 25, 2023 · 13db9cb · 13db9cb
1 parent b680f84
commit 13db9cb
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 42 deletions.
diff --git a/client/src/components/App/App.tsx b/client/src/components/App/App.tsx
@@ -1,13 +1,21 @@
-import { SnackbarProvider } from 'notistack';
 import React, { FC, useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';
+import { Theme } from '@mui/material/styles';
+import { SnackbarProvider } from 'notistack';
 import { getTestSuites } from '~/api/TestSuitesApi';
 import { router } from '~/components/App/Router';
 import { TestSuite } from '~/models/testSuiteModels';
 import { useAppStore } from '~/store/app';
 import { useTestSessionStore } from '~/store/testSession';
 import SnackbarCloseButton from 'components/_common/SnackbarCloseButton';
-import lightTheme from '~/styles/theme';
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles<{ height: string }>()((theme: Theme, { height }) => ({
+  container: {
+    marginBottom: height,
+    zIndex: `${theme.zIndex.snackbar} !important`,
+  },
+}));
 
 const App: FC<unknown> = () => {
   const footerHeight = useAppStore((state) => state.footerHeight);
@@ -18,6 +26,10 @@ const App: FC<unknown> = () => {
   const setWindowIsSmall = useAppStore((state) => state.setWindowIsSmall);
   const testRunInProgress = useTestSessionStore((state) => state.testRunInProgress);
 
+  const { classes } = useStyles({
+    height: testRunInProgress ? `${72 + footerHeight}px` : `${footerHeight}px`,
+  });
+
   // Update UI on window resize
   useEffect(() => {
     window.addEventListener('resize', handleResize);
@@ -57,9 +69,8 @@ const App: FC<unknown> = () => {
         horizontal: 'right',
       }}
       action={(id) => <SnackbarCloseButton id={id} />}
-      style={{
-        marginBottom: testRunInProgress ? `${72 + footerHeight}px` : `${footerHeight}px`,
-        zIndex: lightTheme.zIndex.snackbar,
+      classes={{
+        containerAnchorOriginBottomRight: classes.container,
       }}
     >
       <RouterProvider router={router(testSuites)} />

diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
@@ -8,6 +8,7 @@ import { useAppStore } from '~/store/app';
 import useStyles from './styles';
 import icon from '~/images/inferno_icon.png';
 import lightTheme from '~/styles/theme';
+import CustomTooltip from '../_common/CustomTooltip';
 
 export interface HeaderProps {
   suiteId?: string;
@@ -63,7 +64,13 @@ const Header: FC<HeaderProps> = ({
           </IconButton>
         ) : (
           <Link to="/" aria-label="Inferno Home">
-            <img src={getStaticPath(icon as string)} alt="Inferno logo" className={classes.logo} />
+            <CustomTooltip title="Return to Suite Selection">
+              <img
+                src={getStaticPath(icon as string)}
+                alt="Inferno logo"
+                className={classes.logo}
+              />
+            </CustomTooltip>
           </Link>
         )}
 

diff --git a/client/src/components/RequestDetailModal/RequestDetailModal.tsx b/client/src/components/RequestDetailModal/RequestDetailModal.tsx
@@ -65,7 +65,7 @@ const RequestDetailModal: FC<RequestDetailModalProps> = ({
             {request?.url}
           </Box>
           {request?.url && (
-            <CustomTooltip open={copySuccess} title="Text copied!">
+            <CustomTooltip title={copySuccess ? 'Text copied!' : 'Copy text'}>
               <Box pr={1}>
                 <IconButton color="secondary" onClick={() => void copyTextClick(request.url)}>
                   <ContentCopy fontSize="inherit" />

diff --git a/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx b/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx
@@ -27,7 +27,11 @@ const ResultIcon: FC<ResultIconProps> = ({ result, isRunning }) => {
   if (isRunning && result?.test_run_id !== testRunId) {
     return (
       <CustomTooltip title="pending">
-        <Pending style={{ color: grey[500] }} /* data-testid={`${result.id}-${result.result}`} */ />
+        <Pending
+          tabIndex={0}
+          aria-hidden="false"
+          style={{ color: grey[500] }} /* data-testid={`${result.id}-${result.result}`} */
+        />
       </CustomTooltip>
     );
   } else if (result) {
@@ -36,6 +40,8 @@ const ResultIcon: FC<ResultIconProps> = ({ result, isRunning }) => {
         return (
           <CustomTooltip title="passed">
             <CheckCircle
+              tabIndex={0}
+              aria-hidden="false"
               style={{ color: result.optional ? green[100] : green[500] }}
               data-testid={`${result.id}-${result.result}`}
             />
@@ -45,6 +51,8 @@ const ResultIcon: FC<ResultIconProps> = ({ result, isRunning }) => {
         return (
           <CustomTooltip title="failed">
             <Cancel
+              tabIndex={0}
+              aria-hidden="false"
               style={{ color: result.optional ? grey[500] : red[500] }}
               data-testid={`${result.id}-${result.result}`}
             />
@@ -54,6 +62,8 @@ const ResultIcon: FC<ResultIconProps> = ({ result, isRunning }) => {
         return (
           <CustomTooltip title="cancel">
             <Cancel
+              tabIndex={0}
+              aria-hidden="false"
               style={{ color: result.optional ? grey[500] : red[500] }}
               data-testid={`${result.id}-${result.result}`}
             />
@@ -63,6 +73,8 @@ const ResultIcon: FC<ResultIconProps> = ({ result, isRunning }) => {
         return (
           <CustomTooltip title="skipped">
             <Block
+              tabIndex={0}
+              aria-hidden="false"
               style={{ color: result.optional ? grey[500] : orange[800] }}
               data-testid={`${result.id}-${result.result}`}
             />
@@ -71,13 +83,20 @@ const ResultIcon: FC<ResultIconProps> = ({ result, isRunning }) => {
       case 'omit':
         return (
           <CustomTooltip title="omitted">
-            <Circle style={{ color: grey[500] }} data-testid={`${result.id}-${result.result}`} />
+            <Circle
+              tabIndex={0}
+              aria-hidden="false"
+              style={{ color: grey[500] }}
+              data-testid={`${result.id}-${result.result}`}
+            />
           </CustomTooltip>
         );
       case 'error':
         return (
           <CustomTooltip title="error">
             <Error
+              tabIndex={0}
+              aria-hidden="false"
               style={{ color: result.optional ? grey[500] : purple[500] }}
               data-testid={`${result.id}-${result.result}`}
             />
@@ -86,26 +105,38 @@ const ResultIcon: FC<ResultIconProps> = ({ result, isRunning }) => {
       case 'wait':
         return (
           <CustomTooltip title="wait">
-            <AccessTime data-testid={`${result.id}-${result.result}`} />
+            <AccessTime
+              tabIndex={0}
+              aria-hidden="false"
+              data-testid={`${result.id}-${result.result}`}
+            />
           </CustomTooltip>
         );
 
       default:
         return (
-          <RadioButtonUnchecked
-            style={{
-              color: grey[500],
-            }}
-          />
+          <CustomTooltip title="no result">
+            <RadioButtonUnchecked
+              tabIndex={0}
+              aria-hidden="false"
+              style={{
+                color: grey[500],
+              }}
+            />
+          </CustomTooltip>
         );
     }
   } else {
     return (
-      <RadioButtonUnchecked
-        style={{
-          color: grey[500],
-        }}
-      />
+      <CustomTooltip title="no result">
+        <RadioButtonUnchecked
+          tabIndex={0}
+          aria-hidden="false"
+          style={{
+            color: grey[500],
+          }}
+        />
+      </CustomTooltip>
     );
   }
 };

diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/TestGroupListItem.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/TestGroupListItem.tsx
@@ -126,7 +126,7 @@ const TestGroupListItem: FC<TestGroupListItemProps> = ({
         data-testid={`${testGroup.id}-summary`}
         aria-controls={`${testGroup.id}-detail`}
         className={classes.accordionSummary}
-        expandIcon={view === 'run' && <ExpandMoreIcon sx={{ userSelect: 'auto' }} />}
+        expandIcon={view === 'run' && <ExpandMoreIcon tabIndex={0} aria-hidden="false" />}
       >
         <Box display="flex" alignItems="center" width="100%">
           <Box display="inline-flex">

diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/RequestList.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/RequestList.tsx
@@ -69,7 +69,13 @@ const RequestList: FC<RequestListProps> = ({ requests, resultId, updateRequest,
     if (request.result_id !== resultId) {
       return (
         <CustomTooltip title="This request was performed in another test and the result is used by this test">
-          <Input fontSize="small" sx={{ pr: 1 }} />
+          <Input
+            color="secondary"
+            fontSize="small"
+            tabIndex={0}
+            aria-hidden="false"
+            sx={{ pr: 1 }}
+          />
         </CustomTooltip>
       );
     }
@@ -150,8 +156,9 @@ const RequestList: FC<RequestListProps> = ({ requests, resultId, updateRequest,
               </Typography>
             </CustomTooltip>
             <CustomTooltip
-              open={copySuccess[request.url as keyof typeof copySuccess] || false}
-              title="Text copied!"
+              title={
+                copySuccess[request.url as keyof typeof copySuccess] ? 'Text copied!' : 'Copy text'
+              }
               sx={
                 view === 'report'
                   ? {

diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx
@@ -25,6 +25,7 @@ import ProblemBadge from './ProblemBadge';
 import TestRunDetail from './TestRunDetail';
 import type { TabProps } from './TestRunDetail';
 import { MessageCounts, countMessageTypes } from './helper';
+import CustomTooltip from '~/components/_common/CustomTooltip';
 import useStyles from './styles';
 
 interface TestListItemProps {
@@ -228,7 +229,13 @@ const TestListItem: FC<TestListItemProps> = ({
           data-testid={`${test.id}-summary`}
           aria-controls={`${test.id}-detail`}
           role={view === 'report' ? 'region' : 'button'}
-          expandIcon={view === 'run' && <ExpandMoreIcon />}
+          expandIcon={
+            view === 'run' && (
+              <CustomTooltip title="expand test">
+                <ExpandMoreIcon tabIndex={0} aria-hidden="false" />
+              </CustomTooltip>
+            )
+          }
           className={classes.accordionSummary}
           onKeyDown={(e) => {
             if (view !== 'report' && e.key === 'Enter') {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "@mui/material": "^5.11.13",
     "history": "^5.3.0",
     "js-yaml": "^4.1.0",
-    "notistack": "^2.0.8",
+    "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.1",