vue-a11y / vue-axe-next Goto Github PK

View Code? Open in Web Editor NEW

48.0 4.0 3.0 608 KB

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

Home Page: https://vue-axe-next.surge.sh/

License: MIT License

JavaScript 32.43% Vue 66.13% CSS 1.45%

vue-axe axe-core a11y accessibility vue vue3 auditing deque axe accessibility-audits

vue-axe-next's Introduction

@vue-a11y/axe

Accessibility auditing for Vue.js 3 applications by running dequelabs/axe-core validation on the page you're viewing.

Links
Setup
Options
Locales

Setup

npm install -D axe-core vue-axe@next
# or
yarn add -D axe-core vue-axe@next

main.js

import { createApp, h, Fragment } from 'vue'
import App from './App.vue'

let app = null

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

app.mount('#app')

Vite

In Vite you need to add axe-core in the dependency optimization option (optimizeDeps).

In your vite.config.js

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
  optimizeDeps: {
    include: ['axe-core']
  }
}

Options

auto

Type	Default
Boolean	`true`

If false disables automatic verification. It is necessary to click on run again for a new analysis.

config

Type	Default
Object	`{ branding: { application: 'vue-axe' }`

To configure the format of the data used by axe.
This can be used to add new rules, which must be registered with the library to execute.

NOTE: Learn more about Axe-core configuration

runOptions

Type	Default
Object	`{ runOptions: { reporter: 'v2', resultTypes: ['violations'] }`

Flexible way to configure how axeCore.run() operates.

NOTE: Learn more about Axe-core runtime options

plugins

Type
Array

const plugins = require('@/plugins/axe')
app.use(VueAxe, {
  plugins: [plugins.myPlugin, plugins.myPlugin2]
})

Locales

Through the settings it is possible to define the language that will be used for the violations.

NOTE: axe-core already has several languages available.
See axe-core locales

const ptBR = require('axe-core/locales/pt_BR.json')
app.use(VueAxe, {
  config: {
    locale: ptBR
  }
})

Roadmap

Contributing

From typos in documentation to coding new features;
Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
Fork repository, make changes and send a pull request;

Thank you

vue-axe-next's People

Contributors

Stargazers

Watchers

Forkers

carlosjordandev calla987

vue-axe-next's Issues

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;

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);
  }
});

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

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!

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!

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);
}