search

mlaursen / react-md

React material design - An accessible React component library built from the Material Design guidelines in Sass
https://react-md.dev
MIT License
2.33k stars 300 forks source link

tree does not have aria-selected attribute #1388

Closed dgreene1 closed 2 years ago

dgreene1 commented 2 years ago

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):

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.

mlaursen commented 2 years ago

Thanks for catching this and writing up a ticket!