Because vmsg appends its controls to the end of the DOM, it is not easy to
focus to the record button when the dialog is launched as keyboard-users
need to tab to through the page to the end of the DOM where the dialog lives.
Here is an example of what it is like to interact with vmsg in its current state using the built-in Apple MacOS screen reader, "VoiceOver":
https://youtu.be/TT7-0h-5iOQ
Adding recordBtn.focus() when the record dialog is drawn jumps the focus point right to the dialog, prevents the need for extra navigation and allows the record button to be activated right away.
What happens when recording is started or stopped is that the record/stop buttons are hidden, causing focus to jump to a different part of the page. Adding stopBtn.focus() and recordBtn.focus() triggers when buttons are swapped ensures that
keyboard users can access the buttons without re-navigating to them.
In addition to these focus changes, this PR adds title text to the buttons. Their purpose is
otherwise hidden from screen-readers.
Kagami
commented
4 years ago
Because vmsg appends its controls to the end of the DOM, it is not easy to focus to the record button when the dialog is launched as keyboard-users need to tab to through the page to the end of the DOM where the dialog lives.
Here is an example of what it is like to interact with vmsg in its current state using the built-in Apple MacOS screen reader, "VoiceOver": https://youtu.be/TT7-0h-5iOQ
Adding
recordBtn.focus()when the record dialog is drawn jumps the focus point right to the dialog, prevents the need for extra navigation and allows the record button to be activated right away.What happens when recording is started or stopped is that the record/stop buttons are hidden, causing focus to jump to a different part of the page. Adding
stopBtn.focus()andrecordBtn.focus()triggers when buttons are swapped ensures that keyboard users can access the buttons without re-navigating to them.In addition to these focus changes, this PR adds title text to the buttons. Their purpose is otherwise hidden from screen-readers.
Here is an example of what it is like to interact with vmsg with these changes: https://youtu.be/_YxWQzVhCwI