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

Add transparent outline to input control BackdropUI focus style. #50772

Merged
merged 2 commits into from
May 19, 2023
Merged

Add transparent outline to input control BackdropUI focus style. #50772

merged 2 commits into from
May 19, 2023

Conversation

afercia
Copy link
Contributor

@afercia afercia commented May 19, 2023

Fixes #50738

What?

Adds a transparent outline to the input control BackdropUI focus style to support Windows High Contrast mode.

Why?

In Windows High Contrast mode, box-shadows aren't visible. Only borders and outlines are visible. The focus style of the input control component is provided by BackdropUI which only uses a box-shadow.

How?

This PR adds a transparent outline so that the focus style is visible in Windows High Contrast mode. The negative offset makes the outline overlay the box-shadow.

Testing Instructions

  • This should be tested on Windows with High Contrast mode enabled.
  • Alternatively, alter the code and use a solid color e.g. red instead of `transparent.
  • Check a few components that use the input control e.g.:
    • Go to the Site editor.
    • Select a Group block.
    • Tab to the 'Content', 'Wide', and 'Position' controls (see screenshot).
    • Check these controls focus style does use the transparent outline.
Screenshot 2023-05-19 at 09 21 41

Testing Instructions for Keyboard

Screenshots or screencast

@afercia afercia added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components [a11y] Keyboard & Focus labels May 19, 2023
@afercia afercia requested a review from ajitbohra as a code owner May 19, 2023 07:56
@github-actions
Copy link

Flaky tests detected in 6554fb3.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5022105362
📝 Reported issues:

aristath
aristath reviewed May 19, 2023
View reviewed changes
Copy link
Member

@aristath aristath left a comment •
edited
Loading

Choose a reason for hiding this comment

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

I don't have a Windows machine to test this, but as far as I can tell it should work.
The code is clean and makes sense 👍

@t-hamano t-hamano mentioned this pull request May 19, 2023
Closed
@t-hamano t-hamano self-requested a review May 19, 2023 12:09
t-hamano
t-hamano approved these changes May 19, 2023
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM 👍It also works correctly on Story book.
I tested UnitControl, SelectControl, and TimePicker in that order.

Before

before.mp4

After

after.mp4

@t-hamano
Copy link
Contributor

I found a similar problem with ToggleGroupControl and have submitted #50782.

@afercia afercia merged commit 064f731 into trunk May 19, 2023
@afercia afercia deleted the fix/input-control-windows-high-contrast-mode-focus-style branch May 19, 2023 12:18
@github-actions github-actions bot added this to the Gutenberg 15.9 milestone May 19, 2023
@ciampo
Copy link
Contributor

ciampo commented May 19, 2023

Thank you for working on this ❤️

@t-hamano t-hamano mentioned this pull request May 19, 2023
Merged
westonruter added a commit that referenced this pull request May 19, 2023
@westonruter
Merge branch 'trunk' of https://github.com/WordPress/gutenberg into a…
89b582f 
…dd/static-closures

* 'trunk' of https://github.com/WordPress/gutenberg: (26 commits)
  Add transparent outline to input control BackdropUI focus style. (#50772)
  Added wrapper element for RichText in File block (#50607)
  Remove the experimental flag of the command center (#50781)
  Update the document title in the site editor to open the command center (#50369)
  Remove `unwrap` from transforms and add `ungroup` to more blocks (#50385)
  Add new experimental version of DropdownMenu (#49473)
  Force display of in custom css input boxes to LTR (#50768)
  Polish experimental navigation block (#50670)
  Support negation operator in selectors in the Interactivity API (#50732)
  Minor updates to theme.json schema pages (#50742)
  $revisions_controller is not used. Let's delete it. (#50763)
  Remove OffCanvasEditor (#50705)
  Mobile - E2E test - Update code to use the new navigateUp helper (#50736)
  Try: Smaller external link icon (#50728)
  Block Editor: Remove unused 'useIsDimensionsSupportValid' method (#50735)
  Fix flaky media inserter drag-and-dropping e2e test (#50740)
  docs: Fix change log typo (#50737)
  Edit Site: Fix `useEditedEntityRecord()` loading state (#50730)
  Fix labelling, description, and focus style of the block transform to pattern previews (#50577)
  Fix Global Styles sidebar block selection on zoom out mode (#50708)
  ...
@priethor priethor added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). and removed [a11y] Keyboard & Focus labels Jul 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@aristath aristath aristath left review comments

@t-hamano t-hamano t-hamano approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees
No one assigned
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
Gutenberg 15.9
Development

Successfully merging this pull request may close these issues.

InputControl (& related components) focus style doesn't support Windows High Contrast mode
5 participants
@afercia @t-hamano @ciampo @aristath @priethor