angular / angular/components

fr(cdk/a11y/cdkFocusTrap): Option (or always) not to scroll to element when returning focus

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

#### Feature Description
When `cdkTrapFocus` returns focus to the previously focused element (with `cdkTrapFocusAutoCapture` set to `true`), the directive calls `.focus()` on the previous element. On focus, the browser will, by default, scroll to the focused element. this is not always desirable. I'm not actually certain it is ever desirable, but I don't know all of the use cases for focus trap.

#### Use Case
Consider an interactive modal or popover that can be opened by a hover event on desktop. It is possible that the previously focused element was off screen. Then, when the modal is closed, the window will be scrolled back to the previously focused element when `focus()` is called on it.

Here is a simple alternative to calling `focus()` that would return focus without scrolling:
```typescript
public focusWithoutScrolling(element: HTMLElement) {
const x = window.scrollX;
const y = window.scrollY;
element.focus({ preventScroll: true });
//this is necessary because not all browsers yet respect preventScroll
this.window.scrollTo(x, y);
}
```

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

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

Hướng nghiên cứu

Start at the cdkFocusTrap directive and its cdkTrapFocusAutoCapture focus-return path. Review how focus options and browser scrolling are handled before deciding whether scrolling should be optional or always prevented. Done means returning focus after closing a modal or popover without unexpectedly scrolling, with coverage for the chosen behavior.

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ó
3/5
Thời gian dự kiến
1-2 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.