Wrap engagement URL copy button in LiveAnnouncer for accessibility, a…

…dd index route
bcgov · Aug 19, 2024 · 993d964 · 993d964
1 parent 758567f
commit 993d964
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 31 deletions.
diff --git a/met-web/src/components/engagement/admin/view/ConfigSummary.tsx b/met-web/src/components/engagement/admin/view/ConfigSummary.tsx
@@ -14,6 +14,7 @@ import dayjs from 'dayjs';
 import { ENGAGEMENT_MEMBERSHIP_STATUS, EngagementTeamMember } from 'models/engagementTeamMember';
 import { Button } from 'components/common/Input';
 import { faPen } from '@fortawesome/pro-regular-svg-icons';
+import { LiveAnnouncer, LiveMessage } from 'react-aria-live';
 
 export const ConfigSummary = () => {
     const siteUrl = getBaseUrl();
@@ -44,37 +45,41 @@ export const ConfigSummary = () => {
                                 </BodyText>
                             </Grid>
                             <Grid item>
-                                <Tooltip arrow open={tooltipOpen} title="Copied!" placement="top">
-                                    <IconButton
-                                        size="small"
-                                        sx={{
-                                            backgroundColor: 'primary.light',
-                                            color: 'white',
-                                            width: '32px',
-                                            height: '32px',
-                                            '&:hover': {
-                                                backgroundColor: 'primary.main',
-                                            },
-                                            ...globalFocusVisible,
-                                            display: 'inline-block',
-                                            marginRight: '0.5rem',
-                                        }}
-                                        onClick={() => {
-                                            navigator.clipboard.writeText(`${siteUrl}/${slug}`);
-                                            setTooltipOpen(true);
-                                        }}
-                                    >
-                                        <FontAwesomeIcon
-                                            fontSize={16}
-                                            icon={faCopy}
-                                            style={{ position: 'relative', bottom: '4px' }}
-                                        />
-                                    </IconButton>
-                                </Tooltip>
-                                <BodyText sx={{ display: 'inline' }}>
-                                    <span style={{ fontWeight: 'bold' }}>{siteUrl}/</span>
-                                    {slug}
-                                </BodyText>
+                                <LiveAnnouncer>
+                                    <LiveMessage aria-live="assertive" message={tooltipOpen ? 'Copied!' : ''} />
+                                    <Tooltip arrow open={tooltipOpen} title="Copied!" placement="top">
+                                        <IconButton
+                                            size="small"
+                                            sx={{
+                                                backgroundColor: 'primary.light',
+                                                color: 'white',
+                                                width: '32px',
+                                                height: '32px',
+                                                '&:hover': {
+                                                    backgroundColor: 'primary.main',
+                                                },
+                                                ...globalFocusVisible,
+                                                display: 'inline-block',
+                                                marginRight: '0.5rem',
+                                            }}
+                                            onClick={() => {
+                                                navigator.clipboard.writeText(`${siteUrl}/${slug}`);
+                                                setTooltipOpen(true);
+                                            }}
+                                            aria-label="Press enter to copy engagement URL to clipboard"
+                                        >
+                                            <FontAwesomeIcon
+                                                fontSize={16}
+                                                icon={faCopy}
+                                                style={{ position: 'relative', bottom: '4px' }}
+                                            />
+                                        </IconButton>
+                                    </Tooltip>
+                                    <BodyText sx={{ display: 'inline' }}>
+                                        <span style={{ fontWeight: 'bold' }}>{siteUrl}/</span>
+                                        {slug}
+                                    </BodyText>
+                                </LiveAnnouncer>
                             </Grid>
                         </Grid>
                     </OutlineBox>

diff --git a/met-web/src/routes/AuthenticatedRoutes.tsx b/met-web/src/routes/AuthenticatedRoutes.tsx
@@ -99,6 +99,7 @@ const AuthenticatedRoutes = () => {
                         },
                     }}
                 >
+                    <Route index element={<Navigate to="view" />} />
                     <Route element={<AuthGate allowedRoles={[USER_ROLES.EDIT_ENGAGEMENT]} />}>
                         <Route path="form" element={<EngagementForm />} />
                         <Route