Spaces:
Running
Running
| ; | |
| Object.defineProperty(exports, "__esModule", { | |
| value: true | |
| }); | |
| Object.defineProperty(exports, "AppRouterAnnouncer", { | |
| enumerable: true, | |
| get: function() { | |
| return AppRouterAnnouncer; | |
| } | |
| }); | |
| const _react = require("react"); | |
| const _reactdom = require("react-dom"); | |
| const ANNOUNCER_TYPE = 'next-route-announcer'; | |
| const ANNOUNCER_ID = '__next-route-announcer__'; | |
| function getAnnouncerNode() { | |
| const existingAnnouncer = document.getElementsByName(ANNOUNCER_TYPE)[0]; | |
| if (existingAnnouncer?.shadowRoot?.childNodes[0]) { | |
| return existingAnnouncer.shadowRoot.childNodes[0]; | |
| } else { | |
| const container = document.createElement(ANNOUNCER_TYPE); | |
| container.style.cssText = 'position:absolute'; | |
| const announcer = document.createElement('div'); | |
| announcer.ariaLive = 'assertive'; | |
| announcer.id = ANNOUNCER_ID; | |
| announcer.role = 'alert'; | |
| announcer.style.cssText = 'position:absolute;border:0;height:1px;margin:-1px;padding:0;width:1px;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;word-wrap:normal'; | |
| // Use shadow DOM here to avoid any potential CSS bleed | |
| const shadow = container.attachShadow({ | |
| mode: 'open' | |
| }); | |
| shadow.appendChild(announcer); | |
| document.body.appendChild(container); | |
| return announcer; | |
| } | |
| } | |
| function AppRouterAnnouncer({ tree }) { | |
| const [portalNode, setPortalNode] = (0, _react.useState)(null); | |
| (0, _react.useEffect)(()=>{ | |
| const announcer = getAnnouncerNode(); | |
| setPortalNode(announcer); | |
| return ()=>{ | |
| const container = document.getElementsByTagName(ANNOUNCER_TYPE)[0]; | |
| if (container?.isConnected) { | |
| document.body.removeChild(container); | |
| } | |
| }; | |
| }, []); | |
| const [routeAnnouncement, setRouteAnnouncement] = (0, _react.useState)(''); | |
| const previousTitle = (0, _react.useRef)(undefined); | |
| (0, _react.useEffect)(()=>{ | |
| let currentTitle = ''; | |
| if (document.title) { | |
| currentTitle = document.title; | |
| } else { | |
| const pageHeader = document.querySelector('h1'); | |
| if (pageHeader) { | |
| currentTitle = pageHeader.innerText || pageHeader.textContent || ''; | |
| } | |
| } | |
| // Only announce the title change, but not for the first load because screen | |
| // readers do that automatically. | |
| if (previousTitle.current !== undefined && previousTitle.current !== currentTitle) { | |
| setRouteAnnouncement(currentTitle); | |
| } | |
| previousTitle.current = currentTitle; | |
| }, [ | |
| tree | |
| ]); | |
| return portalNode ? /*#__PURE__*/ (0, _reactdom.createPortal)(routeAnnouncement, portalNode) : null; | |
| } | |
| if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') { | |
| Object.defineProperty(exports.default, '__esModule', { value: true }); | |
| Object.assign(exports.default, exports); | |
| module.exports = exports.default; | |
| } | |
| //# sourceMappingURL=app-router-announcer.js.map |