Merge pull request #113 from noesya/features/focus-trap

Features/focus trap

assets/js/theme/design-system/modal.js

@@ -29,15 +29,16 @@ class Modal {
         this.closeButtons.forEach(button => {
             button.addEventListener('click', () => {
                 this.toggle(false);
+                this.button.focus()
             });
         });
 
         window.addEventListener('keydown', (event) => {
             if (event.keyCode === 27 || event.key === 'Escape') {
                 this.toggle(false);
-            } else if (event.key === "Tab") {
-                // TODO fix a11y inner focus
-                // this.innerFocus(event);
+            } else if (event.key === "Tab" && this.state.isOpened) {
+                this.innerFocus(event);
+                event.preventDefault();
             }
         });
 
@@ -66,8 +67,7 @@ class Modal {
         else if (!this.element.contains(event.target)) {
             firstFocusable.focus();
         }
-
-        this.closeButtons[0].focus();
+        firstFocusable.focus();
     }
 
     toggle(open = !this.state.isOpened) {
@@ -76,10 +76,6 @@ class Modal {
 
         this.element.setAttribute('aria-hidden', !this.state.isOpened);
         document.documentElement.classList[classAction](CLASSES.modalOpened);
-
-        if (!this.state.isOpened) {
-            this.button.focus();
-        }
     }
 
 }

layouts/partials/volumes/volume.html

-<article class="volume">
+<article class="volume" itemscope itemtype="https://schema.org/Book https://schema.org/PublicationVolume">
   <hgroup>
-    <p class="suptitle">{{ i18n "volumes.volume_number" (dict "Number" .Params.Number) }}</p>
-    <h2><a href="{{ .Permalink }}" title="{{ i18n "commons.more_aria" (dict "Title" .Title) }}">{{ partial "PrepareHTML" .Title }}</a></h2>
+    <p class="suptitle" itemprop="volumeNumber">{{ i18n "volumes.volume_number" (dict "Number" .Params.Number) }}</p>
+    <h2><a href="{{ .Permalink }}" title="{{ i18n "commons.more_aria" (dict "Title" .Title) }}" itemprop="name">{{ partial "PrepareHTML" .Title }}</a></h2>
   </hgroup>
   <div class="media">
     {{- if .Params.image -}}