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

Unable to navigate in p-tree when using NVDA or JAWS screen reader #8674

Closed
JirkaBures opened this issue Mar 27, 2020 · 1 comment
Closed
Assignees
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Milestone

Comments

@JirkaBures
Copy link

Hello, the title says it all.

You can try on primeng demo pages https://primefaces.org/primeng/showcase/#/tree

I would like to use p-tree with selectionMode="checkbox". But problem is with every mode.

When i try navigating in tree with keyboard arrow keys without screen reader active it seems to work. But when screen reader is active the arrow keys dont work.

@JirkaBures
Copy link
Author

JirkaBures commented Mar 31, 2020

Was not reading because screen reader did not switch from browser mode to focus mode.
nvaccess/nvda#7898
It can be "hotfixed" by setting role="application" on some parent element.

But after some time spent on it, it was better fixed by moving role="treeitem" to div.ui-treenode-content, and reseting role on LI to role="none"
inspired by https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-2/treeview-2a.html
I did it the "filthy" way

fixTreeHtmlRole() { const liElements = this.pTree.el.nativeElement.getElementsByClassName('ui-treenode'); for (const liEl of liElements) { liEl.setAttribute('role', 'none'); } const divElements = this.pTree.el.nativeElement.getElementsByClassName('ui-treenode-content'); for (const divEl of divElements) { divEl.setAttribute('role', 'treeitem'); } }

onNodeExpand() { setTimeout(() => { this.fixTreeHtmlRole(); }); }

Would be nice, if it could be fixed on Your side, so I can remove my "fix " :)

@cagataycivici cagataycivici self-assigned this Nov 23, 2020
@cagataycivici cagataycivici added the Status: Pending Review Issue or pull request is being reviewed by Core Team label Nov 23, 2020
@cagataycivici cagataycivici added this to the 11.0.0-rc.2 milestone Nov 23, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Projects
None yet
Development

No branches or pull requests

2 participants