react-magma icon indicating copy to clipboard operation
react-magma copied to clipboard

fix(TreeView): Accessibility updates

Open silvalaura opened this issue 1 year ago • 13 comments

Issue: #1309

What I did

Address the following Perkins a11y concerns around Tree:

  1. Walking back up the tree using the left arrow isn't working. Pressing the left arrow on a nested end node should move up to the parent node. Pressing left again should close the parent node if it is open or move up again if it is closed. Pressing left a third time should move up to the grandparent node (if it exists). To see this behavior in action, open the APG treeview example and get keyboard focus into a child item of Project 3. Then press the left arrow key several times to see how it moves back up the tree. ✅
  2. Animations do not respect a user's reduced motion preference (MDN). The animations are subtle but do cause significant, visible movement of treeitems. Consider removing animations when users have reduced motion enabled. ✅
  3. When tabbing into a multi-select treeview with selected items, the focus should land on the first selected item. This seems to happen on the initial load when tabbing forward. Tabbing backward into the treeview doesn't bring focus to the first selected item. After that, the focus seems to not return to the treeview. ✖️ Cannot reproduce, so did not make any changes
  4. Both NVDA and JAWS remain in their Browse Mode when entering the treeview and do not automatically switch to Focus Mode (NVDA) or Forms Mode (JAWS). This causes the arrow keys to read the pieces of the tree view, instead of moving focus between treeitems. Users must press insert + space on NVDA to enter Focus Mode or enter on JAWS to enter Forms Mode. Once the proper mode is enabled, arrow key navigation works as expected. The APG treeview example automatically switches NVDA and JAWS into the proper mode. My hunch is that your roving tabindex implementation might be a partial cause. The APG example places the roving tabindex directly on the <li role="treeitem">. Your example places it on an inner <div>. If it's possible to move that tabindex, that's where I would start. Test in either NVDA or JAWS to see if arrow key navigation works without any manual mode changes. ✖️ not addressed yet

Screenshots:

Checklist

  • [x] changeset has been added
  • [X] Pull request description is descriptive
  • [ ] I have made corresponding changes to the documentation
  • [ ] New and existing unit tests pass locally with my changes
  • [ ] I have added tests that prove my fix is effective or that my feature works

How to test

  • Notes from Perkins are above, so follow those steps for reproducing.
  • To test the reduced motion in macOS: System Preferences > Accessibility > Display > Reduce motion.

silvalaura avatar Jul 01 '24 14:07 silvalaura

🦋 Changeset detected

Latest commit: 4596a7d5fba700f0d6158a93f06ddeffe85014da

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

changeset-bot[bot] avatar Jul 01 '24 14:07 changeset-bot[bot]

🚀 Deployed on https://docs-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Jul 01 '24 14:07 github-actions[bot]

🚀 Deployed on https://storybook-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Jul 01 '24 14:07 github-actions[bot]

🚀 Deployed on https://docs-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Jul 01 '24 15:07 github-actions[bot]

🚀 Deployed on https://storybook-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Jul 01 '24 15:07 github-actions[bot]

🚀 Deployed on https://docs-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Jul 01 '24 17:07 github-actions[bot]

🚀 Deployed on https://storybook-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Jul 01 '24 17:07 github-actions[bot]

🚀 Deployed on https://docs-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Jul 31 '24 14:07 github-actions[bot]

🚀 Deployed on https://storybook-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Jul 31 '24 14:07 github-actions[bot]

🚀 Deployed on https://docs-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Jul 31 '24 14:07 github-actions[bot]

🚀 Deployed on https://storybook-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Jul 31 '24 14:07 github-actions[bot]

🚀 Deployed on https://docs-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Aug 02 '24 13:08 github-actions[bot]

🚀 Deployed on https://storybook-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Aug 02 '24 13:08 github-actions[bot]

🚀 Deployed on https://docs-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Sep 09 '24 15:09 github-actions[bot]

🚀 Deployed on https://storybook-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Sep 09 '24 15:09 github-actions[bot]

🚀 Deployed on https://docs-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Sep 09 '24 20:09 github-actions[bot]

🚀 Deployed on https://storybook-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Sep 09 '24 20:09 github-actions[bot]

🚀 Deployed on https://docs-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Sep 11 '24 15:09 github-actions[bot]

🚀 Deployed on https://storybook-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Sep 11 '24 15:09 github-actions[bot]

🚀 Deployed on https://docs-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Sep 11 '24 15:09 github-actions[bot]

🚀 Deployed on https://storybook-preview-1338--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] avatar Sep 11 '24 15:09 github-actions[bot]