clear
clear copied to clipboard
Published
20 hours ago •
adithyasource
adithyasource
Component accessibility
When navigating using keyboard only in clear, you can't tell where the focus is.
Every interact-able component (including scrollable lists) should have a :focus of :focus-visible style, either the same as :hover or something obvious (like an outline).
Clickable images (or anything) should be wrapped inside a button, not a div with onClick.
In addition, every dynamic component should optimally have WAI-ARIA roles and signals (or use native elements). This include: modals, toggles (or switch), toasts, buttons, collapsible, context menus.
For these components I'd recommend building on top of https://kobalte.dev. Otherwise the patterns are documented here https://www.w3.org/WAI/ARIA/apg/patterns
