toc a11y

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

@@ -21,6 +21,10 @@ class TableOfContents {
       currentId: null
     }
     this.listen();
+
+    if (this.isOffcanvas) {
+      this.element.setAttribute("aria-expanded", false);
+    }
   }
   isOffcanvas() {
     return isMobile() || document.body.classList.contains(CLASSES.fullWidth);
@@ -54,11 +58,25 @@ class TableOfContents {
   }
   toggle(open) {
     this.state.opened = typeof open !== 'undefined' ? open : !this.state.opened;
-
     const classAction = this.state.opened ? 'add' : 'remove';
-    this.element.classList[classAction](CLASSES.isOpened);
+    const transitionDuration = this.state.opened ? 0 : this.getTransitionDuration();
+
+    // TODO: refacto timeout and css transition
+    setTimeout(() => {
+      this.element.setAttribute("aria-expanded", this.state.opened);
+    }, transitionDuration * 1000);
+
+    setTimeout(() => {
+      this.element.classList[classAction](CLASSES.isOpened);
+    }, 10)
+    
     document.documentElement.classList[classAction](CLASSES.offcanvasOpened);
   }
+  getTransitionDuration() {
+    let transitionDuration = getComputedStyle(this.element).getPropertyValue('--toc-transition-duration');
+    transitionDuration = parseFloat(transitionDuration.replace('s', ''))
+    return transitionDuration;
+  }
   update() {
     const scroll = document.documentElement.scrollTop || document.body.scrollTop;
     let id = null;

assets/sass/_theme/blocks/datatable.sass

 .block-datatable
     th
         white-space: nowrap
+    caption
+        color: $color-text-alt

assets/sass/_theme/design-system/table_of_contents.sass

 @mixin offcanvas-toc
+    --toc-transition-duration: 0.35s
     background: $toc-background-color
     position: fixed
     top: 0
@@ -8,11 +9,13 @@
     z-index: $zindex-toc
     width: calc(#{col-outside-container(4)} + #{$grid-gutter} * 2)
     transform: translateX(100%)
-    transition: 0.35s transform ease-in-out
+    transition: var(--toc-transition-duration) transform ease-in-out
     @include media-breakpoint-down(md)
         width: calc(100% - #{$grid-gutter})
     &.is-opened
         transform: translateX(0)
+    &[aria-expanded="false"]
+        display: none
     .toc-content
         display: flex
         flex-direction: column

layouts/partials/toc/container.html

@@ -3,7 +3,7 @@
 {{- if $isTocNeeded -}}
   {{- partial "toc/cta" -}}
 
-  <div class="toc-container" aria-hidden="true">
+  <div class="toc-container" aria-expanded="true" aria-labelledby="toc-title">
     <div class="toc-content">
       {{/* TODO : quelle balise pour le titre du toc ? */}}
       <div id="toc-title" class="toc-title">{{ i18n "commons.toc" }}</div>

layouts/partials/toc/cta.html

 <div class="toc-cta">
-  <button  class="toc-cta-title" aria-label="{{ i18n "commons.toc" }}">
+  <button  class="toc-cta-title" aria-label="{{ i18n "commons.toc" }}" id="toc-title">
     <span data-default="{{ i18n "commons.toc" }}">{{ i18n "commons.toc" }}</span>
   </button>
 </div>