Make WordPress Core

Opened 3 years ago

Last modified 22 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 3 years ago.
First step
second_img.png (314.8 KB) - added by anilhada 3 years ago.
Second Step
last_img.png (292.1 KB) - added by anilhada 3 years ago.
Last Step

Download all attachments as: .zip

Change History (13)

3 years ago

First step

3 years ago

Second Step

3 years ago

Last Step

#1 @afercia
3 years 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
3 years ago

  • Type changed from enhancement to defect (bug)

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

3 years ago

#4 @afercia
3 years 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
3 years 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.

2 years ago

#7 @afercia
2 years ago

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

#8 @anilhada
2 years ago

Sounds good
Thanks for reply.

#9 @pento
2 years ago

  • Milestone changed from 5.0 to 5.1

#10 @pento
22 months ago

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