fix a11y slider

osunyorg · Oct 4, 2024 · 66b04b0 · 66b04b0
2 parents 4713ddc + 6708cc5
commit 66b04b0
Show file tree

Hide file tree

Showing 20 changed files with 113 additions and 50 deletions.
diff --git a/assets/js/theme/components/carousel/manager.js b/assets/js/theme/components/carousel/manager.js
@@ -34,10 +34,15 @@ window.osuny.carousel.manager = {
         }
     },
     _setCarouselAriaDescribedBy (carousel) {
-        var id = carousel.getAttribute('id');
-        carousel.querySelectorAll('button').forEach(function (child) {
-            child.setAttribute('aria-describedby', String(id));
-        }.bind(this));
+        var parent = carousel.parentElement;
+        var blockTitle = parent ? parent.querySelector('.block-title') : null;    
+
+        if (blockTitle && blockTitle.getAttribute('id')) {
+            var id = blockTitle.getAttribute('id');
+            carousel.querySelectorAll('button').forEach(function (child) {
+                child.setAttribute('aria-describedby', String(id));
+            }.bind(this));
+        }
     },
     _initializeListeners: function () {
         window.addEventListener('resize', this._resize.bind(this));

diff --git a/assets/js/theme/design-system/accordion.js b/assets/js/theme/design-system/accordion.js
@@ -0,0 +1,35 @@
+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');
+    console.log(accordions)
+    Array.prototype.forEach.call(accordions, function(accordion) {
+        console.log(accordion)
+        new Accordion(accordion);
+    });
+}());
diff --git 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/i18n/en.yml b/i18n/en.yml
@@ -116,7 +116,7 @@ commons:
   language: Language
   lightbox:
     link:
-      title: Open image
+      title: Enlarge image
   link:
     blank: external link
     blank_aria: “{{ .Title }}” - external link

diff --git a/i18n/fr.yml b/i18n/fr.yml
@@ -116,7 +116,7 @@ commons:
   language: Langue
   lightbox:
     link:
-      title: Ouvrir l'image
+      title: Agrandir l'image
   link:
     blank: lien externe
     blank_aria: “{{ .Title }}” - lien externe

diff --git a/i18n/pt.yml b/i18n/pt.yml
@@ -105,7 +105,7 @@ commons:
   language: Idioma
   lightbox:
     link:
-      title: Abrir a imagem
+      title: Ampliar a imagem
   link:
     blank: link externo
     blank_aria: “{{ .Title }}” - link externo

diff --git 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
@@ -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/gallery.html b/layouts/partials/blocks/templates/gallery.html
@@ -1,23 +1,24 @@
 {{- $block := .block -}}
 {{- $block_class := partial "GetBlockClass" .block -}}
+{{- $block_index := .index -}}
+
 {{- with .block.data -}}
   {{- $layout := .layout | default "grid" }}
   <div class="{{ $block_class }}">
     <div class="container">
       <div class="block-content">
         {{ partial "blocks/top.html" (dict
+          "block_index" $block_index
           "title" $block.title
           "heading_level" $block.ranks.self
           "description" .description
         )}}
-
         {{- if and (eq $layout "carousel") (gt (len .images) 1) -}}
-            {{ partial "blocks/templates/carousel.html" (dict 
-            "content" .images
-            "options" site.Params.blocks.gallery.carousel
-            "partial" "blocks/templates/gallery/carousel-image.html"
-            )}}
-
+          {{ partial "blocks/templates/carousel.html" (dict 
+              "content" .images
+              "options" site.Params.blocks.gallery.carousel
+              "partial" "blocks/templates/gallery/carousel-image.html"
+          )}}
         {{ else }}
           {{ partial "blocks/templates/gallery/images.html" . }}
         {{- end -}}

diff --git a/layouts/partials/blocks/templates/posts.html b/layouts/partials/blocks/templates/posts.html
@@ -1,6 +1,6 @@
 {{- $block := .block -}}
 {{- $block_class := partial "GetBlockClass" .block -}}
-
+{{- $block_index := .index -}}
 {{- $term := false -}}
 {{- $layout := .block.data.layout | default "grid" -}}
 
@@ -28,6 +28,7 @@
           {{- end -}}
 
           {{ partial "blocks/top.html" (dict
+            "block_index" $block_index
             "title" $block.title
             "heading_level" $block.ranks.self
             "link" $link

diff --git a/layouts/partials/blocks/templates/posts/carousel.html b/layouts/partials/blocks/templates/posts/carousel.html
@@ -8,9 +8,9 @@
 {{ $template := printf "posts/post.html" }}
 
 {{ partial "blocks/templates/carousel.html" (dict 
-  "content" .posts
-  "options" site.Params.blocks.posts.carousel
-  "partial" $template
-  "heading_tag" $heading_tag
-  "block_options" $options
+    "content" .posts
+    "options" site.Params.blocks.posts.carousel
+    "partial" $template
+    "heading_tag" $heading_tag
+    "block_options" $options
 )}}
diff --git 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/testimonials.html b/layouts/partials/blocks/templates/testimonials.html
@@ -1,6 +1,7 @@
 {{- $block := .block -}}
 {{- $block_class := partial "GetBlockClass" .block -}}
 {{- $is_carousel := false -}}
+{{- $block_index := .index -}}
 
 {{- with .block.data -}}
   {{ if .testimonials }}
@@ -13,11 +14,11 @@
   <div class="container">
     <div class="block-content">
       {{ partial "blocks/top.html" (dict
-      "title" $block.title
-      "heading_level" $block.ranks.self
-      "hidden" true
+          "block_index" $block_index
+          "title" $block.title
+          "heading_level" $block.ranks.self
+          "hidden" true
       )}}
-
       <div class="testimonials">
         {{- if $is_carousel }}
           {{ partial "blocks/templates/carousel.html" (dict 
@@ -28,8 +29,8 @@
         {{ else }}
           {{ range .testimonials}}
             {{ partial "blocks/templates/testimonials/single.html" (dict
-            "is_carousel" false
-            "params" .
+                "is_carousel" false
+                "params" .
             )}}
           {{ end }}
         {{ end }}

diff --git a/layouts/partials/blocks/templates/timeline.html b/layouts/partials/blocks/templates/timeline.html
@@ -1,5 +1,6 @@
 {{- $block := .block -}}
 {{- $block_class := partial "GetBlockClass" .block -}}
+{{- $block_index := .index -}}
 
 {{- $layout := .block.data.layout | default "vertical" -}}
 <div class="{{ $block_class }}">
@@ -17,6 +18,7 @@
           ) -}}
         {{ with .block.data }}
           {{ partial "blocks/templates/carousel.html" (dict 
+            "block_index" $block_index
             "content" .events
             "options" site.Params.blocks.timeline.carousel
             "partial" $template

diff --git 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/blocks/top.html b/layouts/partials/blocks/top.html
@@ -1,14 +1,19 @@
 {{ $heading_level := .heading_level | default 2 }}
+{{ $id_title := "" }}
+{{ if .block_index }}
+  {{ $block_index := .block_index }}
+  {{ $id_title = printf "id='block-%d-carousel'" $block_index }}
+{{ end }}
 
 {{/*  handle boolean issue  */}}
 {{ if eq $heading_level false }}
   {{ $heading_level = 2 }}
 {{ end }}
 
 {{ $heading_tag := (dict 
-  "open" ((printf "<h%d class='block-title'>" $heading_level) | safeHTML)
+  "open" ((printf "<h%d %s class='block-title'>" $heading_level $id_title) | safeHTML)
   "close" ((printf "</h%d>" $heading_level) | safeHTML)
-  ) }}
+)}}
 
 {{ if or .title .description }}
   <div class="top {{ if .hidden }}hidden{{ end }}">

diff --git a/layouts/partials/commons/image-figure.html b/layouts/partials/commons/image-figure.html
@@ -13,15 +13,12 @@
 
   {{ if $image }}
     {{ with .image}}
-      <figure 
+      <figure role="figure"
               class="{{ $image_class }}{{ if $is_carousel }} carousel__slide {{ end }}{{ if $is_lightbox }} lightbox-figure {{ end }}" 
-            {{ if $is_carousel }} 
               id="carousel-item-{{$index}}"
-            {{ else }}
-              {{- with or .text .alt .credit }} 
+              {{ with or .text .alt .credit }} 
                 aria-label="{{ . | plainify }}" 
               {{ end }}
-            {{ end }}
       >
         {{ partial "commons/image.html" (dict
           "image"  .id
@@ -39,7 +36,7 @@
         {{ end }}
 
         {{ partial "commons/lightbox/lightbox-launcher.html" (dict
-          "description" $lightbox_text
+          "description" (plainify $lightbox_text)
           "image" .id
         ) }}
       {{ end }}

diff --git a/layouts/partials/commons/lightbox/lightbox-launcher.html b/layouts/partials/commons/lightbox/lightbox-launcher.html
@@ -1,8 +1,10 @@
-<a  class="glightbox"
-role="button"
-data-glightbox="type: image;{{ if .description }}description: {{ partial "PrepareHTML" .description }}{{ end }}"
-href="{{- partial "GetLightboxUrl" .image -}}"
-title="{{- i18n "commons.lightbox.link.title" -}}"
-aria-label="{{- i18n "commons.lightbox.link.title" -}}">
-    <span class="sr-only">{{- i18n "commons.lightbox.link.title" -}}</span>
+{{ $linkTitle := (printf "%s %s" (i18n "commons.lightbox.link.title") (cond .description (print " " .description) "")) }}
+
+<a class="glightbox"
+    aria-hidden="true"
+    tabindex="-1"
+    role="button"
+    data-glightbox="type: image;{{ if .description }}description: {{ partial "PrepareHTML" .description }}{{ end }}"
+    href="{{- partial "GetLightboxUrl" .image -}}">
+  <span class="sr-only">{{ $linkTitle }}</span>
 </a>
diff --git 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
@@ -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) }}