vue-a11y/vue-announcer

$announcer instance not available with Vue 2 Composition API and TypeScript

ux-engineer opened this issue · 3 comments

ux-engineer commented

While this plugin does not support TypeScript yet, those errors can be skipped with // @ts-ignore comments.

However, I'm having major difficulty using this plugin with Composition API for Vue 2. Can't upgrade to Vue 3 yet so next branch is not a solution here.

How can I access $announcer instance from the setup method?

ktquez commented

@ux-engineer

It's not an ideal or definitive solution, but it can be temporary until we find a better alternative and add a new version of vue-announcer for Vue 2 with composition-api support.

https://codesandbox.io/s/ukxsq?file=/src/components/HelloWorld.vue

  • 👍1
ux-engineer commented

@ktquez thanks a lot, this helps!

An idea: Could it be possible to have the option of being able to pass a function as message or complementRoute, especially message, so i18n logics could easily be bound to the configuration?

If given a function as a value, you would invoke it and catch it's return value (string expected).

For example we could achieve reactive and translatable messages in route object meta config:

// import { t } from '@/i18n';

{
  name: 'home',
  path: '/',
  component: Home,
  meta: {
    announcer: {
      message: () => t('PAGE__HOME__TITLE')
    }
  }
}
ktquez commented

I think it's possible!
My time is pretty short, but as soon as I have some free time I'll add it in a new version.

  • 👍1
  • 👀1