Try improving and standardizing the block styles focus + active states #16545
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #15906.
This PR adopts the proposal in #15906 (comment) to make the focus state for the block styles buttons more accessible. With this change, the
is-active
and:focus
states are differentiated by both size and color. The PR also rolls this change out to theinserter-list-item
component, so that both are in sync. This may come in handy later on for #16283.The change in a few words:
is-active
gray border is moved inside the active element. Minor padding adjustments are made to accommodate it.:focus
border is moved to the outside of the active element, and given a 1px white buffer zone, similar to our Button block focus style.Screenshots
Before
Focus,
is-active
:Focus and
is-active
:After
Focus,
is-active
:Focus and
is-active
:GIFs
Before
After