Accessibility testing issues
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):
- 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
- same element does not have a unique role/label/title
- div with id driver-popover content is missing an aria label
- 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
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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