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

tree does not have aria-selected attribute #1388

Closed
dgreene1 opened this issue Mar 29, 2022 · 1 comment
Closed

tree does not have aria-selected attribute #1388

dgreene1 opened this issue Mar 29, 2022 · 1 comment
Milestone

Comments

@dgreene1
Copy link

Describe the bug
Due to the lack of the aria-selected attribute being present in the tree component, the NVDA (my screenreader of choice) describes a selected node as "not selected"

To Reproduce
Steps to reproduce the behavior:

  1. Turn on NVDA and open Firefox (NVDA performs best in Firefox)
  2. Visit https://react-md.dev/packages/tree/demos
  3. press 2 until you hear NVDA read that you're on the "Multi Select Tree" heading
  4. press tab until you hear NVDA read "tree view folder 1 not selected"
  5. press enter so you can visually see that the item was selected
  6. press down then up so you find yourself back on the item you selected

Expected behavior
NVDA should read "folder 1, 1 of 3, level 1"

I wish that it said "folder 1 select, 1 of 3, level 1" but I'm not sure that NVDA reads when something is selected, only when it's not selected. Either way, if we implement this based off of the spec, it should behave well in all screenreaders. Maybe someone with JAWS can try this out and see if it could have a better narration.

Actual behavior
NVDA reads "folder 1 not selected, 1 of 3, level 1"

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Firefox
  • Version: 98.0.1 (64-bit)

Smartphone (please complete the following information):

n.a.

Additional context Add any other context about the problem here.

I would recommend that the solution for this follow what the MDN says about accessible trees, especially this part:

In some implementations of single-select tree, the focused item also has a selected state; this is known as "selection follows focus". When a single-select tree receives focus, if none of the tree items are selected before the tree receives focus, focus is set on the first node. If a tree item is selected before the tree receives focus, focus is set on the selected tree item. In single-select trees, aria-selected is set to true for the selected tree items and it is not present on any other tree item in the tree.

In multi-select trees, all selected tree items have aria-selected="true" set and all tree item nodes that are selectable but not currently selected have aria-selected="false" set. Do not includes the aria-selected attribute on tree items that are not selectable.

@dgreene1 dgreene1 added the bug label Mar 29, 2022
@mlaursen mlaursen added the tree label Mar 30, 2022
@mlaursen mlaursen added this to the v5.1.1 milestone Mar 30, 2022
@mlaursen
Copy link
Owner

mlaursen commented Apr 1, 2022

Thanks for catching this and writing up a ticket!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants