Security News
Bun 1.2 Released with 90% Node.js Compatibility and Built-in S3 Object Support
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
wicg-focus-ring
Advanced tools
Based on the proposed CSS
:focus-ring
pseudo-selector,
this prototype adds a focus-ring
class to the focused element,
in situations in which the :focus-ring
pseudo-selector should match.
npm install --save wicg-focus-ring
We suggest that users
selectively disable the default focus style
by selecting for the case when .focus-ring
is not applied:
:focus:not(.focus-ring) {
outline: none;
}
If there are elements which should always have a focus ring shown,
authors may explicitly add the focus-ring
class.
If explicitly added, it will not be removed on blur
.
The status quo, :focus
, is quite problematic:
<button>
in Chrome,
have a "magic" focus style which does not apply
unless focus was received via a keyboard interaction.To deal with this:
/* override UA stylesheet if necessary */
:focus {
outline: none;
}
/* establish desired focus ring appearance for appropriate input modalities */
:focus-ring {
outline: 2px solid blue;
}
:focus-ring
matches native elements that are
Additionally, :focus-ring
matches non-native elements as if they were
native button elements.
focus-ring
This is not currently part of the spec,
but a mechanism is needed to explain the ability of native text fields
to match :focus-ring
regardless of how focus arrived on the element.
Consider an author creating a custom element, custom-texty-element
,
which they believe should show a focus ring on mouse click.
By default, the default :focus-ring
user agent style
will not show a focus ring when this element receives focus via mouse click.
However, if the author were to style the element via :focus
,
they could not recreate the browser's default outline
style reliably:
custom-texty-element:focus {
outline: ???;
}
Either of the following two new primitives would allow the author to show the default focus ring on click for this element:
Add a new keyword value to the outline shorthand that represents whatever the default UA ::focus-ring
is. Then authors can do:
custom-texty-element:focus {
outline: platform-default-focus-outline-style-foo;
}
Add a new CSS property that controls "keyboard modality" vs non-"keyboard modality" behavior, e.g.
custom-texty-element {
show-focus-ring-foo: always | keyboard-only;
}
("-foo
" placeholder indicates that these names are by no means final!)
While either of these primitives would suffice, having both would provide more flexibility for authors.
The heuristic used to decide the current modality should not be defined normatively. An example heuristic is to update modality on each style recalc: if the most recent user interaction was via the keyboard; and less than 100ms has elapsed since the last input event; then the modality is keyboard. Otherwise, the modality is not keyboard.
The tiny
focus-ring.js
provides a prototype intended to achieve the goals we are proposing
with technology that exists today
in order for developers to be able to try it out, understand it and provide feedback.
It simply sets a .focus-ring
class on the active element
if the script determines that the keyboard is being used.
This attribute is removed on any blur
event.
This allows authors to write rules
which show a focus style only when it would be relevant to the user.
Note that the prototype does not match the proposed API -
it is intended to give developers a feel for the model
rather than to provide a high-fidelity polyfill.
The script uses two heuristics to determine whether the keyboard is being used:
focus
event immediately following a keydown
eventFAQs
Polyfill for :focus-ring pseudo-selector
We found that wicg-focus-ring demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.