Improve top bar menu navigation for keyboard and screen reader users

[SableRaf]

The top bar of the Processing website's dropdowns are not properly accessible for keyboard and screen reader users.

Current behavior

• Tabbing through the top bar menu gives limited information about the nature and state of dropdown buttons.

Desired behavior

• When tabbing through the menu, screen reader should announce "[button name] menu button collapsed submenu."
• When pressing enter, screen reader should announce "expanded" and actually expand the submenu.

This can be achieved using aria-expanded and aria-controls.

Example

A good example of an accessible menu with dropdowns can be found here: https://www.audioeye.com/consultants/

References

Further information about dropdown accessibility can be found here: https://accessuse.eu/en/drop-down-menus.html

[SableRaf]

@kushalnl7 you may be interested in this issue :)

[kushalnl7]

Yes, I will look into this!

[SableRaf]

Great! Thanks @kushalnl7 ✨

FYI: I have used the NVDA screen reader in my tests. It is Free and Open Source and you can find it here: https://www.nvaccess.org/download/

[OsirisMedici]

Hello Maintainers, I am interested in assisting with the current issue at hand.

I was wondering if anyone is already working on it, or if it is okay for me to start working on it. Please let me know how I can be of help.

[SableRaf]

Hello @abhishekhvr and thanks for your offer to help! Let's see if @kushalnl7 is still interested. Otherwise I'm happy to assign this to you.

[OsirisMedici]

@SableRaf Can you assign this issue to me Please?