diff --git a/assets/js/theme/design-system/modal.js b/assets/js/theme/design-system/modal.js
index b20356291000fb070a6cd0245540ea3fba97f284..a73a8a560b755c718ae7f72c39d43721a9a2e653 100644
--- a/assets/js/theme/design-system/modal.js
+++ b/assets/js/theme/design-system/modal.js
@@ -35,6 +35,9 @@ class Modal {
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);
}
});
@@ -45,12 +48,39 @@ class Modal {
});
}
+ innerFocus(event) {
+ const focusables = 'a, button, input, textarea, select, details, [tabindex], [contenteditable="true"]';
+ const elements = this.element.querySelectorAll(focusables);
+
+ const focusableInDialog = Array.from(elements).filter(element => element.tabIndex >= 0);
+ const firstFocusable = focusableInDialog[0];
+ const lastFocusable = focusableInDialog.at(-1);
+
+ console.log(firstFocusable, lastFocusable)
+ if (!this.state.isOpened) {
+ return;
+ }
+
+ if (!this.element.contains(event.target) && event.shiftKey) {
+ lastFocusable.focus();
+ }
+ else if (!this.element.contains(event.target)) {
+ firstFocusable.focus();
+ }
+
+ this.closeButtons[0].focus();
+ }
+
toggle(open = !this.state.isOpened) {
this.state.isOpened = open;
const classAction = this.state.isOpened ? 'add' : 'remove';
this.element.setAttribute('aria-hidden', !this.state.isOpened);
document.documentElement.classList[classAction](CLASSES.modalOpened);
+
+ if (!this.state.isOpened) {
+ this.button.focus();
+ }
}
}
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index 36bfc05f694f8a40c30986f8319dee74427c2ce0..1fab3885b1f56a1e1afccc22d26965e008e1c4e9 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -127,5 +127,6 @@ details
@include button-reset
@include icon-block(close, before)
position: absolute
+ padding: 0
right: 0
top: 0
\ No newline at end of file
diff --git a/assets/sass/_theme/sections/papers.sass b/assets/sass/_theme/sections/papers.sass
index 38d0927df81be61d1d7b24b6fc116e0848fae7ef..c02f9ae1056b37c2b117c233443d299446fff213 100644
--- a/assets/sass/_theme/sections/papers.sass
+++ b/assets/sass/_theme/sections/papers.sass
@@ -47,57 +47,81 @@
.papers__page
+ @include media-breakpoint-down(desktop)
+ .document-content
+ aside
+ order: 2
+ padding: 0 half($grid-gutter-sm)
+ @include media-breakpoint-up(desktop)
+ .paper-sidebar
+ @include container-margin-left
+ margin-top: 0
+ top: 0
+ left: 0
+ height: 100%
+ position: absolute
+ width: col-outside-container(4)
+ // > div
+ // @include sticky($spacing1)
+ .toc-container
+ border-top: 1px solid $color-border
+ padding-top: $spacing1
+ position: static
+ margin-left: 0
+ .media
+ width: col(2, 4)
+
.document-content
- .container
+ .content
+ margin-bottom: $spacing4
@include media-breakpoint-up(desktop)
- @include grid
- .content
+ padding-left: offset(4)
+ section + section
+ margin-top: $spacing2
@include media-breakpoint-up(desktop)
- grid-column: 5 / 12
- section + section
+ margin-top: $spacing4
+ .squared-button
+ margin-bottom: 0
+ margin-top: $spacing0
+ width: auto
+ h2
+ margin-bottom: $spacing0
+ .paper-essentials
+ h2
+ @include meta
margin-top: $spacing2
- @include media-breakpoint-up(desktop)
- margin-top: $spacing4
- .squared-button
- margin-bottom: 0
- margin-top: $spacing0
- width: auto
- .paper-essentials
- h2
- @include meta
+ &:first-of-type
+ margin-top: 0
+ .paper-body
+ h2
+ margin-bottom: $spacing2
+ .paper-authors
+ h2
+ @include h3
+ .authors
+ @include grid(2, desktop)
+ article
margin-top: $spacing2
- &:first-of-type
- margin-top: 0
- .paper-body
- h2
- margin-bottom: $spacing2
- .paper-authors
- h2
- @include h3
- .authors
- @include grid(2, desktop)
- article
- margin-top: $spacing2
- .name
- a
- @include h4
- @include stretched-link(before)
- text-decoration: none
- .document-nav
- @include media-breakpoint-up(desktop)
- grid-column: 1 / 5
- img
- width: col(2, 4)
- dl
- margin: 0
- dt
- @include meta
- margin-bottom: $spacing0
- &:not(:first-of-type)
- margin-top: $spacing2
- dd:first-of-type
- a
- display: flex
- flex-direction: column
- span
- order: 3
+ .name
+ a
+ @include h4
+ @include stretched-link(before)
+ text-decoration: none
+ .document-nav
+ // @include media-breakpoint-up(desktop)
+ // grid-column: 1 / 5
+ // img
+ // width: col(2, 4)
+ dl
+ margin: 0
+ dt
+ @include meta
+ margin-bottom: $spacing0
+ &:not(:first-of-type)
+ margin-top: $spacing2
+ dd:first-of-type
+ a
+ display: flex
+ flex-direction: column
+ span
+ order: 3
diff --git a/layouts/papers/single.html b/layouts/papers/single.html
index 634c48f1d9c6c71e54ee0a07b380275df8468fda..c150270cf582bc17d617ece80651ea6b68202b49 100644
--- a/layouts/papers/single.html
+++ b/layouts/papers/single.html
@@ -9,21 +9,19 @@
) -}}
<div class="document-content" itemscope itemtype="https://schema.org/ScholarlyArticle">
<meta itemprop="name" content="{{ partial "PrepareHTML" .Title }}">
+ {{ partial "papers/sidebar.html" . }}
<div class="container">
-
- {{ partial "papers/document-nav.html" . }}
-
<div class="content">
{{ partial "papers/abstract.html" . }}
{{ partial "papers/authors.html" . }}
{{ partial "papers/body.html" . }}
{{ partial "papers/references.html" . }}
</div>
-
</div>
+
+ {{ partial "blocks/list.html" . }}
</div>
-{{ partial "blocks/list.html" . }}
{{ end }}
diff --git a/layouts/partials/commons/menu.html b/layouts/partials/commons/menu.html
index 531f292ed865f4fd0c5774873782ab493ddfaefd..3d1bb6762b5047af475dc42509d38c09fdffedf6 100644
--- a/layouts/partials/commons/menu.html
+++ b/layouts/partials/commons/menu.html
@@ -29,7 +29,7 @@
{{- end -}}
{{- if and (gt (len .children) 0) $dropdown (eq $level 1) -}}
{{- $hasDropdown = true -}}
- {{- $attr = printf "id=\"dropdown-%s\" role=\"button\" aria-expanded=\"false\" aria-pressed=\"false\" tabindex=\"0\"" $slug -}}
+ {{- $attr = printf "id=\"dropdown-%s\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\"" $slug -}}
{{- end -}}
{{- if and (hasPrefix .target "http") (eq .kind "url") -}}
{{- $attr = " target=\"_blank\" rel=\"noreferrer\"" -}}
diff --git a/layouts/partials/papers/modal.html b/layouts/partials/papers/modal.html
index fcd07d34f6fb79e6742ee1182cb0cec690ed1ffa..d6de154ec25903674ec2adeb85b85ffff4098aff 100644
--- a/layouts/partials/papers/modal.html
+++ b/layouts/partials/papers/modal.html
@@ -1,7 +1,7 @@
-<div class="modal paper-modal" id="{{ .modalId }}" tabindex="-1" aria-labelledby="{{ .modalId }}Label" aria-hidden="true" aria-modal="true">
+<div class="modal paper-modal" id="{{ .modalId }}" aria-labelledby="{{ .modalId }}-label" aria-hidden="true" aria-modal="true" role="dialog">
<div class="modal-content">
<div class="modal-header">
- <h3 class="modal-title" id="{{ .modalId }}Label">{{ .title }}</h3>
+ <h3 class="modal-title" id="{{ .modalId }}-label">{{ .title }}</h3>
<button class="close" type="button" aria-label="{{ i18n "commons.close" }}"></button>
</div>
<div class="modal-body">
diff --git a/layouts/partials/papers/sidebar.html b/layouts/partials/papers/sidebar.html
new file mode 100644
index 0000000000000000000000000000000000000000..bd22031cf35d18d5464bb7ff5082b377a6f1d9e2
--- /dev/null
+++ b/layouts/partials/papers/sidebar.html
@@ -0,0 +1,77 @@
+<div class="paper-sidebar">
+ <div>
+ <aside class="document-nav">
+ <dl>
+ {{ range .GetTerms "volumes" }}
+ <dt>{{ i18n "volumes.singular_name" }}</dt>
+ <dd itemprop="isPartOf" itemscope itemtype="https://schema.org/PublicationVolume">
+ <a href="{{ .Permalink }}" itemprop="url">
+ <span itemprop="name">{{ .Title }}</span>
+ <div class="media">
+ {{- if .Params.image -}}
+ {{- partial "commons/image.html"
+ (dict
+ "image" .Params.image
+ "alt" .Title
+ "mobile" "327x388"
+ "tablet" "208x247"
+ "desktop" "408x485"
+ ) -}}
+ {{- else if site.Params.default_image.url -}}
+ {{- partial "commons/image-default.html" (dict "class" "img-fluid") -}}
+ {{- end -}}
+ </div>
+ </a>
+ </dd>
+ {{ end }}
+
+ {{ if isset .Params "type" }}
+ <dt>{{ i18n "volumes.nature" }}</dt>
+ <dd>{{ partial "PrepareHTML" .Params.Type }}</dd>
+ {{ end }}
+
+ {{ if isset .Params "keywords" }}
+ {{ if gt ( len .Params.keywords ) 0 }}
+ <dt>{{ i18n "volumes.keywords" }}</dt>
+ <dd itemprop="keywords">{{ delimit .Params.Keywords " " }}</dd>
+ {{ end }}
+ {{ end }}
+
+ {{ if isset .Params "lang" }}
+ <dt>{{ i18n "commons.language" }}</dt>
+ <dd itemprop="inLanguage" content="{{ .Params.Lang_iso }}">{{ .Params.Lang }}</dd>
+ {{ end }}
+
+ {{ if .Date }}
+ <dt>{{ i18n "commons.date" }}</dt>
+ <dd>
+ <time itemprop="datePublished" datetime="{{ .Date | time.Format "2006-01-02T15:04" }}">{{ .Date | time.Format ":date_long" }}</time>
+ </dd>
+ {{ end }}
+
+ {{ with .Params.dates.published }}
+ <dt>{{ i18n "papers.dates.published" }}</dt>
+ <dd>
+ <time itemprop="datePublished" datetime="{{ . | time.Format "2006-01-02T15:04" }}">{{ . | time.Format ":date_long" }}</time>
+ </dd>
+ {{ end }}
+
+ {{ with .Params.dates.accepted }}
+ <dt>{{ i18n "papers.dates.accepted" }}</dt>
+ <dd>
+ <time itemprop="datePublished" datetime="{{ . | time.Format "2006-01-02T15:04" }}">{{ . | time.Format ":date_long" }}</time>
+ </dd>
+ {{ end }}
+
+ {{ with .Params.dates.received }}
+ <dt>{{ i18n "papers.dates.received" }}</dt>
+ <dd>
+ <time itemprop="datePublished" datetime="{{ . | time.Format "2006-01-02T15:04" }}">{{ . | time.Format ":date_long" }}</time>
+ </dd>
+ {{ end }}
+ </dl>
+ </aside>
+ </div>
+</div>
+
+