jaredLunde / jaredLunde/masonic

Accessibility failing on Lighthouse

Open
#133 2 comments 1 reaction 0 assignees View on GitHub
good first issue
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**
Screenshot 2022-09-22 at 8 12 42 AM

**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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.