search

lightspeedwp / lsx-design

A WordPress Block theme designed to work seamlessly with WooCommerce, supported by a Figma Design System.
https://lsx.design
GNU General Public License v3.0
26 stars 0 forks source link

The implementation for the Yoast FAQ block is not accessible to keyboard users #15

Closed carolinan closed 1 year ago

carolinan commented 1 year ago

Describe the bug It is not possible to open and close the FAQ block with the keyboard only.

This is a problem for:

The plus icon is not a focusable element.

To Reproduce Steps to reproduce the behavior:

  1. Activate the theme and Yoast SEO
  2. Add a Yoast FAQ block to a post, add some content to the question and answers. Save.
  3. Visit the post on the front.
  4. Starting at the top of the page, use the tab key to move between the focusable elements. Navigate past the menu links and the link to the post category. The next focusable element is not the FAQ block, but the first link in the comments area.

Expected behavior To be able to open and close the questions and answers

Screenshots

https://github.com/lightspeedwp/lsx-design/assets/7422055/cab70374-a6fa-4ae8-8701-4cdeb7aa84f5

Desktop (please complete the following information):

Justinabes007 commented 1 year ago

@krugazul this one is a bit tricky. We added custom CSS & JS t control the Toggle open & close as this doesn't come standard with Yoast. Could you review and advise on a solution for keyboard toggles?

krugazul commented 1 year ago

@carolinan , we have tweaked the JS to allow the spacebar to toggle the opening and closing of the FAQ, as well as adding a tabindex to it can be selected. 986ba46