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

TreeTable: Make TreeTable accessible for ScreenReaders #16862

Open
B34v0n opened this issue Nov 27, 2024 · 1 comment
Open

TreeTable: Make TreeTable accessible for ScreenReaders #16862

B34v0n opened this issue Nov 27, 2024 · 1 comment
Labels
Resolution: Help Wanted Issue or pull request requires extra help and feedback
Milestone

Comments

@B34v0n
Copy link

B34v0n commented Nov 27, 2024

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

@B34v0n B34v0n added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 27, 2024
@mertsincan mertsincan added Resolution: Help Wanted Issue or pull request requires extra help and feedback and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Nov 28, 2024
@mertsincan mertsincan added this to the Future milestone Nov 28, 2024
Copy link

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. ✨ Thank you for your contribution! ✨

@github-project-automation github-project-automation bot moved this to Review in PrimeNG Dec 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Help Wanted Issue or pull request requires extra help and feedback
Projects
Status: Review
Development

No branches or pull requests

2 participants