Made options panel work without JavaScript

_includes/layout/aside.html

@@ -1,4 +1,4 @@
-<aside class="aside" aria-hidden="true" id="options-panel">
+<aside class="aside" id="options-panel">
   <div class="aside__overlay" tabindex="-1" data-a11y-dialog-hide></div>
   <div class="aside__content" role="dialog">
     <div role="document">
@@ -71,7 +71,13 @@ <h2 class="aside__heading">
         </noscript>
       </section>
 
-      <button data-a11y-dialog-hide type="button" aria-label="{{ site.data[page.language].translations.aside.close }}" class="aside__close">&times;</button>
+      <noscript>
+        <a href="#" class="aside__close" aria-label="{{ site.data[page.language].translations.aside.close }}">
+          &times;
+        </a>
+      </noscript>
+
+      <button data-a11y-dialog-hide type="button" aria-label="{{ site.data[page.language].translations.aside.close }}" class="aside__close" hidden>&times;</button>
     </div>
   </div>
 </aside>

_includes/partials/translation-warning.html

@@ -2,7 +2,7 @@
 
 <div class="translation-warning">
   <div class="translation-warning__inner">
-    <p>The Sass Guidelines project has been translated into several languages by <a target="_blank" href="https://github.com/HugoGiraudel/sass-guidelines/issues/96" rel="noopener noreferrer">generous contributors</a>. Open the <button type="button" data-a11y-dialog-show="options-panel" class="link-like">options panel</button> to switch.</p>
+    <p>The Sass Guidelines project has been translated into several languages by <a target="_blank" href="https://github.com/HugoGiraudel/sass-guidelines/issues/96" rel="noopener noreferrer">generous contributors</a>. Open the <a href="#options-panel" class="link-like">options panel</a> to switch.</p>
   </div>
 </div>
 

_layouts/default.html

@@ -25,11 +25,12 @@
       <!-- Translation banner -->
       {% include partials/translation-warning.html %}
 
-      <!-- Button to toggle the options panel -->
-      <button type="button" data-a11y-dialog-show="options-panel" class="button-ui  button-ui--toggle">
+      <!-- Button to toggle the options panel; replaced with JavaScript with a
+           proper button when JavaScript is enabled -->
+      <a href="#options-panel" class="button-ui  button-ui--toggle">
         {% capture open_panel %}{{ site.data[page.language].translations.aside.open }}{% endcapture %}
         {% include partials/icon.html icon="settings" title=open_panel %}
-      </button>
+      </a>
 
       <!-- Main container -->
       <div class="main">

assets/js/src/app.js

@@ -10,6 +10,9 @@
   var linkSvg = $('meta[name="svg-link-icon"]')[0].getAttribute('content')
   var chapters = $('.chapter:not(.toc)')
   var syntaxToggle = $('input[name="syntax"]')
+  var sidebarOpeners = $('a[href="#options-panel"]')
+  var sidebarClosers = $('[data-a11y-dialog-hide]')
+  var sidebar = $('#options-panel')[0]
 
   // Internal variables
   var idIndex = 100
@@ -67,9 +70,33 @@
     document.body.classList[fn]('sass')
   })
 
+  var onDialogShow = function () { sidebar.classList.add('is-open') }
+  var onDialogHide = function () { sidebar.classList.remove('is-open') }
+
   // Initialise side panel
   document.addEventListener('DOMContentLoaded', function (event) {
-    new A11yDialog(document.getElementById('options-panel'), document.getElementById('main-content')) // eslint-disable-line
+    var dialog = new A11yDialog(sidebar, document.getElementById('main-content'))
+
+    dialog
+      .on('show', onDialogShow)
+      .on('hide', onDialogHide)
+  })
+
+  // Replace options panel toggles with proper a11y-dialog openers
+  sidebarOpeners.forEach(function (toggle) {
+    var button = document.createElement('button')
+    button.setAttribute('type', 'button')
+    button.setAttribute('data-a11y-dialog-show', 'options-panel')
+    button.setAttribute('class', toggle.getAttribute('class'))
+    button.innerHTML = toggle.innerHTML
+
+    toggle.parentNode.replaceChild(button, toggle)
+  })
+
+  // Closer is hidden by default as it is displayed side by side with a link
+  // in a noscript tag.
+  sidebarClosers.forEach(function (closer) {
+    closer.removeAttribute('hidden')
   })
 
   // Add chapter buttons

assets/sass/layout/_aside.scss

@@ -1,10 +1,12 @@
-/**
- * Aside options panel accessibility wrapper
- */
-.aside[aria-hidden='true'] {
+.aside {
   display: none;
 }
 
+.js .aside.is-open,
+.no-js .aside:target {
+  display: block;
+}
+
 /**
  * Aside options panel
  * 1. Fixed offscreen
@@ -85,6 +87,12 @@
   -webkit-transform: scale(1.25); /* 2 */
   -moz-transform: scale(1.25); /* 2 */
   transform: scale(1.25); /* 2 */
+  text-decoration: none;
+}
+
+.aside__close:hover,
+.aside__close:active {
+  color: inherit;
 }
 
 /**

pages/de/_contributing.md

@@ -1,7 +1,7 @@
 
 # Mitwirken
 
-Sass Guidelines ist ein freies Projekt welches ich in meiner Freizeit entwickle. Es ist daher recht großer Aufwand alles aktuell, dokumentiert und logisch zu halten. Glücklicherweise wird mir von vielen großartigen Mitwirkenden geholfen; besonders wenn es um die Pfleger der dutzend <button type="button" data-a11y-dialog-show="options-panel" class="link-like">verschiedenen Übersetzungen</button> geht. Also dankt Ihnen!
+Sass Guidelines ist ein freies Projekt welches ich in meiner Freizeit entwickle. Es ist daher recht großer Aufwand alles aktuell, dokumentiert und logisch zu halten. Glücklicherweise wird mir von vielen großartigen Mitwirkenden geholfen; besonders wenn es um die Pfleger der dutzend <a href="#options-panel" class="link-like">verschiedenen Übersetzungen</a> geht. Also dankt Ihnen!
 
 Falls du also Lust hast mitzuwirken, ist selbst ein Tweet, es weiterzusagen oder nur einen Schreibfehler zu korrigieren wirklich großartig! Das kannst du unter anderem durchs erstellen eines Bugreport oder Pull-Request im [GitHub Repository](https://github.com/HugoGiraudel/sass-guidelines).
 

pages/el/_contributing.md

@@ -1,7 +1,7 @@
 
 # Πως μπορείτε να συνεισφέρετε
 
-Το Sass Guidelines είναι ένα ελεύθερο project που συντηρώ στον ελεύθερό μου χρόνο. Περιττό να πω ότι απαιτείται πάρα πολλή δουλειά για να διατηρηθεί το project ενημερωμένο, τεκμηριωμένο και συναφές. Ευτυχώς, έχω τη βοήθεια πολλών σπουδαίων ανθρώπων που συνεισφέρουν, ειδικά όσον αφορά τη συντήρηση δεκάδων <button type="button" data-a11y-dialog-show="options-panel" class="link-like">διαφορετικών μεταφράσεων</button>. Be sure to thank them!
+Το Sass Guidelines είναι ένα ελεύθερο project που συντηρώ στον ελεύθερό μου χρόνο. Περιττό να πω ότι απαιτείται πάρα πολλή δουλειά για να διατηρηθεί το project ενημερωμένο, τεκμηριωμένο και συναφές. Ευτυχώς, έχω τη βοήθεια πολλών σπουδαίων ανθρώπων που συνεισφέρουν, ειδικά όσον αφορά τη συντήρηση δεκάδων <a href="#options-panel" class="link-like">διαφορετικών μεταφράσεων</a>. Be sure to thank them!
 
 Τώρα αν ενδιαφέρεστε να συνεισφέρετε, παρακαλώ γνωρίζετε πως ένα tweet που αναφέρει το project, ή την διάδοσή του, ακόμα και η διόρθωση ενός ορθογραφικού λάθους ανοίγοντας ένα issue ή pull-request στο [GitHub repository](https://github.com/HugoGiraudel/sass-guidelines) θα ήταν υπέροχο!
 

pages/en/_contributing.md

@@ -1,7 +1,7 @@
 
 # Contributing
 
-Sass Guidelines is a free project that I maintain in my spare time. Needless to say, it is quite a large amount of work to keep everything up-to-date, documented and relevant. Thankfully, I get helped by a lot of great contributors, especially when it comes to maintaing dozens of <button type="button" data-a11y-dialog-show="options-panel" class="link-like">different translations</button>. Be sure to thank them!
+Sass Guidelines is a free project that I maintain in my spare time. Needless to say, it is quite a large amount of work to keep everything up-to-date, documented and relevant. Thankfully, I get helped by a lot of great contributors, especially when it comes to maintaing dozens of <a href="#options-panel" class="link-like">different translations</a>. Be sure to thank them!
 
 Now if you feel like contributing, please know that tweeting about it, spreading the word, or fixing a tiny typo by opening an issue or a pull-request on the [GitHub repository](https://github.com/HugoGiraudel/sass-guidelines) would be great!
 

pages/fr/_contributing.md

@@ -1,7 +1,7 @@
 
 # Contributions
 
-Sass Guidelines est un projet ouvert que je maintiens sur mon temps libre. S’assurer qu’il soit toujours à jour, documenté et pertinent représente beaucoup de travail. Heureusement, je reçois l’aide de nombreux et généreux contributeurs, notamment pour la tenue à jour des <button type="button" data-a11y-dialog-show="options-panel" class="link-like">différentes traductions</button>. Pensez à les remercier !
+Sass Guidelines est un projet ouvert que je maintiens sur mon temps libre. S’assurer qu’il soit toujours à jour, documenté et pertinent représente beaucoup de travail. Heureusement, je reçois l’aide de nombreux et généreux contributeurs, notamment pour la tenue à jour des <a href="#options-panel" class="link-like">différentes traductions</a>. Pensez à les remercier !
 
 Si vous souhaitez apporter votre contribution, vous pouvez tweeter et faire passer l’info, et le cas échéant corriger les erreurs typographiques en ouvrant une pull-request sur le [dépôt GitHub](https://github.com/HugoGiraudel/sass-guidelines).
 

pages/it/_contributing.md

@@ -2,7 +2,7 @@
 # Contributi
 
 "Le linee guida di Sass" è un progetto libero di cui mi prendo cura nel mio tempo libero. Inutile a dirsi, c’è un bel po’ di lavoro da fare per tenere tutto aggiornato, documentato e rilevante. 
-Per fortuna, mi aiutano un sacco di _contributors_ specialmente quando si tratta di mantenere  <button type="button" data-a11y-dialog-show="options-panel" class="link-like">traduzioni</button>. Ringraziamoli!
+Per fortuna, mi aiutano un sacco di _contributors_ specialmente quando si tratta di mantenere <a href="#options-panel" class="link-like">traduzioni</a>. Ringraziamoli!
 
 Ora, se ti senti di poter contribuire, sappi che già twittare riguardo questo progetto, passar parola o aggiustare qualche errore di battitura aprendo un issue o una pull-request sulla [repository GitHub](https://github.com/HugoGiraudel/sass-guidelines) è già un’ottima cosa!
 

pages/pl/_contributing.md

@@ -1,7 +1,7 @@
 
 # Pomoc w tworzeniu
 
-Sass Guidelines jest darmowym projektem, którym zajmuję się w swoim wolnym czasie. Wymaga on ode mnie dużo poświęcenia, by stale go aktualizować, dokładnie dokumentować i podnosić jego wartość merytoryczną. Na szczęście pomaga mi w tym wiele wspaniałych osób, zwłaszcza w utrzymywaniu <button type="button" data-a11y-dialog-show="options-panel" class="link-like">wielu różnych tłumaczeń</button>. Nie zapomnij im podziękować!
+Sass Guidelines jest darmowym projektem, którym zajmuję się w swoim wolnym czasie. Wymaga on ode mnie dużo poświęcenia, by stale go aktualizować, dokładnie dokumentować i podnosić jego wartość merytoryczną. Na szczęście pomaga mi w tym wiele wspaniałych osób, zwłaszcza w utrzymywaniu <a href="#options-panel" class="link-like">wielu różnych tłumaczeń</a>. Nie zapomnij im podziękować!
 
 Jeśli chcesz uczestniczyć w jego współtworzeniu, możesz tweetnąć o nim albo w dowolny inny sposób komuś o nim powiedzieć. Jeśli zauważysz jakiś błąd, choćby literówkę – byłoby świetnie, jeśli otworzysz issue, czy zrobisz pull request na [repozytorium projektu na Githubie](https://github.com/HugoGiraudel/sass-guidelines)!
 

pages/zh/_contributing.md

@@ -1,7 +1,7 @@
 
 # 贡献
 
-Sass指南是我利用空暇时间维持的一个免费项目。不用多说,相信你也能够理解，持续更新、编写文档和其他相关事宜是一件工作量不小的事情。幸运的是，我从许多非常棒的贡献者那里得到了帮助，从而让该规范翻译成了<button type="button" data-a11y-dialog-show="options-panel" class="link-like">多种语言</button>。请向他们致敬！
+Sass指南是我利用空暇时间维持的一个免费项目。不用多说,相信你也能够理解，持续更新、编写文档和其他相关事宜是一件工作量不小的事情。幸运的是，我从许多非常棒的贡献者那里得到了帮助，从而让该规范翻译成了<a href="#options-panel" class="link-like">多种语言</a>。请向他们致敬！
 
 现在，如果你想要为它做些贡献，一个很好的建议是：使用社交网络分享它，也可以在 [GitHub repository](https://github.com/HugoGiraudel/sass-guidelines) 上提交修正错误的 issue 或者 pull-request。