Fix flickering when focusing on global style variations #55267
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
t-hamano
added
[Focus] Accessibility (a11y)
|
Size Change: +22 B (0%) Total Size: 1.65 MB
ℹ️ View Unchanged
|
jasmussen
reviewed
Oct 12, 2023
| border: $gray-200 $border-width solid; | ||
| box-shadow: 0 0 0 $border-width $gray-200; | ||
| // Shown in Windows 10 high contrast mode. | ||
| outline: 1px solid transparent; |
There was a problem hiding this comment.
Nitpick we have this for other high contrast mode contexts:
// Windows high contrast mode.
outline: 2px solid transparent;
Completely separate, I wonder if we should create a mixin for this, then the mixin can contain the named context so we don't need a CSS comment, and it can be consistent across.
richtabor
added
[Type] Bug
|
Thanks for the review, @jasmussen!
I certainly think that makes sense. There are some variations of |
|
I just cherry-picked this PR to the 6.4-rc1-2 branch to get it included in the next release: cf63b7d |
mikachan
removed
the
Backport to WP 6.7 Beta/RC
SiobhyB
pushed a commit
that referenced
this pull request
Oct 16, 2023
* Add selector as id to layout style overrides. (#55291) * Fix flickering when focusing on global style variations (#55267) * ProgressBar: use text color to ensure enough contrast against background (#55285) * Use text color at different opacities for track and indicator * Add high contrast mode styles * CHANGELOG # Conflicts: # packages/components/CHANGELOG.md * Remove empty attrs. (#54496) * Remove empty attrs. * Fix linter errors --------- Co-authored-by: Sarah Norris <sarah@sekai.co.uk> * Add IS_GUTENBERG_PLUGIN flag to LastRevision (#55253) * useBlockPreview: Try outputting EditorStyles to ensure local style overrides are rendered (#55288) * useBlockPreview: Try alternative fix for displaying local style overrides * Avoid duplicate styles, fix rendering issues in Safari * Add more explanatory comments * Remove additional check for styles within the block preview, as it is not needed since EditorStyles handles its own style overrides retrieval * Bug: PHP notice when an image with lightbox is deleted (#55370) * Fix PHP notice when an image with lightbox is deleted * Fix PHP notice when an image with lightbox is deleted --------- Co-authored-by: tellthemachines <tellthemachines@users.noreply.github.com> Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com> Co-authored-by: Jonny Harris <spacedmonkey@users.noreply.github.com> Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Co-authored-by: Kishan Jasani <kishanjasani007@yahoo.in>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
This PR prevents flickering that occurs when focusing on global style variations.
At the same time, it improves visibility in Windows high contrast mode, as explained later.
Before
before.mp4
After
after.mp4
Why?
Global style variations have the following four states.
As you can see, only the focus style has a thick border, so flickering occurs when the size of the element changes.
How?
I used
box-shadowinstead ofborderso that it doesn't affect the size of the elements.Windows High Contrast Mode
In Windows high contrast mode, all borders have the same color. Because the default variation and the selected variation had the same 1px wide border, users using high contrast mode had no way of knowing which style variation was active. Also, it was impossible to determine which variation was focused or not based on just a 1px difference in the border.
In this PR, borders are replaced with box-shadow, so they are not displayed at all in high contrast mode. Instead, use transparent outlines, similar to the approach Gutenberg has traditionally taken.
In order to make it easier to understand the minimum required state, I have adjusted it so that it looks like the following.
high-contrast-after.mp4
Testing Instructions
In the following two places, confirm that the appearance is as expected no matter what operation you perform, and that flickering does not occur when you shift focus using the keyboard.