Customize focus indicators #167

New issue

Open

opened 2026-07-13 23:39:49 +00:00 by Vectornaut · 2 comments

Vectornaut commented

2026-07-13 23:39:49 +00:00

Member

Summary

So far, we've been using the browser's default focus indicators for most elements. These indicators typically aren't consistent with the interface design, and in some cases we've broken them by accident: for example, we gave input:focus the outline: none property in pull request #48, leaving the ghost mode checkbox with no visible focus indicator. Let's design noticeable, appealing focus indicators for all focusable elements.

Accessibility

Focus plays a role in various accessibility criteria, including:

Resolution requirements

This issue shouldn't be resolved until the following requirements are satisfied. There are other requirements too, described in the issue summary! This checklist is just here to help us remember specific tasks.

Each relevant accessibility criterion is either met or flagged as not met in a UI bug issue.
- In particular, the ghost mode checkbox has a visible focus indicator (or we've filed an issue reminding us to add one).

## Summary So far, we've been using the browser's default focus indicators for most elements. These indicators typically aren't consistent with the interface design, and in some cases we've broken them by accident: for example, we gave `input:focus` the `outline: none` property in pull request #48, leaving the ghost mode checkbox with no visible focus indicator. Let's design noticeable, appealing focus indicators for all focusable elements. ## Accessibility Focus plays a role in various accessibility criteria, including: - ["Content on Hover or Focus"](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html) - ["Focus Visible"](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html) - ["Predictable On Focus"](https://www.w3.org/WAI/WCAG21/Understanding/on-focus.html) ## Resolution requirements This issue shouldn't be resolved until the following requirements are satisfied. There are other requirements too, described in the issue summary! This checklist is just here to help us remember specific tasks. - [ ] Each relevant accessibility criterion is either met or flagged as not met in a UI bug issue. - [ ] In particular, the ghost mode checkbox has a visible focus indicator (or we've filed an issue reminding us to add one).

Vectornaut added the

design

bug

enhancement

labels

2026-07-13 23:39:49 +00:00

glen commented

2026-07-17 01:10:17 +00:00

Owner

We also need to consider/finalize design of the interaction between "selection" and focus. Are they the same or distinct? If they are distinct, what are the respective purposes/behaviors associated to each, and how to we display all of the allowed combinations of selection and focus?

Vectornaut commented

2026-07-17 08:52:10 +00:00

Author

Member

To me, it seems clear that selection and focus have to be distinct, because selection picks out a set of assembly components like elements or regulators, while focus picks out an interface element like a list item, text input, or buttons. We should definitely think about which purposes and behaviors we want to associate with selection, but I don't think we have much say over the ones associated with focus. To me, the concept of focus seems so fundamental to web navigation that web API documentation pages and accessibility standards refer to it without ever bothering to define it (as far as I can tell).

To me, it seems clear that selection and focus have to be distinct, because selection picks out a set of assembly components like elements or regulators, while focus picks out an interface element like a list item, text input, or buttons. We should definitely think about which purposes and behaviors we want to associate with selection, but I don't think we have much say over the ones associated with focus. To me, the concept of focus seems so fundamental to web navigation that [web API documentation pages](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) and [accessibility standards](https://www.w3.org/WAI/WCAG21/Understanding/focus-order) refer to it without ever bothering to define it (as far as I can tell).