[6.x] Accessible routing implementation to announce page name and move focus to top of document

[gcamacho079]

Description

This uses a pattern similar to the one we have in place on the Docs site.

In addition:

• Replaces nonexistent color variable
• Fixes a bug on the site index screen where the page title was undefined

Related issues

Resolves ACC-247

[linear-code]

ACC-247

[Copilot]

Pull request overview

This PR improves Control Panel SPA accessibility by moving keyboard focus to the top of the document on Inertia route changes and announcing the destination page name via a live region. It also fixes a Sites index screen title bug and updates a CP CSS token to use an existing color variable.

Changes:

• Add route-change focus management and live-region announcements on Inertia navigations.
• Fix Sites index page title being undefined by providing a server-side title prop and consuming it in the Vue page.
• Replace a nonexistent CP CSS color variable with an existing token.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/Http/Controllers/Settings/SitesController.php	Adds a title Inertia prop for the Sites index page (group name or “Sites”).
resources/translations/en/app.php	Adds a translatable announcement string for route-change messaging.
resources/js/pages/settings/sites/Index.vue	Consumes the new title prop for the page heading and app layout title.
resources/js/common/layouts/screens/PageScreen.vue	Adds a programmatic focus anchor at the top of the CP header.
resources/js/bootstrap/cp.ts	Implements accessible routing behavior: focus anchor + announce page title on navigation.
packages/craftcms-ui/src/styles/cp.css	Switches skip-link text color to an existing token (--c-text-default).

Suppressed comments (1)

resources/js/bootstrap/cp.ts:150

• if (!props.title) return; relies on truthiness and can announce unexpected values (e.g. whitespace-only strings) or skip valid-but-empty titles. A small type/trim guard makes the announcement more robust.

    if (!props.title) return;

    announce(t('Navigated to {title} page', {title: props.title}));

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[github-actions]

📚 Storybook previews

@craftcms/ui — open Storybook

No changed components detected in this Storybook.

resources/js — open Storybook

No changed components detected in this Storybook.