Focus
Keyboard focus uses the Bone-accent --oprt-border-focus. Core controls commonly
combine a border with the 1px oprt-focus external ring; some docs controls and
code panels use a 2px outline. Check the rendered geometry.
| Context | Implementation and review |
|---|---|
| Buttons and similar controls | :focus-visible styling identifies keyboard focus. |
| Input wrappers | :focus-within styling highlights the wrapper while its control is focused; this can also appear after pointer interaction. |
| Scrollable code and table regions | Focusable regions need a visible outline and usable keyboard scrolling. |
| Dialogs and overlays | Check initial focus, Escape behavior where supported, return focus, and whether overlapping content hides the active control. |
Relevant WCAG criteria
- 2.4.7 Focus Visible (AA): keyboard focus must be visible.
- 2.4.11 Focus Not Obscured (Minimum) (AA): author-created content must not completely hide the focused control. Test sticky headers, banners, and dialogs together.
- 2.4.13 Focus Appearance (AAA): targets an area comparable to a 2px perimeter and a 3:1 focused/unfocused pixel change, with exceptions. A border plus shadow does not establish conformance automatically.
Inspect examples in the verification workbench. Automated checks cover selected interactions; consuming applications still need keyboard, zoom, forced-colors, and overlay review.