EWPP-3626: Patch ECL media container and picture to render image alt even if empty.

modules/oe_theme_helper/src/MediaDataExtractorPluginBase.php

@@ -51,7 +51,7 @@ public function getThumbnail(MediaInterface $media): ?ImageValueObjectInterface
     /** @var \Drupal\oe_theme\ValueObject\ImageValueObject $thumbnail */
     return ImageValueObject::fromArray([
       'src' => \Drupal::service('file_url_generator')->generateString($uri),
-      'alt' => $source->getMetadata($media, 'thumbnail_alt_value') ?? $media->label(),
+      'alt' => $source->getMetadata($media, 'thumbnail_alt_value') ?? '',
       'name' => $media->getName(),
     ]);
   }

modules/oe_theme_helper/tests/src/Kernel/Plugin/Field/FieldFormatter/MediaGalleryFormatterTest.php

@@ -229,7 +229,7 @@ public function testFormatter(): void {
     $expected_thumbnail_name = 'FRPRzhRHyt8zGp5-d-luvJDnIb03oXDJUp5LtL4UeDI.jpg';
 
     $image_node = $items->eq(1)->filter('img');
-    $this->assertEquals("Energy, let's save it!", $image_node->attr('alt'));
+    $this->assertEquals('', $image_node->attr('alt'));
     $this->assertStringEndsWith('/oembed_thumbnails/' . $expected_thumbnail_name, $image_node->attr('src'));
     $caption = $items->eq(1)->filter('.ecl-gallery__description');
     $this->assertStringContainsString($video_media->label(), $caption->html());
@@ -333,7 +333,7 @@ public function testFormatter(): void {
       );
     }
     $image_node = $items->eq(1)->filter('img');
-    $this->assertEquals("Energy, let's save it!", $image_node->attr('alt'));
+    $this->assertEquals('', $image_node->attr('alt'));
     $this->assertStringContainsString(
       '/files/styles/medium/public/oembed_thumbnails/' . $expected_thumbnail_name . '?itok=',
       $image_node->attr('src')

oe_theme.theme

@@ -1662,7 +1662,7 @@ function oe_theme_preprocess_paragraph__oe_banner(array &$variables): void {
 
   $values = [
     'src' => $style->buildUrl($uri),
-    'alt' => $source->getMetadata($media, 'thumbnail_alt_value') ?? $media->label(),
+    'alt' => $source->getMetadata($media, 'thumbnail_alt_value') ?? '',
     'name' => $media->getName(),
   ];
   $variables['image'] = ImageValueObject::fromArray($values);
@@ -2222,6 +2222,7 @@ function oe_theme_preprocess_paragraph__oe_carousel(array &$variables): void {
       'url' => $link ?? '',
       'url_text' => $link_text ?? '',
       'image' => $image_url,
+      'image_alt' => $source->getMetadata($media, 'thumbnail_alt_value') ?? '',
       'centered' => FALSE,
       // The paragraph has a required image field, so we need to set a default
       // image variant in order to render the image.

package.json

@@ -71,7 +71,7 @@
     "moment": "2.29.1",
     "node-sass": "8.0.0",
     "npm-run-all": "4.1.5",
-    "patch-package": "^5.1.2",
+    "patch-package": "8.0.0",
     "stylelint": "9.1.1",
     "stylelint-config-prettier": "2.1.0",
     "stylelint-no-browser-hacks": "^1.1.0",

patches/@ecl/twig-component-gallery+3.10.0.patch

@@ -0,0 +1,12 @@
+patch-package
+--- a/node_modules/@ecl/twig-component-gallery/gallery-item.html.twig
++++ b/node_modules/@ecl/twig-component-gallery/gallery-item.html.twig
+@@ -51,7 +51,7 @@
+       },
+     }})
+   %}
+-  {% if _item.image.alt is not empty %}
++  {% if _item.image.alt is defined %}
+     {% set _item = _item|merge({
+       picture: _item.picture|merge({
+         img: _item.picture.img|merge({

patches/@ecl/twig-component-media-container+3.10.0.patch

@@ -0,0 +1,12 @@
+patch-package
+--- a/node_modules/@ecl/twig-component-media-container/media-container.html.twig
++++ b/node_modules/@ecl/twig-component-media-container/media-container.html.twig
+@@ -69,7 +69,7 @@
+       },
+     }
+   %}
+-  {% if _alt is not empty %}
++  {% if _alt is defined %}
+     {% set _picture = _picture|merge({
+       img: _picture.img|merge({
+         alt: _alt

patches/@ecl/twig-component-picture+3.10.0.patch

@@ -0,0 +1,12 @@
+patch-package
+--- a/node_modules/@ecl/twig-component-picture/picture.html.twig
++++ b/node_modules/@ecl/twig-component-picture/picture.html.twig
+@@ -81,7 +81,7 @@
+     {% if _picture.img.src is not empty %}
+       src="{{ _picture.img.src }}"
+     {% endif %}
+-    {% if _picture.img.alt is not empty %}
++    {% if _picture.img.alt is defined %}
+       alt="{{ _picture.img.alt }}"
+     {% endif %}
+   />

patches/@ecl/twig-component-site-footer+3.10.0.patch

@@ -1,4 +1,5 @@
-patch-package
+diff --git a/node_modules/@ecl/twig-component-site-footer/site-footer.html.twig b/node_modules/@ecl/twig-component-site-footer/site-footer.html.twig
+index 761c4da..c6f58fd 100644
 --- a/node_modules/@ecl/twig-component-site-footer/site-footer.html.twig
 +++ b/node_modules/@ecl/twig-component-site-footer/site-footer.html.twig
 @@ -6,6 +6,8 @@
@@ -10,20 +11,20 @@ patch-package
        - "path" (string) logo link path
        - "language" (string) Language code
        - "src_mobile" (string) Path the mobile logo
-@@ -97,7 +99,7 @@
-                 path: _sections.logo.path,
-                 label: _label,
-                 type: 'standalone',
--                aria_label: _sections.logo.title
-+                aria_label: _sections.logo.aria_label,
-               },
-               extra_classes: 'ecl-site-footer__logo-link'
-             } only %}
-@@ -145,6 +147,7 @@
-                   {% endif %}
-                   {% include '@ecl/link/link.html.twig' with _item|merge({
-                     link: _item.link|default({})|merge({ type: 'standalone' }),
-+                    icon: _item.icon|default({})|merge({ size: 'xs' }),
-                     extra_classes: 'ecl-site-footer__link',
-                   }) only %}
-                   {% if _item.content_after is defined and _item.content_after is not empty %}
+@@ -101,7 +103,7 @@
+               path: _sections.logo.path,
+               label: _label,
+               type: 'standalone',
+-              aria_label: _sections.logo.title
++              aria_label: _sections.logo.aria_label,
+             },
+             extra_classes: 'ecl-site-footer__logo-link'
+           } only %}
+@@ -149,6 +151,7 @@
+               {% endif %}
+               {% include '@ecl/link/link.html.twig' with _item|merge({
+                 link: _item.link|default({})|merge({ type: 'standalone' }),
++                icon: _item.icon|default({})|merge({ size: 'xs' }),
+                 extra_classes: 'ecl-site-footer__link',
+               }) only %}
+               {% if _item.content_after is defined and _item.content_after is not empty %}

templates/patterns/banners/banner.ui_patterns.yml

@@ -41,6 +41,7 @@ banner:
       description: "The image of the banner is required for the variants which include an image."
       preview:
         src: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+        alt: "alternative text"
     size:
       type: "text"
       label: "Size"

templates/patterns/banners/pattern-banner.html.twig

@@ -21,6 +21,16 @@
   } -%}
 {% endif %}
 
+{% set _picture = [] %}
+{% if image.src is not empty %}
+  {% set _picture = {
+    img: {
+      src: image.src|default(''),
+      alt: image.alt|default(''),
+    }
+  } %}
+{% endif %}
+
 {% set _variant = variant|replace({'_': '-'}) %}
 
 <div{{ container_attributes }}>
@@ -29,7 +39,7 @@
     title: title,
     description: description,
     link: _link,
-    image: image.src,
+    picture: _picture,
     size: size,
     centered: centered,
     full_width: full_width,

templates/patterns/carousel/carousel.ui_patterns.yml

@@ -12,6 +12,7 @@ carousel:
           url: "https://example.com"
           url_text: "CTA"
           image: "https://loremflickr.com/640/480/tech"
+          image_alt: "alternative text"
           variant: "text-box"
           centered: false
           credit: "© Copyright first item"

templates/patterns/carousel/pattern-carousel.html.twig

@@ -16,11 +16,20 @@
       'icon': get_link_icon(item.url)
     } -%}
   {% endif %}
+  {% set _picture = [] %}
+  {% if item.image is not empty %}
+    {% set _picture = {
+      img: {
+        src: item.image|default(''),
+        alt: item.image_alt|default(''),
+      }
+    } %}
+  {% endif %}
   {% set _items = _items|merge([{
     title: item.title,
     description: item.description,
     link: _link,
-    image: item.image|default(''),
+    picture: _picture,
     variant: item.variant|default('primary'),
     centered: item.centered is defined and item.centered == false ? false : true,
     credit: item.credit|default('')

tests/src/Kernel/Paragraphs/MediaParagraphsTest.php

@@ -502,6 +502,7 @@ public function testBanner(): void {
       $this->container->get('file_url_generator')->generateAbsoluteString($en_file_uri),
       $image_element->attr('src')
     );
+    $this->assertStringContainsString('Alt en', $image_element->attr('alt'));
     $this->assertEquals('Banner', trim($crawler->filter('div.ecl-banner__content div.ecl-banner__title')->text()));
     $this->assertEquals('Description', trim($crawler->filter('div.ecl-banner__content p.ecl-banner__description')->text()));
     $this->assertCount(1, $crawler->filter('div.ecl-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after'));
@@ -518,6 +519,7 @@ public function testBanner(): void {
       $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_uri),
       $image_element->attr('src')
     );
+    $this->assertStringContainsString('Alt bg', $image_element->attr('alt'));
 
     // Variant - image / Size - Large / Alignment - Left / Full width - No.
     $paragraph->get('field_oe_banner_alignment')->setValue('left');
@@ -1004,13 +1006,15 @@ public function testCarousel(): void {
       'name' => 'First image en',
       'oe_media_image' => [
         'target_id' => $en_file_1->id(),
+        'alt' => 'First image alt en',
       ],
     ]);
     $first_media->save();
     $first_media_bg = $first_media->addTranslation('bg', [
       'name' => 'First image bg',
       'oe_media_image' => [
         'target_id' => $bg_file_1->id(),
+        'alt' => 'First image alt bg',
       ],
     ]);
     $first_media_bg->save();
@@ -1076,6 +1080,7 @@ public function testCarousel(): void {
         [
           'title' => 'Item 1',
           'image' => $this->container->get('file_url_generator')->generateAbsoluteString($en_file_1_uri),
+          'image_alt' => 'First image alt en',
           'variant' => 'text-highlight',
         ],
         [
@@ -1089,6 +1094,7 @@ public function testCarousel(): void {
         [
           'title' => 'Item 3',
           'image' => $this->container->get('file_url_generator')->generateAbsoluteString($en_file_1_uri),
+          'image_alt' => 'First image alt en',
           'variant' => 'text-highlight',
         ],
         [
@@ -1111,12 +1117,14 @@ public function testCarousel(): void {
     $this->assertCount(4, $carousel_size);
     $expected_values['items'][0]['title'] = 'BG Item 1';
     $expected_values['items'][0]['image'] = $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_1_uri);
+    $expected_values['items'][0]['image_alt'] = 'First image alt bg';
     $expected_values['items'][1]['title'] = 'BG Item 2';
     $expected_values['items'][1]['description'] = 'BG Item description 2';
     $expected_values['items'][1]['url_text'] = 'BG CTA 2';
     $expected_values['items'][1]['image'] = $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_2_uri);
     $expected_values['items'][2]['title'] = 'BG Item 3';
     $expected_values['items'][2]['image'] = $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_1_uri);
+    $expected_values['items'][2]['image_alt'] = 'First image alt bg';
     $expected_values['items'][3]['title'] = 'BG Item 4';
     $expected_values['items'][3]['description'] = 'BG Item description 4';
     $expected_values['items'][3]['url'] = 'http://www.example.com/';

tests/src/PatternAssertions/CarouselAssert.php

@@ -81,6 +81,12 @@ protected function assertItems(array $expected_items, Crawler $crawler): void {
       else {
         $image_element = $item->filter('picture.ecl-picture.ecl-banner__picture img.ecl-banner__image');
         $this->assertStringContainsString($expected_item['image'], $image_element->attr('src'));
+        if (isset($expected_item['image_alt'])) {
+          $this->assertStringContainsString($expected_item['image_alt'], $image_element->attr('alt'));
+        }
+        else {
+          $this->assertEquals('', $image_element->attr('alt'));
+        }
       }
     }
   }