animated-theme-switch
animated-theme-switch copied to clipboard
Made the theme switcher more accessible
Accessibility is important, even for demos :smile:
Keyboard fixes:
- Switched from
a
tobutton
, as the a without an href wasn't keyboard focusable. This also allows you to switch themes back and forth using the space/enter keys. - Added focus/blur previews and simplified into a
previewStart
/previewEnd
functions.
Aria fixes:
- The
role
attribute should be"switch"
to indicate the context of the action. - Added
aria-label
to clarify what the button does (the screen reader will read the button asdark theme switch on/off
). - Added
aria-checked
to showcase the current state of the button.
Everything was based from https://www.radix-ui.com/docs/primitives/components/switch