diff --git a/packages/docusaurus-theme-classic/src/theme/RouteAnnouncer/index.tsx b/packages/docusaurus-theme-classic/src/theme/RouteAnnouncer/index.tsx new file mode 100644 index 0000000000..8133dc7b37 --- /dev/null +++ b/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 ( +
+ {routeAnnouncement} +
+ ); +}); + +export default RouteAnnouncer; diff --git a/packages/docusaurus-theme-classic/src/theme/RouteAnnouncer/styles.module.css b/packages/docusaurus-theme-classic/src/theme/RouteAnnouncer/styles.module.css new file mode 100644 index 0000000000..90e500df29 --- /dev/null +++ b/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; +}