search

adithyasource / clear

simple and lightweight game launcher
https://clear.adithya.zip
The Unlicense
35 stars 1 forks source link

Component accessibility #8

Closed jer3m01 closed 2 months ago

jer3m01 commented 3 months ago

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

adithyasource commented 2 months ago

Tabbing around is now possible after bde50cb and I've brought in more improvements to it in 0f0cb19, (mainly the ability to use arrow keys to emulate the scroll wheel for selecting different images in NewGame)

Basically, everything can now be done with just the keyboard and it's a great improvement for usability, thanks to your suggestion! Most components follow the WAI-ARIA spec now and I'm quite satisfied with where it is, but I still feel it'll require improvements in the future, so I'll be mentioning this issue whenever that happens.