Skip to content

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

Merged
afercia merged 2 commits intotrunkfrom
fix/input-control-windows-high-contrast-mode-focus-style
May 19, 2023
Merged

Add transparent outline to input control BackdropUI focus style.#50772
afercia merged 2 commits intotrunkfrom
fix/input-control-windows-high-contrast-mode-focus-style

Conversation

@afercia
Copy link
Copy Markdown
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
Copy Markdown

github-actions bot commented May 19, 2023

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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
Contributor

t-hamano commented May 19, 2023

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
Copy Markdown
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
@Dishaino
Copy link
Copy Markdown

Dishaino commented Jul 10, 2025

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

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

6 participants

@afercia @t-hamano @ciampo @Dishaino @aristath @priethor