fix: a11y: keyboard navigation: add outline and focusability #4005
Conversation
WofWca
force-pushed
the
wofwca/keyboard-accessibility
branch
from
81002a3
to
2034198
Compare
The chat background color picker, with keyboard, from the main screen
This improves keyboard usage experience (accessibility, a11y) For the most part this does not affect items that are focused with mouse instead of keyboard (apart from "advanced" login fields, and maybe some other places), all thanks to `:focus-visible` selector https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#focus_vs_focus-visible Composer, message search, settings, contact search are not affected for pointer device users. For reference, here are some commits that had to do with `outline` and `:focus`. They don't appear to be paying much attention to keyboard-accessibility: - b740c60 - b5fb8a0 - 0c7949c - 11bda12 - 9307958
WofWca
force-pushed
the
wofwca/keyboard-accessibility
branch
from
2034198
to
4aa5082
Compare
|
seems to work though the majority of the app still isn't focusable:
We can also track those in a new issue. I don't really like the visual style of the outline (orange + white) yet, but maybe I'll get used to it. also outline should probably have the highest z-index so it is always fully visible: |
|
is the outline always visible or only after tab is hit? is there a selector for high-contrast or accessibility maybe? what do others (signal, whatsapp) do here? |
I'm not sure if there is a way to set
Only after Tab is hit. It's won't appear if you're just using a mouse.
I believe so. |
Signal appears to behave the same, but they do it programmatically, by dynamically adding |
See commit messages
I tested it. Appears to be working good, but some rarely used elements might get ugly even for mouse-only navigation.
This by no means makes DC fully keyboard-accessible, but it's an improvement.