animated-theme-switch icon indicating copy to clipboard operation
animated-theme-switch copied to clipboard

Made the theme switcher more accessible

Open royeden opened this issue 2 years ago • 1 comments

Accessibility is important, even for demos :smile:

Keyboard fixes:

  • Switched from a to button, 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 as dark 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

royeden avatar Feb 05 '23 15:02 royeden