Theme toggler is not accessible on mobile or via keyboard

[pepelsbey]

Unfortunately, it’s not possible to switch themes on mobile or use it via keyboard even on desktop.

It shows the list of options only when you hover #toggleTheme:

<li id="toggleTheme">Change Theme
  <ul>
    <li data-value="" class="selected">Auto</li>
    <li data-value="dark">Dark</li>
    <li data-value="light">Light</li>
  </ul>
</li>

To make it work better, markup should look like this:

<button type="button" aria-controls="theme-toggler" aria-expanded="false">
  Change Theme
</button>

<ul id="theme-toggler">
  <li>
    <button type="button" aria-pressed="false" value="auto">
      Auto
    </button>
  </li>
  <li>
    <button type="button" aria-pressed="true" value="dark">
      Dark
    </button>
  </li>
  <li>
    <button type="button" aria-pressed="false" value="light">
      Light
    </button>
  </li>
</ul>

• When the “Change Menu” button is pressed, aria-expanded should switch to true
• Once the menu is closed the button should go to false again
• When one of the options is pressed, aria-pressed should switch to true
• The rest options should switch to false

There’s a good article on web.dev