feat(overlay-dropdown): add arrow key navigation #2679
Conversation
| return ( | ||
| <li onClick={ onClick }> | ||
| <li role="menuitem" onClick={ onClick } onKeyDown={ handleKeydown }> | ||
| <button type="button" title={ text }> |
There was a problem hiding this comment.
Consider making the button the clickable element (for A11y purposes).
There was a problem hiding this comment.
Consider making the key-up-down-to-change selection a DOM-only / no react directive:
This would simplify it and allow us to re-use it in other areas easily.
There was a problem hiding this comment.
I actually come from this direction in a first iteration but went away from it.
Simple reason: getting away from React made it harder to test, firing the native events instead of simulating it in our existing Enzyme infrastructure. Adding it via onKeyDown made it much easier to test.
bpmn-io-tasks
bot
added
needs review
pinussilvestrus
requested review from
a team,
philippfromme,
smbea and
andreasgeier
and removed request for
a team
|
@andreasgeier I know there are a couple of reviews assigned to you currently, so I don't want to block you with this if it's not necessary. It's up to you whether you want to have a look UI wise. |
|
Marking this for M52 milestone, since we mention it in the blog post |
pinussilvestrus
force-pushed
the
2626-navigate-with-arrow-keys
branch
from
144c9cf
to
79a4376
Compare
|
I rebased this on top of the latest |
Yes, but I probably won't get back to it during spring cleaning. I am happy we have this as a built-in feature for all overlay dropdowns now, and also easily tested. We can reconsider making it an even more generic feature in the future, if we want to. |
This adds arrow key navigation for all overlay dropdowns (e.g. create tab, context action, ...). It mirrors the behavior we already have with tab navigation.
Closes #2626
Build on demand artefacts (Build is running ...)