composables/useannouncer

21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useAnnouncer composable overview

useAnnouncer is a composable for announcing dynamic content changes to screen readers. Unlike useRouteAnnouncer which automatically announces route changes, useAnnouncer gives manual control over what and when to announce. It is available in Nuxt v4.4.2+.

useAnnouncer message property

The message property is of type Ref<string> and holds the current message to announce.

useAnnouncer politeness property

The politeness property is of type Ref<'polite' | 'assertive' | 'off'> and represents the screen reader announcement urgency level.

useAnnouncer set method

The set(message, politeness = 'polite') method sets the message to announce with its urgency level. The politeness parameter is optional and defaults to 'polite'.

useAnnouncer polite method

The polite(message) method sets the message with politeness = 'polite'. Use for non-urgent updates that can wait for the screen reader to finish its current task.

useAnnouncer assertive method

The assertive(message) method sets the message with politeness = 'assertive'. Use for urgent updates that should interrupt the screen reader immediately.

useAnnouncer requires NuxtAnnouncer component

The NuxtAnnouncer component must be added to the app for announcements to be rendered in the DOM.

useAnnouncer example with form submission

Example showing useAnnouncer in a form submission: ```vue <script setup lang="ts"> const { polite, assertive } = useAnnouncer() async function submitForm () { try { await $fetch('/api/contact', { method: 'POST', body: formData }) polite('Message sent successfully') } catch (error) { assertive('Error: Failed to send message') } } </script> ``` This example shows using polite() for success messages and assertive() for error messages.

useAnnouncer use case: form validation

Example of form validation with useAnnouncer: ```vue <script setup lang="ts"> const { assertive } = useAnnouncer() function validateForm () { const errors = [] if (!email.value) { errors.push('Email is required') } if (!password.value) { errors.push('Password is required') } if (errors.length) { assertive(`Form has ${errors.length} errors: ${errors.join(', ')}`) return false } return true } </script> ``` Use assertive() to immediately announce form validation errors to screen reader users.

useAnnouncer use case: loading states

Example of announcing loading states with useAnnouncer: ```vue <script setup lang="ts"> const { polite } = useAnnouncer() const { data, status } = await useFetch('/api/data') watch(status, (newStatus) => { if (newStatus === 'pending') { polite('Loading data...') } else if (newStatus === 'success') { polite('Data loaded successfully') } }) </script> ``` Use polite() to announce non-urgent loading status changes.

useAnnouncer use case: search results

Example of announcing search results with useAnnouncer: ```vue <script setup lang="ts"> const { polite } = useAnnouncer() const results = ref([]) watch(results, (newResults) => { polite(`Found ${newResults.length} results`) }) </script> ``` Use polite() to announce the number of search results found.

useRouteAnnouncer composable availability

The useRouteAnnouncer composable is available in Nuxt v3.12 and later.

useRouteAnnouncer description and purpose

useRouteAnnouncer is a composable that observes page title changes and updates the announcer message accordingly. It hooks into Unhead's dom:rendered hook to read the page's title and set it as the announcer message. It is used by the NuxtRouteAnnouncer component and is controllable.

useRouteAnnouncer parameters

useRouteAnnouncer accepts one parameter: politeness, which sets the urgency for screen reader announcements. Valid values are 'off' (disable the announcement), 'polite' (waits for silence), or 'assertive' (interrupts immediately). The default value is 'polite'.

useRouteAnnouncer message property

useRouteAnnouncer has a message property of type Ref<string> that represents the message to announce.

useRouteAnnouncer politeness property

useRouteAnnouncer has a politeness property of type Ref<string> that represents the screen reader announcement urgency level. Valid values are 'off', 'polite', or 'assertive'.

useRouteAnnouncer set method

useRouteAnnouncer has a set(message, politeness = 'polite') method that sets the message to announce with its urgency level.

useRouteAnnouncer polite method

useRouteAnnouncer has a polite(message) method that sets the message with politeness = 'polite'.

useRouteAnnouncer assertive method

useRouteAnnouncer has an assertive(message) method that sets the message with politeness = 'assertive'.

useRouteAnnouncer example usage

Example of using useRouteAnnouncer in a Vue component: ```vue <script setup lang="ts"> const { message, politeness, set, polite, assertive } = useRouteAnnouncer({ politeness: 'assertive', }) </script> ```

useRouteAnnouncer vs useAnnouncer

useRouteAnnouncer is for announcing route changes and page title changes. For announcing dynamic in-page content changes such as form validation, toasts, and loading states, use useAnnouncer instead.

Give your agent this brain