[a11y] Slider pagination : ajout de `aria-describedby` (#779)

assets/js/theme/design-system/sliders/Factory.js

@@ -15,11 +15,12 @@ osuny.SlidersFactory = function () {
 };
 
 osuny.SlidersFactory.prototype.create = function (element, index) {
-    var title = this.getTitle(element, index);
+    var titleId;
 
     // Check if carousel as more than one slide
     if (element.children.length > 1) {
-        this.sliders.push(new osuny.Slider(element, title));
+        titleId = this.getTitleId(element, index);
+        this.sliders.push(new osuny.Slider(element, titleId));
     }
 };
 
@@ -41,8 +42,8 @@ osuny.SlidersFactory.prototype.checkDisableCondition = function (slider, index)
     }
 };
 
-osuny.SlidersFactory.prototype.getTitle = function (element, index) {
-    var title = osuny.i18n.slider.default_title + ' ' + index,
+osuny.SlidersFactory.prototype.getTitleId = function (element, index) {
+    var titleElement,
         block = element.closest('.block-titled'),
         blockTitle;
 
@@ -51,10 +52,23 @@ osuny.SlidersFactory.prototype.getTitle = function (element, index) {
     }
 
     if (blockTitle) {
-        title = blockTitle.innerText;
+        titleElement = blockTitle;
+    } else {
+        titleElement = this.createDefaultTitle(element, index);
+        element.parentElement.prepend(titleElement);
     }
 
-    return title;
+    titleElement.id = 'slider-title-' + index;
+
+    return titleElement.id;
+};
+
+osuny.SlidersFactory.prototype.createDefaultTitle = function (element, index) {
+    var titleElement = document.createElement('p');
+    titleElement.innerText = osuny.i18n.slider.default_title + ' ' + index;
+    titleElement.classList.add('sr-only');
+
+    return titleElement;
 };
 
 osuny.SlidersFactory.prototype.listen = function () {

assets/js/theme/design-system/sliders/Pagination.js

@@ -7,7 +7,7 @@ osuny.SliderPagination = function (slider) {
     this.container = document.createElement('ul');
     this.container.classList.add('slider-pagination');
     this.container.setAttribute('aria-label', osuny.i18n.slider.pagination_list);
-    this.container.setAttribute('aria-description', this.slider.title);
+    this.container.setAttribute('aria-describedby', this.slider.titleId);
     this.slider.controls.appendChild(this.container);
     this.create();
 };
@@ -25,6 +25,7 @@ osuny.SliderPagination.prototype.createButton = function (index) {
         a11yText = osuny.i18n.slider.goto + ' ' + (index + 1);
 
     osuny.utils.insertSROnly(button, a11yText);
+    button.setAttribute('aria-describedby', this.slider.titleId);
 
     item.appendChild(button);
     this.container.appendChild(item);

assets/js/theme/design-system/sliders/Slider.js

@@ -10,9 +10,9 @@ osuny.sliderComponents = {
     pagination: osuny.SliderPagination
 };
 
-osuny.Slider = function (list, title) {
+osuny.Slider = function (list, titleId) {
     this.list = list;
-    this.title = title;
+    this.titleId = titleId;
     this.setState();
     this.setOptions();
 };

assets/sass/_theme/blocks/base.sass

@@ -9,7 +9,7 @@
         margin-bottom: calc(#{$spacing-3} + #{$spacing-2})
         .block-title + .description
             margin-top: $spacing-3
-        .block-title.hidden + .description
+        .block-title.sr-only + .description
             margin-top: 0
     @include in-page-without-sidebar
         --block-space-y: #{$block-space-y-desktop}

assets/sass/_theme/blocks/key_figures.sass

@@ -10,7 +10,7 @@
             @include grid(4, desktop)
         &.odd-items
             @include grid(3, desktop)
-    .top:not(.hidden) + ul
+    .top + ul
         margin-top: $spacing-4
         align-items: baseline
     li > span

assets/sass/_theme/utils/a11y.sass

@@ -5,6 +5,7 @@
     height: 1px !important
     overflow: hidden !important
     padding: 0 !important
+    margin: 0 !important
     position: absolute !important
     width: 1px !important
     white-space: nowrap !important

assets/sass/_theme/utils/shame.sass

@@ -116,7 +116,7 @@
         display: flex
         .block-title
             width: columns(4)
-            &:not(.hidden) + .description
+            + .description
                 margin-left: var(--grid-gutter)
         .description
             margin-top: 0

layouts/partials/blocks/templates/testimonials.html

@@ -8,7 +8,7 @@
         {{ partial "blocks/top.html" (dict
             "title" $block.title
             "heading_level" $block.ranks.self
-            "hidden" true
+            "sr_only" true
         )}}
         <div class="testimonials" data-slider="{{ site.Params.blocks.testimonials.slider | encoding.Jsonify }}">
           {{ range .testimonials }}

layouts/partials/blocks/top.html

@@ -11,7 +11,7 @@
   )}}
 
 {{ if or .title .description }}
-  <div class="top {{ if .hidden }}hidden{{ end }}">
+  <div class="top {{ if .sr_only }}sr-only{{ end }}">
     {{ if .title }}
       {{ $heading_tag.open }}
         {{- if .link -}}