Currently, when navigating a tweet that contains a video, the tab order and focus management after selecting play is a bit cumbersome.
Existing flow
<video> elements are keyboard focusable elements, but since we have controls attr set to false when the play button is visible, a user cannot actually control the video when focusing it. There is also no visual indication that the video is focused, so it presents as an empty slot between the tweet header and the play button.
after focusing through this empty slot with a tab press, the play button is focused. if selected with enter/space, the button is removed and the video is played, but focus is not managed. user has to press tab again to focus the video to control it (pause/play/volume/etc)
Better flow presented by this change
<video> element itself is taken out of the tab order with tabIndex={-1} until the playButton is removed. this means a user moves from the tweet header directly to the play button
<video> element inserted back into the tab flow with tabIndex={0} and is immediately given focus after the play button is pressed so that controls are available to keyboard users without an additional step to re-focus the video
Currently, when navigating a tweet that contains a video, the tab order and focus management after selecting play is a bit cumbersome.
Existing flow
<video>
elements are keyboard focusable elements, but since we havecontrols
attr set to false when the play button is visible, a user cannot actually control the video when focusing it. There is also no visual indication that the video is focused, so it presents as an empty slot between the tweet header and the play button.Better flow presented by this change
<video>
element itself is taken out of the tab order withtabIndex={-1}
until the playButton is removed. this means a user moves from the tweet header directly to the play button<video>
element inserted back into the tab flow withtabIndex={0}
and is immediately given focus after the play button is pressed so that controls are available to keyboard users without an additional step to re-focus the videoExample tweet id -
1632203651262316544
Link to the dev app with that tweet presented