[A11Y] Mise en conformité de l'élément <details> (#606)

Co-authored-by: Alexis BENOIT <alex@noesya.coop>

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

+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);
+    });
+}());

assets/js/theme/index.js

 import './body.js';
+import './design-system/accordion.js';
 import './design-system/clickToCopy';
 import './design-system/dropdowns';
 import './design-system/font';

layouts/partials/blocks/templates/definitions.html

 {{- $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>

layouts/partials/blocks/templates/embed.html

 {{- $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>

layouts/partials/blocks/templates/sound.html

 {{- $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>

layouts/partials/blocks/templates/video.html

 {{- $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>

layouts/partials/commons/transcription.html

 {{ 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/>") }}

layouts/partials/contents/list.html

 {{ $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) }}