fix: Improve accessibility of the theme switcher

[palant]

The keyboard accessibility of the theme switcher isn't great right now. When you press Tab to go through menu entries, the focus gets to the theme switcher but no focus ring appears - you don't see where the focus is. Also, pressing Enter (which is what you would do with the other menu items) doesn't do anything, you have to press Space because it is a checkbox which isn't exactly obvious.

So I made the theme switcher a link like the other entries, this makes its behavior consistent. If we are worried about screen readers, we might want to add some hidden text to it as well. Given that this is the switch for the visual theme however, adding aria-hidden="true" to the entire element might make more sense.

[reuixiy]

I have to admit that this is a better approach.

Side-notes: We should keep the element and its data-hide attribute, so we can remove extra margin by appending display: none to its parent node <li>.

[reuixiy]

Side-notes: This is a requirement from https://github.com/gohugoio/hugoThemes#resources

[palant]

I think that a CSS-only solution with :blank will work as well, let me try...

[palant]

Done. The downside here is: whitespace isn't allowed either, or it won't be hidden. The other solution would be not emitting the list item in the first place, something like:

{{ $Content := partial "components/dark-mode.html" $ctx }}
{{ with $Content }}
    <li class="menu-item">{{ $Content }}</li>
{{ end }}

[reuixiy]

The other solution would be not emitting the list item in the first place

This! 🤯

[palant]

This! 🤯

Ok, I take it that this is your preferred solution. Done.