palantir / blueprint

A React-based UI toolkit for the web
https://blueprintjs.com/
Apache License 2.0
20.75k stars 2.18k forks source link

ContextMenu is not keyboard accessible #4952

Open evansjohnson opened 3 years ago

evansjohnson commented 3 years ago

Steps to reproduce

https://blueprintjs.com/docs/#popover2-package/context-menu2

can't tab to and open context menu with keyboard

Possible solution

tabIndex={0} on context menu, open with key listener (? not sure, I'd imagine enter and maybe space but had trouble finding a good example), add aria-haspopover="true" to indicate what's going on

Question

any visual styling concerns? don't think we'd want to hide where focus is visually to support this and large elements with context menus may look odd if the whole element has a focus outline (but perhaps appropriate)

adidahiya commented 3 years ago

Is there an example of this kind of keyboard a11y for context menus in other design systems or UI libraries?

evansjohnson commented 3 years ago

I was not able to find one but didn't look too long. Figured it was worth a quick issue file to track!