Improve accessibility and lighthouse score

global.json

@@ -40,7 +40,8 @@
             "Edit_on": "Edit on :name:",
             "View_on_github": "View On GitHub",
             "View_documentation": "View Documentation",
-            "Table_of_contents": "Table of Contents"
+            "Table_of_contents": "Table of Contents",
+            "Toggle_navigation": "Toggle navigation"
         },
         "fr": {
             "CodeBlocks_title": "Afficher le code",

src/css/theme_daux/_fonts.scss

@@ -13,6 +13,7 @@
     font-family: "Roboto Slab";
     font-style: normal;
     font-weight: 300;
+    font-display: fallback;
     src: url("../fonts/robotoslab-light.eot");
     src: url("../fonts/robotoslab-light.eot?#iefix") format("embedded-opentype"),
         url("../fonts/robotoslab-light.woff2") format("woff2"),
@@ -27,6 +28,7 @@
     font-family: "Roboto Slab";
     font-style: normal;
     font-weight: 400;
+    font-display: fallback;
     src: url("../fonts/robotoslab-regular.eot");
     src: url("../fonts/robotoslab-regular.eot?#iefix")
             format("embedded-opentype"),
@@ -42,6 +44,7 @@
     font-family: "Roboto Slab";
     font-style: normal;
     font-weight: 700;
+    font-display: fallback;
     src: url("../fonts/robotoslab-bold.eot");
     src: url("../fonts/robotoslab-bold.eot?#iefix") format("embedded-opentype"),
         url("../fonts/robotoslab-bold.woff2") format("woff2"),

src/css/theme_daux_singlepage/_fonts.scss

@@ -13,6 +13,7 @@
     font-family: "Roboto Slab";
     font-style: normal;
     font-weight: 300;
+    font-display: fallback;
     src: url("../fonts/robotoslab-light.eot");
     src: url("../fonts/robotoslab-light.eot?#iefix") format("embedded-opentype"),
         url("../fonts/robotoslab-light.woff2") format("woff2"),
@@ -27,6 +28,7 @@
     font-family: "Roboto Slab";
     font-style: normal;
     font-weight: 400;
+    font-display: fallback;
     src: url("../fonts/robotoslab-regular.eot");
     src: url("../fonts/robotoslab-regular.eot?#iefix")
             format("embedded-opentype"),
@@ -42,6 +44,7 @@
     font-family: "Roboto Slab";
     font-style: normal;
     font-weight: 700;
+    font-display: fallback;
     src: url("../fonts/robotoslab-bold.eot");
     src: url("../fonts/robotoslab-bold.eot?#iefix") format("embedded-opentype"),
         url("../fonts/robotoslab-bold.woff2") format("woff2"),

src/js/theme_daux/hamburger.js

@@ -7,7 +7,9 @@ if (trigger) {
         if (content.classList.contains("Collapsible__content--open")) {
             content.style.height = 0;
             content.classList.remove("Collapsible__content--open");
+            trigger.setAttribute("aria-expanded", "false");
         } else {
+            trigger.setAttribute("aria-expanded", "true");
             content.style.transitionDuration = `${Math.max(
                 content.scrollHeight,
                 150

templates/layout/05_page.php

@@ -1,7 +1,7 @@
 <?php $this->layout('theme::layout/00_layout') ?>
 <div class="Columns content">
     <aside class="Columns__left Collapsible">
-        <button type="button" class="Button Collapsible__trigger">
+        <button type="button" class="Button Collapsible__trigger" aria-controls="sidebar_content" aria-expanded="false" aria-label="<?= $this->translate("Toggle_navigation") ?>">
             <span class="Collapsible__trigger__bar"></span>
             <span class="Collapsible__trigger__bar"></span>
             <span class="Collapsible__trigger__bar"></span>
@@ -9,7 +9,7 @@
 
         <?php $this->insert('theme::partials/navbar_content', ['params' => $params]); ?>
 
-        <div class="Collapsible__content">
+        <div class="Collapsible__content" id="sidebar_content">
             <!-- Navigation -->
             <?php
             $rendertree = $tree;

themes/daux/js/daux.min.js

@@ -1,2 +1,2 @@
-var e=document.querySelectorAll(".s-content pre"),t=document.querySelector(".CodeToggler"),a="daux_code_blocks_hidden";function n(t){for(var n=0;n<e.length;n++)e[n].classList.toggle("Hidden",t);try{localStorage.setItem(a,t)}catch(e){}}t&&(e.length?function(){var e=t.querySelector(".CodeToggler__button--main");e.addEventListener("change",(function(e){n(!e.target.checked)}),!1);var o=!1;try{"false"===(o=localStorage.getItem(a))?o=!1:"true"===o&&(o=!0),o&&(n(!!o),e.checked=!o)}catch(e){}}():t.classList.add("Hidden"));var o=document.querySelector(".Collapsible__trigger");if(o){var l=document.querySelector(".Collapsible__content");o.addEventListener("click",(function(e){l.classList.contains("Collapsible__content--open")?(l.style.height=0,l.classList.remove("Collapsible__content--open")):(l.style.transitionDuration="".concat(Math.max(l.scrollHeight,150),"ms"),l.style.height="".concat(l.scrollHeight,"px"),l.classList.add("Collapsible__content--open"))}))}var c=document.querySelectorAll("pre > code:not(.hljs)");if(c.length){var i=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="".concat(window.base_url,"_libraries/highlight.pack.js"),r.onload=function(e){[].forEach.call(c,window.hljs.highlightBlock)},i.appendChild(r)}function s(e){"0px"!==e.target.style.height&&(e.target.style.height="auto"),e.target.removeEventListener("transitionend",s)}function d(e){void 0!==e.preventDefault&&e.preventDefault();var t=e.target.parentNode.parentNode,a=t.querySelector("ul.Nav");void 0!==e.preventDefault&&t.classList.contains("Nav__item--open")?(a.style.height="".concat(a.scrollHeight,"px"),a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.style.height="0px",t.classList.remove("Nav__item--open")):void 0===e.preventDefault?a.style.height="auto":(a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.addEventListener("transitionend",s),a.style.height="".concat(a.scrollHeight,"px"),t.classList.add("Nav__item--open"))}for(var h,g=document.querySelectorAll(".Nav__item.has-children i.Nav__arrow"),u=g.length-1;u>=0;u--)(h=g[u]).addEventListener("click",d),h.parentNode.parentNode.classList.contains("Nav__item--open")&&d({target:h});
+var e=document.querySelectorAll(".s-content pre"),t=document.querySelector(".CodeToggler"),a="daux_code_blocks_hidden";function n(t){for(var n=0;n<e.length;n++)e[n].classList.toggle("Hidden",t);try{localStorage.setItem(a,t)}catch(e){}}t&&(e.length?function(){var e=t.querySelector(".CodeToggler__button--main");e.addEventListener("change",(function(e){n(!e.target.checked)}),!1);var o=!1;try{"false"===(o=localStorage.getItem(a))?o=!1:"true"===o&&(o=!0),o&&(n(!!o),e.checked=!o)}catch(e){}}():t.classList.add("Hidden"));var o=document.querySelector(".Collapsible__trigger");if(o){var l=document.querySelector(".Collapsible__content");o.addEventListener("click",(function(e){l.classList.contains("Collapsible__content--open")?(l.style.height=0,l.classList.remove("Collapsible__content--open"),o.setAttribute("aria-expanded","false")):(o.setAttribute("aria-expanded","true"),l.style.transitionDuration="".concat(Math.max(l.scrollHeight,150),"ms"),l.style.height="".concat(l.scrollHeight,"px"),l.classList.add("Collapsible__content--open"))}))}var r=document.querySelectorAll("pre > code:not(.hljs)");if(r.length){var i=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.async=!0,c.src="".concat(window.base_url,"_libraries/highlight.pack.js"),c.onload=function(e){[].forEach.call(r,window.hljs.highlightBlock)},i.appendChild(c)}function s(e){"0px"!==e.target.style.height&&(e.target.style.height="auto"),e.target.removeEventListener("transitionend",s)}function d(e){void 0!==e.preventDefault&&e.preventDefault();var t=e.target.parentNode.parentNode,a=t.querySelector("ul.Nav");void 0!==e.preventDefault&&t.classList.contains("Nav__item--open")?(a.style.height="".concat(a.scrollHeight,"px"),a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.style.height="0px",t.classList.remove("Nav__item--open")):void 0===e.preventDefault?a.style.height="auto":(a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.addEventListener("transitionend",s),a.style.height="".concat(a.scrollHeight,"px"),t.classList.add("Nav__item--open"))}for(var h,g=document.querySelectorAll(".Nav__item.has-children i.Nav__arrow"),u=g.length-1;u>=0;u--)(h=g[u]).addEventListener("click",d),h.parentNode.parentNode.classList.contains("Nav__item--open")&&d({target:h});
 //# sourceMappingURL=daux.min.js.map