I found this issue while quickly looking over the Colors Modifier, but it could also apply to other modifiers.

With the colors modifier it is possible to set properties on the :hover pseudo-element, with this there is an accessibility issue when the visitor is not using a mouse.

This can be fixed by setting the :focus pseudo-element as well as the :hover pseudo-element. It can be tested by using the tab key to move between selectable elements.

Comments

John Cook created an issue. See original summary.

murrayw’s picture

murrayw commented

Thanks for bringing this issue to our attention. I've goofgles around a bit for more info and it was hard to come by. I did find the following material though.

The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets to provide visual feedback when an interactive element has focus or when a user hovers over it using a pointing device. Highlighting the element that has focus or is hovered over can provide information such as the fact that the element is interactive or the scope of the interactive element.
Providing visual feedback may be possible through more than one mode. Usually, it is attained through using a mouse to hover over the element or a keyboard to tab to the element.
https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C15

So the suggestion appears to be that we should also set the :focus as well so that it behaves consistently when using teh keyboard. Sounds fair enough to me. This should be an esy addition.

Off the top of my head I can't think of other areas where we are using hover, but maybe there are. Will keep a look out for that.

mgifford’s picture

mgifford
he/him
Primary language English
commented

It's a common error.. So often hover is styled explicitly but focus isn't. It's definitely an accessibility problem though.

  • kyberman committed 4fe5e91 on 8.x-1.x 
    Issue #3015690 by John Cook, murrayw, mgifford, kyberman, Petr Illek:...

kyberman credited Petr Illek.

kyberman’s picture

kyberman
Location Czech Rep. 🇨🇿
commented
Status: Active » Fixed

Hi, thank you all for this advice, we updated the code accordingly.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.