Prevent accordion content from being tabbable when closed

[Flowgram]

Nice little lightweight library you've got here.

For accessibility reasons, a site should be keyboard navigable. One thing I'm thinking about is how to prevent the contents of closed accordion panels from being accessible via the tab key. This includes links, buttons, youtube embeds etc.

Then once the accordion panel is open, the user should be able to tab through everything as normal.

One solution would be to loop through all the children elements and set tabindex="-1", special consideration would need to be made for iframe contents (youtube embeds). Opening the panel would need to reverse this.

Another cleaner solution might be to set the content of each accordion panel to display:none; until it's open. This would mess with the current system for gaging the height and thus the opening animation, however, there should be ways around this.

I'd be curious to know your thoughts.

[Flowgram]

How do these guys do it? https://a11y.nicolas-hoffmann.net/accordion/?animated=1

[michu2k]

Hi
Thank you for your thoughts. First of all, demo website should be accessible via keyboard. I don't know if you weren't be able to access something via keyboard? When it comes to the bug you found, I will take a look into this problem and fix it during the weekend.

[Flowgram]

Hi michu2k,

Thanks for getting back to me.

Yes, the accordion functionality is perfectly accessible via keyboard. It's when there are links, buttons, youtube embeds etc hidden within an accordion content that the problem arises.

Imagine this scenario: You tab onto the first accordion heading, it's not what you want so you don't trigger it to open, you try to tab onto the second heading but instead you're tabbing through links etc in the hidden content of the first element.

Thanks for looking into this.

[michu2k]

Fixed in v2.6.3

[Flowgram]

Amazing, thank you