component-driven / component-driven/cypress-axe
Color contrast bug in modals
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 641
- Forks
- 90
- Avg merge
- 6h 8m
- Merged PRs (30d)
- 1
Description
I have a modal that overlays the screen:
(note backdrop darkens)
I'm testing for a11y like so: cy.checkA11y(".modal", null, terminalLog);
But always get this contrast error:
failureSummary: "Fix any of the following:
Element has insufficient color contrast of 2.92 (foreground color: #979797, background color: #ffffff, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
The font size is 18px, the text is #000 and the background is #FFF. I'm not sure how it's getting this #979797 value. This bug only happens when I am checking my modal element for a11y, so I think something is going wrong when I pass in the element I want to check.
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
The report centers on cy.checkA11y(".modal", null, terminalLog) and a modal with a darkened backdrop, but names no repository file or test. Start by reproducing the contrast failure with the reported modal markup and inspect how the selected element is passed to the accessibility check. Done means the check evaluates the modal's visible text and background colors correctly, or the issue is narrowed to the responsible integration.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cypress, typescript
- Domain
- accessibility, testing-qa
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100