I’m trying to make a WCAG 2.1 accessible accordion. I therefore need the trigger button to have focus (be operable by keyboard), so I’ve started with an actual button. I’m quite pleased with the way I can get the chevron to point up and down to show Open and Close using Interactions, but I also need to have a “hover” state.
I have tried with Hover states in the Selector, and with creating a trigger in the Interactions, but nothing works completely correctly.
What I am looking for:
- Accordion Button state None
- Button hover / focus - change state of button (button background colour change)
- Click Button - change state to Clicked and open Accordion panel (background and text colour swapped)
- Click Button - change state to None and Close accordion panel
- Repeatable
I have made scenarios with each of these “states”, using a combination of button states and interactions, but nothing works completely.
At the bottom of the page you can see the “button” version of the accordion.
Here is my public share link: https://preview.webflow.com/preview/jonathans-blank-site-71b734?utm_medium=preview_link&utm_source=designer&utm_content=jonathans-blank-site-71b734&preview=aa7262d9cfca903738221d1bc46a02a6&pageId=5d0c73490157183291f7215e&mode=preview
(how to access public share link)