Mark aria current pos in lists

digitalservicebund · Oct 2, 2024 · 4c26b6f · 4c26b6f
1 parent 0e7912c
commit 4c26b6f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/packages/dito/app/root.tsx b/packages/dito/app/root.tsx
@@ -26,7 +26,8 @@ import {
   useRouteError,
 } from "@remix-run/react";
 import { marked, type Tokens } from "marked";
-import React, { type ReactNode } from "react";
+import React, { useEffect, useState, type ReactNode } from "react";
+import { useLocation } from "react-router-dom";
 import routes from "resources/allRoutes";
 import { header, siteMeta } from "resources/content";
 import {
@@ -301,13 +302,29 @@ function Document({
   );
 }
 
+const ScreenReaderAnnouncer = ({
+  announcement,
+}: Readonly<{ announcement: string }>) => (
+  <div aria-live="polite" aria-atomic="true" className="sr-only">
+    {announcement}
+  </div>
+);
+
 export default function App() {
   const {
     PLAUSIBLE_DOMAIN,
     PLAUSIBLE_SCRIPT,
     supportOfferingFlag,
     featureFlags,
   } = useLoaderData<typeof loader>();
+  const location = useLocation();
+  const [announcement, setAnnouncement] = useState("");
+
+  useEffect(() => {
+    // Update announcement when route changes
+    const pageTitle = document.title || "Neue Seite geladen";
+    setAnnouncement(`Seite geladen: ${pageTitle}`);
+  }, [location.pathname]);
 
   return (
     <Document
@@ -324,6 +341,7 @@ export default function App() {
       <main className="grow">
         <Outlet context={{ featureFlags }} />
       </main>
+      <ScreenReaderAnnouncer announcement={announcement} />
     </Document>
   );
 }

diff --git a/packages/shared/components/List.tsx b/packages/shared/components/List.tsx
@@ -12,7 +12,11 @@ const NumberedList = ({ identifier, items, heading }: BaseListProps) => {
   return (
     <div className="scroll-my-40 relative ds-stack-8" id={identifier}>
       {heading && <Heading className="max-sm:ds-heading-02-reg" {...heading} />}
-      <ol className="list-none ds-stack-32 ps-0 relative">
+      <ol
+        className="list-none ds-stack-32 ps-0 relative"
+        aria-live="polite"
+        aria-labelledby={identifier ? `${identifier}-heading` : undefined}
+      >
         {items.map((item, index) => (
           <li
             key={
@@ -28,6 +32,11 @@ const NumberedList = ({ identifier, items, heading }: BaseListProps) => {
                 : index.toString())
             }
             className="first:pt-0 scroll-my-40"
+            aria-describedby={
+              item.identifier ? `${item.identifier}-desc` : undefined
+            }
+            aria-posinset={index + 1}
+            aria-setsize={items.length}
           >
             <ListItem
               {...item}
@@ -53,7 +62,11 @@ const BulletList = ({ identifier, items, heading }: BaseListProps) => {
           ▲
         </div>
       </div>
-      <ol className="list-none ds-stack-32 ps-0 relative">
+      <ol
+        className="list-none ds-stack-32 ps-0 relative"
+        aria-live="polite"
+        aria-labelledby={identifier ? `${identifier}-heading` : undefined}
+      >
         {items.map((item, index) => (
           <li
             key={
@@ -69,6 +82,9 @@ const BulletList = ({ identifier, items, heading }: BaseListProps) => {
                 : index.toString())
             }
             className="first:pt-0 scroll-my-40"
+            aria-describedby={
+              item.identifier ? `${item.identifier}-desc` : undefined
+            }
           >
             <ListItem
               {...item}