nilbuild / nilbuild/driver.js

Accessibility testing issues

Open
#434 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
26.8k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Hi there
I am using cypress-axe accessibility testing (WCAG AA) to check the new tutorial I've written using driver.js. The driver.js code is failing accessibility in a number of areas (screenshots attached):

  1. header tag for the title in the popover leads to duplicate banner landmark, and I don't want to remove the header tag around the main page header, as this is a more important landmark for screen-reader users
  2. same element does not have a unique role/label/title
  3. div with id driver-popover content is missing an aria label
  4. div with id-driver-dummy-element has an aria-expanded attribute, despite not being a collapsible menu

I've yet to solve issue 1 as manually changing the role of the element wasn't effective. Issues 2 and 3 were solved relatively easily by accessing element attributes using the onPopoverRender method on the driver object. I had to resort to deleting the whole div in issue 4. It didn't seem to affect the functionality of driver, so I'd be interested to know what purpose that part of the code serves?
I'd appreciate a fix for issue 1 in particular.

Otherwise, I've found driver.js very easy to work with and the supporting docs excellent :)

Thanks

Screenshot 2023-09-19 at 15 56 12
Screenshot 2023-09-19 at 15 56 38
Screenshot 2023-09-19 at 15 57 05

Screenshot 2023-09-19 at 15 57 46

Contributor guide

No contributing guide indexed for this repository

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

Reproduce the tutorial's driver.js popover with cypress-axe and inspect the generated elements identified in the report: the header, popover content, and driver-dummy-element. Start with the reported landmark, labeling, and aria-expanded violations, then verify that the accessibility checks pass without removing required tour functionality.

Written by the indexing model from the issue text.

Assessment

Tech stack
cypress, typescript
Domain
accessibility, frontend, testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.