feat(a11y): aria announcer (#443)

components/aria/AriaLog.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { AriaLive } from '~/composables/aria/types'
+import { useAriaLog } from '~/composables/aria'
+
+// tsc complaining when using $defineProps
+withDefaults(defineProps<{
+  title: string
+  ariaLive?: AriaLive
+  messageKey?: (message: any) => any
+  heading?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+}>(), {
+  heading: 'h2',
+  messageKey: (message: any) => message,
+  ariaLive: 'polite',
+})
+
+const { announceLogs, appendLogs, clearLogs, logs } = useAriaLog()
+
+defineExpose({
+  announceLogs,
+  appendLogs,
+  clearLogs,
+})
+</script>
+
+<template>
+  <slot />
+  <div sr-only role="log" :aria-live="ariaLive">
+    <component :is="heading">
+      {{ title }}
+    </component>
+    <ul>
+      <li v-for="log in logs" :key="messageKey(log)">
+        <slot name="log" :log="log">
+          {{ log }}
+        </slot>
+      </li>
+    </ul>
+  </div>
+</template>