Tiêu điểm và bàn phím

:focus-visible, không phải :focus. Ring dày 3px, lệch 2px, màu --nf-semantic-focus-ring. Không dùng outline: none trừ khi cùng lúc vẽ một chỉ báo khác rõ ràng bằng hoặc hơn. Ring là một hình, không phải một sắc độ.

Kiểm. Tab qua mọi điều khiển trên trang. Mỗi bước dừng phải thấy được ring mà không cần tìm. Bấm chuột vào cùng những điều khiển đó: ring không được hiện.

Khi một phần tử nhận tiêu điểm, nó phải nhìn thấy được — không nằm dưới header dính, không nằm sau drawer, không bị cuộn ra ngoài vùng nhìn. scroll-margin-top bằng chiều cao header là cách sửa.

Kiểm. Tab tới điều khiển đầu tiên nằm dưới mép cuộn. Nó phải hiện đầy đủ, không bị cắt ở mép trên.

Liên kết đầu tiên trong thứ tự tab là "Bỏ qua tới nội dung", trỏ tới id của main. Nó ẩn cho tới khi nhận tiêu điểm, rồi hiện rõ. Landmark là điều kiện đi kèm, không phải thay thế: <header>, <nav> có nhãn, <main> mỗi trang đúng một lần.

Thứ tự tab theo thứ tự đọc trực quan. Không dùng tabindex dương. Dialog và Sheet modal giữ tiêu điểm bên trong khi đang mở — đó là hành vi đúng, không phải bẫy — miễn là Escape luôn đóng được. Popover không modal không giữ tiêu điểm.

Đóng overlay thì tiêu điểm về đúng điều khiển đã mở nó. Nếu điều khiển đó đã biến mất, tiêu điểm về phần tử ổn định gần nhất, và trang phải thông báo điều gì vừa xảy ra qua vùng aria-live. Radix làm sẵn phần lớn việc này cho Dialog, Sheet, Popover, Select — đừng ghi đè onCloseAutoFocus trừ khi có lý do viết ra được.

Ba điều khiển thật, không mô tả: Tab qua chúng để thấy ring của chính hệ thống.