Deseng 617 screen reader improvements (#2549)

* DESENG-617: Accessibility updates * DESENG-617: Screen reader improvements * DESENG-617 Improve screen reader support for engagement search page * DESENG-617 Update changelog, check linting, final tweaks to screen reader language * DESENG-617 fix PR comments --------- Co-authored-by: Ratheesh kumar R <ratheesh.kumar@aot-technologies.com> Co-authored-by: Alex <awintschel@gmail.com>
bcgov · Jul 2, 2024 · 9c158c6 · 9c158c6
1 parent ae08700
commit 9c158c6
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 79 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,3 +1,6 @@
+## June 28, 2024
+- **Task** Improve screen reader support for home/engagement search page [DESENG-617](https://citz-gdx.atlassian.net/browse/DESENG-617)
+
 ## June 27, 2024
 
 - **Bugfix** Fix tenant landing page [🎟️ DESENG-635](https://citz-gdx.atlassian.net/browse/DESENG-635)

diff --git a/met-web/package-lock.json b/met-web/package-lock.json
diff --git a/met-web/package.json b/met-web/package.json
@@ -32,6 +32,7 @@
         "@types/lodash.clonedeep": "^4.5.7",
         "@types/node": "^17.0.27",
         "@types/react": "^18.0.7",
+        "@types/react-aria-live": "^2.0.6",
         "@types/react-dom": "^18.0.2",
         "@types/react-draft-wysiwyg": "^1.13.4",
         "@types/react-redux": "^7.1.24",
@@ -58,6 +59,7 @@
         "mui-sx": "^1.0.0",
         "node-sass": "^7.0.3",
         "react": "^18.0.0",
+        "react-aria-live": "^2.0.5",
         "react-dom": "^18.0.0",
         "react-draft-wysiwyg": "^1.14.7",
         "react-dropzone": "^14.2.1",

diff --git a/met-web/src/components/common/Input/Button.tsx b/met-web/src/components/common/Input/Button.tsx
@@ -305,7 +305,7 @@ export const IconButton: React.FC<IconButtonProps> = ({ icon, onClick, title, sx
             onBlur={() => setFocused(false)}
             tabIndex={focused ? 0 : -1} // Set tabIndex to -1 when not focused
         >
-            <StyledIconButton onClick={onClick} title={title}>
+            <StyledIconButton onClick={onClick} title={title} aria-label={title}>
                 <FontAwesomeIcon icon={icon} style={{ fontSize: '20px', color: '#494949' }} />
             </StyledIconButton>
         </Stack>

diff --git a/met-web/src/components/landing/FilterBlock.tsx b/met-web/src/components/landing/FilterBlock.tsx
@@ -15,6 +15,7 @@ import { useAppTranslation } from 'hooks';
 import { Button } from 'components/common/Input/Button';
 import { colors } from '../common';
 import { CustomTextField, CommonSelect } from 'components/common/Input';
+import { When } from 'react-if';
 
 const FilterBlock = () => {
     const { searchFilters, setSearchFilters, setPage, clearFilters, page, setDrawerOpened } =
@@ -89,6 +90,8 @@ const FilterBlock = () => {
                 <Grid item xl={6} lg={8} md={10} sm={8} xs={12}>
                     <MetLabel paddingBottom={'3px'}>{translate('landing.filters.search')}</MetLabel>
                     <CustomTextField
+                        aria-label="Search box for filtering engagements. Search by title or select filters to narrow results automatically."
+                        tabIndex={0}
                         fullWidth
                         placeholder={translate('landing.filters.searchPlaceholder')}
                         value={searchText}
@@ -161,6 +164,9 @@ const FilterBlock = () => {
                     <CommonSelect
                         value={selectedValue}
                         id="status-filter"
+                        aria-label={`Filtering by ${selectableStatuses.get(
+                            selectedValue,
+                        )}. Change this filter value by expanding to view all options.`}
                         onChange={(event) => {
                             const selectedValue = Number(event.target.value);
                             if (selectedValue === -1) {
@@ -195,24 +201,26 @@ const FilterBlock = () => {
                             />
                         )),
                     )}
-                    <MuiButton
-                        variant="text"
-                        onClick={clearFilters}
-                        sx={{
-                            fontWeight: 'normal',
-                            height: 48,
-                            fontSize: '15px',
-                            borderRadius: '2em',
-                            p: 2,
-                            '&:focus, &:focus-visible': {
-                                backgroundColor: `${colors.focus.regular.inner}`,
-                                boxShadow: `0 0 0 2px white, 0 0 0 4px ${colors.focus.regular.outer}`,
-                            },
-                        }}
-                        endIcon={<FontAwesomeIcon icon={faXmark} style={{ fontSize: '20px' }} />}
-                    >
-                        {translate('landing.filters.clear')}
-                    </MuiButton>
+                    <When condition={searchFilters.status.length || searchFilters.metadata.length}>
+                        <MuiButton
+                            variant="text"
+                            onClick={clearFilters}
+                            sx={{
+                                fontWeight: 'normal',
+                                height: 48,
+                                fontSize: '15px',
+                                borderRadius: '2em',
+                                p: 2,
+                                '&:focus, &:focus-visible': {
+                                    backgroundColor: `${colors.focus.regular.inner}`,
+                                    boxShadow: `0 0 0 2px white, 0 0 0 4px ${colors.focus.regular.outer}`,
+                                },
+                            }}
+                            endIcon={<FontAwesomeIcon icon={faXmark} style={{ fontSize: '20px' }} />}
+                        >
+                            {translate('landing.filters.clear')}
+                        </MuiButton>
+                    </When>
                 </Stack>
             </Grid>
         </Grid>

diff --git a/met-web/src/components/landing/FilterDrawer.tsx b/met-web/src/components/landing/FilterDrawer.tsx
@@ -52,6 +52,7 @@ const FilterDrawer = () => {
     return (
         <SwipeableDrawer
             aria-label="Filter Engagements"
+            aria-expanded={drawerOpened}
             anchor="left"
             ModalProps={{
                 keepMounted: true, // Better open performance on mobile

diff --git a/met-web/src/components/landing/TileBlock.tsx b/met-web/src/components/landing/TileBlock.tsx
@@ -1,15 +1,21 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import { Grid } from '@mui/material';
 import { RepeatedGrid } from 'components/common';
 import { TileSkeleton } from './TileSkeleton';
 import EngagementTile from './EngagementTile';
 import { LandingContext } from './LandingContext';
-import { PAGE_SIZE } from './constants';
 import NoResult from 'routes/NoResults';
+import { LiveAnnouncer, LiveMessage } from 'react-aria-live';
 import { Pagination } from 'components/common/Input';
+import { PAGE_SIZE } from './constants';
 
 const TileBlock = () => {
-    const { engagements, loadingEngagements, totalEngagements, page, setPage } = useContext(LandingContext);
+    const { engagements, loadingEngagements, page, setPage, totalEngagements } = useContext(LandingContext);
+    const [ariaStatusMessage, setAriaStatusMessage] = useState(`Results updated. ${totalEngagements} results`);
+
+    useEffect(() => {
+        setAriaStatusMessage(`${totalEngagements} results`);
+    }, [totalEngagements]);
 
     if (loadingEngagements) {
         return (
@@ -54,63 +60,71 @@ const TileBlock = () => {
                 xs={10}
             >
                 <NoResult />
+                <ul aria-label="Engagements list. No results."></ul>
             </Grid>
         );
     }
     return (
-        <Grid
-            container
-            direction="row"
-            justifyContent={{ xs: 'center', sm: 'flex-start' }}
-            columnSpacing={5}
-            rowSpacing={4}
-            item
-            xs={10}
-        >
-            {engagements.map((engagement, index) => {
-                return (
-                    <Grid
-                        key={`Grid-${engagement.id}`}
-                        item
-                        container
-                        xs={12}
-                        md={6}
-                        lg={4}
-                        xl={3}
-                        sx={{
-                            flexBasis: '320px',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <Grid item width="320px">
-                            <EngagementTile passedEngagement={engagement} engagementId={engagement.id} />
-                        </Grid>
-                    </Grid>
-                );
-            })}
+        <LiveAnnouncer>
+            <LiveMessage message={ariaStatusMessage} aria-live="assertive" />
             <Grid
-                item
-                xs={12}
                 container
+                component="ul"
+                aria-label={`Engagements list. ${totalEngagements} results.`}
                 direction="row"
-                alignItems={'center'}
-                justifyContent="center"
-                marginBottom="2em"
+                justifyContent={{ xs: 'center', sm: 'flex-start' }}
+                columnSpacing={5}
+                rowSpacing={4}
+                item
+                xs={10}
             >
-                <Grid item>
-                    <Pagination
-                        defaultPage={1}
-                        page={page}
-                        count={Math.ceil(totalEngagements / PAGE_SIZE)}
-                        color="primary"
-                        showFirstButton
-                        showLastButton
-                        onChange={(_, pageNumber) => setPage(pageNumber)}
-                    />
+                {engagements.map((engagement) => {
+                    return (
+                        <Grid
+                            component="li"
+                            item
+                            container
+                            key={engagement.id}
+                            xs={12}
+                            md={6}
+                            lg={4}
+                            xl={3}
+                            sx={{
+                                flexBasis: '320px',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                listStyleType: 'none',
+                            }}
+                        >
+                            <Grid item width="320px">
+                                <EngagementTile passedEngagement={engagement} engagementId={engagement.id} />
+                            </Grid>
+                        </Grid>
+                    );
+                })}
+                <Grid
+                    item
+                    xs={12}
+                    container
+                    direction="row"
+                    alignItems={'center'}
+                    justifyContent="center"
+                    marginBottom="2em"
+                >
+                    <Grid item>
+                        <Pagination
+                            defaultPage={1}
+                            page={page}
+                            count={Math.ceil(totalEngagements / PAGE_SIZE)}
+                            color="primary"
+                            showFirstButton
+                            showLastButton
+                            onChange={(_, pageNumber) => setPage(pageNumber)}
+                        />
+                    </Grid>
                 </Grid>
             </Grid>
-        </Grid>
+        </LiveAnnouncer>
     );
 };
 

diff --git a/met-web/src/components/layout/Footer/index.tsx b/met-web/src/components/layout/Footer/index.tsx
@@ -133,20 +133,23 @@ const Footer = () => {
                     <Stack direction="row" spacing={2}>
                         <IconButton
                             icon={faFacebookF}
+                            title="Facebook Icon"
                             sx={{
                                 border: '1px solid #494949',
                                 borderRadius: '50%',
                             }}
                         />
                         <IconButton
                             icon={faInstagram}
+                            title="Instagram Icon"
                             sx={{
                                 border: '1px solid #494949',
                                 borderRadius: '50%',
                             }}
                         />
                         <IconButton
                             icon={faXTwitter}
+                            title="Twitter Icon"
                             sx={{
                                 border: '1px solid #494949',
                                 borderRadius: '50%',

diff --git a/met-web/src/components/layout/Header/PublicHeader.tsx b/met-web/src/components/layout/Header/PublicHeader.tsx
@@ -2,11 +2,8 @@ import React, { useContext } from 'react';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
-import Button from '@mui/material/Button';
-import UserService from 'services/userService';
 import EnvironmentBanner from './EnvironmentBanner';
 import { ReactComponent as BCLogo } from 'assets/images/BritishColumbiaLogoDark.svg';
-import { When } from 'react-if';
 import { useAppSelector, useAppTranslation } from 'hooks';
 import { useNavigate } from 'react-router-dom';
 import { Palette } from 'styles/Theme';
@@ -16,7 +13,6 @@ import { TenantState } from 'reduxSlices/tenantSlice';
 import { Header1 } from 'components/common/Typography';
 
 const PublicHeader = () => {
-    const isLoggedIn = useAppSelector((state) => state.user.authentication.authenticated);
     const navigate = useNavigate();
     const { t: translate } = useAppTranslation();
     const { engagementViewMounted, availableEngagementTranslations } = useContext(LanguageContext);
@@ -25,7 +21,7 @@ const PublicHeader = () => {
     const headerTitle = tenant.title;
 
     return (
-        <Box sx={{ flexGrow: 1 }}>
+        <Box sx={{ flexGrow: 1 }} aria-label="Public Header">
             <AppBar
                 position="static"
                 sx={{
@@ -56,11 +52,6 @@ const PublicHeader = () => {
                     >
                         {headerTitle}
                     </Header1>
-                    <When condition={isLoggedIn}>
-                        <Button color="inherit" onClick={() => UserService.doLogout()}>
-                            {translate('common.logout')}
-                        </Button>
-                    </When>
                     <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                         {engagementViewMounted && availableEngagementTranslations.length > 0 && <LanguageSelector />}
                     </Box>

diff --git a/met-web/src/locales/common.json b/met-web/src/locales/common.json
@@ -96,6 +96,8 @@
     },
     "common": {
         "logout": "Logout",
+        "headerTitleAreaLabel" : "Header Title Area",
+        "logoutAreaLabel": "Logout Button",
         "defaultBCText": "British Columbia Logo",
         "defaultText" : "Site Logo"
     }