Merge branch 'v4-dev' into FRONT-4648-print

ec-europa · Nov 5, 2024 · 1afeff7 · 1afeff7
2 parents e5c9d60 + 7789621
commit 1afeff7
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 14 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/implementations/twig/components/search-form/__snapshots__/search-form.test.js.snap b/src/implementations/twig/components/search-form/__snapshots__/search-form.test.js.snap
@@ -9,9 +9,16 @@ exports[`Search Form Default renders correctly 1`] = `
     <div
       class="ecl-form-group"
     >
+      <label
+        class="ecl-form-label ecl-search-form__label"
+        for="search-input-id"
+        id="search-input-id-label"
+      >
+        Search
+      </label>
       <input
         class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
-        id="search-input"
+        id="search-input-id"
         placeholder="Placeholder text"
         type="search"
       />
@@ -56,9 +63,16 @@ exports[`Search Form Default renders correctly with extra attributes 1`] = `
     <div
       class="ecl-form-group"
     >
+      <label
+        class="ecl-form-label ecl-search-form__label"
+        for="search-input-id"
+        id="search-input-id-label"
+      >
+        Search
+      </label>
       <input
         class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
-        id="search-input"
+        id="search-input-id"
         placeholder="Placeholder text"
         type="search"
       />
@@ -101,9 +115,16 @@ exports[`Search Form Default renders correctly with extra class names 1`] = `
     <div
       class="ecl-form-group"
     >
+      <label
+        class="ecl-form-label ecl-search-form__label"
+        for="search-input-id"
+        id="search-input-id-label"
+      >
+        Search
+      </label>
       <input
         class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
-        id="search-input"
+        id="search-input-id"
         placeholder="Placeholder text"
         type="search"
       />
@@ -146,9 +167,16 @@ exports[`Search Form Default renders correctly with extra classes on the button
     <div
       class="ecl-form-group"
     >
+      <label
+        class="ecl-form-label ecl-search-form__label"
+        for="search-input-id"
+        id="search-input-id-label"
+      >
+        Search
+      </label>
       <input
         class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
-        id="search-input"
+        id="search-input-id"
         placeholder="Placeholder text"
         type="search"
       />
@@ -191,9 +219,16 @@ exports[`Search Form Default renders correctly with extra classes on the input 1
     <div
       class="ecl-form-group"
     >
+      <label
+        class="ecl-form-label ecl-search-form__label"
+        for="search-input-id"
+        id="search-input-id-label"
+      >
+        Search
+      </label>
       <input
         class="ecl-text-input ecl-text-input--m ecl-search-form__text-input input-extra-class"
-        id="search-input"
+        id="search-input-id"
         placeholder="Placeholder text"
         type="search"
       />
@@ -236,9 +271,16 @@ exports[`Search Form Default renders correctly with extra form elements 1`] = `
     <div
       class="ecl-form-group"
     >
+      <label
+        class="ecl-form-label ecl-search-form__label"
+        for="search-input-id"
+        id="search-input-id-label"
+      >
+        Search
+      </label>
       <input
         class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
-        id="search-input"
+        id="search-input-id"
         placeholder="Placeholder text"
         type="search"
       />

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: [

diff --git a/src/specs/components/search-form/demo/data--ec.js b/src/specs/components/search-form/demo/data--ec.js
@@ -1,7 +1,8 @@
 // Simple content for demo
 module.exports = {
+  label: 'Search',
   text_input: {
-    id: 'search-input',
+    id: 'search-input-id',
     label: 'Search',
     placeholder: 'Placeholder text',
   },

diff --git a/src/specs/components/search-form/demo/data--eu.js b/src/specs/components/search-form/demo/data--eu.js
@@ -1,7 +1,8 @@
 // Simple content for demo
 module.exports = {
+  label: 'Search',
   text_input: {
-    id: 'search-input',
+    id: 'search-input-id',
     label: 'Search',
     placeholder: 'Placeholder text',
   },

diff --git a/src/website/src/pages/ec/getting-started/index.mdx b/src/website/src/pages/ec/getting-started/index.mdx
@@ -4,6 +4,7 @@ title: Getting started
 ---
 
 import { Link } from '@ecl/website-components';
+import { ECL_VERSION } from '../../../preval/getVersion';
 
 The Europa Component Library is a design system defining the visual identity of the European Commission on the web.
 
@@ -92,7 +93,14 @@ There are also other optional css files distributed that can be used, pikaday is
 ECL is also distributing its presets on a CDN, all the files distributed in the package mentioned before are also available there, this is the pattern to reach them:
 `https://cdn{1,2,3 or 4}.fpfis.tech.ec.europa.eu/ecl/{tag}/{system}/{path/to/the/asset}`
 
-Ex: https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.9.1/ec/styles/optional/ecl-ec-default.css
+Ex:
+
+<a
+  className="ecl-link"
+  href={`https://cdn1.fpfis.tech.ec.europa.eu/ecl/v${ECL_VERSION}/ec/styles/optional/ecl-ec-default.css`}
+>
+  {`https://cdn1.fpfis.tech.ec.europa.eu/ecl/v${ECL_VERSION}/ec/styles/optional/ecl-ec-default.css`}
+</a>
 
 Download a `preset-ec` package from the release page to see all the files available so to know how to reach them in the CDN, the file system is the same.
 

diff --git a/src/website/src/pages/eu/getting-started/index.mdx b/src/website/src/pages/eu/getting-started/index.mdx
@@ -4,6 +4,7 @@ title: Getting started
 ---
 
 import { Link } from '@ecl/website-components';
+import { ECL_VERSION } from '../../../preval/getVersion';
 
 The Europa Component Library is a design system for the European Commission and websites managed by the Commission.
 
@@ -91,7 +92,14 @@ There are also other optional css files distributed that can be used, moment.js
 ECL is also distributing its presets on a CDN, all the files distributed in the package mentioned before are also available in the CDN, this is the pattern to reach them:
 `https://cdn{1,2,3 or 4}.fpfis.tech.ec.europa.eu/ecl/{tag}/{system}/{path/to/the/asset}`
 
-Ex: https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.9.1/eu/styles/optional/ecl-eu-default.css
+Ex:
+
+<a
+  className="ecl-link"
+  href={`https://cdn1.fpfis.tech.ec.europa.eu/ecl/v${ECL_VERSION}/eu/styles/optional/ecl-ec-default.css`}
+>
+  {`https://cdn1.fpfis.tech.ec.europa.eu/ecl/v${ECL_VERSION}/eu/styles/optional/ecl-ec-default.css`}
+</a>
 
 Download a `preset-eu` package to see all the files available to know how to reach them in the CDN, the file system is the same.
 

diff --git a/src/website/src/preval/getVersion.js b/src/website/src/preval/getVersion.js
@@ -0,0 +1 @@
+export const { ECL_VERSION } = { ECL_VERSION: process.env.ECL_VERSION };
diff --git a/src/website/webpack.config.prod.js b/src/website/webpack.config.prod.js
@@ -37,10 +37,7 @@ const environmentModulePath = require.resolve(
 process.env.BABEL_ENV = 'production';
 process.env.NODE_ENV = 'production';
 
-let eclVersion = lernaJson.version;
-if (process.env.PULL_REQUEST && process.env.GITHUB_EVENT_NUMBER) {
-  eclVersion += ` - PR ${process.env.GITHUB_EVENT_NUMBER}`;
-}
+const eclVersion = lernaJson.version;
 
 let sri = {};
 if ('CI' in process.env && process.env.GITHUB_REF.includes('refs/tags/')) {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const { ECL_VERSION } = { ECL_VERSION: process.env.ECL_VERSION };