nodejs · Trott · Sep 26, 2019 · Sep 8, 2019
diff --git a/layouts/css/_utils.styl b/layouts/css/_utils.styl
@@ -9,3 +9,14 @@
 
   td
     padding 0
+
+// borrowed from Bootstrap
+.sr-only
+  position absolute
+  width 1px
+  height 1px
+  padding 0
+  overflow hidden
+  clip rect(0, 0, 0, 0)
+  white-space nowrap
+  border none
diff --git a/layouts/css/page-modules/_header.styl b/layouts/css/page-modules/_header.styl
@@ -25,13 +25,13 @@ header
       background-color transparent
       text-decoration underline
 
-  #lang-picker-toggler
+  .lang-picker-toggler
     position absolute
     right 0
     bottom 0
-    width 25px
-    height 25px
-    fill $light-gray2
+    background-color transparent
+    border none
+    color $light-gray2
     cursor pointer
     padding 12px
 
@@ -43,25 +43,33 @@ header
     max-height 200%
     overflow auto
     background $node-gray
+    margin 0
+    padding 0
 
     &.hidden
       display none
 
     a
       color $light-gray2
 
-    > ul
-      padding 0
-      margin 0
+    > li
+      padding-bottom 0
 
-      > li
-        padding 0.5em 1em
-        text-transform uppercase
-        font-size 14px
+      button
+        background-color transparent
+        border none
         color $light-gray2 !important
         cursor pointer
-        list-style none
+        display inline-block
+        font-family inherit
+        font-size 14px
+        line-height 1.5
+        margin 0 auto
+        padding 0.5em 1em
+        text-transform uppercase
+        width 100%
 
+        &:focus,
         &:hover
           background-color $node-green
           text-decoration underline
@@ -120,7 +128,7 @@ header
     a:active
       padding 0
 
-    #lang-picker-toggler
+    .lang-picker-toggler
       position relative
       height 1.5em
       padding 0

diff --git a/layouts/partials/header.hbs b/layouts/partials/header.hbs
@@ -23,61 +23,56 @@
       </ul>
     </nav>
 
-    <svg id="lang-picker-toggler" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-      <rect id="lang-rect" width="512" height="512" x="0" y="0" fill="none" pointer-events="fill"/>
-      <path d="M217.982 201.586h-64.499c-5.537 0-10.026 4.489-10.026 10.026s4.489 10.026 10.026 10.026h53.547c-4.72 25.263-26.935 44.446-53.547 44.446-30.037 0-54.473-24.436-54.473-54.473s24.436-54.473 54.473-54.473c14.55 0 28.229 5.667 38.518 15.955 3.916 3.916 10.264 3.916 14.178 0 3.916-3.916 3.916-10.264 0-14.178-14.077-14.077-32.791-21.829-52.697-21.829-41.094 0-74.525 33.431-74.525 74.525 0 41.094 33.431 74.525 74.525 74.525s74.525-33.431 74.525-74.525c.001-5.536-4.488-10.025-10.025-10.025z"/>
-      <path d="M470.331 92.24H269.728l-26.935-81.355a10.025 10.025 0 00-9.518-6.875H41.669C18.693 4.01 0 22.703 0 45.679v332.412c0 22.976 18.693 41.669 41.669 41.669h203.145l27.073 81.369a10.026 10.026 0 009.513 6.861h188.932c22.976 0 41.669-18.693 41.669-41.669V133.909c-.001-22.976-18.694-41.669-41.67-41.669zM41.669 399.708c-11.919 0-21.616-9.697-21.616-21.616V45.679c0-11.919 9.697-21.616 21.616-21.616h184.364l70.691 213.516a.366.366 0 00.015.043l53.664 162.086H41.669zm295.78-116.433c.805 1.11 10.824 14.877 26.355 34.066-4.377 5.756-9.015 11.474-13.91 17.036l-29.712-89.74h87.441c-6.196 13.031-16.938 33.813-31.692 55.736-13.553-16.921-22.069-28.622-22.249-28.87-3.251-4.482-9.519-5.481-14.002-2.23-4.482 3.25-5.48 9.518-2.231 14.002zM265.946 419.76h75.162l-55.503 59.084-19.659-59.084zm226.002 46.561c0 11.919-9.697 21.616-21.616 21.616H304.575l67.015-71.339-.004-.003c.293-.312.571-.64.823-.991a10.025 10.025 0 001.39-9.022l-16.688-50.402c7.073-7.406 13.68-15.143 19.805-22.965 13.299 15.772 29.037 33.446 45.778 50.187 1.957 1.957 4.524 2.937 7.089 2.937s5.132-.979 7.089-2.937c3.916-3.916 3.916-10.264 0-14.178-17.461-17.461-34.013-36.244-47.687-52.632 21.251-30.503 35.033-59.504 40.535-71.954h21.454c5.537 0 10.026-4.489 10.026-10.026s-4.489-10.026-10.026-10.026h-66.173v-18.047c0-5.537-4.489-10.026-10.026-10.026s-10.026 4.489-10.026 10.026v18.046h-51.406l-37.178-112.292H470.33c11.919 0 21.616 9.697 21.616 21.616v332.412z"/>
-    </svg>
+    <button class="lang-picker-toggler" type="button" aria-controls="lang-picker" aria-expanded="false">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="25" height="25" aria-hidden="true" focusable="false" fill="currentColor">
+        <path d="M217.982 201.586h-64.499c-5.537 0-10.026 4.489-10.026 10.026s4.489 10.026 10.026 10.026h53.547c-4.72 25.263-26.935 44.446-53.547 44.446-30.037 0-54.473-24.436-54.473-54.473s24.436-54.473 54.473-54.473c14.55 0 28.229 5.667 38.518 15.955 3.916 3.916 10.264 3.916 14.178 0 3.916-3.916 3.916-10.264 0-14.178-14.077-14.077-32.791-21.829-52.697-21.829-41.094 0-74.525 33.431-74.525 74.525 0 41.094 33.431 74.525 74.525 74.525s74.525-33.431 74.525-74.525c.001-5.536-4.488-10.025-10.025-10.025z"/>
+        <path d="M470.331 92.24H269.728l-26.935-81.355a10.025 10.025 0 00-9.518-6.875H41.669C18.693 4.01 0 22.703 0 45.679v332.412c0 22.976 18.693 41.669 41.669 41.669h203.145l27.073 81.369a10.026 10.026 0 009.513 6.861h188.932c22.976 0 41.669-18.693 41.669-41.669V133.909c-.001-22.976-18.694-41.669-41.67-41.669zM41.669 399.708c-11.919 0-21.616-9.697-21.616-21.616V45.679c0-11.919 9.697-21.616 21.616-21.616h184.364l70.691 213.516a.366.366 0 00.015.043l53.664 162.086H41.669zm295.78-116.433c.805 1.11 10.824 14.877 26.355 34.066-4.377 5.756-9.015 11.474-13.91 17.036l-29.712-89.74h87.441c-6.196 13.031-16.938 33.813-31.692 55.736-13.553-16.921-22.069-28.622-22.249-28.87-3.251-4.482-9.519-5.481-14.002-2.23-4.482 3.25-5.48 9.518-2.231 14.002zM265.946 419.76h75.162l-55.503 59.084-19.659-59.084zm226.002 46.561c0 11.919-9.697 21.616-21.616 21.616H304.575l67.015-71.339-.004-.003c.293-.312.571-.64.823-.991a10.025 10.025 0 001.39-9.022l-16.688-50.402c7.073-7.406 13.68-15.143 19.805-22.965 13.299 15.772 29.037 33.446 45.778 50.187 1.957 1.957 4.524 2.937 7.089 2.937s5.132-.979 7.089-2.937c3.916-3.916 3.916-10.264 0-14.178-17.461-17.461-34.013-36.244-47.687-52.632 21.251-30.503 35.033-59.504 40.535-71.954h21.454c5.537 0 10.026-4.489 10.026-10.026s-4.489-10.026-10.026-10.026h-66.173v-18.047c0-5.537-4.489-10.026-10.026-10.026s-10.026 4.489-10.026 10.026v18.046h-51.406l-37.178-112.292H470.33c11.919 0 21.616 9.697 21.616 21.616v332.412z"/>
+      </svg>
+      <span class="sr-only">Toggle Language</span>
+    </button>
 
-    <div class="lang-picker hidden">
-      <ul id="language-items">
-        {{#each locales}}
-          <li
-            data-lang="{{locale}}"
-            title="{{languageEnglishVersion}}"
-            data-language="{{language}}">
-              {{language}}
-          </li>
-        {{/each}}
-      </ul>
-    </div>
+    <ul id="lang-picker" class="lang-picker hidden">
+      {{#each locales}}
+        <li>
+          <button data-lang="{{locale}}" title="{{languageEnglishVersion}}">{{language}}</button>
+        </li>
+      {{/each}}
+    </ul>
 
   </div>
 </header>
 <script>
+  var langPickerTogglerElement = document.querySelector('.lang-picker-toggler')
   var langPickerElement = document.querySelector('.lang-picker')
-  var langElements = langPickerElement.querySelectorAll('li')
-  var langPickerTogglerElement = document.querySelector('#lang-picker-toggler')
-  var languageItemsSelector = document.querySelector('#language-items')
+  var langElements = langPickerElement.querySelectorAll('button')
   // Get the current URL language
   var currentLang = window.location.pathname.split('/')[1] || 'en'
-  // Get the current URL language selector item as a li
-  var currentLangElement = null;
+  var currentLangElement = null
 
-  Array.prototype.forEach.call(langElements, function(el) {
+  Array.prototype.forEach.call(langElements, function (el) {
     if (el.getAttribute('data-lang') !== currentLang) {
-      el.addEventListener('click', function(e) {
-        var newLocale = (e.target && e.target.dataset && e.target.dataset.lang) || 'en';
+      el.addEventListener('click', function (e) {
+        var newLocale = (e.target && e.target.dataset && e.target.dataset.lang) || 'en'
         window.location.replace(window.location.pathname.replace(/\/[a-zA-Z-]+/, '/' + newLocale))
       })
     } else {
       currentLangElement = el
     }
   })
 
-  // Find the container where to mark the tooltip
-  var langRect = document.querySelector('#lang-picker-toggler > #lang-rect');
-  // Create dynamically label for tooltip
-  var titleEle = document.createElementNS('http://www.w3.org/2000/svg', 'title');
-  var textString = document.createTextNode(currentLangElement.getAttribute('data-language'));
-  titleEle.appendChild(textString);
-  langRect.appendChild(titleEle);
+  langPickerTogglerElement.setAttribute('title', currentLangElement.textContent)
 
   // Remove the current selected language item, because we don't need to choose it
-  // any more unless we want to switch the new language
-  languageItemsSelector.removeChild(currentLangElement)
+  // any more unless we want to switch to a new language
+  langPickerElement.removeChild(currentLangElement.parentNode)
 
-  langPickerTogglerElement.addEventListener('click', function() {
+  langPickerTogglerElement.addEventListener('click', function () {
     langPickerElement.classList.toggle('hidden')
+
+    if (langPickerTogglerElement.getAttribute('aria-expanded') === 'true') {
+      langPickerTogglerElement.setAttribute('aria-expanded', 'false')
+    } else {
+      langPickerTogglerElement.setAttribute('aria-expanded', 'true')
+    }
   })
 </script>