Make WordPress Core

Opened 19 months ago

Last modified 8 months ago

#43351 new enhancement

Themes page: consider to improve the hover and focus styling

Reported by: anilhada Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Themes Keywords: has-screenshots has-ui-feedback needs-patch
Focuses: ui, accessibility Cc:


Steps to reproduce this bug:

Go to Appearance -> Themes

Click on the "Theme Details" It will display a popup of the theme details. Now I have click on X button and in the same time, hovering over another theme. Two hover will appear

Attachments (3)

first_img.png (328.8 KB) - added by anilhada 19 months ago.
First step
second_img.png (314.8 KB) - added by anilhada 19 months ago.
Second Step
last_img.png (292.1 KB) - added by anilhada 19 months ago.
Last Step

Download all attachments as: .zip

Change History (13)

19 months ago

First step

19 months ago

Second Step

19 months ago

Last Step

#1 @afercia
19 months ago

  • Component changed from General to Themes
  • Focuses accessibility added; javascript administration removed
  • Keywords has-screenshots added
  • Summary changed from Hover effect issue on themes.php page to Themes page: consider to improve the hover and focus styling
  • Type changed from defect (bug) to enhancement
  • Version 4.9.4 deleted

@anilhada thanks for your report. This behavior is by design and it's an accessibility feature. When closing a modal, it's important for keyboard users to move focus back to the control that originally opened the modal.

So, when you close the modal, focus is set back to the first "theme details" and what you see is the focus style (which in this case is almost the same of the hover style). The first "theme details" is still focused when you hover with the mouse on the second "theme details", so two overlays are visible at the same time.

There's a subtle styling difference: the first one (the focused one) has a blue box-shadow while the second one (the hovered one) hasn't.

Worth noting this is a standard behavior for other controls too (links, buttons), where it is possible, for example, to have a button still "focused" while hovering on another button.

Considering that focus must be moved back for accessibility reasons, the only improvement I can think of would be trying to differentiate a bit more the focus and hover styles. If you don't mind, I'd change this ticket to a proposed enhancement, and I'd update the ticket title to better describe the issue.

#2 @anilhada
19 months ago

  • Type changed from enhancement to defect (bug)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

19 months ago

#4 @afercia
19 months ago

  • Keywords ui-feedback added
  • Milestone changed from Awaiting Review to Future Release
  • Type changed from defect (bug) to enhancement

Discussed during today's accessibility bug-scrub and agreed this could be considered as an enhancement. Pending design feedback.

#5 @joyously
17 months ago

  • Keywords has-ui-feedback added; ui-feedback removed

I would make the blue box shadow the :focus style and the opacity the :hover style, so it is distinct.

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.

12 months ago

#7 @afercia
12 months ago

  • Keywords needs-patch added
  • Milestone changed from Future Release to 5.0

#8 @anilhada
12 months ago

Sounds good
Thanks for reply.

#9 @pento
11 months ago

  • Milestone changed from 5.0 to 5.1

#10 @pento
8 months ago

  • Milestone changed from 5.1 to Future Release
Note: See TracTickets for help on using tickets.