add gallery label

ec-europa · Oct 30, 2024 · 8e7bbe2 · 8e7bbe2
1 parent 90c4bdc
commit 8e7bbe2
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 0 deletions.
diff --git a/src/implementations/twig/components/gallery/README.md b/src/implementations/twig/components/gallery/README.md
@@ -36,6 +36,7 @@ npm install --save @ecl/twig-component-gallery
 - **"visible_items"** (integer) (default: 8) Number of visible items in an expandable gallery
 - **"expandable"** (boolean) (default: true) collapsible/expandable gallery
 - **"icon_path"** (string) (default: '') Path to the icon sprite
+- **"sr_gallery_label"** (string) (default: ''): additional label for the gallery, providing instruction; for screen readers
 - **"sr_video_label"** (string) (default: ''): additional label for the video items; for screen readers
 - **"sr_video_player"** (string) (default: ''): additional label for the video player; for screen readers
 - **"footer"** (object) (default: {}) Footer link

diff --git a/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap b/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap
@@ -3,6 +3,7 @@
 exports[`Gallery Default renders correctly 1`] = `
 <jest>
   <section
+    aria-label="Open gallery items to view images in original size, watch videos and share them"
     class="ecl-gallery"
     data-ecl-auto-init="Gallery"
     data-ecl-gallery=""
@@ -1160,6 +1161,7 @@ exports[`Gallery Default renders correctly 1`] = `
 exports[`Gallery Default renders correctly with extra attributes 1`] = `
 <jest>
   <section
+    aria-label="Open gallery items to view images in original size, watch videos and share them"
     class="ecl-gallery"
     data-ecl-auto-init="Gallery"
     data-ecl-gallery=""
@@ -2319,6 +2321,7 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = `
 exports[`Gallery Default renders correctly with extra class names 1`] = `
 <jest>
   <section
+    aria-label="Open gallery items to view images in original size, watch videos and share them"
     class="ecl-gallery custom-class custom-class--test"
     data-ecl-auto-init="Gallery"
     data-ecl-gallery=""
@@ -3476,6 +3479,7 @@ exports[`Gallery Default renders correctly with extra class names 1`] = `
 exports[`Gallery Default renders correctly with old data 1`] = `
 <jest>
   <section
+    aria-label="Open gallery items to view images in original size, watch videos and share them"
     class="ecl-gallery"
     data-ecl-auto-init="Gallery"
     data-ecl-gallery=""
@@ -4633,6 +4637,7 @@ exports[`Gallery Default renders correctly with old data 1`] = `
 exports[`Gallery Grid renders correctly 1`] = `
 <jest>
   <section
+    aria-label="Open gallery items to view images in original size, watch videos and share them"
     class="ecl-gallery ecl-gallery--grid ecl-gallery--template-0 ecl-gallery--col-3 ecl-gallery--ratio-3-2"
     data-ecl-auto-init="Gallery"
     data-ecl-gallery=""

diff --git a/src/implementations/twig/components/gallery/gallery.html.twig b/src/implementations/twig/components/gallery/gallery.html.twig
@@ -37,6 +37,7 @@
     - "sr_video_audio" (string) (default: ''): additional text to indicate if there is an audio description; for screen readers
     - "share_path" (optional) (string) (default: '')
   - "icon_path": (string) (default: '')
+  - "sr_gallery_label" (string) (default: ''): additional label for the gallery, providing instruction; for screen readers
   - "sr_video_label" (string) (default: ''): additional label for the video items; for screen readers
   - "sr_video_player" (string) (default: ''): additional label for the video player; for screen readers
   - "selected_item_id" (int) (default: 0)
@@ -66,6 +67,7 @@
 {% set _disable_hover = disable_hover|default(false) %}
 {% set _disable_overlay = disable_overlay|default(false) %}
 {% set _icon_path = icon_path|default('') %}
+{% set _sr_gallery_label = sr_gallery_label|default('') %}
 {% set _sr_video_label = sr_video_label|default('') %}
 {% set _expandable = expandable ?? true %}
 {% set _selected_item_id = selected_item_id|default(0) %}
@@ -130,6 +132,9 @@
 
 <section
   class="{{ _css_class }}"
+  {% if _sr_gallery_label is not empty and not _disable_overlay %}
+    aria-label="{{ _sr_gallery_label }}"
+  {% endif %}
   {{ _extra_attributes|raw }}
   data-ecl-gallery
 >

diff --git a/src/specs/components/gallery/demo/data.js b/src/specs/components/gallery/demo/data.js
@@ -4,6 +4,8 @@ const exampleLink = `${publicUrl}/example`;
 module.exports = {
   id: 'gallery-id',
   icon_path: '/icons.svg',
+  sr_gallery_label:
+    'Open gallery items to view images in original size, watch videos and share them',
   sr_video_label: 'Video',
   sr_video_player: 'Video player',
   items: [