runfix: address keyboard navigation issues in call ui (WPB-6075) #16538
Conversation
| const isSpaceOrEnterKey = (event: React.KeyboardEvent<HTMLButtonElement>) => | ||
| [KEY.ENTER, KEY.SPACE].includes(event.key); | ||
|
|
||
| const handleToggleCameraKeydown = (event: React.KeyboardEvent<HTMLButtonElement>) => { | ||
| if (isSpaceOrEnterKey(event)) { | ||
| toggleCamera(call); | ||
| } | ||
|
|
||
| return true; | ||
| }; | ||
|
|
There was a problem hiding this comment.
This logic can be achieved with the handleKeyDown() keyboard util
handleKeyDown() execute the callback in arguments on a key press of spacebar or enter
| if (!isEnterKey(event)) { | ||
| event.preventDefault(); | ||
| } | ||
| event.preventDefault(); |
There was a problem hiding this comment.
We preventDefault for all key presses, including enter, and add onKeyDown events to buttons affected
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## dev #16538 +/- ##
==========================================
- Coverage 45.42% 45.38% -0.05%
==========================================
Files 740 740
Lines 24218 24257 +39
Branches 5504 5514 +10
==========================================
+ Hits 11000 11008 +8
- Misses 11806 11830 +24
- Partials 1412 1419 +7 |
| onClick={event => { | ||
| const target = event.target as Element; | ||
| // We want to ensure to only toggling the menu open or closed when clicking the icon, not the select menu | ||
| if (!target.closest('#select-microphone')) { | ||
| setAudioOptionsOpen(prev => !prev); | ||
| } | ||
| }} | ||
| onClick={() => setAudioOptionsOpen(prev => !prev)} | ||
| onKeyDown={event => handleKeyDown(event, () => setAudioOptionsOpen(prev => !prev))} |
There was a problem hiding this comment.
we don't need to filter out the select element in that iteration, both clicks and keypresses to select an option will toggle the menu off
| @@ -206,7 +206,6 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({ | |||
| setSelectedAudioOptions([microphone, speaker]); | |||
| switchMicrophoneInput(microphone.id); | |||
| switchSpeakerOutput(speaker.id); | |||
| setAudioOptionsOpen(false); | |||
There was a problem hiding this comment.
We now rely on the onClick or onKeyDown event to toggle the menu off
Description
Buttons should be able to be pressed with spacebar, to prevent typing in a conv in the background (see #16285), we add an
onKeyDownevent to buttons that need itAdditionnally, the select menus should be able to be quitted by pressing escape
Checklist
Important details for the reviewers
context for typing in a background conv #16285
previous iteration for allowing keyboard nav in call ui #16295