Improve top bar menu navigation for keyboard and screen reader users

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