announce() — astro Function Reference

Architecture documentation for the announce() function in router.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine called by 1

Entity Profile

CoreAstro→ RenderingEngine→ announce() — astro Function Reference

Dependency Diagram

graph TD
  bd9805f3_e8d7_ffa7_9b83_96a4fb55a0b5["announce()"]
  2b5c33e2_176e_e839_f05f_7f10493f4f74["router.ts"]
  bd9805f3_e8d7_ffa7_9b83_96a4fb55a0b5 -->|defined in| 2b5c33e2_176e_e839_f05f_7f10493f4f74
  6b23b6bb_d4a4_83cb_3896_2e31c0316793["transition()"]
  6b23b6bb_d4a4_83cb_3896_2e31c0316793 -->|calls| bd9805f3_e8d7_ffa7_9b83_96a4fb55a0b5
  style bd9805f3_e8d7_ffa7_9b83_96a4fb55a0b5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/transitions/router.ts lines 47–63

const announce = () => {
	let div = document.createElement('div');
	div.setAttribute('aria-live', 'assertive');
	div.setAttribute('aria-atomic', 'true');
	div.className = 'astro-route-announcer';
	document.body.append(div);
	setTimeout(
		() => {
			let title = document.title || document.querySelector('h1')?.textContent || location.pathname;
			div.textContent = title;
		},
		// Much thought went into this magic number; the gist is that screen readers
		// need to see that the element changed and might not do so if it happens
		// too quickly.
		60,
	);
};