just swap some dom elements in the internals of <Checkbox> to make it
usable for screen reader users and easier to use for mouse users:
- the text is now the actual label of the input. Before that, it wasn't,
so screen reader users could have trouble guessing what the input was
about
- since the text is now the label, we can click/tap on it to toggle the
checkbox
we do the same thing as what we did on <Select> components in the
previous commit, for the same reason.
Note I made the id prop required on purpose to prevent creating a11y
issues. The id is necessary to correctly link the label to the input,
but even if there is no input, we need one to link the input error if it
has one.
I figure cases where we actually don't need the id because we know there
is visible label, and no possible error, are pretty rare. And I'd rather
set a couple unnecessary ids across the app to enforce a better a11y by
default for the 99% case.
it's important for some screen readers to have inputs and labels
correctly linked together via html attributes. Without doing this, some
users can have trouble knowing what the form input is about.
Select inputs had visible labels but they were actually not tied to
their inputs. Bottom labels too, where additional info is shown, or I
guess errors also. Now the label, additional info and potential errors
are correctly linked.
This was already done correctly on <Dialog> but not <DialogWithTabs>.
Passing the given titleKey to the dialog component so that the dialog
matches the dialog aria pattern and screen reader users get a good
experience
aria-describedby and aria-labelledby expect dom element ids as their
values, not label/description strings. we use aria-description and
aria-label for that.
if we pass an onClick event handler but no keyboard event handlers,
default the onKeyPress event to trigger the thing on click when typing
enter or space.
this makes most ContextMenuItem now actually actionable via keyboard,
since most of them dont have any keyboard event handlers attached, only
click event handlers.
Create separate tabs for Audio and Video in the Settings Dialog
Move some settings from the More tab to Audio/ Video tab
Implement redesign
Convert some files to TS
Move some styles from SCSS to JSS
Enable device selection on welcome page
Create Shortcuts tab in Settings Dialog
Move keyboard shortcut option from More to this tab
Move shortcuts info from KeyboardShortcuts dialog to this tab
Remove KeyboardShortcuts dialog
* feat: Drops external connect optimization.
A bosh only optimization which is no longer used and does not bring any significant value when measured.
* squash: Updates ljm.