#1593 making the assignment changes screen readable (#1621)

* #1593 making the assignment changes screen readable
tl-its-umich-edu · Sep 11, 2024 · 22e9a68 · 22e9a68
1 parent f5c09c9
commit 22e9a68
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>