improve accessibility in header buttons (#1833)

Co-authored-by: Sebastian Beltran <bjohansebas@gmail.com>

_includes/header.html

@@ -248,10 +248,10 @@
     </ul>
   </div>
   <div class="header-right">
-    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <button id="theme-toggle" 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,20 +1,15 @@
-<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">
+<div class="desktop-lang-switcher">
+{% assign url_parts = page.url | split: '/' %}
+{% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
+{% assign current_lang = page.lang %}
+<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 %}
+      {% if lang.code == current_lang %}
         <strong>{{ lang.name }}</strong>
       {% else %}
         {{ lang.name }}
@@ -22,7 +17,6 @@
     </a>
   </li>
   {% endfor %}
-      </ul>
-    </li>
-  </ul>
+</ul>
+<div id="languageData" data-languages='{{ site.data.languages | jsonify }}' style="display:none;"></div>
 </div>

css/langs/ko.css

@@ -1,6 +1,6 @@
 /* For image callouts in writing-middleware.md */
 
-@import url('../fonts/ko/Pretendard.css');
+@import url('../../fonts/ko/Pretendard.css');
 
 html, body {font-family: Pretendard, Arial, sans-serif;}
 

css/langs/th.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: 'TH SarabunNew';
-  src: url("../fonts/th/THSarabunNew.woff")
+  src: url("../../fonts/th/THSarabunNew.woff")
 }
 
 #description .description {

css/style.css

@@ -621,11 +621,84 @@ 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;
+      color: var(--card-fg);
+      &: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;
@@ -1391,6 +1464,10 @@ blockquote {
     padding-inline: 32px;
   }
 
+  .desktop-lang-switcher {
+    display: none;
+  }
+
   #mobile-menu {
     display: block;
   }
@@ -1511,9 +1588,4 @@ blockquote {
   .submenu-content li {
     border-bottom: 1px solid var(--border);
   }
-
-  #theme-icon-container{
-    z-index: 10000;
-  }
-
 }

js/theme.js

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