Themes page: consider to improve the hover and focus styling

[anilhada]

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

[anilhada]

First step

[anilhada]

Second Step

[anilhada]

Last Step

[afercia]

@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.

[afercia]

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

[joyously]

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

[anilhada]

Sounds good
Thanks for reply.

[joedolson]

@anilhada The color of the focus outline was changed in 5.7; do you think that this is sufficient additional differentiation to make the distinction between :hover and :focus clear, or should we pursue @joyously's suggestions for design?

[joedolson]

Since this has had changes that add some differentiation, and was a minor enhancement to begin with, I think this should be closed. If anybody thinks that this needs further consideration, please feel free to reopen.