From 22e9a68ad1e2a7e99db3dcd5d7663bf1c5f5802e Mon Sep 17 00:00:00 2001
From: Pushyami Gundala <pushyamig@users.noreply.github.com>
Date: Wed, 11 Sep 2024 07:19:05 -0400
Subject: [PATCH] #1593 making the assignment changes screen readable (#1621)

* #1593 making the assignment changes screen readable
---
 assets/src/components/AssignmentTable.js | 5 +++++
 assets/src/containers/App.js             | 2 +-
 assets/src/index.js                      | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/assets/src/components/AssignmentTable.js b/assets/src/components/AssignmentTable.js
index 38b4557c..3731cf17 100644
--- a/assets/src/components/AssignmentTable.js
+++ b/assets/src/components/AssignmentTable.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { styled } from '@mui/material/styles'
 import Button from '@mui/material/Button'
+import Box from '@mui/material/Box'
 import Checkbox from '@mui/material/Checkbox'
 import FormControl from '@mui/material/FormControl'
 import Grid from '@mui/material/Grid'
@@ -17,6 +18,7 @@ import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 import Tooltip from '@mui/material/Tooltip'
+import visuallyHidden from '@mui/utils'
 import GradedIcon from '@mui/icons-material/Done'
 import UnsubmittedIcon from '@mui/icons-material/Remove'
 import SubmittedIcon from '@mui/icons-material/Textsms'
@@ -368,6 +370,9 @@ function AssignmentTable (props) {
         </Grid>
       </Grid>
       <TableContainer className={classes.container} ref={tableRef}>
+        <Box sx={visuallyHidden} aria-live='polite'>
+          {filteredAssignments.length < 2 ? `${filteredAssignments.length} assignment is listed` : `${filteredAssignments.length} assignments are listed`}
+        </Box>
         <MTable stickyHeader>
           <TableHead>
             <TableRow>
diff --git a/assets/src/containers/App.js b/assets/src/containers/App.js
index 9d4741a8..6b526ef7 100755
--- a/assets/src/containers/App.js
+++ b/assets/src/containers/App.js
@@ -9,7 +9,7 @@ import useGoogleAnalytics from '@tl-its-umich-edu/react-ga-onetrust-consent'
 
 function App (props) {
   const { user, gaId, cspNonce, oneTrustScriptDomain } = props
-  useGoogleAnalytics({ googleAnalyticsId: gaId, nonce: cspNonce, oneTrustScriptDomain})
+  useGoogleAnalytics({ googleAnalyticsId: gaId, nonce: cspNonce, oneTrustScriptDomain })
 
   if (!user.isLoggedIn) {
     if (user.loginURL === '') {
diff --git a/assets/src/index.js b/assets/src/index.js
index 503de2d6..e0bcd366 100755
--- a/assets/src/index.js
+++ b/assets/src/index.js
@@ -15,7 +15,7 @@ root.render(
   <Router basename='/'>
     <ApolloProvider client={client}>
       <ThemeProvider theme={siteTheme}>
-        <App user={user} gaId={gaId} cspNonce={cspNonce} oneTrustScriptDomain={oneTrustScriptDomain}/>
+        <App user={user} gaId={gaId} cspNonce={cspNonce} oneTrustScriptDomain={oneTrustScriptDomain} />
       </ThemeProvider>
     </ApolloProvider>
   </Router>