Skip to content

Background Image Panel: fix focus loss #69745

Description

@t-hamano

I'd suggest the following two point to improve the background image panel.

Fix focus loss

The focus is lost when the following actions occur, which can confuse users who rely on screen readers or the keyboard:

  • Add new image
  • Reset image
9fedb0c8e87e28d30134f5670ee330ef.mp4

The add background image button should be focused after adding/resetting the image (Example of the color panel).

Add reset button

Update: There are already two reset options in the dropdown, so we don't need to add an additional reset button.

All the other similar panels (Color, Shadow. Duotone) have a reset button to the right of the button:

Image

It would be good to add the button to the Background Image Panel as well.

Image

Note that the following spec is required:

  • The reset button should only be displayed when:
    • the image is set and the toggle button is hovered
    • the image is set and the reset button is focused
  • When the image is reset, the toggle button should be focused

Metadata

Metadata

Labels

Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions