Add missing focus style to start template options previews. #49334
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
afercia
added
[Type] Bug
|
Size Change: +6.1 kB (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in c04f645. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4629535194
|
|
Thank you for the PR! This component (
How about the following change to take advantage of the defined pseudo-class? diff --git a/packages/edit-site/src/components/start-template-options/style.scss b/packages/edit-site/src/components/start-template-options/style.scss
index ca086ef085..d19ffad9d0 100644
--- a/packages/edit-site/src/components/start-template-options/style.scss
+++ b/packages/edit-site/src/components/start-template-options/style.scss
@@ -25,9 +25,12 @@
width: 100%;
aspect-ratio: 3/4;
+ &:not(:focus):not(:hover) {
+ box-shadow: 0 0 0 1px $gray-300;
+ }
+
.block-editor-block-preview__container {
height: 100%;
- box-shadow: 0 0 0 1px $gray-300;
}
.block-editor-block-preview__content {
@@ -38,21 +41,6 @@
.block-editor-block-patterns-list__item-title {
display: none;
}
-
- &:hover {
- .block-editor-block-preview__container {
- box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
- }
- }
-
- &:focus {
- .block-editor-block-preview__container {
- box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-the
me-color);
-
- // Windows High Contrast mode will show this outline, but not the box-shadow.
- outline: 2px solid transparent;
- }
- }
}
// The start blank pattern is the last and we are selecting it. |
|
@t-hamano good catch, thanks. More red in a PR's diff is always better ❤️ |
|
Sorry, there was an error in the code I presented. The default gray box-shadow should be applied to diff --git a/packages/edit-site/src/components/start-template-options/style.scss b/packages/edit-site/src/components/start-template-options/style.scss
index 13f4d960d9..092251a81b 100644
--- a/packages/edit-site/src/components/start-template-options/style.scss
+++ b/packages/edit-site/src/components/start-template-options/style.scss
@@ -26,16 +26,16 @@
width: 100%;
aspect-ratio: 3/4;
+ .block-editor-block-preview__container {
+ height: 100%;
+ }
+
// Avoid to override the BlockPatternList component
// default hover and focus styles.
- &:not(:focus):not(:hover) {
+ &:not(:focus):not(:hover) .block-editor-block-preview__container {
box-shadow: 0 0 0 1px $gray-300;
}
- .block-editor-block-preview__container {
- height: 100%;
- }
-
.block-editor-block-preview__content {
width: 100%;
position: absolute;This change would make the rounded corners uniform regardless of the focus state. Before
After
|
|
@t-hamano good catch, thanks. That would trigger again the missing focus style though. I think the fix needs to be slightly different, as the actual focusable element is the children: Should be fixed in my last commit. |
t-hamano
approved these changes
Apr 9, 2023
priethor
added
[Focus] Accessibility (a11y)
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.
Fixes #49333
What?
Adds missing focus style to the patterns preview in the 'Choose a pattern' modal.
Why?
Any interactive element must have a focus style.
How?
Uses the right CSS selector.
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast