Accessibility: role attributes

[brichet]

Related to jupyter/notebook#6671.

Changes the roles of (1) accordion title and (2) toggleable items of command palette according to the W3C recommendation .

[welcome]

Thanks for submitting your first pull request! You are awesome! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please make sure you followed the pull request template, as this will help us review your contribution more quickly.

You can meet the other Jovyans by joining our Discourse forum. There is also a intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[krassowski]

Regarding the command palette, the specs say:

Authors MUST ensure that menu item checkboxes are owned by an element with role menu or menubar in order to identify that they are related widgets. Authors MAY separate menu items into sets by use of a separator or an element with an equivalent role from the native markup language.

If I am reading this correctly, changing the role of checkbox to menuitemcheckbox may not suffice to fix the issue here. I would agree that command palette can be seen as a menu but then it currently has role="region" in JupyterLab (on . lm-CommandPalette). I think we should consider adding role="menu" on .lm-CommandPalette-content (as the searchbar is not a menu itself). Additionally we have .lm-CommandPalette-header (not sure if those count as separators).

[brichet]

Thanks @krassowski for reviewing it.

You're right, we should add the role="menu" on .lm-CommandPalette-content, and probably also a role="menuitem" for all those without checkbox.

Not sure about the header, maybe we can leave it without role.

[krassowski]

Looks good, thanks!

[welcome]

Congrats on your first merged pull request in this project! 🎉

Thank you for contributing, we are very proud of you! ❤️