Orange-OpenSource / Orange-OpenSource/Orange-Boosted-Bootstrap

Add `tabindex="0"` whenever `.overflow-*-{auto|scroll}` are used for a11y

Open
#2,179 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

⚠️ on hold 👂 accessibility bootstrap-side 🧩 enhancement
Dominant language
CSS
Stars
219
Forks
61
Avg merge
2d 15h
Merged PRs (30d)
12

Description

In https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2162, axe-core dep has been bumped after regeneration of our package-lock.json, leading to changes in pa11y results.

More information at https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2162#issuecomment-1649653748.

One of the new errors caught by pa11y is that we should add tabindex="0" whenever .overflow-*-{auto|scroll}s are used for a11y reasons.

A fix has been proposed upstream via https://github.com/twbs/bootstrap/pull/38963.

⚠️ This issue is on hold until we have feedback from the upstream PR.

When this issue will be fixed, don't forget to remove .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto rules from .pa11yci.json.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the upstream Bootstrap PR linked in the issue before starting, then locate uses of .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, and .overflow-x-auto. Add the required accessibility handling and remove those rules from .pa11yci.json once the fix is complete; verify the pa11y results.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, scss
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.