diff --git a/assets/js/theme/design-system/modal.js b/assets/js/theme/design-system/modal.js index 054006bb9a54bdddf6ae0c7f58d80c0d167f2d45..53d6f67cc38553e0351a6064d4bb40701f927270 100644 --- a/assets/js/theme/design-system/modal.js +++ b/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(); - } } } diff --git a/layouts/partials/volumes/volume.html b/layouts/partials/volumes/volume.html index cdb899dd2515464f71a177c420bff335ab9345c2..d6a49058743ad40ca2f50c958cdeea92bd14ef4c 100644 --- a/layouts/partials/volumes/volume.html +++ b/layouts/partials/volumes/volume.html @@ -1,7 +1,7 @@ -<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 -}}