Activate pricing table toggle with keyboard navigation

This works fine. Thank you.

I’m having some accesibility issues though. Even though there is a tabindex=0 on the toggle-buttons I’m not able to activate them with the keyboard. I’ve added “:focus” to the class to see if the keyboard can catch it, but it doesn’t seem like it. Is there any way, I can make the buttons accessible by keyboard?

When I force focus on the buttons, I can see that the CSS works fine.

Also.. How do I handle the CSS of a selected toggle-button?

2 Likes

Hi there, @Jesper_Jensen :waving_hand:

Thank you for the feedback!

Please let me check the keyboard navigation issue with the devs. I’ll get back to you once I have their response :slightly_smiling_face:

As for this, I am afraid I didn’t quite get what you mean. Could you please elaborate on it?

1 Like

Hi @Max

Yes of course. There is a state of the toggle buttons, where you can see which one of them is selected. When I put my costum CSS on the buttons, they are all the same with no indication of which one of them is active.

Hope that makes sence.

2 Likes

Hi @Jesper_Jensen :waving_hand:

This happens because you haven’t added any columns to the 2nd and 3rd table:

Once the columns are added, you’ll be able to switch tables. The color of an active toggle will be changed.

Please let me know if this clarifies things or any questions come up :slightly_smiling_face:

2 Likes

Hi @Jesper_Jensen :waving_hand:

We’re happy to share that now it’s possible to switch table toggles using the keyboard navigation.

Please try it out and let me know how it works for you :slightly_smiling_face:

1 Like