vue-a11y/vue-axe-next

Accessibility auditing for Vue.js 3 applications using axe-core

vue-axe-next's Issues

Roadmap

v3

• Enable highlighting of elements with errors on the page;
• i18n;
• Announce "views" changes to the screen reader;
• New documentation;
• Add focus trap in the popup;

Add example in documentation for vue 3 typescript with import instead of require

Figuring out how to conditionally load vue-axe was a bit tricky, but here's a working example for others who might want to use it on a typescrpt project. It's important to note that if you import VueAxe outside the if development conditional, it'll be added to vendors.js in production (it's huge).

let app = null;
const setupApp = (app: any) => {
    mountWidgets(app, i18n);
    app.use(store);
    app.use(router);
    app.use(i18n);
    app.mount('#app');
};

if (process.env.NODE_ENV === 'development') {
    import('vue-axe').then((res) =>{
        const VueAxe = res.default;
        const VueAxePopup = res.VueAxePopup;
        app = createApp({
            render: () => h(Fragment, [h(App), h(VueAxePopup)]),
        });
        app.use(VueAxe);
        setupApp(app);
    });
} else {
    app = createApp(App);
    setupApp(app);
}

Nuxt 3 compatibility

Hello is this compatible with Nuxt 3?
I tried to create a nuxt plugin like this, but without results:

import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin(async (nuxtApp) => {
  if (process.env.NODE_ENV === "development") {
    const VueAxe = await import("vue-axe");
    nuxtApp.vueApp.use(VueAxe.default);
  }
});

vue-axe not working in Vue 3: Invalid vnode type when creating vnode: undefined

Happy New Year!

Vue is throwing a warning "Invalid vnode type when creating vnode: undefined at " when installing vue-axe@next in Vue 3. I do not see the popup that is supposed to show up on the bottom-right-corner of the screen.

I managed to reproduce the error here: https://codesandbox.io/s/vue-axe-next-error-lz5g2

Many thanks!

Vue3 setup not working

Hi folks, thanks for trying to support vue3.

I have tried to use it on my demo app for a meetup.

I’m currently facing an issue while trying to use the lib. I got this error message :

webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:159 [Vue warn]: A plugin must either be a function or an object with an "install" function.
warn @ webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:159
webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:159 [Vue warn]: injection "Symbol(vue-axe)" not found. 
  at <Popup> 
  at <App>
warn @ webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:159
webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:159 [Vue warn]: Unhandled error during execution of setup function 
  at <Popup> 
  at <App>
warn @ webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:159
webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:338 Uncaught TypeError: Cannot read property 'results' of undefined
    at setup (webpack-internal:///./node_modules/vue-axe/dist/vue-axe.esm.js:3193)
    at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:275)
    at setupStatefulComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6518)
    at setupComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6479)
    at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4219)
    at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4195)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3822)
    at mountChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3995)
    at processFragment (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4155)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3815)

Please find the repo here to reproduce : https://github.com/Zenika/grenoble-hands-on-vuejs/tree/tests-a11y

Allow specifying elements for check

Hello,

I have a use case where I should check only some specific elements, for example the element with the #header ID, along with all of its content. I would like to be able to customise the selector for the check so vue-axe only analyses my specific components.

Thanks!