Fix a11y in header button

_includes/header.html

@@ -242,10 +242,10 @@
     </ul>
   </div>
   <div class="header-right">
-    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <button type="button" class="theme-btn" title="change theme">
       <i class="fa fa-moon-o fa-2x hidden-dark"></i>
       <span class="sun-icon hidden-light"></span>
-    </div>
+    </button>
     {% include language-picker.html %}
     {% include language-picker-mobile.html %}
   </div>

_includes/language-picker.html

@@ -1,28 +1,21 @@
-<div id="navbar">
-  <ul id="navmenu">
-    {% assign url_parts = page.url | split: '/' %}
-
-    {% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
-
-    <li class="submenu">
-      <div id="current-lang" class="current-lang"></div>
-      <div id="languageData"
-      data-languages='{{ site.data.languages | jsonify }}'
-      style="display:none;">
-      </div>
-      <ul class="submenu-content">
-        {% for lang in site.data.languages %}
-        <li>
-          <a href="/{{ lang.code }}/{{ url_remainder }}">
-            {% if lang.code | to_s == current_lang | to_s %}
-              <strong>{{ lang.name }}</strong>
-            {% else %}
-              {{ lang.name }}
-            {% endif %}
-          </a>
-        </li>
-        {% endfor %}
-      </ul>
-    </li>
-  </ul>
+<div class="desktop-lang-switcher">
+{% assign url_parts = page.url | split: '/' %}
+{% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
+<button class="lang-btn" type="button" aria-haspopup="menu" aria-label="Change language">
+  <span id="current-lang"></span>
+</button>
+<ul class="lang-list submenu-content" aria-labelledby="current-lang" >
+  {% for lang in site.data.languages %}
+  <li>
+    <a href="/{{ lang.code }}/{{ url_remainder }}">
+      {% if lang.code | to_s == current_lang | to_s %}
+        <strong>{{ lang.name }}</strong>
+      {% else %}
+        {{ lang.name }}
+      {% endif %}
+    </a>
+  </li>
+  {% endfor %}
+</ul>
+<div id="languageData" data-languages='{{ site.data.languages | jsonify }}' style="display:none;"></div>
 </div>

css/style.css

@@ -635,11 +635,83 @@ footer {
   font-size: 20px;
 }
 
-/* navigation */
-#theme-icon-container {
+/* theme and lang btn */
+button.theme-btn,
+button.lang-btn {
   cursor: pointer;
+  appearance: none;
+  background-color: inherit;
+  border: 0;
+}
+
+button.lang-btn {
+  color: var(--card-fg);
+  padding: 0.2rem;
+  font-size: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+
+  &::after {
+    content: "";
+    display: block;
+    width: 0.8em;
+    height: 0.5em;
+    background-color: var(--card-fg);
+    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+    cursor: pointer;
+    pointer-events: none;
+    transition: transform 0.2s ease-in-out;
+  }
+}
+
+div.desktop-lang-switcher {
+  position: relative;
+  > button.lang-btn {
+    &:is(:focus, :hover) {
+      & + ul {
+        display: block;
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+  }
+  /* enable lang list tabbing on keyboard focus */
+  &:focus-within .lang-list {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+  }
+
+  > ul.lang-list {
+    display: none;
+    opacity: 0;
+    position: absolute;
+    list-style: none;
+    visibility: hidden;
+    &:is(:hover, :focus) {
+      display: block;
+      opacity: 1;
+      visibility: visible;
+    }
+    li  a {
+      display: block;
+      padding: 5px 20px 5px 20px;
+      text-decoration: none;
+      &:is(:hover, :focus) {
+        background: var(--hover-bg);
+      }
+    }
+  }
+
+  /* rotate arrow */
+  &:is(:hover,:focus-within) button.lang-btn::after {
+    transform: rotate(180deg);
+  }
 }
 
+/* navigation */
 #navbar {
   line-height: 30px;
   display: flex;
@@ -1418,6 +1490,10 @@ blockquote {
     padding-inline: 32px;
   }
 
+  .desktop-lang-switcher {
+    display: none;
+  }
+
   #mobile-menu {
     display: block;
   }
@@ -1538,9 +1614,4 @@ blockquote {
   .submenu-content li {
     border-bottom: 1px solid var(--border);
   }
-
-  #theme-icon-container{
-    z-index: 10000;
-  }
-
 }

js/theme.js

@@ -2,7 +2,7 @@ const themeWatcher = watchColorSchemeChange((colorScheme) => {
   if (!hasLocalStorage()) {
     document?.addEventListener('DOMContentLoaded', () => {
       // remove icon - toggle not supported
-      document.querySelector('#theme-icon-container').remove()
+      document.querySelector('.theme-btn').remove()
       toggleSystemTheme(colorScheme)
     })
   } else {
@@ -35,7 +35,7 @@ const themeWatcher = watchColorSchemeChange((colorScheme) => {
     document.addEventListener('DOMContentLoaded', () => {
 
       document
-        .querySelector('.theme-toggle')
+        .querySelector('.theme-btn')
         .addEventListener('click', toggleLocalStorageTheme)
     })
   }