primefaces / primefaces/primereact
Accessibility Issues: Invalid ARIA Attributes on TreeTable Row Elements in Non-Checkbox Mode
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
When using PrimeReact's TreeTable component in non-checkbox selection mode, several accessibility issues are being flagged by automated tools due to the use of ARIA attributes that are not allowed on elements (table rows). These violations impact accessibility compliance and assistive technology support.
Accessibility Violation 1
The TreeTable is rendering aria-checked="false" on elements, which do not support that attribute unless they have a role such as checkbox, menuitemcheckbox, or treeitem.
According to WAI-ARIA specifications, the aria-checked attribute is only valid for elements with roles like checkbox, menuitemcheckbox, or treeitem. Applying this attribute to a element (which has the implicit role row) violates accessibility guidelines and is flagged by testing tools such as axe-core.
Context:
The TreeTable is being used in non-checkbox selection mode, so the presence of aria-checked is functionally irrelevant.
I attempted to override this using pt (pass-through) props, but couldn't find a way to supply props directly to the elements rendered by the TreeTable. It appears that row-level customization is not currently exposed via pt.
Accessibility Violation 2
Use of Treegrid-Specific ARIA Attributes on Table Rows
The following ARIA attributes are being applied to elements:
- aria-expanded
- aria-level
- aria-posinset
- aria-setsize
These are only valid when used with treegrid roles—not standard table rows.
These attributes are intended for elements with role="treeitem" inside a role="treegrid" structure. When used on plain table or row roles, they violate ARIA specifications.
Reproducer
No response
System Information
- Component: PrimeReact TreeTable
- Selection Mode: Non-checkbox
- PrimeReact Version: 10.9.1
- Accessibility Tool: axe-core
- Browser: Chrome , Edge
Steps to reproduce the behavior
- Install the free axe DevTools browser extension.
- Navigate to the PrimeReact TreeTable documentation page.
- Open axe DevTools from your browser's Developer Tools panel.
- Run a "Full page scan " accessibility scan.
- Observe the reported violations:
- “ARIA attribute is not allowed: aria-checked”
- “These attributes are supported with treegrid rows, but not table: aria-posinset, aria-setsize, aria-expanded, aria-level”
Expected behavior
1.aria-checked should not be rendered on elements when the TreeTable is in non-checkbox mode or there should be way to override it with pt props
2.Avoid rendering aria-expanded, aria-level, aria-posinset, and aria-setsize entirely on tr elements or use them with appropriate roles
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 with the PrimeReact TreeTable component and reproduce the reported violations on the TreeTable documentation page using the axe DevTools browser extension in non-checkbox selection mode. Compare the rendered row attributes with the expected behavior and confirm that the reported aria attributes are no longer flagged by an accessibility scan.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100