Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Accordion/Tabs Keyboard Navigation Issue

  • Dear GenerateSupport Team,
    I already had wrote about this issue here (at old support forum).

    [Current Release Candidate version doesn’t improve in the matter.]

    The main problem is:
    Focusable elements (links, inputs, buttons, etc.) in hidden / closed content panels of Accordions or Tabs Block are still stealing focus WHILE THEY ARE NOT VISIBLE.

    They should get normal tabindex back once their content panel is opened / visible.

    Regards

  • I’ve been focused on tabindex attribute, and messed with JavaScript. Luckily, CSS can bring solution!
    Elements with display: none or visibility: hidden can’t access focus with keyboard, so…

    /* Focus Accessibility Fix */
    .gb-accordion__toggle[aria-expanded="true"] + .gb-accordion__content {
    	visibility: visible;
    }
    .gb-accordion__toggle[aria-expanded="false"] + .gb-accordion__content {
    	animation-name: disable_focus;
    	animation-fill-mode: forwards;
    	animation-delay: 0.5s;
    }
    @keyframes disable_focus {
    	100% {
    		visibility: hidden;
    	}
    }
  • Hi there,

    i have passed the issue on to the dev team for their consideration.
    But thank you for sharing your CSS fix 🙂 Very smart.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.