You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The TreeTable component is not accessible for screenreaders and behaves strangely.
I tested it with the NVDA-Screenreader (https://www.nvaccess.org/download/) and tried to navigate it with the build-in shortcuts.
First thing to notice, is that the header of the table is a table for itself and the body of the table is a second table.
If you add frozenColumns, you got 4 tables for one visible table.
That makes it very confusing, if you use a screenreader.
It should be possible to navigate it as one table (CTRL + ALT + Arrow Left / Arrow Right / Arrow Top / Arrow Bottom to navigate between the cells).
If you use the screenreader to navigate to the marked red cell, it will read something like "LeftBlock: row X Header column y content" --> "Reading: row 4 Task column 2 Stop Reading"
When the header is a table in itself, the screenreader cannot read the heading with the content, which makes it way harder to navigate.
Additionally, the key-bindings for left and right arrow to open or close the node interfers with the screenreaders ability to navigate the table.
Describe the bug
The TreeTable component is not accessible for screenreaders and behaves strangely.
I tested it with the NVDA-Screenreader (https://www.nvaccess.org/download/) and tried to navigate it with the build-in shortcuts.
First thing to notice, is that the header of the table is a table for itself and the body of the table is a second table.
If you add frozenColumns, you got 4 tables for one visible table.
That makes it very confusing, if you use a screenreader.
It should be possible to navigate it as one table (CTRL + ALT + Arrow Left / Arrow Right / Arrow Top / Arrow Bottom to navigate between the cells).
If it is one table, the header will be read together with the corresponding cell.
Example for a table that reads perfectly in Screenreaders: https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts#nvda-speech_viewer
If you use the screenreader to navigate to the marked red cell, it will read something like "LeftBlock: row X Header column y content" --> "Reading: row 4 Task column 2 Stop Reading"
When the header is a table in itself, the screenreader cannot read the heading with the content, which makes it way harder to navigate.
Additionally, the key-bindings for left and right arrow to open or close the node interfers with the screenreaders ability to navigate the table.
Environment
All Environments
Reproducer
https://stackblitz.com/edit/fdghbm?file=package.json
Angular version
18.x
PrimeNG version
17.18.x
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
20.16.0
Browser(s)
No response
Steps to reproduce the behavior
t
to get to the next TableExpected behavior
The table should behave like one big table, not like 2 or even 4 separate tables.
The navigation with the screenreader should be seamlessly possible, like it is for example here: https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts#nvda-speech_viewer
The text was updated successfully, but these errors were encountered: