Announcer

Headless Announcer; covers ARIA live regions, coalesced announcement queues.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { AnnouncerProvider } from "@vizejs/ui/announcer";

Or copy the source into your project with vize lib pull announcer (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Provider that owns the live regions and announces cart updates from its slot. -->
<script setup lang="ts">
import { ref } from "vue";

import { AnnouncerProvider, type AnnouncerController } from "@vizejs/ui/announcer";

const count = ref(0);

function addItem(announcer: AnnouncerController): void {
  count.value += 1;
  announcer.announce(`Added to cart. ${count.value} items in cart.`, { key: "cart" });
}

function emptyCart(announcer: AnnouncerController): void {
  count.value = 0;
  announcer.announce("Cart emptied.", { politeness: "assertive" });
}
</script>

<template>
  <AnnouncerProvider v-slot="{ announcer }">
    <p>Items in cart: {{ count }}</p>
    <button type="button" @click="() => addItem(announcer)">Add to cart</button>
    <button type="button" @click="() => emptyCart(announcer)">Empty cart</button>
  </AnnouncerProvider>
</template>

API

AnnouncerProvider

Source: src/families/accessibility/announcer/announcer-provider.vue

Props

Slots

Exposed

Behavior

Normative state × input → outcome table for announcer-provider.vue and the announcement queue (@vizejs/ui/announcer). Every row is proven by the named test in src/families/accessibility/announcer/announcer.test.ts or src/families/accessibility/announcer/announcer-ssr.test.ts; compile-only assertions live in src/families/accessibility/announcer/announcer.types.test-d.ts.