[Accessibility] Issue with the focus and the Show more/Show less buttons

[SuperMeepBoy]

When tabulating and triggering the "Show more" button, the focus is lost and tabulating would send us to the first item of the next category of sound. Therefore, to see the previously hidden items which were just shown to the user, the user would have to do a full loop again or tabulate backwards (and it would be a bad experience as they would be sent to the last item of the category, first).

Accessibility guidelines which can help us are the following :

• https://www.accede-web.com/en/guidelines/rich-interface-components/show-more-buttons/
• https://www.accede-web.com/en/guidelines/rich-interface-components/show-hide-panels/

I don't know which case is our case because our "Show more" button, then becomes a "Show less" button. So, as far as I understand it, we're in an in-between of those guidelines.

What I think we should do :

• Focus the first "hidden" item which is shown after triggering "Show more".
• If we click "Show less", jump to the first item of the following category.
• I think we should use aria-expanded labels because the Show more/Show less buttons are kind of a panel thing.

I know you have a lot of work to do, I tried something on my side but I think it is too high level for me yet.

My plan was :

• Add a ref on the Sound with index 6 of each category
• Use forwardRef to pass that ref
• Use that ref to send focus after calling setShowAll(prev => !prev);
• I have not yet been thinking about how to code the "Show less" behavior

If you think I can help you with that, don't hesitate to ping me to right directions, I'll work on it. Otherwise, I'll just read your commit. I'd appreciate if you can ping me once it is done so I can learn new things ! :blush:

[remvze]

Thanks for pointing it out; I've just fixed it. I've implemented your suggested solution for when more sounds are shown, and I've also made it so when the 'show less' button is clicked, it refocuses on that button. This is what made sense to me, but I'm not sure if it is the best idea, so I'm completely open to more suggestions.

[SuperMeepBoy]

@remvze That's incredible ! I think this is good. I can't tell because all of this is new to me but it seems to be what the guidelines describe.

There's a new bug tho, sound volume is not focusable anymore. On each card, we could focus the volume bar and move it with up/down and left/right arrows. We can't anymore. Edit: I was too tired, I tried it on a sound which was not enabled… Closing the issue ! :blush:

Thanks a lot for the fix btw ! :)