[WIP] Add aria attributes to menus

lindapaiste commented 5 months ago

Ref https://github.com/processing/p5.js-web-editor/issues/2933#issuecomment-1904848578

Changes:

Add role="menu" and role="menuitem" to dropdown menus
Add role="menubar" and role="menuitem" to header nav bar
Add aria-haspopup="menu" to dropdown anchors

Pending:

Validate that the markup is correct
Investigate using role="group" for the left and right portions of the nav bar
Add role="menuitem" to nav bar items which do not have dropdowns (login and sign up)
Figure out the proper way to keep the "navigation" role on the nav while also having a "menubar" role
Use aria-expanded to indicate if the dropdown is open or closed

I have verified that this pull request:

[ ] has no linting errors (npm run lint)
[ ] has no test errors (npm run test)
[ ] is from a uniquely-named feature branch and is up to date with the develop branch.
[ ] is descriptively named and links to an issue number, i.e. Fixes #123

Prateek-Fst commented 5 months ago

<img width="1440" alt="Screenshot 2024-02-01 at 5 23 05 PM" src="https://github.com/processing/p5.js-web-editor/assets/14790699

9/f

8951812-1110-4cbe-b618-74684c3be8c5"> these are the few changes I have made in the code base of Nav.jsx, What are your thoughts on this ..? @lindapaiste , Should I commit these changes

tespin commented 3 weeks ago

commenting here to see if @Prateek-Fst or anyone else is still working on this -- I'm learning more about aria markup and would love to pick up the issue from here if possible. @lindapaiste 🙂

edit: going to give it a go!

raclim commented 5 days ago

Closing as addressed by #3191

processing / p5.js-web-editor

[WIP] Add aria attributes to menus #2968