primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.62k stars 4.63k forks source link

TreeTable: Make TreeTable accessible for ScreenReaders #16862

Open B34v0n opened 3 days ago

B34v0n commented 3 days ago

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" image image

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

  1. Download and install NVDA (https://www.nvaccess.org/download/)
  2. Open NVDA
  3. Navigate to the TreeTable-Site (https://primeng.org/treetable#frozencolumns)
  4. Press t to get to the next Table
  5. See that frozenColumns-Header, frozenColumns, normal Header, normal table are all seperate tables
  6. Try to navigate the table without looking at the screen.

Expected 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

github-actions[bot] commented 2 days ago

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles: