Merge ce9c5550b1 into 67924ca979

packages/docusaurus-theme-classic/src/theme/RouteAnnouncer/index.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import {useLocation} from "@docusaurus/router";
+import styles from './styles.module.css';
+
+const RouteAnnouncer = React.memo(() => {
+  const { pathname } = useLocation();
+  const [routeAnnouncement, setRouteAnnouncement] = React.useState("");
+  const previouslyLoadedPath = React.useRef(pathname);
+
+  React.useEffect(() => {
+    if (previouslyLoadedPath.current === pathname) return;
+    previouslyLoadedPath.current = pathname;
+
+    if (document.title) {
+      setRouteAnnouncement(document.title);
+    } else {
+      const pageHeader = document.querySelector("h1");
+      const content = pageHeader?.innerText ?? pageHeader?.textContent;
+
+      setRouteAnnouncement(content || pathname);
+    }
+  }, [pathname]);
+
+  return (
+    <p
+      aria-live="assertive"
+      id="__docusaurus-route-announcer__"
+      role="alert"
+      style={styles.docusaurusjsRouteAnnouncerStyles}
+    >
+      {routeAnnouncement}
+    </p>
+  );
+});
+
+export default RouteAnnouncer;

packages/docusaurus-theme-classic/src/theme/RouteAnnouncer/styles.module.css

@@ -0,0 +1,12 @@
+.docusaurusjsRouteAnnouncerStyles {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+    word-wrap: normal;
+}