keyboard navigation : feature/kb open dropdowns #595
Conversation
… into feature/focus-states
| styles[buttonType], | ||
| { [styles.disabled]: isDisabled } | ||
| ); | ||
| const NavButton = forwardRef<HTMLButtonElement, NavButtonProps>( |
There was a problem hiding this comment.
The only real changes in this file are here, 26, and 38 where we are forwarding the ref to the <button>
… into feature/kb-open-dropdowns
interim17
changed the title
interim17
changed the title
… into feature/kb-open-dropdowns
Coverage report
Test suite run success129 tests passing in 7 suites. Report generated by 🧪jest coverage report action from e34e4c7 |
interim17
requested review from
toloudis,
tyler-foster and
ShrimpCryptid
and removed request for
a team and
toloudis
| event.preventDefault(); | ||
| setDropdownState(DropdownState.FORCED_OPEN); // Opened by keyboard |
There was a problem hiding this comment.
May need to also clear closeTimeoutRef here. I think it's possible to mouse over the menu quickly while it's closed, which would start a close timer, and then use the keyboard to click on the menu to get it into the FORCED_OPEN state. Sincere there's no check for FORCED_OPEN when the timeout fires, it would suddenly close the menu.
There was a problem hiding this comment.
So this is true, and also made me realize that focus was being captured in that scenario because of autoFocus.
This implies some things to deal with in the next PR, but for now removing autoFocus, clearing the timeout here, also running this anytime the state is not FORCED_OPEN is doing the trick.
| }; | ||
|
|
||
| const handleMouseLeaveWithDelay = () => { | ||
| if (dropdownState !== DropdownState.FORCED_OPEN) { |
There was a problem hiding this comment.
or dropdownState === DropdownState.OPEN
| const buttonClickHandler = () => { | ||
| setDropdownState( | ||
| dropdownState === DropdownState.CLOSED | ||
| ? DropdownState.OPEN |
There was a problem hiding this comment.
Should this be FORCED_OPEN, or is that only for keyboard-based clicking?
There was a problem hiding this comment.
Yes, I'm only using FORCED_OPEN only for keyboard based clicking at this point
Time estimate or Size
medium
Problem
Closes #593, advances #347
Opening and closing dropdown menus with the keyboard.
Solution
Does not address all aspects of keyboard navigating dropdowns, just the most basic interactions.
Load ModelorHelpare focused:tabandshift+tabwhile the menu is open, and navigating within the menu, are not in scope.NavButtongets wrapped inforwardRefto make sure that the<button>can be targeted withfocus()when needed.Type of change
Steps to Verify:
Load modelandHelpbuttons.enter/space/downarrow, then closing withescape.