vue-a11y / vue-axe Goto Github PK

View Code? Open in Web Editor NEW

187.0 187.0 12.0 1.08 MB

Accessibility auditing for Vue.js applications.

Home Page: https://axe.vue-a11y.com/

License: MIT License

JavaScript 99.37% Vue 0.63%

accessibility-auditing axe dequelabs vue-axe

vue-axe's People

Contributors

Stargazers

Watchers

Forkers

vue-axe's Issues

Relax Peer Dependency on axe-core?

Hey folks,

Would it be acceptable to unpin the peer dependency on axe-core? It's causing npm warnings like

npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.

because I have [email protected].

It seems compatible. Was pinning this peer dependency possibly an oversight?

Update to axe-core >= 3.5.0

Update dependency to axe-core >= 3.5.0

Also it would be cool if the axe-core would be a peerDependency and therefore the "end-user" could update it on its own.

Can't build due to type error. (Vue CLI)

There's an error logged by Vue when building in production mode that causes the application to exit and not build. This error only occurs when building in production.

There's no return value for the customResultHandler field in the VueAxeOptions interface. This is required by tsc.

Since this fix is so easy I'll put a PR to fix it.

Allow specifying root selector/element for initial report

Hello,

First thank you for your work with this plugin :)

I have a use case a bit specific which is to use vue-axe on a styleguide powered by vue-styleguidist.

Because vue-axe takes the document as root node for axe-core to perform it's initial report, it generates a11y violations for things from vue-styleguidist. It'd be nice to be able to customise the selector for the initial check (which could default to document for backward compatibility) so it only analyses my components.

Thanks!

False Positive on Table scope?

I can take a page which has zero warnings and then generate a warning by pasting in this HTML:
<table> <tr> <th scope="col">Foo</th> </tr> <tr> <td>Bar</td> </tr> </table>

This results in the following warning: "critical: scope attribute should be used correctly"

AFAICT, there is nothing wrong with how I am using scope in that markup -- scope="col" is valid in a TH and that is what the rule is checking. Except for some reason it is returning false somewhere along the line. I did see this closed issue on axe-core dequelabs/axe-core#244 but that issue pertains to not using an HTML 5 doctype, which I am using.

There's nothing wrong with my doctype and there's nothing wrong with my use of scope, unless I'm missing something.

When I use the Axe Chrome plugin-in, it does not complain about this rule.

Eslint plugin

This is not directly related with this project, but is there any plan of extend your accessibility stack onto linting? There is this eslint plugin based on the jsx-a11y project, but is poorly maintained and has quite a few flaws.

There are several advantages into doing it this way and I feel, if applied in HMR, it will help developers to create more accessible UI's.

Is there any way you could add a properly funcioning and maintained eslint plugin to your projects? I'd happily give a hand ;)

add config option to clear console

currently console gets cleared on updated via clearAxeConsole which means that everything you log in mounted() lifecycle hook will never show up in the console.

Feature request: Delay until loaded

My app has a loading animation outside of the element in which Vue is mounted:

<body>
  <div id="loading" role="progressbar">
    <img src="<%= BASE_URL %>animation.gif" alt="" />
    <div>Loading…</div>
  </div>
  <div id="app" aria-busy="true"></div>
</body>

One Vue is mounted and everything is loaded, the animation fades out and is removed from the DOM:

<body>
  <div id="app">
    <!--- Vue SPA is mounted here, and provides the <main> tag. --->
  </div>
</body>

I would like to delay running VueAxe until the loading is completed. I.e. I would like to start it manually, or delay it until a certain event fires, because VueAxe is complaining about a few things like missing

tag, etc. while loading.

Console errors: Cannot read property 'violations' of undefined -- Nuxt

Seeing two errors come up on Nuxt over and over despite following documentation for installing.

Everything seems to be working okay, but I see two errors on each page after refreshing:

Image of the console errors thrown

My best guesses for these errors

The first issue appears (Cannot read property 'violations' of undefined from vue-axe.esm.js) to be related to vue-axe.

The second is coming from axe.js (Uncaught (in promise) Error: No elements found for include in page Context). From what I can tell, this isn't the axe.js file in plugins/axe.js. Of course, I could be mistaken.

Attempted troubleshooting

I deleted alt text from an image and saved it; after a hot reload the errors do not log, but if I then refresh the page they are logged.

Console after running env in dev

First run of page - Image has alt text

After saving without alt on image

Hot reloaded page - removed alt text and saved

Then after refreshing

Not a hot reload - still no alt text

On the bright side

Besides those console errors, everything else seems to work great!!

Help me help you

Sorry if my issue lacks info. (I'm not the main dev on our small team, and my knowledge of Nuxt and Vue-Axe could use improvement -- obviously). If I can provide more info or logs, let me know.

Side note

Accessibility is a top priority for our team (WCAG AA 2.1), and I would love to get this implemented to save our devs time and provide them with an awesome resource. I'm certified in WCAG through WebAIM, but your plugin is a better resource than me :).

The link in the README is dead

https://vue-axe.surge.sh/ goes nowhere.

Nuxt fragment issue

Getting this error in the console.

./node_modules/vue-axe/dist/vue-axe.esm.js 2563:96-104"export 'Fragment' was not found in 'vue'

Using nuxt v2.15.8 and have installed as a plugin as per the instructions

Support for axe-core v4?

axe-core v4 has been out for a while. It doesnt seem like any of the breaking changes would affect the usage in this library (correct me if im wrong) https://github.com/dequelabs/axe-core/blob/develop/CHANGELOG.md#400-2020-07-28.

I do see this is updated in vue-axe-next. Would it be possible to update the peer dependency in the vue-axe v2 branch to allow users to use the newest version? Currently I believe the peerDependencies is locked into v3 ("^3.5.3").

How to configure

Thank you for maintaining this plugin.
I somehow can not find out how to work with the axe-core and customize my needs.

Inspecting the demo where I see a color contrast error in the console.

I am trying to reproduce it myself but without any success.
I think this is turned on by default but I tried to configure like this anyway:

config: {
    rules: [
        { id: "color-contrast", enabled: true },
        ...
     ]
}

Any ideas or tips on how I can possibly enable this. Any help or tips very much appreciated!

BTW. I did test my app with axe-coconut where I get multiple error instance on color contrast so I am sure that these issues do exists

TypeScript definitions?

Noticed that there are no TypeScript definition files or an @types/vue-axe module available to use - would be nice to have those definitions available here for projects using TypeScript.

Dependency error while using with Nuxt: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

While using vue-axe with Nuxt I have following warning:

./node_modules/axe-core/axe.js 6275:19-26
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

I use Nuxt v2.15.2
It looks like it deasn't break anything, plugin work properly despite this warning

Release v3 as latest on npm instead of next

Vue-Axe 3.1.2 is listed as "next", while 2.4.4 is listed as "latest":

https://www.npmjs.com/package/vue-axe?activeTab=versions

Vue 3 has been out for a while and is currently at 3.2.28. I think there's been like 85 releases since 2.6.14.

Next time you do a v3 release, you should consider switching it to the latest on npm.

Last notification is being cleared every update

A commit from 12 days ago is clearing the lastNotification value and making vue-axe output the same previous notification each time there is an update.

This is causing pointless duplicated debug per Vue update. It should only be outputting Axe information when there is a change of errors, rather than each time there is a change in HTML.

Feature request: Make styles customizable

The defaults for export const STYLE in constants.js are not very pretty, even for DX. I would like to modify it if possible. Until then, I'm using a patched version of vue-axe. ;)

Console cleared even when `clearConsoleOnUpdate: false`

(Duplicate of #26 - possible regression?)

When running vue-axe with the following options, the console is cleared on load and on subsequent updates.

Vue.use(VueAxe, {
  auto: true, // with or without this line
  clearConsoleOnUpdate: false,
})

Console cleared even when `clearConsoleOnUpdate: false`

I can't find a way to disable all console clears from this module. It's quite important for my development process that the console is NEVER cleared.

Contrast checker doesn't appear to be functioning as expected

Hi there,

Working on my first Nuxt project and enjoying it so far. I installed the Vue-Axe plugin to get some automated a11y checking, but the contrast check doesn't appear to be working for me. I used some black text on a black background, and I'd expect something like the following (which works fine on the demo page):

Missing alt descriptions on images DO throw a warning in the console, so the plugin is working, it just seems to be missing these contrast errors. This is a server-rendered app, but the plugin is setup in the config before the generate method, so I'd expect it to work.

The Chrome Wave plugin does find the contrast errors:

Using version 1.0.7 of vue-axe and 2.4.0 of Nuxt.

Any suggestions appreciated!

Can I use vue-axe without Nuxt?

If so, how do I "enable the plugin" as described in README? Thank you!