From 7f51f85b020528326634e74e9e4e670c3136f2ec Mon Sep 17 00:00:00 2001
From: Olivia Simonet <91660674+Olivia206@users.noreply.github.com>
Date: Mon, 7 Oct 2024 11:05:03 +0200
Subject: [PATCH] =?UTF-8?q?[A11Y]=20Mise=20en=20conformit=C3=A9=20de=20l'?=
=?UTF-8?q?=C3=A9l=C3=A9ment=20<details>=20(#606)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: Alexis BENOIT <alex@noesya.coop>
---
assets/js/theme/design-system/accordion.js | 33 +++++++++++++++++++
assets/js/theme/index.js | 1 +
.../blocks/templates/definitions.html | 11 ++++---
layouts/partials/blocks/templates/embed.html | 2 ++
layouts/partials/blocks/templates/sound.html | 2 ++
layouts/partials/blocks/templates/video.html | 2 ++
layouts/partials/commons/transcription.html | 7 ++--
layouts/partials/contents/list.html | 7 ++--
8 files changed, 56 insertions(+), 9 deletions(-)
create mode 100644 assets/js/theme/design-system/accordion.js
diff --git a/assets/js/theme/design-system/accordion.js b/assets/js/theme/design-system/accordion.js
new file mode 100644
index 00000000..e3034a76
--- /dev/null
+++ b/assets/js/theme/design-system/accordion.js
@@ -0,0 +1,33 @@
+function Accordion(element) {
+ this.element = element;
+ this.button = this.element.querySelector('summary');
+
+ this.state = {
+ isOpened: false
+ };
+
+ this.listen();
+}
+
+Accordion.prototype.listen = function() {
+ var self = this;
+
+ this.button.addEventListener('click', function() {
+ self.toggleAccordion();
+ });
+};
+
+Accordion.prototype.toggleAccordion = function(open) {
+ if (typeof open === 'undefined') {
+ open = !this.state.isOpened;
+ }
+ this.state.isOpened = open;
+ this.button.setAttribute('aria-expanded', this.state.isOpened);
+};
+
+(function () {
+ var accordions = document.querySelectorAll('details');
+ Array.prototype.forEach.call(accordions, function(accordion) {
+ new Accordion(accordion);
+ });
+}());
diff --git a/assets/js/theme/index.js b/assets/js/theme/index.js
index 3cc191d2..64cf4c5f 100644
--- a/assets/js/theme/index.js
+++ b/assets/js/theme/index.js
@@ -1,4 +1,5 @@
import './body.js';
+import './design-system/accordion.js';
import './design-system/clickToCopy';
import './design-system/dropdowns';
import './design-system/font';
diff --git a/layouts/partials/blocks/templates/definitions.html b/layouts/partials/blocks/templates/definitions.html
index d61c4ac0..373bb6ee 100644
--- a/layouts/partials/blocks/templates/definitions.html
+++ b/layouts/partials/blocks/templates/definitions.html
@@ -1,7 +1,9 @@
{{- $block := .block -}}
{{- $block_class := partial "GetBlockClass" .block -}}
+{{- $block_index := .index -}}
{{- with .block.data -}}
+ {{ .Params.position }}
<div class="{{ $block_class }}">
<div class="container">
<div class="block-content">
@@ -11,10 +13,11 @@
"description" .description
)}}
<div class="definitions">
- {{- range .elements }}
- <details itemscope itemtype="https://schema.org/DefinedTerm">
- <summary itemprop="name">{{ .title | safeHTML }}</summary>
- <p itemprop="description">{{ .description | safeHTML }}</p>
+ {{- range $index, $element := .elements }}
+ {{ $id := printf "block-%d-element-%d" $block_index $index }}
+ <details id="{{$id}}" itemscope itemtype="https://schema.org/DefinedTerm">
+ <summary itemprop="name" aria-controls="#{{ $id }}" aria-expanded="false">{{ $element.title | safeHTML }}</summary>
+ <p itemprop="description">{{ $element.description | safeHTML }}</p>
</details>
{{ end -}}
</div>
diff --git a/layouts/partials/blocks/templates/embed.html b/layouts/partials/blocks/templates/embed.html
index 44a59c72..2e68469d 100644
--- a/layouts/partials/blocks/templates/embed.html
+++ b/layouts/partials/blocks/templates/embed.html
@@ -1,5 +1,6 @@
{{- $block := .block -}}
{{- $block_class := partial "GetBlockClass" .block -}}
+{{- $block_index := .index -}}
{{- with .block.data -}}
<div class="{{ $block_class }}">
@@ -15,6 +16,7 @@
{{ end -}}
{{ partial "commons/transcription" ( dict
+ "block_index" $block_index
"transcription" .transcription
) }}
</div>
diff --git a/layouts/partials/blocks/templates/sound.html b/layouts/partials/blocks/templates/sound.html
index c6fc6f02..219deac4 100644
--- a/layouts/partials/blocks/templates/sound.html
+++ b/layouts/partials/blocks/templates/sound.html
@@ -1,5 +1,6 @@
{{- $block := .block -}}
{{- $block_class := partial "GetBlockClass" .block -}}
+{{- $block_index := .index -}}
{{- with .block.data -}}
<div class="{{ $block_class }}">
@@ -23,6 +24,7 @@
{{ end }}
{{ partial "commons/transcription" ( dict
+ "block_index" $block_index
"transcription" .transcription
) }}
</div>
diff --git a/layouts/partials/blocks/templates/video.html b/layouts/partials/blocks/templates/video.html
index 00301359..d38503b2 100644
--- a/layouts/partials/blocks/templates/video.html
+++ b/layouts/partials/blocks/templates/video.html
@@ -1,5 +1,6 @@
{{- $block := .block -}}
{{- $block_class := partial "GetBlockClass" .block -}}
+{{- $block_index := .index -}}
{{- with .block.data -}}
<div class="{{ $block_class }}">
@@ -31,6 +32,7 @@
{{ end }}
{{ partial "commons/transcription" ( dict
+ "block_index" $block_index
"transcription" .transcription
) }}
</div>
diff --git a/layouts/partials/commons/transcription.html b/layouts/partials/commons/transcription.html
index fb2908e6..1821ec6b 100644
--- a/layouts/partials/commons/transcription.html
+++ b/layouts/partials/commons/transcription.html
@@ -1,7 +1,10 @@
{{ if (partial "GetTextFromHTML" .transcription) }}
+{{ $block_index := .block_index }}
+{{ $id := printf "block-%d-transcription" $block_index}}
+
<div class="transcription">
- <details>
- <summary>{{ i18n "commons.accessibility.transcription" }}</summary>
+ <details id="{{$id}}">
+ <summary aria-controls="#{{ $id }}" aria-expanded="false">{{ i18n "commons.accessibility.transcription" }}</summary>
<p>
{{- $transcription := partial "PrepareHTML" .transcription -}}
{{ safeHTML (replace $transcription "\n" "<br/>") }}
diff --git a/layouts/partials/contents/list.html b/layouts/partials/contents/list.html
index 1219b413..c8fde95d 100644
--- a/layouts/partials/contents/list.html
+++ b/layouts/partials/contents/list.html
@@ -1,12 +1,13 @@
{{ $context := . }}
{{- if .Params.contents -}}
<div class="blocks">
- {{- range .Params.contents -}}
+ {{- range $index, $content := .Params.contents -}}
{{ if eq .kind "block" }}
- {{ $template := printf "blocks/templates/%s.html" .template }}
+ {{ $template := printf "blocks/templates/%s.html" $content.template }}
{{ partial $template (dict
- "block" .
+ "block" $content
"context" $context
+ "index" $index
)}}
{{- else if (eq .kind "heading") -}}
{{ $headingId := .slug | default (urlize .title) }}
--
GitLab