feat(a11y): aria announcer (#443)

This commit is contained in:
Joaquín Sánchez 2022-12-23 16:08:36 +01:00 committed by GitHub
parent 4b70c6b3e7
commit 8bdc6d40cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 201 additions and 0 deletions

View file

@ -12,5 +12,6 @@ const key = computed(() => `${currentUser.value?.server ?? currentServer.value}:
<NuxtLayout :key="key"> <NuxtLayout :key="key">
<NuxtPage v-if="isMastoInitialised" /> <NuxtPage v-if="isMastoInitialised" />
</NuxtLayout> </NuxtLayout>
<AriaAnnouncer />
<PWAPrompt /> <PWAPrompt />
</template> </template>

View file

@ -0,0 +1,56 @@
<script setup lang="ts">
import type { AriaAnnounceType, AriaLive } from '~/composables/aria/types'
import { useAriaAnnouncer } from '~/composables/aria'
import type { LocaleObject } from '#i18n'
const router = useRouter()
const { t, locale, locales } = useI18n()
const { ariaAnnouncer, announce } = useAriaAnnouncer()
const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
acc[l.code!] = l.name!
return acc
}, {} as Record<string, string>)
let ariaLive = $ref<AriaLive>('polite')
let ariaMessage = $ref<string>('')
const onMessage = (event: AriaAnnounceType, message?: string) => {
if (event === 'announce')
ariaMessage = message!
else if (event === 'mute')
ariaLive = 'off'
else
ariaLive = 'polite'
}
watch(locale, (l, ol) => {
if (ol) {
announce(t('a11y.locale_changing', [localeMap[ol] ?? ol]))
setTimeout(() => {
announce(t('a11y.locale_changed', [localeMap[l] ?? l]))
}, 1000)
}
}, { immediate: true })
onMounted(() => {
ariaAnnouncer.on(onMessage)
router.beforeEach(() => {
announce(t('a11y.loading_page'))
})
router.afterEach((to, from) => {
from && setTimeout(() => {
requestAnimationFrame(() => {
const title = document.title.trim().split('|')
announce(t('a11y.route_loaded', [title[0]]))
})
}, 512)
})
})
</script>
<template>
<p sr-only role="status" :aria-live="ariaLive">
{{ ariaMessage }}
</p>
</template>

View file

@ -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>

View file

@ -0,0 +1,27 @@
<script setup lang="ts">
import type { AriaLive } from '~/composables/aria/types'
import { useAriaStatus } from '~/composables/aria'
// tsc complaining when using $defineProps
withDefaults(defineProps<{
ariaLive?: AriaLive
}>(), {
ariaLive: 'polite',
})
const { announceStatus, clearStatus, status } = useAriaStatus()
defineExpose({
announceStatus,
clearStatus,
})
</script>
<template>
<slot />
<p sr-only role="status" :aria-live="ariaLive">
<slot name="status" :status="status">
{{ status }}
</slot>
</p>
</template>

60
composables/aria/index.ts Normal file
View file

@ -0,0 +1,60 @@
import type { AriaAnnounceType } from '~/composables/aria/types'
const ariaAnnouncer = useEventBus<AriaAnnounceType, string | undefined>(Symbol('aria-announcer'))
export const useAriaAnnouncer = () => {
const announce = (message: string) => {
ariaAnnouncer.emit('announce', message)
}
const mute = () => {
ariaAnnouncer.emit('mute')
}
const unmute = () => {
ariaAnnouncer.emit('unmute')
}
return { announce, ariaAnnouncer, mute, unmute }
}
export const useAriaLog = () => {
let logs = $ref<any[]>([])
const announceLogs = (messages: any[]) => {
logs = messages
}
const appendLogs = (messages: any[]) => {
logs = logs.concat(messages)
}
const clearLogs = () => {
logs = []
}
return {
announceLogs,
appendLogs,
clearLogs,
logs,
}
}
export const useAriaStatus = () => {
let status = $ref<any>('')
const announceStatus = (message: any) => {
status = message
}
const clearStatus = () => {
status = ''
}
return {
announceStatus,
clearStatus,
status,
}
}

View file

@ -0,0 +1,2 @@
export type AriaLive = 'off' | 'polite' | 'assertive'
export type AriaAnnounceType = 'announce' | 'mute' | 'unmute'

View file

@ -55,5 +55,6 @@ const reload = async () => {
</slot> </slot>
</MainContent> </MainContent>
</NuxtLayout> </NuxtLayout>
<AriaAnnouncer />
<PWAPrompt /> <PWAPrompt />
</template> </template>

View file

@ -1,4 +1,11 @@
{ {
"a11y": {
"loading_page": "Loading page, please wait",
"loading_titled_page": "Loading {0} page, please wait",
"locale_changed": "Language changed to {0}",
"locale_changing": "Changing language, please wait",
"route_loaded": "Page {0} loaded"
},
"account": { "account": {
"avatar_description": "{0}'s avatar", "avatar_description": "{0}'s avatar",
"blocked_by": "You're blocked by this user.", "blocked_by": "You're blocked by this user.",

View file

@ -1,4 +1,11 @@
{ {
"a11y": {
"loading_page": "Cargando página, espere por favor",
"loading_titled_page": "Cargando página {0}, espere por favor",
"locale_changed": "Idioma cambiado a {0}",
"locale_changing": "Cambiando idioma, espere por favor",
"route_loaded": "Página {0} cargada"
},
"account": { "account": {
"avatar_description": "avatar de {0}", "avatar_description": "avatar de {0}",
"blocked_by": "Estás bloqueado por este usuario.", "blocked_by": "Estás bloqueado por este usuario.",