jaredLunde / jaredLunde/masonic
Accessibility failing on Lighthouse
- Dominant language
- TypeScript
- Stars
- 1.4k
- Forks
- 63
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
Accessibility of masonic is failing. Most likely because `role="gridcell"` is not a child of `role="row"`, instead it is a child of `role="grid"`
**To Reproduce**
Steps to reproduce the behavior:
1. Go to example sandbox -> https://codesandbox.io/s/0oyxozv75v
2. Open the preview in new window
3. Open Devtools and click on Lighthouse
4. Now select only accessibility test in desktop view and run lighthouse
5. Check the analysis and you will see two accessibility errors.
**Expected behavior**
Masonic should be accessible
**Screenshots**

**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: Macbook Pro
- OS: v12.6
- Browser - Chrome
- Version 105.0.5195.125
**Additional context**
Elements that have role="gridcell" applied to them must be the child of an element with a role of [row](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/row_role). -> https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/gridcell_role
https://dequeuniversity.com/rules/axe/4.4/aria-required-parent
Contributor guide
Research direction
Start with the linked CodeSandbox and inspect the rendered ARIA hierarchy around the grid and gridcell elements. Run Lighthouse with only the desktop accessibility audit enabled; done means the reported accessibility errors, including the required row parent relationship, are resolved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100