docs: add accessible routing guide#34796
Open
Ibochkarev wants to merge 5 commits into
Open
Conversation
|
|
github-actions
Bot
added
agentscan:mixed-signals
5.x
📚 documentation
This comment has been minimized.
This comment has been minimized.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/3.guide/2.best-practices/accessibility.md`:
- Line 28: The docs incorrectly refer to an "urgency" option and only list two
values; update the text to reference the actual useRouteAnnouncer API property
name `politeness` and state its three valid values `'polite'`, `'assertive'`,
and `'off'`, and adjust the sentence that mentions custom announcements to
mention `politeness` (or custom announcement behavior) so the wording matches
the `useRouteAnnouncer` composable API.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: f7807cc4-0e30-4884-96cf-28de9e1980ba
📒 Files selected for processing (4)
docs/3.guide/2.best-practices/accessibility.mddocs/4.api/1.components/12.nuxt-route-announcer.mddocs/4.api/1.components/4.nuxt-link.mddocs/4.api/2.composables/use-route-announcer.md
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/3.guide/2.best-practices/accessibility.md`:
- Line 37: Edit the two sentences that mention <NuxtLink> and <RouterLink> to
insert a comma before the conjunction “so” (i.e., change “so the DOM keeps…” to
“, so the DOM keeps…”), updating the occurrences that reference <NuxtLink> and
<RouterLink> to improve grammar and readability.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 159aaf18-e069-4cfc-8724-ee05230cee95
📒 Files selected for processing (1)
docs/3.guide/2.best-practices/accessibility.md
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
docs/3.guide/2.best-practices/accessibility.md (1)
13-13: Tighten WCAG reference wording for version accuracy.Line 13 says “Understanding WCAG 2” but links to WCAG 2.1 content. Consider renaming the link text to “Understanding WCAG 2.1” for precision.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/3.guide/2.best-practices/accessibility.md` at line 13, Update the link text "Understanding WCAG 2" to accurately reflect the target by changing it to "Understanding WCAG 2.1" wherever it's used (the anchor text in the markdown link), e.g., replace the string "Understanding WCAG 2" with "Understanding WCAG 2.1" so the displayed wording matches the linked WCAG 2.1 resource.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@docs/3.guide/2.best-practices/accessibility.md`:
- Line 13: Update the link text "Understanding WCAG 2" to accurately reflect the
target by changing it to "Understanding WCAG 2.1" wherever it's used (the anchor
text in the markdown link), e.g., replace the string "Understanding WCAG 2" with
"Understanding WCAG 2.1" so the displayed wording matches the linked WCAG 2.1
resource.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: af8d5158-56d4-4eb0-8b04-61be6dacec37
📒 Files selected for processing (1)
docs/3.guide/2.best-practices/accessibility.md
xjccc
reviewed
Apr 13, 2026
xjccc
reviewed
Apr 16, 2026
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/3.guide/2.best-practices/accessibility.md`:
- Around line 32-33: The
::read-more{to="/docs/4.x/api/components/nuxt-route-announcer"}:: callout is
empty and renders no visible CTA; add a short, descriptive link label sentence
inside the read-more block (for example: "Read the Nuxt Route Announcer API" or
"Learn about the Nuxt Route Announcer") so the ::read-more:: component displays
accessible, visible link text.
- Around line 63-64: The
`::read-more{to="/docs/4.x/guide/recipes/custom-routing"}` callout is empty and
not visible; update the `::read-more` block to include visible link text (e.g.,
"Learn about custom routing" or similar) between the block markers so the
rendered docs show a clickable label for the custom routing link.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: d23bc7cb-6fd6-40e7-821c-755dfa5bc442
📒 Files selected for processing (4)
docs/3.guide/2.best-practices/accessibility.mddocs/4.api/1.components/12.nuxt-route-announcer.mddocs/4.api/1.components/4.nuxt-link.mddocs/4.api/2.composables/use-route-announcer.md
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
docs/3.guide/2.best-practices/accessibility.md (1)
60-66: Standardise spelling: "behaviour" → "behavior".Line 65 uses "behaviour" (British spelling), but the rest of the document and the API naming use "behavior" (American spelling—see lines 38, 50, 62, and the URL fragment
scroll-behavior-for-hash-links). For consistency with Nuxt's API conventions and the document's existing usage, use American spelling throughout.Suggested consistency fix
::read-more{to="/docs/4.x/guide/recipes/custom-routing"} -Read more about custom routing and scroll behaviour options. +Read more about custom routing and scroll behavior options. ::🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/3.guide/2.best-practices/accessibility.md` around lines 60 - 66, Replace the British spelling "behaviour" with American "behavior" in the Scroll section text so it matches the API and the rest of the doc; update the sentence referencing [`scrollBehaviorType`] and [`router.options.ts`] and the read-more link text to use "behavior" (the URL fragment `scroll-behavior-for-hash-links` and mentions of scrollBehaviorType/router.options.ts should remain consistent).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@docs/3.guide/2.best-practices/accessibility.md`:
- Around line 60-66: Replace the British spelling "behaviour" with American
"behavior" in the Scroll section text so it matches the API and the rest of the
doc; update the sentence referencing [`scrollBehaviorType`] and
[`router.options.ts`] and the read-more link text to use "behavior" (the URL
fragment `scroll-behavior-for-hash-links` and mentions of
scrollBehaviorType/router.options.ts should remain consistent).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: e7fa69f2-0cfa-4c2d-9670-a75b53f6c99d
📒 Files selected for processing (1)
docs/3.guide/2.best-practices/accessibility.md
xjccc
approved these changes
Apr 17, 2026
Add a Best Practices page on titles, route announcer, NuxtLink, focus, and scroll. Link to it from NuxtRouteAnnouncer, NuxtLink, and useRouteAnnouncer.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
- WCAG link text 2.1; cross-link to performance#links from accessibility guide - NuxtLink: read-more to performance#links and accessibility guide - Route announcer docs: dual read-more (accessibility + performance); politeness wording - useRouteAnnouncer: align politeness descriptions with API
Ibochkarev
force-pushed
the
docs/accessible-routing-23375
branch
from
628d018 to
7ac4d64
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #23375
Add a Best Practices page on titles, route announcer, NuxtLink, focus, and scroll.
Link to it from NuxtRouteAnnouncer, NuxtLink, and useRouteAnnouncer.