Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-25 15:15:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: update phrasing in route announcer (#28108)

Browse Source
This commit is contained in:
Florian Metz 2024-07-11 08:05:19 +02:00 committed by GitHub
parent c5a50de6d1
commit 559b81719e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/3.api/1.components/12.nuxt-route-announcer.md
View File

@ -1,6 +1,6 @@
--- ---
title: '<NuxtRouteAnnouncer>' title: '<NuxtRouteAnnouncer>'
description: 'Add a hidden element with the page title for assistive technologies.' description: 'The <NuxtRouteAnnouncer> component adds a hidden element with the page title to announce route changes to assistive technologies.'
navigation: navigation:
badge: New badge: New
links: links:
@ -16,7 +16,7 @@ This component is available in Nuxt v3.12+.
## Usage ## Usage
Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`layouts/`](/docs/guide/directory-structure/layouts) to enhance accessibility by informing assistive technologies about page's title changes. This ensures that navigational changes are announced to users relying on screen readers. Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`layouts/`](/docs/guide/directory-structure/layouts) to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
```vue [app.vue] ```vue [app.vue]
<template> <template>
@ -29,7 +29,7 @@ Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/guide/directory-structure/
## Slots ## Slots
You can pass custom HTML or components through the route announcer default slot. You can pass custom HTML or components through the route announcer's default slot.
```vue ```vue
<template> <template>
@ -43,7 +43,7 @@ You can pass custom HTML or components through the route announcer default slot.
## Props ## Props
- `atomic`: Controls if screen readers announce only changes or the entire content. Set to true for full content readout on updates, false for changes only. (default `false`) - `atomic`: Controls if screen readers only announce changes or the entire content. Set to true for full content readouts on updates, false for changes only. (default `false`)
- `politeness`: Sets the urgency for screen reader announcements: `off` (disable the announcement), `polite` (waits for silence), or `assertive` (interrupts immediately). (default `polite`) - `politeness`: Sets the urgency for screen reader announcements: `off` (disable the announcement), `polite` (waits for silence), or `assertive` (interrupts immediately). (default `polite`)
::callout ::callout