From 9740927644324e8267a10e6765c7481715f332e9 Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Fri, 12 May 2023 14:09:01 +0200
Subject: [PATCH 1/5] EWPP-3310: Update ecl version, dependencies and node
 version.

---
 .drone.yml                                    |   2 +-
 docker-compose.yml                            |   2 +-
 package.json                                  | 106 +++++++++---------
 ....patch => twig-component-file+3.8.1.patch} |   0
 ...=> twig-component-site-footer+3.8.1.patch} |   0
 ...patch => twig-component-table+3.8.1.patch} |   0
 6 files changed, 55 insertions(+), 55 deletions(-)
 rename patches/@ecl/{twig-component-file+3.7.1.patch => twig-component-file+3.8.1.patch} (100%)
 rename patches/@ecl/{twig-component-site-footer+3.7.1.patch => twig-component-site-footer+3.8.1.patch} (100%)
 rename patches/@ecl/{twig-component-table+3.7.1.patch => twig-component-table+3.8.1.patch} (100%)

diff --git a/.drone.yml b/.drone.yml
index 80a116ca2..bd45361c0 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -42,7 +42,7 @@ services:
 pipeline:
   npm-build:
     group: prepare
-    image: registry.fpfis.eu/fpfis/node:12.21.0
+    image: registry.fpfis.eu/fpfis/node:16
     commands:
       - npm install --unsafe-perm
       - NODE_ENV=production npm run build
diff --git a/docker-compose.yml b/docker-compose.yml
index d53a15a03..e457578ab 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -34,7 +34,7 @@ services:
     expose:
       - '4444'
   node:
-    image: node:12.21.0
+    image: node:16.14.0
     user: "node"
     working_dir: /home/node/app
     environment:
diff --git a/package.json b/package.json
index ce5fe8c71..925ead0d3 100644
--- a/package.json
+++ b/package.json
@@ -14,62 +14,62 @@
     "prepare": "patch-package"
   },
   "dependencies": {
-    "@ecl/builder": "3.7.1",
-    "@ecl/preset-ec": "3.7.1",
-    "@ecl/preset-eu": "3.7.1",
-    "@ecl/preset-reset": "3.7.1",
+    "@ecl/builder": "3.8.1",
+    "@ecl/preset-ec": "3.8.1",
+    "@ecl/preset-eu": "3.8.1",
+    "@ecl/preset-reset": "3.8.1",
     "@ecl/stylelint-config": "0.2.1",
-    "@ecl/theme-ec": "3.7.1",
-    "@ecl/theme-eu": "3.7.1",
-    "@ecl/twig-component-accordion": "3.7.1",
-    "@ecl/twig-component-banner": "3.7.1",
-    "@ecl/twig-component-blockquote": "3.7.1",
-    "@ecl/twig-component-breadcrumb": "3.7.1",
-    "@ecl/twig-component-button": "3.7.1",
-    "@ecl/twig-component-card": "3.7.1",
-    "@ecl/twig-component-carousel": "3.7.1",
-    "@ecl/twig-component-content-item": "3.7.1",
-    "@ecl/twig-component-datepicker": "3.7.1",
-    "@ecl/twig-component-description-list": "3.7.1",
-    "@ecl/twig-component-expandable": "3.7.1",
-    "@ecl/twig-component-fact-figures": "3.7.1",
-    "@ecl/twig-component-featured-item": "3.7.1",
-    "@ecl/twig-component-file": "3.7.1",
-    "@ecl/twig-component-gallery": "3.7.1",
-    "@ecl/twig-component-hero-banner": "3.7.1",
-    "@ecl/twig-component-icon": "3.7.1",
-    "@ecl/twig-component-inpage-navigation": "3.7.1",
-    "@ecl/twig-component-label": "3.7.1",
-    "@ecl/twig-component-language-list": "3.7.1",
-    "@ecl/twig-component-link": "3.7.1",
-    "@ecl/twig-component-list-illustration": "3.7.1",
-    "@ecl/twig-component-media-container": "3.7.1",
-    "@ecl/twig-component-menu": "3.7.1",
-    "@ecl/twig-component-message": "3.7.1",
-    "@ecl/twig-component-navigation-list": "3.7.1",
-    "@ecl/twig-component-news-ticker": "3.7.1",
-    "@ecl/twig-component-page-banner": "3.7.1",
-    "@ecl/twig-component-page-header": "3.7.1",
-    "@ecl/twig-component-pagination": "3.7.1",
-    "@ecl/twig-component-radio": "3.7.1",
-    "@ecl/twig-component-search-form": "3.7.1",
-    "@ecl/twig-component-site-footer": "3.7.1",
-    "@ecl/twig-component-site-header": "3.7.1",
-    "@ecl/twig-component-skip-link": "3.7.1",
-    "@ecl/twig-component-social-media-follow": "3.7.1",
-    "@ecl/twig-component-social-media-share": "3.7.1",
-    "@ecl/twig-component-table": "3.7.1",
-    "@ecl/twig-component-tag": "3.7.1",
-    "@ecl/twig-component-text-input": "3.7.1",
-    "@ecl/twig-component-timeline": "3.7.1",
-    "@ecl/vanilla-utility-background": "3.7.1",
-    "@ecl/vanilla-utility-border": "3.7.1",
-    "chokidar-cli": "1.2.0",
-    "grunt": "1.4.0",
+    "@ecl/theme-ec": "3.8.1",
+    "@ecl/theme-eu": "3.8.1",
+    "@ecl/twig-component-accordion": "3.8.1",
+    "@ecl/twig-component-banner": "3.8.1",
+    "@ecl/twig-component-blockquote": "3.8.1",
+    "@ecl/twig-component-breadcrumb": "3.8.1",
+    "@ecl/twig-component-button": "3.8.1",
+    "@ecl/twig-component-card": "3.8.1",
+    "@ecl/twig-component-carousel": "3.8.1",
+    "@ecl/twig-component-content-item": "3.8.1",
+    "@ecl/twig-component-datepicker": "3.8.1",
+    "@ecl/twig-component-description-list": "3.8.1",
+    "@ecl/twig-component-expandable": "3.8.1",
+    "@ecl/twig-component-fact-figures": "3.8.1",
+    "@ecl/twig-component-featured-item": "3.8.1",
+    "@ecl/twig-component-file": "3.8.1",
+    "@ecl/twig-component-gallery": "3.8.1",
+    "@ecl/twig-component-hero-banner": "3.8.1",
+    "@ecl/twig-component-icon": "3.8.1",
+    "@ecl/twig-component-inpage-navigation": "3.8.1",
+    "@ecl/twig-component-label": "3.8.1",
+    "@ecl/twig-component-language-list": "3.8.1",
+    "@ecl/twig-component-link": "3.8.1",
+    "@ecl/twig-component-list-illustration": "3.8.1",
+    "@ecl/twig-component-media-container": "3.8.1",
+    "@ecl/twig-component-menu": "3.8.1",
+    "@ecl/twig-component-message": "3.8.1",
+    "@ecl/twig-component-navigation-list": "3.8.1",
+    "@ecl/twig-component-news-ticker": "3.8.1",
+    "@ecl/twig-component-page-banner": "3.8.1",
+    "@ecl/twig-component-page-header": "3.8.1",
+    "@ecl/twig-component-pagination": "3.8.1",
+    "@ecl/twig-component-radio": "3.8.1",
+    "@ecl/twig-component-search-form": "3.8.1",
+    "@ecl/twig-component-site-footer": "3.8.1",
+    "@ecl/twig-component-site-header": "3.8.1",
+    "@ecl/twig-component-skip-link": "3.8.1",
+    "@ecl/twig-component-social-media-follow": "3.8.1",
+    "@ecl/twig-component-social-media-share": "3.8.1",
+    "@ecl/twig-component-table": "3.8.1",
+    "@ecl/twig-component-tag": "3.8.1",
+    "@ecl/twig-component-text-input": "3.8.1",
+    "@ecl/twig-component-timeline": "3.8.1",
+    "@ecl/vanilla-utility-background": "3.8.1",
+    "@ecl/vanilla-utility-border": "3.8.1",
+    "chokidar-cli": "3.0.0",
+    "grunt": "1.6.1",
     "grunt-contrib-copy": "1.0.0",
     "moment": "2.29.1",
-    "node-sass": "4.13.1",
-    "npm-run-all": "4.0.2",
+    "node-sass": "8.0.0",
+    "npm-run-all": "4.1.5",
     "patch-package": "^5.1.2",
     "stylelint": "9.1.1",
     "stylelint-config-prettier": "2.1.0",
diff --git a/patches/@ecl/twig-component-file+3.7.1.patch b/patches/@ecl/twig-component-file+3.8.1.patch
similarity index 100%
rename from patches/@ecl/twig-component-file+3.7.1.patch
rename to patches/@ecl/twig-component-file+3.8.1.patch
diff --git a/patches/@ecl/twig-component-site-footer+3.7.1.patch b/patches/@ecl/twig-component-site-footer+3.8.1.patch
similarity index 100%
rename from patches/@ecl/twig-component-site-footer+3.7.1.patch
rename to patches/@ecl/twig-component-site-footer+3.8.1.patch
diff --git a/patches/@ecl/twig-component-table+3.7.1.patch b/patches/@ecl/twig-component-table+3.8.1.patch
similarity index 100%
rename from patches/@ecl/twig-component-table+3.7.1.patch
rename to patches/@ecl/twig-component-table+3.8.1.patch

From 79882b9a1f8f2727555561b4c0939602748030e5 Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Fri, 12 May 2023 16:40:39 +0200
Subject: [PATCH 2/5] EWPP-3310: Fix behat tests.

---
 behat.yml.dist                         | 2 +-
 docker-compose.yml                     | 2 +-
 tests/src/Behat/OeThemeTestContext.php | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/behat.yml.dist b/behat.yml.dist
index 8d8669ddc..4967f70fe 100644
--- a/behat.yml.dist
+++ b/behat.yml.dist
@@ -31,7 +31,7 @@ default:
               list item: ".ecl-content-item"
               list item image: ".ecl-content-item__image__before"
               logo: "a.ecl-site-header__logo-link .ecl-site-header__logo-image"
-              footer logo: "a.ecl-site-footer__logo-link .ecl-site-footer__logo-image-desktop"
+              footer logo: "a.ecl-site-footer__logo-link .ecl-site-footer__logo-image"
               media container: ".ecl-media-container"
               page header: ".ecl-page-header"
               priorities dropdown menu: ".ecl-menu__item:nth-child(3) .ecl-menu__mega"
diff --git a/docker-compose.yml b/docker-compose.yml
index e457578ab..29dbfad20 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -34,7 +34,7 @@ services:
     expose:
       - '4444'
   node:
-    image: node:16.14.0
+    image: node:16
     user: "node"
     working_dir: /home/node/app
     environment:
diff --git a/tests/src/Behat/OeThemeTestContext.php b/tests/src/Behat/OeThemeTestContext.php
index 2ad863702..4c6c52332 100644
--- a/tests/src/Behat/OeThemeTestContext.php
+++ b/tests/src/Behat/OeThemeTestContext.php
@@ -297,9 +297,9 @@ public function assertEuropeanFooterBlockOnPage(string $component_library, strin
     $logo_link = $page->find('css', '.ecl-site-footer__logo-link');
     Assert::assertEquals($link, $logo_link->getAttribute('href'));
     Assert::assertEquals($label, $logo_link->getAttribute('aria-label'));
-    $img = $logo_link->find('css', 'img');
-    Assert::assertEquals($img_alt, $img->getAttribute('alt'));
-    Assert::assertEquals($img_title, $img->getAttribute('title'));
+    $picture = $logo_link->find('css', 'picture');
+    Assert::assertEquals($img_alt, $picture->find('css', 'img')->getAttribute('alt'));
+    Assert::assertEquals($img_title, $picture->getAttribute('title'));
   }
 
   /**

From c4554ccb321d3f1606165500012db6672889bcf7 Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Fri, 12 May 2023 17:52:56 +0200
Subject: [PATCH 3/5] EWPP-3310: Fix phpunit tests.

---
 .../pattern-featured-item.html.twig           |  8 +-
 ...ern-list-item--variant-highlight.html.twig |  7 +-
 .../pattern-list-with-illustration.html.twig  |  9 ++-
 .../pattern-navigation-list.html.twig         | 10 ++-
 .../src/Kernel/Paragraphs/ParagraphsTest.php  | 24 +++---
 .../patterns/page_header_rendering.yml        |  8 +-
 tests/src/Kernel/fixtures/rendering.yml       | 78 +++++++++----------
 .../src/PatternAssertions/CarouselAssert.php  |  2 +-
 .../ListWithIllustrationAssert.php            |  4 +-
 9 files changed, 84 insertions(+), 66 deletions(-)

diff --git a/templates/patterns/featured_item/pattern-featured-item.html.twig b/templates/patterns/featured_item/pattern-featured-item.html.twig
index 911ed35f6..35d724d8f 100644
--- a/templates/patterns/featured_item/pattern-featured-item.html.twig
+++ b/templates/patterns/featured_item/pattern-featured-item.html.twig
@@ -57,11 +57,17 @@
   }]) %}
 {% endfor %}
 
+{% if image %}
+  {% set _image = {
+    img: image
+  } %}
+{% endif %}
+
 {% include '@ecl-twig/card' with {
   'description': _description|default(description|smart_trim(length)),
   'primary_meta': metas,
   'title': _title,
   'secondary_meta': _footer_items,
-  'image': image,
+  'picture': _image,
   'labels': badges,
 } %}
diff --git a/templates/patterns/list_item/pattern-list-item--variant-highlight.html.twig b/templates/patterns/list_item/pattern-list-item--variant-highlight.html.twig
index 98af98a36..80fb8eb45 100644
--- a/templates/patterns/list_item/pattern-list-item--variant-highlight.html.twig
+++ b/templates/patterns/list_item/pattern-list-item--variant-highlight.html.twig
@@ -13,9 +13,14 @@
     icon_path: ecl_icon_path
   } %}
 {% endif %}
+{% if image %}
+  {% set _image = {
+    img: image
+  } %}
+{% endif %}
 {% include '@ecl-twig/card' with {
   title: title,
-  image: image,
+  picture: _image,
   description: detail|smart_trim(length),
   labels: badges,
 } only %}
diff --git a/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig b/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
index bce0ad3e1..cf6364a26 100644
--- a/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
+++ b/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
@@ -17,8 +17,13 @@
   {% endif %}
   {# Set square image if needed. #}
   {% if item.image %}
-    {% set _image = item.image|merge({'squared': square_image}) %}
-    {% set item = item|merge({'image': _image}) %}
+    {% set item = item|merge({
+      'picture': {
+        'img': item.image
+      },
+      'square': square_image,
+      'img': null,
+    }) %}
   {% endif %}
   {% set _items = _items|merge([item]) %}
 {% endfor %}
diff --git a/templates/patterns/navigation_list/pattern-navigation-list.html.twig b/templates/patterns/navigation_list/pattern-navigation-list.html.twig
index 0c9a08d9e..4a0cfeb5b 100644
--- a/templates/patterns/navigation_list/pattern-navigation-list.html.twig
+++ b/templates/patterns/navigation_list/pattern-navigation-list.html.twig
@@ -47,9 +47,11 @@
   {% set _links = _links|merge([_secondary_links]) %}
 {% endif %}
 {% if image %}
-  {% set image = {
-    'src': image.src,
-    'alt': image.alt
+  {% set _image = {
+    'img': {
+      'src': image.src,
+      'alt': image.alt
+    }
   } %}
 {% endif %}
 
@@ -58,5 +60,5 @@
   'description': description|default(''),
   'links': _links,
   'border': border|default(false),
-  'image': image
+  'picture': _image
 } only %}
diff --git a/tests/src/Kernel/Paragraphs/ParagraphsTest.php b/tests/src/Kernel/Paragraphs/ParagraphsTest.php
index a802b6f9a..3ef66f3ab 100644
--- a/tests/src/Kernel/Paragraphs/ParagraphsTest.php
+++ b/tests/src/Kernel/Paragraphs/ParagraphsTest.php
@@ -216,14 +216,14 @@ public function testListItem(): void {
     $this->assertCount(1, $link_element);
     $this->assertEquals('http://www.example.com/', $link_element->attr('href'));
 
-    $image_element = $crawler->filter('article.ecl-card div.ecl-card__image');
-    $this->assertCount(1, $image_element);
+    $picture_element = $crawler->filter('article.ecl-card picture.ecl-card__picture');
+    $this->assertCount(1, $picture_element);
     $this->assertStringContainsString(
       \Drupal::service('file_url_generator')->generateString($image->getFileUri()),
-      $image_element->attr('style')
+      $picture_element->filter('img.ecl-card__image')->attr('src')
     );
 
-    $this->assertEquals('Druplicon', $image_element->attr('aria-label'));
+    $this->assertEquals('Druplicon', $picture_element->attr('aria-label'));
 
     $paragraph->set('field_oe_link', ['uri' => 'route:<nolink>']);
     $paragraph->save();
@@ -278,13 +278,13 @@ public function testListItem(): void {
 
     $this->assertCount(1, $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--left'));
     $this->assertCount(0, $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--right'));
-    $image_element = $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--left img.ecl-content-item__image');
-    $this->assertCount(1, $image_element);
+    $picture_element = $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--left img.ecl-content-item__image');
+    $this->assertCount(1, $picture_element);
     $this->assertStringContainsString(
       \Drupal::service('file_url_generator')->generateString($image->getFileUri()),
-      $image_element->attr('src')
+      $picture_element->attr('src')
     );
-    $this->assertEquals('Druplicon', $image_element->attr('alt'));
+    $this->assertEquals('Druplicon', $picture_element->attr('alt'));
 
     $this->assertEquals('Meta 1', trim($crawler->filter('.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)')->text()));
     $this->assertEquals('Meta 2', trim($crawler->filter('.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)')->text()));
@@ -312,13 +312,13 @@ public function testListItem(): void {
 
     $this->assertCount(0, $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--left'));
     $this->assertCount(1, $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--right'));
-    $image_element = $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--right img.ecl-content-item__image');
-    $this->assertCount(1, $image_element);
+    $picture_element = $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--right img.ecl-content-item__image');
+    $this->assertCount(1, $picture_element);
     $this->assertStringContainsString(
       \Drupal::service('file_url_generator')->generateString($image->getFileUri()),
-      $image_element->attr('src')
+      $picture_element->attr('src')
     );
-    $this->assertEquals('Druplicon', $image_element->attr('alt'));
+    $this->assertEquals('Druplicon', $picture_element->attr('alt'));
 
     $this->assertEquals('Meta 1', trim($crawler->filter('.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)')->text()));
     $this->assertEquals('Meta 2', trim($crawler->filter('.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)')->text()));
diff --git a/tests/src/Kernel/fixtures/patterns/page_header_rendering.yml b/tests/src/Kernel/fixtures/patterns/page_header_rendering.yml
index 3914de39e..0503df36e 100644
--- a/tests/src/Kernel/fixtures/patterns/page_header_rendering.yml
+++ b/tests/src/Kernel/fixtures/patterns/page_header_rendering.yml
@@ -87,7 +87,7 @@
     count:
       '.ecl-page-header.ecl-page-header--negative': 1
       '.ecl-breadcrumb__segment': 7
-      '.ecl-page-header__background[style="background-image: url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg)"]': 1
+      '.ecl-page-header__background[src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"]': 1
       '.ecl-page-header__meta .ecl-page-header__meta-item': 3
       '.ecl-page-header__title.ecl-u-sr-only': 0
       '.ecl-page-header__info-list': 0
@@ -223,7 +223,7 @@
     count:
       '.ecl-page-header': 1
       '.ecl-breadcrumb__segment': 7
-      '.ecl-page-header__background[style="background-image: url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg)"]': 1
+      '.ecl-page-header__background[src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"]': 1
       '.ecl-page-header__meta .ecl-page-header__meta-item': 3
       '.ecl-page-header__title.ecl-u-sr-only': 0
       '.ecl-page-header__info-list': 0
@@ -299,7 +299,7 @@
   assertions:
     count:
       '.ecl-page-header': 1
-      '.ecl-page-header__background[style="background-image: url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg)"]': 1
+      '.ecl-page-header__background[src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"]': 1
       '.ecl-page-header__meta .ecl-page-header__meta-item': 3
       '.ecl-page-header__info-list': 0
       '.ecl-page-header__info-item': 0
@@ -327,7 +327,7 @@
   assertions:
     count:
       '.ecl-page-header.ecl-page-header--negative': 1
-      '.ecl-page-header__background[style="background-image: url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg)"]': 1
+      '.ecl-page-header__background[src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"]': 1
       '.ecl-page-header__meta .ecl-page-header__meta-item': 3
       '.ecl-page-header__info-list': 0
       '.ecl-page-header__info-item': 0
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
index 17d947ec6..0ad0b8f8d 100644
--- a/tests/src/Kernel/fixtures/rendering.yml
+++ b/tests/src/Kernel/fixtures/rendering.yml
@@ -1189,8 +1189,8 @@
     count:
       article.ecl-card div.ecl-card__body div.ecl-content-block.ecl-card__content-block: 1
       article.ecl-card div.ecl-card__body h1.ecl-content-block__title a.ecl-link--standalone[href="http://example.com"]: 1
-      article.ecl-card div.ecl-card__image[aria-label="Alternate text for secondary image"]: 1
-      article.ecl-card div.ecl-card__image[style="background-image:url('http://via.placeholder.com/300x300')"]: 1
+      article.ecl-card img.ecl-card__image[alt="Alternate text for secondary image"]: 1
+      article.ecl-card img.ecl-card__image[src="http://via.placeholder.com/300x300"]: 1
       article.ecl-card div.ecl-card__body ul.ecl-content-block__primary-meta-container: 0
       article.ecl-card div.ecl-card__body div.ecl-content-block__description: 0
       article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container: 1
@@ -1214,8 +1214,8 @@
   assertions:
     count:
       article.ecl-card div.ecl-card__body h1.ecl-content-block__title a.ecl-link--standalone[href="http://example.com"]: 1
-      article.ecl-card div.ecl-card__image[aria-label="Alternate text for secondary image"]: 1
-      article.ecl-card div.ecl-card__image[style="background-image:url('http://via.placeholder.com/300x300')"]: 1
+      article.ecl-card img.ecl-card__image[alt="Alternate text for secondary image"]: 1
+      article.ecl-card img.ecl-card__image[src="http://via.placeholder.com/300x300"]: 1
       article.ecl-card div.ecl-card__body ul.ecl-content-block__primary-meta-container: 0
       article.ecl-card div.ecl-card__body div.ecl-content-block__description: 1
       article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container: 0
@@ -1846,8 +1846,8 @@
       '.ecl-content-block__link-list:nth-child(2) li.ecl-content-block__link-item:nth-child(2) a.ecl-link .ecl-link__label': 0
       'ul.ecl-content-block__link-list': 2
       'li.ecl-content-block__link-item': 5
-      "div.ecl-navigation-list__image[style=\"background-image:url('https://placeimg.com/1000/500/arch')\"]": 1
-      'div.ecl-navigation-list__image[aria-label="Alternative text for image"]': 1
+      "img.ecl-navigation-list__image[src=\"https://placeimg.com/1000/500/arch\"]": 1
+      'img.ecl-navigation-list__image[alt="Alternative text for image"]': 1
 - array:
     '#type': pattern
     '#id': navigation_list
@@ -2359,7 +2359,7 @@
       title: "Example title"
   assertions:
     count:
-      "div.ecl-card__image": 0
+      "img.ecl-card__image": 0
       'h1.ecl-content-block__title': 1
       'div.ecl-content-block__description': 0
       'ul.ecl-content-block__secondary-meta-container': 0
@@ -2407,7 +2407,7 @@
           variant: "high"
   assertions:
     count:
-      "div.ecl-card__image[style=\"background-image:url('http://via.placeholder.com/120x80')\"]": 1
+      "img.ecl-card__image[src=\"http://via.placeholder.com/120x80\"]": 1
       'h1.ecl-content-block__title a.ecl-link--standalone[href="https://example.com"]': 1
       'a.ecl-button': 0
       'article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container': 1
@@ -2439,7 +2439,7 @@
         label: "Link title"
   assertions:
     count:
-      "div.ecl-card__image[style=\"background-image:url('http://via.placeholder.com/120x80')\"]": 1
+      "img.ecl-card__image[src=\"http://via.placeholder.com/120x80\"]": 1
       'h1.ecl-content-block__title a.ecl-link--standalone[href="https://example.com"]': 1
       'a.ecl-button': 0
       'article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container': 0
@@ -3290,12 +3290,12 @@
       div.ecl-list-illustration: 1
       div.ecl-list-illustration.ecl-list-illustration--zebra: 1
       div.ecl-list-illustration__item: 2
-      div.ecl-list-illustration__image: 2
-      div.ecl-list-illustration__image.ecl-list-illustration__image--square: 0
-      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
-      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
-      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
-      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
+      img.ecl-list-illustration__image: 2
+      img.ecl-list-illustration__image.ecl-list-illustration__image--square: 0
+      img.ecl-list-illustration__image[alt="Alternative text for featured item image 1"]: 1
+      img.ecl-list-illustration__image[src="https://placeimg.com/1000/500/arch"]: 1
+      img.ecl-list-illustration__image[alt="Alternative text for featured item image 2"]: 1
+      img.ecl-list-illustration__image[src="https://placeimg.com/500/500/arch"]: 1
     contains:
       'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
       'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
@@ -3324,12 +3324,12 @@
       div.ecl-list-illustration: 1
       div.ecl-list-illustration.ecl-list-illustration--zebra: 1
       div.ecl-list-illustration__item: 2
-      div.ecl-list-illustration__image: 2
-      div.ecl-list-illustration__image.ecl-list-illustration__image--square: 2
-      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
-      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
-      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
-      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
+      img.ecl-list-illustration__image: 2
+      img.ecl-list-illustration__image.ecl-list-illustration__image--square: 2
+      img.ecl-list-illustration__image[alt="Alternative text for featured item image 1"]: 1
+      img.ecl-list-illustration__image[src="https://placeimg.com/1000/500/arch"]: 1
+      img.ecl-list-illustration__image[alt="Alternative text for featured item image 2"]: 1
+      img.ecl-list-illustration__image[src="https://placeimg.com/500/500/arch"]: 1
       'div.ecl-list-illustration__item svg.ecl-icon': 0
     contains:
       'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
@@ -3355,7 +3355,7 @@
       div.ecl-list-illustration: 1
       div.ecl-list-illustration.ecl-list-illustration--zebra: 0
       div.ecl-list-illustration__item: 2
-      div.ecl-list-illustration__image: 0
+      img.ecl-list-illustration__image: 0
     contains:
       'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
       'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
@@ -3388,12 +3388,12 @@
       div.ecl-list-illustration.ecl-list-illustration--zebra: 0
       div.ecl-list-illustration.ecl-list-illustration--col-2: 1
       div.ecl-list-illustration__item: 2
-      div.ecl-list-illustration__image: 2
-      div.ecl-list-illustration__image.ecl-list-illustration__image--square: 0
-      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
-      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
-      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
-      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
+      img.ecl-list-illustration__image: 2
+      img.ecl-list-illustration__image.ecl-list-illustration__image--square: 0
+      img.ecl-list-illustration__image[alt="Alternative text for featured item image 1"]: 1
+      img.ecl-list-illustration__image[src="https://placeimg.com/1000/500/arch"]: 1
+      img.ecl-list-illustration__image[alt="Alternative text for featured item image 2"]: 1
+      img.ecl-list-illustration__image[src="https://placeimg.com/500/500/arch"]: 1
     contains:
       'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
       'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
@@ -3421,12 +3421,12 @@
       div.ecl-list-illustration: 1
       div.ecl-list-illustration.ecl-list-illustration--col-3: 1
       div.ecl-list-illustration__item: 2
-      div.ecl-list-illustration__image: 2
-      div.ecl-list-illustration__image.ecl-list-illustration__image--square: 2
-      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
-      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
-      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
-      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
+      img.ecl-list-illustration__image: 2
+      img.ecl-list-illustration__image.ecl-list-illustration__image--square: 2
+      img.ecl-list-illustration__image[alt="Alternative text for featured item image 1"]: 1
+      img.ecl-list-illustration__image[src="https://placeimg.com/1000/500/arch"]: 1
+      img.ecl-list-illustration__image[alt="Alternative text for featured item image 2"]: 1
+      img.ecl-list-illustration__image[src="https://placeimg.com/500/500/arch"]: 1
     contains:
       'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
       'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
@@ -3450,7 +3450,7 @@
       div.ecl-list-illustration: 1
       div.ecl-list-illustration.ecl-list-illustration--col-2: 1
       div.ecl-list-illustration__item: 2
-      div.ecl-list-illustration__image: 0
+      img.ecl-list-illustration__image: 0
     contains:
       'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
       'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
@@ -3577,10 +3577,10 @@
       div.ecl-carousel__slide section.ecl-banner.ecl-banner--text-highlight.ecl-banner--centered: 1
       div.ecl-carousel__slide section.ecl-banner.ecl-banner--primary.ecl-banner--m.ecl-banner--centered: 1
       div.ecl-carousel__controls: 1
-      section.ecl-banner--text-box div.ecl-banner__image[style="background-image:url(https://placeimg.com/640/480/tech)"]: 1
-      section.ecl-banner--text-highlight div.ecl-banner__image[style="background-image:url(https://placeimg.com/640/480/arch)"]: 1
+      section.ecl-banner--text-box img.ecl-banner__image[src="https://placeimg.com/640/480/tech"]: 1
+      section.ecl-banner--text-highlight img.ecl-banner__image[src="https://placeimg.com/640/480/arch"]: 1
       div.ecl-carousel__slide section.ecl-banner.ecl-banner--image-overlay.ecl-banner--centered: 1
-      section.ecl-banner--image-overlay div.ecl-banner__image[style="background-image:url(https://placeimg.com/640/480/tech)"]: 1
+      section.ecl-banner--image-overlay img.ecl-banner__image[src="https://placeimg.com/640/480/tech"]: 1
       div.ecl-carousel__slide section.ecl-banner--image-shade.ecl-banner--centered div.ecl-banner__content p.ecl-banner__description: 0
       div.ecl-carousel__slide section.ecl-banner--image-shade.ecl-banner--centered div.ecl-banner__content div.ecl-banner__cta a span.ecl-link__label: 0
       div.ecl-carousel__slide section.ecl-banner--secondary div.ecl-banner__content div.ecl-banner__cta a span.ecl-link__label: 0
@@ -3634,7 +3634,7 @@
       div.ecl-carousel__slide: 3
       div.ecl-carousel__slide section.ecl-banner.ecl-banner--text-box.ecl-banner--centered: 1
       div.ecl-carousel__slide section.ecl-banner.ecl-banner--plain-background: 2
-      section.ecl-banner--text-box div.ecl-banner__image[style="background-image:url(https://placeimg.com/640/480/tech)"]: 1
+      section.ecl-banner--text-box img.ecl-banner__image[src="https://placeimg.com/640/480/tech"]: 1
     contains:
       div.ecl-carousel__slide section.ecl-banner--text-box.ecl-banner--centered div.ecl-banner__content div.ecl-banner__title: 'Donec maximus pharetra ex a ultricies'
       div.ecl-carousel__slide section.ecl-banner--text-box.ecl-banner--centered div.ecl-banner__content p.ecl-banner__description: 'Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies'
diff --git a/tests/src/PatternAssertions/CarouselAssert.php b/tests/src/PatternAssertions/CarouselAssert.php
index cfe356b5e..3c798b0c1 100644
--- a/tests/src/PatternAssertions/CarouselAssert.php
+++ b/tests/src/PatternAssertions/CarouselAssert.php
@@ -79,7 +79,7 @@ protected function assertItems(array $expected_items, Crawler $crawler): void {
         $this->assertElementNotExists('div.ecl-banner__image', $item);
       }
       else {
-        $this->assertElementAttribute('background-image:url(' . $expected_item['image'] . ')', 'div.ecl-banner__image', 'style', $item);
+        $this->assertElementAttribute($expected_item['image'], 'picture.ecl-banner__picture img.ecl-banner__image', 'src', $item);
       }
     }
   }
diff --git a/tests/src/PatternAssertions/ListWithIllustrationAssert.php b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
index d79709ce3..03c06e546 100644
--- a/tests/src/PatternAssertions/ListWithIllustrationAssert.php
+++ b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
@@ -116,8 +116,8 @@ protected function assertItems(array $expected_items, Crawler $crawler): void {
       if (isset($expected_item['image'])) {
         self::assertElementExists('.ecl-list-illustration__image', $item_element);
         $image_element = $item_element->filter('.ecl-list-illustration__image');
-        self::assertEquals($expected_item['image']['alt'], $image_element->attr('aria-label'));
-        self::assertStringContainsString($expected_item['image']['src'], $image_element->attr('style'));
+        self::assertEquals($expected_item['image']['alt'], $image_element->attr('alt'));
+        self::assertStringContainsString($expected_item['image']['src'], $image_element->attr('src'));
       }
       if (isset($expected_item['icon'])) {
         $icon_element = $item_element->filter('svg.ecl-icon use');

From 0624cafe7fdece756a2b3c03643187b19797bea1 Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Mon, 15 May 2023 13:58:10 +0200
Subject: [PATCH 4/5] EWPP-3310: Fix ECL footer tests.

---
 templates/patterns/gallery/pattern-gallery.html.twig | 1 +
 tests/src/Functional/CorporateFooterRenderTest.php   | 8 +-------
 tests/src/PatternAssertions/FeaturedItemAssert.php   | 6 +++---
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/templates/patterns/gallery/pattern-gallery.html.twig b/templates/patterns/gallery/pattern-gallery.html.twig
index a388a7ff3..aab370aa8 100644
--- a/templates/patterns/gallery/pattern-gallery.html.twig
+++ b/templates/patterns/gallery/pattern-gallery.html.twig
@@ -56,6 +56,7 @@
     },
   },
   'view_all_label': "See all"|t,
+  'view_all_expanded_label': "Back"|t,
   'counter_label': "media items"|t,
   'items': _items
 } %}
diff --git a/tests/src/Functional/CorporateFooterRenderTest.php b/tests/src/Functional/CorporateFooterRenderTest.php
index 100cc6a70..d23813f40 100644
--- a/tests/src/Functional/CorporateFooterRenderTest.php
+++ b/tests/src/Functional/CorporateFooterRenderTest.php
@@ -935,13 +935,7 @@ protected function assertSocialLink(NodeElement $label, NodeElement $link, array
    *   The component library: 'European Commission' or 'European Union'.
    */
   protected function assertEclLogoPresence(NodeElement $section, string $component_library): void {
-    if ($component_library === 'European Union') {
-      $this->assertSession()->elementsCount('css', "a img.ecl-site-footer__logo-image-mobile", 1, $section);
-      $this->assertSession()->elementsCount('css', "a img.ecl-site-footer__logo-image-desktop", 1, $section);
-    }
-    else {
-      $this->assertSession()->elementsCount('css', "a img.ecl-site-footer__logo-image-desktop", 1, $section);
-    }
+    $this->assertSession()->elementsCount('css', "a img.ecl-site-footer__logo-image", 1, $section);
   }
 
   /**
diff --git a/tests/src/PatternAssertions/FeaturedItemAssert.php b/tests/src/PatternAssertions/FeaturedItemAssert.php
index 9dc4781e7..7e1e52b6b 100644
--- a/tests/src/PatternAssertions/FeaturedItemAssert.php
+++ b/tests/src/PatternAssertions/FeaturedItemAssert.php
@@ -65,14 +65,14 @@ protected function assertBaseElements(string $html, string $variant): void {
    *   The DomCrawler where to check the element.
    */
   protected function assertFeaturedItemImage($expected_image, string $variant, Crawler $crawler): void {
-    $image_div_selector = 'article.ecl-card div.ecl-card__image';
+    $image_div_selector = 'article.ecl-card img.ecl-card__image';
     if (is_null($expected_image)) {
       $this->assertElementNotExists($image_div_selector, $crawler);
       return;
     }
     $image_div = $crawler->filter($image_div_selector);
-    self::assertEquals($expected_image['alt'], $image_div->attr('aria-label'));
-    self::assertStringContainsString($expected_image['src'], $image_div->attr('style'));
+    self::assertEquals($expected_image['alt'], $image_div->attr('alt'));
+    self::assertStringContainsString($expected_image['src'], $image_div->attr('src'));
   }
 
   /**

From ec2d826e4bb462fd64832d3aec24027535a90f50 Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Mon, 22 May 2023 15:02:09 +0200
Subject: [PATCH 5/5] EWPP-3310: Remove leftover element from
 list_with_illustration pattern.

---
 .../pattern-list-with-illustration.html.twig                     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig b/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
index cf6364a26..4d8005b1c 100644
--- a/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
+++ b/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
@@ -22,7 +22,6 @@
         'img': item.image
       },
       'square': square_image,
-      'img': null,
     }) %}
   {% endif %}
   {% set _items = _items|merge([item]) %}