refactor: migrate to nuxt compatibilityVersion: 4 (#3298)

app/components/aria/AriaAnnouncer.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { LocaleObject } from '@nuxtjs/i18n'
+import type { AriaAnnounceType, AriaLive } from '~/composables/aria'
+
+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>)
+
+const ariaLive = ref<AriaLive>('polite')
+const ariaMessage = ref<string>('')
+
+function onMessage(event: AriaAnnounceType, message?: string) {
+  if (event === 'announce')
+    ariaMessage.value = message!
+  else if (event === 'mute')
+    ariaLive.value = 'off'
+  else
+    ariaLive.value = '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) => {
+    if (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>

app/components/aria/AriaLog.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { AriaLive } from '~/composables/aria'
+
+const {
+  ariaLive = 'polite',
+  heading = 'h2',
+  messageKey = (message: any) => message,
+} = defineProps<{
+  ariaLive?: AriaLive
+  heading?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  title: string
+  messageKey?: (message: any) => any
+}>()
+
+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>

app/components/aria/AriaStatus.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AriaLive } from '~/composables/aria'
+
+const { ariaLive = 'polite' } = defineProps<{
+  ariaLive?: AriaLive
+}>()
+
+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>