41 lines
868 B
Vue
41 lines
868 B
Vue
<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>
|