angular / angular/components

Add a "focus on first tab" option to FocusTrap in CDK

Đang mở
#10,156 7 bình luận 4 reaction 0 người được giao Xem trên GitHub
area: cdk/a11y feature P4
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:
Proposal

#### What is the expected behavior?
For dialogs and other containers such as drawers, menus etc. When the dialog or container is initialized to receive focus, instead of focusing the first tabbable element or the cdkFocusInitial directive's element, do not focus any element. Instead focus the first element upon the first tab or the last element upon shift-tab.

#### What is the current behavior?
Currently when using cdkFocusRegionStart and cdkFocusRegionEnd, the first tabbable element with the focus trap region receives initial focus. The cdkFocusInitial directive allows changing which component, but there is no mechanism to have no element initially focused. There are often use cases when no initial focus is a preferred behavior (e.g. dialogs where the primary action is non-reversible such as a delete operation).

#### What is the use-case or motivation for changing an existing behavior?
To support use cases where no initial focus is an important UX concern.

#### Is there anything else we should know?
This could be low effort. It appears that the wiring already in FocusTrap could easily support this. A new directive such as 'cdkFocusInitialTab' could be added to be the focus target on initial tab, and code changes made so that initial focus to the first tabbable element is not automatically applied when that directive is used. Usage could be something like:
```
First
...
Last
```

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 triển khai FocusTrap của CDK và phần kết nối cdkFocusRegionStart/cdkFocusRegionEnd cùng cdkFocusInitial được mô tả trong issue. Theo dõi cách tiêu điểm ban đầu được chọn, sau đó xác định và kiểm thử hành vi cdkFocusInitialTab được đề xuất để Tab theo hướng tiến đến phần tử đầu tiên và Shift-Tab đến phần tử cuối cùng mà ban đầu không đặt tiêu điểm vào phần tử nào.

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
45/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.