jaredLunde / jaredLunde/masonic

Elements with role "gridcell" must be contained in an element with the role "row"

Open
#125 2 comments 0 reactions 0 assignees View on GitHub
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".

Screen Shot 2022-07-13 at 7 18 26 PM

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.