Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃悰 Bug: Accessibility issue on mochajs.org: scrollable region missing keyboard focus #5067

Open
4 tasks done
JoshuaKGoldberg opened this issue Dec 28, 2023 · 1 comment
Labels
area: browser browser-specific status: accepting prs Mocha can use your help with this one! type: bug a defect, confirmed by a maintainer

Comments

@JoshuaKGoldberg
Copy link
Member

JoshuaKGoldberg commented Dec 28, 2023

Bug Report Checklist

  • I have read and agree to Mocha's Code of Conduct and Contributing Guidelines
  • I have searched for related issues and issues with the faq label, but none matched my issue.
  • I have 'smoke tested' the code to be tested by running it outside the real test suite to get a better sense of whether the problem is in the code under test, my usage of Mocha, or Mocha itself.
  • I want to provide a PR to resolve this

Expected

The website should not have any accessibility issues - including ones detectable by the axe browser devtools.

Actual

Several code blocks, such as the const assert = require('assert'); code block under https://mochajs.org/#delayed-root-suite, are a scrollable region without keyboard focus. That makes them unusable for users who scroll with non-mouse devices - such as keyboards.

Minimal, Reproducible Example

  1. Visit https://mochajs.org
  2. Wait for the page to load & fade in
  3. Run the axe browser devtools

Versions

n/a

Additional Info

https://web.dev/explore/accessible explains more around web accessibility.

I first ran a Lighthouse accessibility audits but it didn't wait for the page to fade in and reported many false negatives as a result.

@JoshuaKGoldberg JoshuaKGoldberg added type: bug a defect, confirmed by a maintainer area: browser browser-specific status: accepting prs Mocha can use your help with this one! labels Dec 28, 2023
@JoshuaKGoldberg JoshuaKGoldberg self-assigned this Dec 28, 2023
@JoshuaKGoldberg JoshuaKGoldberg added good first issue new contributors should look here! and removed good first issue new contributors should look here! labels Dec 28, 2023
@JoshuaKGoldberg
Copy link
Member Author

The site's tooling is a little old and I'm not sure that it'll be straightforward to fix this until #5071 bumps our site-related devDependencies to latest. Removing good first issue and unassigning myself for now.

If someone is familiar with markdown-it and prism, and knows that there's an easy fix in the older versions we use, please do go ahead and fix it in the meantime! But otherwise I'll wait to take action till #5071 is in.

@JoshuaKGoldberg JoshuaKGoldberg removed their assignment Dec 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: browser browser-specific status: accepting prs Mocha can use your help with this one! type: bug a defect, confirmed by a maintainer
Projects
None yet
Development

No branches or pull requests

1 participant