Gestion elements informatifs css (#573)

Co-authored-by: Olivia Simonet <91660674+Olivia206@users.noreply.github.com>

assets/sass/_theme/_utils.sass

+@import utils/a11y
 @import utils/fonts
 @import utils/colors
 @import utils/grid

assets/sass/_theme/utils/a11y.sass

+.sr-only
+    border: 0 !important
+    clip: rect(1px,1px,1px,1px) !important
+    clip-path: inset(50%) !important
+    height: 1px !important
+    overflow: hidden !important
+    padding: 0 !important
+    position: absolute !important
+    width: 1px !important
+    white-space: nowrap !important
+
+.sr-only-focusable:focus
+    clip: auto !important
+    clip-path: none !important
+    height: auto !important
+    margin: auto !important
+    overflow: visible !important
+    width: auto !important
+    white-space: normal !important
\ No newline at end of file

layouts/partials/blocks/templates/carousel.html

@@ -48,9 +48,14 @@
 
   {{ if .options.arrows }}
     <div class="carousel__arrows">
-      <button class="arrow-prev" aria-controls="carousel-items" type="button" aria-label='{{ safeHTML (i18n "commons.carousel.prev") }}'> </button>
+      <button class="arrow-prev" aria-controls="carousel-items" type="button" aria-label="{{ safeHTML (i18n "commons.carousel.prev")}}">
+        <span class="sr-only">{{ safeHTML (i18n "commons.carousel.prev") }}</span>
+      </button>
+
       <p class="counter"></p>
-      <button class="arrow-next" aria-controls="carousel-items" type="button" aria-label='{{  safeHTML (i18n "commons.carousel.next") }}'></button>
+      <button class="arrow-next" aria-controls="carousel-items" type="button" aria-label="{{ safeHTML (i18n "commons.carousel.next") }}">
+        <span class="sr-only">{{ safeHTML (i18n "commons.carousel.next") }}</span>
+      </button>
     </div>
   {{ end }}
 </div>
\ No newline at end of file