Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing ARIA on nimble-table #2285

Open
fredvisser opened this issue Jul 17, 2024 · 0 comments
Open

Missing ARIA on nimble-table #2285

fredvisser opened this issue Jul 17, 2024 · 0 comments
Assignees
Labels
bug Something isn't working

Comments

@fredvisser
Copy link
Contributor

fredvisser commented Jul 17, 2024

🐛 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">
@fredvisser fredvisser added bug Something isn't working triage New issue that needs to be reviewed labels Jul 17, 2024
@m-akinc m-akinc removed the triage New issue that needs to be reviewed label Jul 23, 2024
@m-akinc m-akinc moved this to Defined/Ready to Pickup in Nimble Design System Priorities Jul 23, 2024
@atmgrifter00 atmgrifter00 self-assigned this Sep 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: Defined/Ready to Pickup
Development

No branches or pull requests

3 participants