Tabs focus: Followup for Windows high contrast. #46647
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
jasmussen
requested review from
ajitbohra,
draganescu,
talldan,
tellthemachines,
adamziel,
kevin940726,
getdave and
noisysocks
as code owners
|
Size Change: +192 B (0%) Total Size: 1.32 MB
ℹ️ View Unchanged
|
|
cc: @afercia I am a Windows user and I have actually tested this PR.
I have tried to build a Storybook with this PR and I think it contains one problem. a42b69b1b3ddc2976c9b1df384923f5a.mp4In trunk, the outline is enabled, so users can see which tabs are activated: d3693753e8668ad6bfa04fd32a548621.mp4If it is in the sidebar of a block editor, it can be somehow understood by the change in underlining:
If there is a problem from an accessibility standpoint, I think it might be better to explore a more approach. |
|
I am wondering if it would be possible to implement something like the W3C tabs example, whereby the high contrast mode would make it visible which tabs were clicked or which tabs were still active even if they were out of focus. 3e6db70fa38be43a6cb3f478bea3c60a.mp4 |
@t-hamano you're right, thank you! I think that's because the 'active' style is actually the background color of a CSS pseudo element. Background colors are removed in High Contrast Mode. I think this could be quickly solved by using a border instead of height + background on the |
|
Thank you for the feedback, let me take a stab when I get a moment 🙏 |
jasmussen
force-pushed
the
fix/focus-high-contrast
branch
from
563cb52 to
a065836
Compare
|
Good catches all around, the active state background was removed of course. I've added an outline with an offset so it should be plenty visible now. Here's an example showing it as red:
The committed code is transparent, of course, and that becomes opaque. Thanks, all. |
|
@jasmussen Editor: pr_editor.mp4Storybook: pr_storybook.mp4 |
|
Can we land this? Thanks again for reviews. |
t-hamano
approved these changes
Jan 17, 2023
|
Thank you! And of course I'm happy to address any followups. |
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?
Fixes #46523, adds a transparent focus outline to Windows high contrast mode.
In that mode, box shadows are removed, but borders and outlines, even transparent ones, are made fully opaque. By setting a transparent outline, it will show up in Windows set to high contrast mode. This here emulates that by showing the outline red instead of transparent:
Testing Instructions
Test Windows 10 or 11 in high contrast mode, and tab through the tabs.