Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Try improving and standardizing the block styles focus + active states #16545

Merged
merged 2 commits into from Jul 12, 2019
Merged

Try improving and standardizing the block styles focus + active states #16545

merged 2 commits into from Jul 12, 2019

Conversation

kjellr
Copy link
Contributor

@kjellr kjellr commented Jul 11, 2019

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 the inserter-list-item component, so that both are in sync. This may come in handy later on for #16283.

The change in a few words:

  • The is-active gray border is moved inside the active element. Minor padding adjustments are made to accommodate it.
  • The :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:
Screen Shot 2019-07-11 at 12 29 26 PM

Focus and is-active:
Screen Shot 2019-07-11 at 12 31 39 PM

After

Focus, is-active:
Screen Shot 2019-07-11 at 12 30 50 PM

Focus and is-active:
Screen Shot 2019-07-11 at 12 31 09 PM

GIFs

Before

focus-states-old

After

focus-states-new

@kjellr kjellr added [Type] Enhancement A suggestion for improvement. [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Feature] Inserter The main way to insert blocks using the + button in the editing interface Needs Design Feedback Needs general design feedback. Needs Accessibility Feedback Need input from accessibility labels Jul 11, 2019
@kjellr kjellr requested a review from jasmussen July 11, 2019 16:47
jasmussen
jasmussen approved these changes Jul 12, 2019
View reviewed changes
Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep! Solid.

@kjellr kjellr removed the Needs Design Feedback Needs general design feedback. label Jul 12, 2019
@enriquesanchez
Copy link
Contributor

This is a big improvement 👏
Tested on grayscale, inverted colors and high contrast on Mac and looks great.

@kjellr
Copy link
Contributor Author

kjellr commented Jul 12, 2019

Thanks, folks!

@kjellr kjellr merged commit 8c77742 into master Jul 12, 2019
@kjellr kjellr added this to the Gutenberg 6.2 milestone Jul 12, 2019
@kjellr kjellr mentioned this pull request Sep 4, 2019
Closed
@youknowriad youknowriad deleted the try/improved-focus-styles-for-block-types-styles branch May 27, 2020 17:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jasmussen jasmussen jasmussen approved these changes

@ellatrix ellatrix Awaiting requested review from ellatrix

@gziolo gziolo Awaiting requested review from gziolo

@talldan talldan Awaiting requested review from talldan

@youknowriad youknowriad Awaiting requested review from youknowriad

Assignees
No one assigned
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Accessibility Feedback Need input from accessibility [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
Gutenberg 6.2
Development

Successfully merging this pull request may close these issues.

Alternative styles buttons: insufficient focus indication
3 participants
@kjellr @enriquesanchez @jasmussen