Announce page changes via aria-live

Author: synzen

services/backend-api/client/src/App.tsx

@@ -10,6 +10,7 @@ import advancedFormat from "dayjs/plugin/advancedFormat";
 import dayjs from "dayjs";
 import { SendTestArticleProvider } from "./contexts";
 import Pages from "./pages";
+import { AccessibleNavigationAnnouncer } from "./components/AccessibleNavigationAnnouncer";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -20,6 +21,7 @@ dayjs.extend(relativeTime);
 const App: React.FC = () => {
   return (
     <Box display="flex" flexDir="column" height="100vh" className="he">
+      <AccessibleNavigationAnnouncer />
       <SendTestArticleProvider>
         <Pages />
       </SendTestArticleProvider>

services/backend-api/client/src/components/AccessibleNavigationAnnouncer/index.tsx

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { chakra } from "@chakra-ui/react";
+
+export const AccessibleNavigationAnnouncer = () => {
+  // the message that will be announced
+  const [message, setMessage] = useState("");
+  // get location from router
+  const location = useLocation();
+
+  // only run this when location change (note the dependency [location])
+  useEffect(() => {
+    // ignore the /
+    if (location.pathname.slice(1)) {
+      // make sure navigation has occurred and screen reader is ready
+      setTimeout(() => setMessage(`Navigated to ${location.pathname.slice(1)} page.`), 500);
+    } else {
+      // just ignore the / route
+      setMessage("");
+    }
+  }, [location]);
+
+  return (
+    <chakra.span srOnly role="status" aria-live="polite" aria-atomic="true">
+      {message}
+    </chakra.span>
+  );
+};

services/backend-api/client/src/components/NewHeader/index.tsx

@@ -56,15 +56,8 @@ export const NewHeader = ({ invertBackground }: Props) => {
           <HStack overflow="hidden" gap={8}>
             <Flex alignItems="center" overflow="hidden">
               {discordBotData && (
-                <Link to={pages.userFeeds()}>
-                  <Flex
-                    alignItems="center"
-                    paddingBottom="1"
-                    overflow="hidden"
-                    as="a"
-                    href="/"
-                    aria-label="MonitoRSS Home"
-                  >
+                <Link to={pages.userFeeds()} aria-label="MonitoRSS Home">
+                  <Flex alignItems="center" paddingBottom="1" overflow="hidden">
                     <Avatar
                       src={discordBotData.result.avatar || undefined}
                       size="sm"

services/backend-api/client/src/features/feed/components/UserFeedsTable/index.tsx

@@ -445,6 +445,7 @@ export const UserFeedsTable: React.FC<Props> = ({ onSelectedFeedId }) => {
       <form
         hidden={isInitiallyLoading}
         id="user-feed-search"
+        role="search"
         onSubmit={(e) => {
           e.preventDefault();
           onSearchSubmit();

services/backend-api/client/src/mocks/data/discordBot.ts

@@ -4,7 +4,7 @@ const mockDiscordBot: DiscordBot = {
   id: "1",
   username: "Discord Bot".padEnd(1000, "hi"),
   avatar: "https://via.placeholder.com/140x100",
-  inviteLink: ''
+  inviteLink: "https://www.google.com",
 };
 
 export default mockDiscordBot;

services/backend-api/client/src/mocks/data/userFeeds.ts

@@ -306,7 +306,7 @@ const mockUserFeeds: UserFeed[] = [
       },
     ],
     healthStatus: UserFeedHealthStatus.Ok,
-    disabledCode: UserFeedDisabledCode.FeedTooLarge,
+    disabledCode: undefined,
     refreshRateSeconds: 60,
     userRefreshRateSeconds: 120,
   },

services/backend-api/client/src/mocks/handlers.ts

@@ -724,7 +724,7 @@ const handlers = [
       ctx.json<GetUserFeedRequestsOutput>({
         result: {
           requests: mockUserFeedRequests,
-          nextRetryTimestamp: Math.floor(new Date(2020).getTime() / 1000),
+          nextRetryTimestamp: null,
           feedHostGlobalRateLimit: null,
         },
       })

services/backend-api/client/src/pages/UserFeed.tsx

@@ -96,6 +96,7 @@ export const UserFeed: React.FC = () => {
   const { search: urlSearch } = useLocation();
   const { isOpen, onClose, onOpen } = useDisclosure();
   const menuButtonRef = useRef<HTMLButtonElement>(null);
+  const feedsBreadcrumbLinkRef = useRef<HTMLAnchorElement>(null);
   const [addConnectionType, setAddConnectionType] = useState<
     { type: "discord-channel" | "discord-webhook"; isChannelThread?: boolean } | undefined
   >(undefined);
@@ -138,6 +139,12 @@ export const UserFeed: React.FC = () => {
     }
   }, [feedTitle]);
 
+  useEffect(() => {
+    if (feedsBreadcrumbLinkRef.current) {
+      feedsBreadcrumbLinkRef.current?.focus();
+    }
+  }, [feedsBreadcrumbLinkRef.current]);
+
   const isAtLimit = dailyLimit ? dailyLimit.current >= dailyLimit.max : false;
 
   const onDeleteFeed = async () => {
@@ -279,7 +286,11 @@ export const UserFeed: React.FC = () => {
                   <Stack flex={1}>
                     <Breadcrumb>
                       <BreadcrumbItem>
-                        <BreadcrumbLink as={RouterLink} to={pages.userFeeds()}>
+                        <BreadcrumbLink
+                          ref={feedsBreadcrumbLinkRef}
+                          as={RouterLink}
+                          to={pages.userFeeds()}
+                        >
                           Feeds
                         </BreadcrumbLink>
                       </BreadcrumbItem>