profiler icon indicating copy to clipboard operation
profiler copied to clipboard

Accessibility Tools: jsx-a11y and (react-)axe

Open gribnoysup opened this issue 6 years ago • 5 comments

This PR adds a few tools that will help to keep profiler more accessible for users, as described in https://github.com/firefox-devtools/profiler/issues/1620

  • Added eslint-plugin-jsx-a11y as a separate config with it's own yarn command so it can be run separately without blocking the CI or any of the git hooks
  • Added new step to CircleCI config so the a11y errors are visible
  • As react-a11y that was mentioned in the issue is deprecated, instead I added react-axe dev tool that reports a11y issues in browser console
  • Added jest-axe that adds new toHaveNoViolations assertion to jest that works well with axe report. This makes using axe in jest tests easier

To illustate how to use axe with jest I fixed one of the issues that I saw reported by jsx-a11y plugin: added alt texts for timeline screenshots

┆Issue is synchronized with this Jira Task

gribnoysup avatar Aug 17 '19 13:08 gribnoysup

Codecov Report

Base: 88.56% // Head: 88.55% // Decreases project coverage by -0.00% :warning:

Coverage data is based on head (6a370a4) compared to base (7bdff3a). Patch coverage: 62.50% of modified lines in pull request are covered.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2219      +/-   ##
==========================================
- Coverage   88.56%   88.55%   -0.01%     
==========================================
  Files         282      282              
  Lines       25484    25490       +6     
  Branches     6860     6861       +1     
==========================================
+ Hits        22569    22572       +3     
- Misses       2708     2710       +2     
- Partials      207      208       +1     
Impacted Files Coverage Δ
src/index.js 0.00% <0.00%> (ø)
src/components/timeline/TrackScreenshots.js 93.51% <100.00%> (+0.18%) :arrow_up:

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

codecov[bot] avatar Aug 17 '19 13:08 codecov[bot]

Hey, thanks for the patch. Just a quick note that we've seen your PR but couldn't get to it yet. I plan to look at it closer tomorrow. Thanks again!

julienw avatar Aug 20 '19 16:08 julienw

No worries, take your time 😊

gribnoysup avatar Aug 21 '19 05:08 gribnoysup

As discussed on matrix, we want to make this run by default by adding exceptions to lines with a violation. I plan to resume work on this in the end of november or in december.

julienw avatar Nov 06 '20 22:11 julienw

As is obvious, I didn't work on this. My understanding is that our team doesn't have enough resource to work on adding this tool for now. It may still be valuable though so I'm keeping this PR open for reference.

julienw avatar Jul 11 '25 15:07 julienw