angular / angular/components

[mat-tree] Keyboard Interaction recommended by WAI-ARIA

Open
#13,018 9 comments 12 reactions 0 assignees View on GitHub
Accessibility area: material/tree feature P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
Feature request

#### What is the expected behavior?
Read expected behavior under "Keyboard interactions" at [w3.org/TR/wai-aria-practices/#TreeView](https://www.w3.org/TR/wai-aria-practices/#TreeView). Should use `TAB` to focus [mat-tree] and use arrows to navigate. Similar to radio button behaviour.

#### What is the current behavior?
`TAB` and `SHIFT + TAB` to navigate. `SPACE` or `ENTER` to open/close a node.

#### What are the steps to reproduce?
Look at the example here: [w3.org/TR/wai-aria-practices/examples/treeview/treeview-1/treeview-1a.html](https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-1/treeview-1a.html)
![keyboard-navigation](https://user-images.githubusercontent.com/412615/45206042-4ce05e80-b284-11e8-94f1-4836e462693e.gif)

#### What is the use-case or motivation for changing an existing behavior?
To make [mat-tree] more usable and accessible. Especially important when having lots of items in a tree.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
@angular: 6.1.4
@angular/material: 6.4.6
OS: Windows 10
Chrome: 69.0.3497.81
Typescript: 2.7.2

#### Is there anything else we should know?
No

Contributor guide

Open the contributing guide

Research direction

Start with the mat-tree component and compare its current TAB, SHIFT+TAB, SPACE, and ENTER behavior with the WAI-ARIA TreeView keyboard-interactions guidance and the linked treeview example. Done means mat-tree follows the requested focus and arrow-navigation behavior while retaining the expected node open/close interaction.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.