Visionneuse ajustements d'accessibilité (#736)

Co-authored-by: Olivia206 <olivia.simonet206@gmail.com>

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

@@ -6,7 +6,9 @@ window.osuny.Extendable = function (element) {
     this.element = element;
     this.buttons = document.querySelectorAll('[aria-controls=' + this.element.id + ']');
     this.state = {
-        opened: false
+        opened: false,
+        // Button who opened the extendable
+        openedByButton: null
     };
     this.options = {
         // This attribute determine if extendable should close others when opened
@@ -20,12 +22,21 @@ window.osuny.Extendable.prototype.listen = function () {
         a11yClick(button, function (event) {
             event.preventDefault();
             this.toggle();
+            this.a11yFocus(button);
         }.bind(this));
     }.bind(this));
 
     this.element.addEventListener('extendable-close', this.toggle.bind(this, true));
 };
 
+window.osuny.Extendable.prototype.a11yFocus = function (button) {
+    if (this.state.opened) {
+        this.state.openedByButton = button;
+    } else if (this.state.openedByButton) {
+        this.state.openedByButton.focus();
+    }
+};
+
 window.osuny.Extendable.prototype.toggle = function (forceClose) {
     this.state.opened = forceClose ? false : !this.state.opened;
 
@@ -34,15 +45,18 @@ window.osuny.Extendable.prototype.toggle = function (forceClose) {
     }
 
     this.buttons.forEach(function (button) {
-        button.setAttribute('aria-expanded', this.state.opened);
+        if (button.getAttribute('aria-expanded')) {
+            button.setAttribute('aria-expanded', this.state.opened);
+        }
     }.bind(this));
 };
 
 window.osuny.Extendable.prototype.closeSiblings = function () {
-    var siblings = this.element.parentNode.querySelectorAll('button[aria-expanded="true"]');
-
-    siblings.forEach(function (button) {
-        button.click();
+    var extendables = this.element.parentNode.querySelectorAll('.extendable');
+    extendables.forEach(function (extendable) {
+        if (this.element !== extendable) {
+            extendable.dispatchEvent(new Event('extendable-close'));
+        }
     }.bind(this));
 };
 

assets/sass/_theme/components/lightbox.sass

@@ -29,7 +29,7 @@
         position: absolute
         right: $spacing-2
         z-index: 1
-        button
+        > button
             @include button-reset
             @include meta
             background-color: var(--color-background)
@@ -79,6 +79,7 @@
             @include meta
             color: var(--color-text-alt)
         &__close
+            @include button-reset
             cursor: pointer
             position: absolute
             right: $spacing-2

i18n/en.yml

@@ -127,10 +127,13 @@ commons:
   in: In
   language: Language
   lightbox:
-    close: Close
+    close:      
+      a11y_credits: Close credits
+      a11y_informations: Close informations
+      text: Close
     controls:
-      credits: Display image credits
-      informations: Display image information
+      credits: Image credits
+      informations: Image information
       previous: Go to previous image
       next: Go to the next image
       close: Close the viewer

i18n/fr.yml

@@ -136,10 +136,13 @@ commons:
   index: Accueil - {{ .Title }}
   language: Langue
   lightbox:
-    close: Fermer
+    close:
+      a11y_credits: Fermer les crédits
+      a11y_informations: Fermer les informations
+      text: Fermer
     controls:
-      credits: Afficher les crédits de l'image
-      informations: Afficher les informations de l'image
+      credits: Crédits de l'image
+      informations: Informations de l'image
       previous: Aller à l'image précédente
       next: Aller à l'image suivante
       close: Fermer la visionneuse

i18n/pt.yml

@@ -116,8 +116,20 @@ commons:
   in: Em
   language: Idioma
   lightbox:
-    link:
-      title: Ampliar a imagem
+    close:      
+      a11y_credits: Fechar créditos
+      a11y_informations: Fechar informações
+      text: Fechar
+    controls:
+      credits: Créditos da imagem
+      informations: Informações da imagem
+      previous: Ir para a imagem anterior
+      next: Ir para a próxima imagem
+      close: Fechar a visualização
+    credits: Créditos
+    informations: Informações
+    button: Ver imagem ampliada
+    title: Visualizador de imagens
   link:
     blank: link externo
     blank_aria: “{{ .Title }}” - link externo

layouts/partials/commons/lightbox/lightbox.html

@@ -8,7 +8,9 @@
     <div id="lightbox-detail-information" class="lightbox-detail extendable" data-extendable-close-siblings="true">
       <p class="lightbox-detail__title">{{ safeHTML (i18n "commons.lightbox.informations") }}</p>
       <div id="lightbox-information"></div>
-      <p class="lightbox-detail__close" role="button" aria-controls="lightbox-detail-information" aria-expanded="false" tabindex="0">{{ safeHTML (i18n "commons.lightbox.close") }}</p>
+      <button class="lightbox-detail__close" aria-controls="lightbox-detail-information" tabindex="0" aria-label="{{ safeHTML (i18n "commons.lightbox.close.a11y_informations") }}">
+        {{ safeHTML (i18n "commons.lightbox.close.text") }}
+      </button>
     </div>
 
     <button class="lightbox-button-credit" aria-controls="lightbox-detail-credit" aria-expanded="false">
@@ -17,7 +19,9 @@
     <div id="lightbox-detail-credit" class="lightbox-detail extendable" data-extendable-close-siblings="true">
       <p class="lightbox-detail__title">{{ safeHTML (i18n "commons.lightbox.credits") }}</p>
       <div id="lightbox-credit"></div>
-      <p class="lightbox-detail__close" role="button" aria-controls="lightbox-detail-credit" aria-expanded="false" tabindex="0">{{ safeHTML (i18n "commons.lightbox.close") }}</p>
+      <button class="lightbox-detail__close" aria-controls="lightbox-detail-credit" tabindex="0" aria-label="{{ safeHTML (i18n "commons.lightbox.close.a11y_credits") }}">
+        {{ safeHTML (i18n "commons.lightbox.close.text") }}
+      </button>
     </div>
 
     <button class="lightbox-button-previous">