Not accessible by default

[tknickman]

Because this uses an svg element, it is not keyboard accessible by default. You can fix this manually by wrapping the component in a button with a key handler, but it would be great if this was supported out of the box.

For example I have fixed this with:

<button
  onKeyDown={(e) => e.code === "Enter" && toggleTheme()}
  aria-label={`switch to ${
    colorTheme === themes.DARK ? "dark" : "light"
  } mode`}
>
  <DarkModeSwitch
    checked={colorTheme === themes.DARK}
    onChange={toggleTheme}
    ...
  />
</button>

This should be keyboard accessible (can be tabbed to, and selected with enter) by default.

[VipEvel]

Because this uses an svg element, it is not keyboard accessible by default. You can fix this manually by wrapping the component in a button with a key handler, but it would be great if this was supported out of the box.

For example I have fixed this with:

<button
  onKeyDown={(e) => e.code === "Enter" && toggleTheme()}
  aria-label={`switch to ${
    colorTheme === themes.DARK ? "dark" : "light"
  } mode`}
>
  <DarkModeSwitch
    checked={colorTheme === themes.DARK}
    onChange={toggleTheme}
    ...
  />
</button>

This should be keyboard accessible (can be tabbed to, and selected with enter) by default.

Yes i'm also facing the same issue