WordPress.org

Make WordPress Core

Opened 3 months ago

Last modified 5 weeks 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
Focuses: ui, accessibility Cc:

Description

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

Download all attachments as: .zip

Change History (8)

@anilhada
3 months ago

First step

@anilhada
3 months ago

Second Step

@anilhada
3 months ago

Last Step

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

  • Type changed from enhancement to defect (bug)

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


3 months ago

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

Note: See TracTickets for help on using tickets.