search

vue-a11y / vue-announcer

A simple way with Vue to announce any useful information for screen readers.
MIT License
233 stars 9 forks source link

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

Open ux-engineer opened 3 years ago

ux-engineer commented 3 years ago

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 3 years ago

@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

ux-engineer commented 3 years ago

@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 3 years ago

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.