jaredLunde / jaredLunde/masonic
Elements with role "gridcell" must be contained in an element with the role "row"
- Dominant language
- TypeScript
- Stars
- 1.4k
- Forks
- 63
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
[Accessibility Insights](https://accessibilityinsights.io/) reports an issue with Masonic's accessibility markup.
Masonic [assigns a WAI-ARIA role](https://github.com/jaredLunde/masonic/blob/main/src/use-masonry.tsx#L79) of `grid` to the container, and a role of `gridcell` to each individual cell. However, [per W3C](https://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#gridcell) there needs to be an element with role "row" around each visual row of cells:
> Authors MUST ensure elements with role gridcell are contained in, or owned by, an element with the role row.
**To Reproduce**
Run an Accessibility Insights FastPass scan on a web page using Masonic (the codesandbox demo works if you enable additional permissions for the extension to see the iframe). The error will be listed under "aria-required-parent".

**Expected behavior**
A Masonic grid should contain standards-compliant markup which passes an accessibility scan.
**Screenshots**
n/a
**Desktop (please complete the following information):**
- OS: n/a
- Browser n/a
- Version n/a
**Smartphone (please complete the following information):**
- Device: n/a
- OS: n/a
- Browser n/a
- Version n/a
**Additional context**
n/a
Contributor guide
Research direction
Start in src/use-masonry.tsx at the container and cell role assignments, then reproduce the aria-required-parent finding with Accessibility Insights FastPass. Determine how the visual rows are represented and update the markup so each gridcell is owned by a row; done means the Masonic grid passes the accessibility scan.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100