Accordion hover state remains on touch devices

[dashouse]

The hover state is unintentionally applied to the active accordion section on touch devices (tested on iOS but I believe this will happen on Android also)

While that behaviour is ok, the hover state gets reapplied when you close an accordion section, so you may end up in this situation.

The last closed accordion section looks like it has an active state (actually the hover), the accordion that's open doesn't have a state.

Is there still a trick to stop the hover state appearing on touch devices?

[NickColley]

Potentially related alphagov/govuk_elements#570

[NickColley]

We probably have two options:

1. Apply a class based on pointer events
2. Use media query hover

Media query hover detection seems like the best bet.

Can I use gives support for this feature: https://caniuse.com/#feat=css-media-interaction

https://www.w3.org/TR/mediaqueries-4/#status

The following features are at-risk, and may be dropped during the CR period:

the hover, any-hover, pointer, and any-pointer media features
“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.