I’ve created a JS Blocks FAQ Accordion that should be accessible. Problem is, that i can not find a way to count up the needed ids and aria Attributes (e.g. aria-labelled-by).
Is there a chance to get this working without making it a PHP/ACF Block?
I haven’t found a way to do it with pure Pinegrow, unfortunately. Here, JavaScript is going to be your friend.
Another option is to use nested blocks and set the IDs and attributes manually on the children blocks as block properties. That’s how I’ve done it with mine. It’s ugly since I have to set the ID and attributes for each item, but it works.
If I’m not mistaken, Alpine Components had a great example on how to use their library to do just that. I use their button in my menu for drop downs and it does a great job of making dynamic IDs for accessibility.
This could be done by having some kind of a global variable that is incremented each time and used to set the ids.
WP takes care of displaying inner blocks and we don’t have much control over that.
