ToastRegion: no keyboard way back to a modal dialog after F6

Đang mở
  • Có gì không ổn?
#10,903 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
45/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Start with the toast region's F6 keyboard handling and its focus management in the react-aria-components toast code, then reproduce the steps with a Modal, a Dialog and a toast containing a button. Focus should return to the element that was focused before F6, and Escape should also restore it, so check that the region tracks that previous element when it is entered from inside a modal. Done means F6, Shift+F6 and Escape from the region all return focus into the dialog, and Tab past the last toast no longer lands on <body>. Expect to need accessibility context and maintainer input on the intended behaviour.

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

Mô tả

needs investigation
Provide a general summary of the issue here

With a modal dialog open, F6 moves focus into the ToastRegion, but no key brings it back to the dialog.

🤔 Expected Behavior?

From the toast region, F6 (or Shift+F6, or Escape) returns focus to the element focused before F6, inside the modal dialog.

😯 Current Behavior
  • F6 moves focus from the dialog to the toast region, as documented.
  • F6 and Shift+F6 keep focus in the region: the rest of the page is inert under the modal, so the region is the only landmark.
  • Escape does nothing.
  • Tab past the last toast puts focus on <body>, outside the dialog.

A keyboard user who checks a toast cannot get back to the dialog, other than by clicking.

💁 Possible Solution

When F6 has moved focus into the toast region from inside a modal, keep the element it came from. F6, Shift+F6 or Escape in the region returns focus there. This is what Base UI's toast viewport does.

🔦 Context

We wrap UNSTABLE_ToastRegion and UNSTABLE_ToastQueue in a design system. Its toasts must stay reachable, and leavable, by keyboard while a dialog is open.

🖥️ Steps to Reproduce
  1. Render a ToastRegion and a DialogTrigger with a Modal and a Dialog that holds a button.
  2. Open the dialog, then add a toast that has a button.
  3. With focus in the dialog, press F6: focus moves to the toast region.
  4. Press F6, then Shift+F6, then Escape: focus stays in the region each time.
  5. Press Tab past the toast's last button: focus lands on <body>.
Version

react-aria-components 1.22.1

What browsers are you seeing the problem on?

Chrome

What operating system are you using?

macOS

Ngôn ngữ chính
TypeScript
Star
16k
Fork
1.6k
Merge trung bình
4 ngày 3 giờ
Pull request đã merge (30 ngày)
39

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của adobe/react-spectrum

Tất cả issue của adobe/react-spectrum

Issue tương tự

Thêm issue về TypeScript

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.