Auto focus on headings level 1 on nav change

Author: synzen

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

@@ -13,7 +13,14 @@ export const AccessibleNavigationAnnouncer = () => {
     // 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);
+      setTimeout(() => {
+        setMessage(`Navigated to ${location.pathname.slice(1)} page.`);
+        const h1Element = document.querySelector("h1");
+
+        if (h1Element) {
+          h1Element.focus();
+        }
+      }, 500);
     } else {
       // just ignore the / route
       setMessage("");

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

@@ -4,7 +4,6 @@ import {
   Box,
   Button,
   Flex,
-  Heading,
   HStack,
   Menu,
   MenuButton,
@@ -65,17 +64,16 @@ export const NewHeader = ({ invertBackground }: Props) => {
                       marginRight="2"
                       backgroundColor="transparent"
                     />
-                    <Heading
+                    <chakra.span
                       fontSize="xl"
                       whiteSpace="nowrap"
                       overflow="hidden"
                       textOverflow="ellipsis"
+                      fontWeight="bold"
                       title="MonitoRSS"
-                      // title={discordBotData.result.username}
                     >
                       MonitoRSS
-                      {/* {discordBotData.result.username} */}
-                    </Heading>
+                    </chakra.span>
                   </Flex>
                 </Link>
               )}

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

@@ -164,7 +164,7 @@ export const ConnectionDiscordChannelSettings: React.FC = () => {
                         </BreadcrumbItem>
                       </Breadcrumb>
                       <HStack alignItems="center" justifyContent="space-between">
-                        <Heading size="lg" marginRight={4}>
+                        <Heading size="lg" marginRight={4} tabIndex={-1} as="h1">
                           {connection?.name}
                         </Heading>
                         {connection && (

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

@@ -96,7 +96,6 @@ 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);
@@ -139,12 +138,6 @@ 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 () => {
@@ -286,11 +279,7 @@ export const UserFeed: React.FC = () => {
                   <Stack flex={1}>
                     <Breadcrumb>
                       <BreadcrumbItem>
-                        <BreadcrumbLink
-                          ref={feedsBreadcrumbLinkRef}
-                          as={RouterLink}
-                          to={pages.userFeeds()}
-                        >
+                        <BreadcrumbLink as={RouterLink} to={pages.userFeeds()}>
                           Feeds
                         </BreadcrumbLink>
                       </BreadcrumbItem>
@@ -302,7 +291,7 @@ export const UserFeed: React.FC = () => {
                       <HStack alignItems="flex-start" justifyContent="space-between">
                         <Stack width="fit-content">
                           <Flex alignItems="center" gap={0}>
-                            <Heading as="h1" size="lg" marginRight={4}>
+                            <Heading as="h1" size="lg" marginRight={4} tabIndex={-1}>
                               {feed?.title}
                             </Heading>
                             {feed && feed?.sharedAccessDetails?.inviteId && (

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

@@ -151,7 +151,7 @@ export const UserFeeds: React.FC = () => {
           )}
           <Flex justifyContent="space-between" alignItems="center" gap="4" flexWrap="wrap">
             <Flex alignItems="center" gap={4}>
-              <Heading as="h1" size="lg">
+              <Heading as="h1" size="lg" tabIndex={-1}>
                 {t("pages.userFeeds.title")}
               </Heading>
             </Flex>