CRDCDH-633 More Audit Fixes

- Questionnaire ListView loader missing aria-label
- Data Submissions ListView loader missing aria-label
- Data Submissions Batch Table loader missing aria-label
- Organization List View loader missing aria-label
- User List View loader missing aria-label
- Footer newsletter asterisk did not meet min contrast ratio
- Questionnaire Section D Remove File Type button empty with no label

src/components/DataSubmissions/DataSubmissionBatchTable.tsx

@@ -1,7 +1,5 @@
 /* eslint-disable react/no-array-index-key */
 import {
-  Box,
-  CircularProgress,
   Table,
   TableBody,
   TableCell,
@@ -17,6 +15,7 @@ import {
 import { ElementType, forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { useAuthContext } from "../Contexts/AuthContext";
 import PaginationActions from "./PaginationActions";
+import SuspenseLoader from '../SuspenseLoader';
 
 const StyledTableContainer = styled(TableContainer)({
   borderRadius: "8px",
@@ -215,23 +214,7 @@ const DataSubmissionBatchTable = <T,>({
 
   return (
     <StyledTableContainer>
-      {loading && (
-        <Box
-          sx={{
-            position: "absolute",
-            left: 0,
-            top: 0,
-            width: "100%",
-            height: "100%",
-            zIndex: "9999",
-          }}
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-        >
-          <CircularProgress size={64} disableShrink thickness={3} />
-        </Box>
-      )}
+      {loading && (<SuspenseLoader fullscreen={false} />)}
       <Table>
         <StyledTableHead>
           <TableRow>

src/components/Footer/FooterDesktop.tsx

@@ -222,11 +222,6 @@ const BottomFooter = styled.div`
   }
 `;
 
-const StyledAsterisk = styled("span")(() => ({
-  color: "#D54309",
-  marginLeft: "2px",
-}));
-
 const FooterDesktop = () => {
   const [emailContent, setEmailContent] = useState("");
   const emailForm = useRef<HTMLFormElement>(null);
@@ -288,7 +283,6 @@ const FooterDesktop = () => {
             <div className="enterTitle">
               <label htmlFor="email">
                 Sign up for the newsletter
-                <StyledAsterisk>*</StyledAsterisk>
                 <input ref={emailInput} id="email" type="email" name="email" className="signUpInputBox" value={emailContent} onChange={(e) => handleChange(e)} />
               </label>
             </div>

src/components/Footer/FooterMobile.tsx

@@ -74,7 +74,7 @@ const FooterLinksContainer = styled.div`
   display: flex;
   flex-direction: column;
   .footItem {
-    width: 253px; 
+    width: 253px;
   }
 
   .footItemTitle {
@@ -151,7 +151,7 @@ const FooterLinksContainer = styled.div`
     margin-right: 0.25rem;
   }
   .rotate{
-    transform: rotate(90deg); 
+    transform: rotate(90deg);
   }
 `;
 
@@ -283,11 +283,6 @@ const BottomFooter = styled.div`
   }
 `;
 
-const StyledAsterisk = styled("span")(() => ({
-  color: "#D54309",
-  marginLeft: "2px",
-}));
-
 const FooterMobile = () => {
   const [emailContent, setEmailContent] = useState("");
   const emailForm = useRef<HTMLFormElement>(null);
@@ -358,7 +353,6 @@ const FooterMobile = () => {
             <div className="enterTitle">
               <label htmlFor="email">
                 Sign up for the newsletter
-                <StyledAsterisk>*</StyledAsterisk>
                 <input ref={emailInput} id="email" type="email" name="email" className="signUpInputBox" value={emailContent} onChange={(e) => handleChange(e)} />
               </label>
             </div>

src/components/Footer/FooterTablet.tsx

@@ -15,7 +15,7 @@ const FooterContainer = styled.div`
   padding: 2rem 1rem 0 1rem;
   max-width: 1420px;
   margin-left: auto;
-  margin-right: auto;  
+  margin-right: auto;
   display: flex;
   justify-content: space-between;
 
@@ -237,11 +237,6 @@ const BottomFooter = styled.div`
   }
 `;
 
-const StyledAsterisk = styled("span")(() => ({
-  color: "#D54309",
-  marginLeft: "2px",
-}));
-
 const FooterTablet = () => {
   const [emailContent, setEmailContent] = useState("");
   const emailForm = useRef<HTMLFormElement>(null);
@@ -304,7 +299,6 @@ const FooterTablet = () => {
             <div className="enterTitle">
               <label htmlFor="email">
                 Sign up for the newsletter
-                <StyledAsterisk>*</StyledAsterisk>
                 <input ref={emailInput} id="email" type="email" name="email" className="signUpInputBox" value={emailContent} onChange={(e) => handleChange(e)} />
               </label>
             </div>

src/components/SuspenseLoader/index.tsx

@@ -1,26 +1,37 @@
 import { Box, CircularProgress, styled } from '@mui/material';
+import { FC } from 'react';
 
-const StyledBox = styled(Box)({
-  position: 'fixed',
+type Props = {
+  /**
+   * Defines whether the loader should be fullscreen or not.
+   *
+   * @default true
+   */
+  fullscreen?: boolean;
+};
+
+const StyledBox = styled(Box, { shouldForwardProp: (p) => p !== "fullscreen" })<Props>(({ fullscreen }) => ({
+  position: fullscreen ? 'fixed' : 'absolute',
   background: '#fff',
   left: 0,
   top: 0,
   width: '100%',
   height: '100%',
   zIndex: "9999",
-});
+}));
 
-const SuspenseLoader = () => (
+const SuspenseLoader: FC<Props> = ({ fullscreen = true }: Props) => (
   <StyledBox
     display="flex"
     alignItems="center"
     justifyContent="center"
+    fullscreen={fullscreen}
   >
     <CircularProgress
       size={64}
       disableShrink
       thickness={3}
-      aria-label="Page Loader"
+      aria-label="Content Loader"
     />
   </StyledBox>
 );

src/content/dataSubmissions/DataSubmissionsListView.tsx

@@ -5,7 +5,7 @@ import {
   Table, TableBody, TableCell,
   TableContainer, TableHead,
   TablePagination, TableRow,
-  TableSortLabel, Typography, Box, CircularProgress,
+  TableSortLabel, Typography,
   Dialog, DialogTitle
 } from "@mui/material";
 import { LoadingButton } from '@mui/lab';
@@ -22,6 +22,7 @@ import SelectInput from "../../components/Questionnaire/SelectInput";
 import TextInput from "../../components/Questionnaire/TextInput";
 import GenericAlert from '../../components/GenericAlert';
 import { DataCommons } from '../../config/DataCommons';
+import SuspenseLoader from '../../components/SuspenseLoader';
 
 type T = Submission;
 
@@ -459,22 +460,7 @@ const ListingView: FC = () => {
               {loading && (
                 <TableRow>
                   <TableCell>
-                    <Box
-                      sx={{
-                        position: 'absolute',
-                        background: "#fff",
-                        left: 0,
-                        top: 0,
-                        width: '100%',
-                        height: '100%',
-                        zIndex: "9999",
-                      }}
-                      display="flex"
-                      alignItems="center"
-                      justifyContent="center"
-                    >
-                      <CircularProgress size={64} disableShrink thickness={3} />
-                    </Box>
+                    <SuspenseLoader fullscreen={false} />
                   </TableCell>
                 </TableRow>
               )}

src/content/organizations/ListView.tsx

@@ -1,8 +1,7 @@
 import React, { ElementType, FC, useEffect, useMemo, useState } from "react";
 import {
-  Alert, Box, Button, CircularProgress,
-  Container, FormControl, MenuItem,
-  OutlinedInput,
+  Alert, Box, Button,
+  Container, FormControl, MenuItem, OutlinedInput,
   Select, Stack, Table, TableBody, TableCell,
   TableContainer, TableHead, TablePagination, TableRow,
   TableSortLabel, Typography, styled,
@@ -12,6 +11,7 @@ import { Controller, useForm } from 'react-hook-form';
 import PageBanner from "../../components/PageBanner";
 import Tooltip from '../../components/Tooltip';
 import { useOrganizationListContext, Status } from '../../components/Contexts/OrganizationListContext';
+import SuspenseLoader from '../../components/SuspenseLoader';
 
 type T = Partial<Organization>;
 
@@ -392,22 +392,7 @@ const ListingView: FC = () => {
               {status === Status.LOADING && (
                 <TableRow>
                   <TableCell>
-                    <Box
-                      sx={{
-                        position: "absolute",
-                        background: "#fff",
-                        left: 0,
-                        top: 0,
-                        width: "100%",
-                        height: "100%",
-                        zIndex: "9999",
-                      }}
-                      display="flex"
-                      alignItems="center"
-                      justifyContent="center"
-                    >
-                      <CircularProgress size={64} disableShrink thickness={3} />
-                    </Box>
+                    <SuspenseLoader fullscreen={false} />
                   </TableCell>
                 </TableRow>
               )}

src/content/questionnaire/ListView.tsx

@@ -5,7 +5,7 @@ import {
   Table, TableBody, TableCell,
   TableContainer, TableHead,
   TablePagination, TableRow,
-  TableSortLabel, Typography, Box, CircularProgress,
+  TableSortLabel, Typography,
 } from "@mui/material";
 import { LoadingButton } from '@mui/lab';
 import { useMutation, useQuery } from '@apollo/client';
@@ -15,6 +15,7 @@ import PageBanner from '../../components/PageBanner';
 import { FormatDate } from '../../utils';
 import { useAuthContext } from '../../components/Contexts/AuthContext';
 import { mutation as SAVE_APP, Response as SaveAppResp } from '../../graphql/saveApplication';
+import SuspenseLoader from '../../components/SuspenseLoader';
 
 type T = Omit<Application, "questionnaireData">;
 
@@ -296,22 +297,7 @@ const ListingView: FC = () => {
               {loading && (
                 <TableRow>
                   <TableCell>
-                    <Box
-                      sx={{
-                        position: 'absolute',
-                        background: '#fff',
-                        left: 0,
-                        top: 0,
-                        width: '100%',
-                        height: '100%',
-                        zIndex: "9999",
-                      }}
-                      display="flex"
-                      alignItems="center"
-                      justifyContent="center"
-                    >
-                      <CircularProgress size={64} disableShrink thickness={3} />
-                    </Box>
+                    <SuspenseLoader fullscreen={false} />
                   </TableCell>
                 </TableRow>
               )}

src/content/questionnaire/sections/D.tsx

@@ -503,6 +503,7 @@ const FormSectionD: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
                           startIcon={<RemoveCircleIcon />}
                           iconColor="#E74040"
                           disabled={readOnlyInputs || status === FormStatus.SAVING}
+                          aria-label="Remove File Type"
                           sx={{ minWidth: "0px !important" }}
                         />
                       </div>

src/content/users/ListView.tsx

@@ -4,7 +4,6 @@ import {
   Alert,
   Box,
   Button,
-  CircularProgress,
   Container,
   FormControl,
   MenuItem,
@@ -22,6 +21,7 @@ import { Roles } from '../../config/AuthRoles';
 import { LIST_USERS, ListUsersResp } from '../../graphql';
 import { formatIDP } from '../../utils';
 import { useAuthContext } from '../../components/Contexts/AuthContext';
+import SuspenseLoader from '../../components/SuspenseLoader';
 
 type T = User;
 
@@ -378,22 +378,7 @@ const ListingView: FC = () => {
               {loading && (
                 <TableRow>
                   <TableCell>
-                    <Box
-                      sx={{
-                        position: "absolute",
-                        background: "#fff",
-                        left: 0,
-                        top: 0,
-                        width: "100%",
-                        height: "100%",
-                        zIndex: "9999",
-                      }}
-                      display="flex"
-                      alignItems="center"
-                      justifyContent="center"
-                    >
-                      <CircularProgress size={64} disableShrink thickness={3} />
-                    </Box>
+                    <SuspenseLoader fullscreen={false} />
                   </TableCell>
                 </TableRow>
               )}