Skip to content

Accessibility tool for development environments#7810

Merged
mrcasals merged 23 commits intodecidim:developfrom
mainio:feature/accessibility-tool
Apr 19, 2021
Merged

Accessibility tool for development environments#7810
mrcasals merged 23 commits intodecidim:developfrom
mainio:feature/accessibility-tool

Conversation

@ahukkanen
Copy link
Copy Markdown
Contributor

@ahukkanen ahukkanen commented Apr 7, 2021

🎩 What? Why?

This implements a visual accessibility evaluation tool for the decidim-dev module that can be used to decrease the amount of accessibility issues in the views.

The tool becomes available when the following is true:

  1. The decidim-dev has been defined as a dependency in the Gemfile (generally in the :development group)
  2. The app is running in the development environment (i.e. RAILS_ENV=development which is the default)

This also adds the tool to the design app.

📌 Related Issues

Testing

  1. Start the application in the development mode
  2. See the accessibility tool badge appear at the top left corner of the page (see screenshots)

📋 Checklist

  • CONSIDER adding a unit test if your PR resolves an issue.
  • ✔️ DO check open PR's to avoid duplicates.
  • ✔️ DO keep pull requests small so they can be easily reviewed.
  • ✔️ DO build locally before pushing.
  • ✔️ DO make sure tests pass.
  • ✔️ DO make sure any new changes are documented in docs/.
  • ✔️ DO add and modify seeds if necessary.
  • ✔️ DO add CHANGELOG upgrade notes if required.
  • ✔️ DO add to GraphQL API if there are new public fields.
  • ✔️ DO add link to MetaDecidim if it's a new feature.
  • AVOID breaking the continuous integration build.
  • AVOID making significant changes to the overall architecture.

📷 Screenshots

The tool in action:

decidim-visual-accessibility-tool.mp4

It displays a WAI WCAG badge at the left side of the screen and clicking that opens a list of accessibility violations on that page.

When everything is OK it looks like this:
WAI WCAG badge when everything is OK

When there are errors on the page, it looks like this (the number indicates the different violation categories on the page):
WAI WCAG badge when there are violations on the page

When the sidebar is opened, the sections of the page that have violations are highlighted on the page like this:
Accessibility violation indicators on the page

When you click the violation indicator (:warning:), it will highlight which issue this is as listed in the sidebar (shown in the video).

@mrcasals mrcasals merged commit 2d83716 into decidim:develop Apr 19, 2021
@mrcasals
Copy link
Copy Markdown
Contributor

Yay, thanks you so much @ahukkanen!

@ahukkanen ahukkanen deleted the feature/accessibility-tool branch April 19, 2021 12:45
@mrcasals
Copy link
Copy Markdown
Contributor

@ahukkanen after merging this PR, we got some errors in develop:

https://github.com/decidim/decidim/runs/2380822325?check_suite_focus=true

Could you check them out, please? 😄

@ahukkanen
Copy link
Copy Markdown
Contributor Author

@mrcasals It seems it's not getting yarn packages from registry.yarnpkg.com.

I just tried requesting manually that file:
https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz

It works now.

Can you restart the jobs?

@mrcasals
Copy link
Copy Markdown
Contributor

Oh, on it, thanks!

entantoencuanto added a commit that referenced this pull request Apr 19, 2021
* develop:
  New Crowdin updates (#7850)
  Accessibility tool for development environments (#7810)
  Attempt to fix puffing-billy runtime error (#7853)
  Dynamically get all participatory space role tables for the `visible_meeting_for` query (#7855)
  Fix joining a meetings that the user already follows (#7854)
  Improve proposals import options (#7669)
  Fix proposal form attachment errors (#7856)
  New Crowdin updates (#7844)
  Fix branch name on generators (#7849)
  Conditionally render questions in election booth (#7822)
  Fix node version for version managers (#7848)
  Migrate to Webpacker (#7464)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants