From 13db9cb9cef1e8cda927a933e2b6ce15eb1c908f Mon Sep 17 00:00:00 2001
From: Alyssa Wang <alyssa.c.wang@gmail.com>
Date: Fri, 25 Aug 2023 19:16:41 -0400
Subject: [PATCH] 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>
---
 client/src/components/App/App.tsx             | 21 +++++--
 client/src/components/Header/Header.tsx       |  9 ++-
 .../RequestDetailModal/RequestDetailModal.tsx |  2 +-
 .../TestSuite/TestSuiteDetails/ResultIcon.tsx | 57 ++++++++++++++-----
 .../TestGroupListItem/TestGroupListItem.tsx   |  2 +-
 .../TestListItem/RequestList.tsx              | 13 ++++-
 .../TestListItem/TestListItem.tsx             |  9 ++-
 package-lock.json                             | 33 +++++------
 package.json                                  |  2 +-
 9 files changed, 106 insertions(+), 42 deletions(-)

diff --git a/client/src/components/App/App.tsx b/client/src/components/App/App.tsx
index 28407f69c..e77059783 100644
--- 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
index 6884c5df3..08c0a9d21 100644
--- 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
index aead3f9bc..b387a1680 100644
--- 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
index 30c2539c3..47360e507 100644
--- 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
index fd587be04..9105c9863 100644
--- 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
index e410f1d39..d3675d715 100644
--- 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
index 6f09485e1..9546e7d73 100644
--- 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
index 2efbf67dc..1add0b165 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,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",
@@ -11817,6 +11817,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.13",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.13.tgz",
+      "integrity": "sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -17558,31 +17566,24 @@
       }
     },
     "node_modules/notistack": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/notistack/-/notistack-2.0.8.tgz",
-      "integrity": "sha512-/IY14wkFp5qjPgKNvAdfL5Jp6q90+MjgKTPh4c81r/lW70KeuX6b9pE/4f8L4FG31cNudbN9siiFS5ql1aSLRw==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/notistack/-/notistack-3.0.1.tgz",
+      "integrity": "sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==",
       "dependencies": {
         "clsx": "^1.1.0",
-        "hoist-non-react-statics": "^3.3.0"
+        "goober": "^2.0.33"
+      },
+      "engines": {
+        "node": ">=12.0.0",
+        "npm": ">=6.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/notistack"
       },
       "peerDependencies": {
-        "@emotion/react": "^11.4.1",
-        "@emotion/styled": "^11.3.0",
-        "@mui/material": "^5.0.0",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        }
       }
     },
     "node_modules/npm-run-path": {
diff --git a/package.json b/package.json
index 6dca570eb..3beac0ced 100644
--- 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",