angular / angular/components

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

Đang mở
#13,018 9 bình luận 12 reaction 0 người được giao Xem trên GitHub
Accessibility area: material/tree feature P2
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

#### 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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với component mat-tree và so sánh hành vi hiện tại của nó với TAB, SHIFT+TAB, SPACE và ENTER với hướng dẫn về tương tác bàn phím của TreeView trong WAI-ARIA và ví dụ treeview được liên kết. Được xem là hoàn tất khi mat-tree tuân theo hành vi tiêu điểm và điều hướng bằng phím mũi tên được yêu cầu, đồng thời vẫn giữ lại tương tác mở/đóng node như mong đợi.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
accessibility, frontend
Loại issue
Tính năng
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
42/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.