feat: use disclosure widget for language selection

src/_includes/partials/header.njk

@@ -7,7 +7,7 @@
 <header class="ignore-for-TOC row fl-inverted-color">
     {% include "partials/uio.njk" %}
 
-    {% localeLink locale, translationKey, category, collections %}
+    {% include 'partials/language.njk' %}
 
     <div class="small-12 column docs-template-header">
         <a class="" href="/{% if not (locale === config.defaultLanguage) %}{{ config.languages[locale].slug }}{% endif %}" title="{{ _i("Home: ${siteName}", {siteName: _(site.title)}) }}">

src/_includes/partials/language.njk

@@ -0,0 +1,6 @@
+<nav class="idg-language-picker" aria-labelledBy="idg-language-button">
+    <button id="idg-language-button" aria-expanded="false" aria-controls="idg-language-list">{{ _("Language") }}</button>
+    <ul id="idg-language-list">
+         {% localeLink locale, translationKey, category, collections %}
+    </ul>
+</nav>

src/assets/scripts/app.js

@@ -21,3 +21,49 @@ jQuery("#menu").menu({
         }
     }
 });
+
+const toggleExpansion = (element, state) => {
+    let isExpanded = element.getAttribute("aria-expanded") === "true" ? true : false;
+    state = typeof(state) !== "undefined" ? state : !isExpanded;
+
+    element.setAttribute("aria-expanded", state ? "true" : "false");
+    return state;
+};
+
+const menu = (container, button = "button") => {
+    let menu = document.querySelector(container);
+
+    if (!menu) {
+        throw new Error(`No element found for container selector: ${container}`);
+    }
+
+    let btn = menu.querySelector(button);
+
+    if (!btn) {
+        throw new Error(`No element found for button selector: ${button}`);
+    }
+
+    // Close the menu when focus is moved away from the menu
+    menu.addEventListener("focusout", (event) => {
+        if (!menu.contains(event.relatedTarget)) {
+            toggleExpansion(btn, false);
+        }
+    });
+
+    // Close the menu when the "Escape" key is pressed and the menu has focus. Shifts focus back to the button.
+    menu.addEventListener("keyup", (event) => {
+        if (event.code === "Escape") {
+            toggleExpansion(btn, false);
+            btn.focus();
+        }
+    });
+
+    // Toggle expansion of menu when button is clicked
+    btn.addEventListener("click", () => {
+        toggleExpansion(btn);
+    });
+};
+
+menu(".idg-language-picker");
+
+

src/assets/styles/app.styl

@@ -135,15 +135,48 @@ a:hover .idg-logo {
     }
 }
 
-.idg-locale {
+.idg-language-picker {
     width: 100%;
     display: flex;
-    justify-content: flex-end;
+    flex-direction: column;
+    align-items: flex-end;
     padding-block-start: 1rem;
     padding-inline: 2rem;
 }
 
-.idg-locale a {
+.idg-language-picker button[aria-expanded="false"]::after {
+    content: "▼";
+}
+
+.idg-language-picker button::after {
+    padding-inline-start: 0.5rem;
+    content: "▲";
+}
+
+.idg-language-picker button[aria-expanded="false"]+ul {
+    display: none;
+}
+
+.idg-language-picker button+ul {
+    position: absolute;
+    margin-block-start: 3.3rem;
+    background-color: grey;
+    z-index: 2;
+    list-style: none;
+}
+
+.idg-language-picker li {
+    padding-inline: 1rem;
+    text-align: end;
+}
+
+.idg-language-picker li a[aria-current]::before {
+     color: #fff;
+     content: "✔";
+     padding-inline-end: 0.5rem;
+ }
+
+.idg-language-picker a {
     color: #fff;
 }
 

src/locales/messages.js

@@ -10,6 +10,7 @@ _i("Hosted with ${netlify}.")
 _i("This documentation is licensed under a ${license}.")
 _("Skip to Content")
 _i("Home: ${siteName}")
+_("Language")
 _("Reset")
 _("activities")
 _("insights")
@@ -21,5 +22,4 @@ _("https://creativecommons.org/licenses/by/3.0/")
 _("Inclusive Design Research Centre")
 _("https://idrc.ocad.ca/")
 _("OCAD University")
-_("https://www.ocadu.ca/")
-_("Language")
+_("https://www.ocadu.ca/")

src/shortcodes/generateLocaleLinks.js

@@ -1,23 +1,26 @@
 "use strict";
 
 const config = require("../_data/config.json");
-const i18n = require("eleventy-plugin-i18n-gettext");
 
 module.exports = (locale, translationKey, category, collection) => {
     let output = "";
-    for (let language in config.languages) {
-        if (locale && locale !== language) {
+
+    if (locale) {
+        for (let language in config.languages) {
             let langProps = config.languages[language];
-            if (category && collection) {
+            let attrs = locale === language ? "aria-current=\"page\"" : "";
+            let url = language === config.defaultLanguage ? "/" : `/${langProps.slug}`;
+
+            if (category && collection && translationKey) {
                 let matchedPage = collection[`${category}_${language}`].find(page => page.fileSlug === translationKey);
                 if (matchedPage) {
-                    output += `<a href="${matchedPage.url}">${langProps.name}</a>`;
+                    url = matchedPage.url;
                 }
-            } else {
-                output += `<a href="/${language === config.defaultLanguage ? "" : langProps.slug}">${langProps.name}</a>`;
             }
+
+            output += `<li><a href="${url}" ${attrs}>${langProps.name}</a></li>`;
         }
     }
 
-    return output ? `<nav class="idg-locale" aria-label="${i18n._(locale, "Language")}">${output}</nav>` : output;
+    return output;
 };