Add a11y checks to repository

[andrewtavis]

Terms

• [X] I have searched open and closed feature requests
• [X] I agree to follow activist's Code of Conduct

Description

This issue would look into adding an accessibility workflow to the frontend checks that we already have in pr_ci_frontend.yaml. The general thought would be to go with axe for this and also add axe Accessibility Linter to the suggested VS Code extensions that we have in the readme and contributing guide. Specifically in looking into it axe has support for Vue, but other options such as Lighthouse could also be considered :) Lighthouse also offers SEO checks as well that might be something to add.

Contribution

Happy to work with someone on this!

[andrewtavis]

CC @to-sta and @therealhoppi (that article you sent along got me thinking that we should check this).

[thiagogquinto]

Hi @andrewtavis, could I try to work on it?

[andrewtavis]

Hey @thiagogquinto 👋 You can definitely implement this! :) Do you want to help a bit with the research for it beforehand? It looks like there are no Lighthouse related VS Code extensions for a11y as all I get for a search for "Lighthouse" is a theme 🧑‍🎨😅

Specifailly we're looking at what the Vue support is as it seems like axe has it. Could you check if there's a good way to implement Lighthouse checks for Vue with GitHub Actions, and maybe we can make another issue? That new issue can be for adding in anything that Lighthouse has that axe might not like SEO suggestion 😊

[thiagogquinto]

Thanks, sounds good! I will make some research about it.

[andrewtavis]

Thanks @thiagogquinto! Let us know if there's anything we can do to support :)

[thiagogquinto]

Hey @andrewtavis, just so you know it, I am doing research on this, but I did not find yet a way to add the checks, and I have been pretty busy in the past days, so if you want to unassign me from the task, feel free. I will continue the research, but I think it would be really helpfull if someone else could research too. Sorry for that!

[andrewtavis]

No need to apologize, @thiagogquinto! Thanks for the heads up, and hope that things relax a bit in the coming days :) I'll keep this in mind and we can look into it together at some point potentially.

[andrewtavis]

Hey @thiagogquinto 👋 FYI a friend suggested we look into testing library for our a11y tests. We'd be able to use it for other things as well, with it working well with Vitest as the runner :) Let me know what you think!

[andrewtavis]

Hey @lucianmurmurache 👋 Would this be something that you'd be interested in working on?

[lucianmurmurache]

@andrewtavis I can take a look at this for sure, I would approach this with a combination of vitest and axe

[andrewtavis]

Thanks @lucianmurmurache! Let's discuss a bit more on Tuesday and we'll have a better idea of where to take it from there 😊 Great to see you in the call! Hope it was a nice time :)

[lucianmurmurache]

I was hoping to implement vue-axe but sadly it's not compatible with vue3/nuxt3

Will be looking into integrating axe-core with vitest instead.

[andrewtavis]

Thanks for checking out options, @lucianmurmurache!

[andrewtavis]

Closed via #755 with some minor commits for fixes afterwards :) Thanks @lucianmurmurache! 🚀