Missing ARIA on nimble-table
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 39
- Forks
- 14
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 13
Description
🐛 Bug Report
Per the ARIA Treegrid example and the ARIA APG Grid and Table Properties documents, we are missing a few ARIA properties required to fully describe the nimble-table for screenreaders.
| Missing label | Role | Description |
|---|---|---|
| aria-label="Inbox" | treegrid | Provides an accessible name for the treegrid. |
| aria-level="number" | row | Defines the level of the row in the hierarchical treegrid structure. Counting is one-based. Root rows have aria-level=“1”. |
| aria-setsize="number" | row | Defines the number of rows in the set of rows that are in the same branch and at the same level within the hierarchy. |
| aria-posinset="number" | row | Defines the position of the row within the set of other rows that are in the same branch and at the same level within the hierarchy. Counting is one-based, not zero-based. |
| Change role="cell" to role="gridcell" | cell | Identifies the element as a gridcell. The gridcell role is not an implicit semantic for the tdelement when in a treegrid. |
| Property | Definition |
|---|---|
| aria-colcount | Defines the total number of columns in a table, grid, or treegrid. |
| aria-rowcount | Defines the total number of rows in a table, grid, or treegrid. |
| aria-colindex | Defines a cell's position with respect to the total number of columns within a table, grid, or treegrid. Note: Numbering starts with 1, not 0. |
| aria-rowindex | Defines a cell's position with respect to the total number of rows within a table, grid, or treegrid. Note: Numbering starts with 1, not 0. |
There are also some accessibility errors on the table in the Lighthouse report. We should attempt to resolve these if they remain after applying the above ARIA.
Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions. [Learn more about roles and required children elements](https://dequeuniversity.com/rules/axe/4.9/aria-required-children).
LINKDATESTATUSNUMBERDURATIONSTRING 2COLOR
<nimble-table _ngcontent-ng-c1457765990="" id-field-name="id" parent-id-field-name="parentId" selection-mode="multiple" role="treegrid" tabindex="0" aria-multiselectable="true">
div.table-container > div.glass-overlay > div.table-viewport
<div class="table-viewport" tabindex="-1">
FIRST NAMELAST NAMEAGE
<nimble-table _ngcontent-ng-c1457765990="" id-field-name="id" parent-id-field-name="parentId" selection-mode="multiple" role="treegrid" tabindex="0" aria-multiselectable="true">
div.table-container > div.glass-overlay > div.table-viewport
<div class="table-viewport" tabindex="-1">
Contributor guide
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
Start at the nimble-table implementation and compare its rendered treegrid markup with the listed ARIA Treegrid/APG requirements and the linked Lighthouse report. Verify the required table, row, and cell roles and properties, then rerun an accessibility audit; done when the listed ARIA gaps and remaining Lighthouse errors are resolved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100