From bc38a407ac8b895f6ebeba6d19a130d8789ed0dc Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Mon, 25 Sep 2023 16:12:30 +0300 Subject: [PATCH 1/4] EWPP-3626: Patch ECL media container and picture to render image alt even if empty. --- .../@ecl/twig-component-media-container+3.10.0.patch | 12 ++++++++++++ patches/@ecl/twig-component-picture+3.10.0.patch | 12 ++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 patches/@ecl/twig-component-media-container+3.10.0.patch create mode 100644 patches/@ecl/twig-component-picture+3.10.0.patch diff --git a/patches/@ecl/twig-component-media-container+3.10.0.patch b/patches/@ecl/twig-component-media-container+3.10.0.patch new file mode 100644 index 000000000..2ce2b7aab --- /dev/null +++ b/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 diff --git a/patches/@ecl/twig-component-picture+3.10.0.patch b/patches/@ecl/twig-component-picture+3.10.0.patch new file mode 100644 index 000000000..266bbc2a1 --- /dev/null +++ b/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 %} + /> From 99485422c5e8fee75f528fe9026366f27194a043 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Mon, 25 Sep 2023 17:51:59 +0300 Subject: [PATCH 2/4] EWPP-3626: Update patch-package version, remove file patch and adapt site footer patch. --- package.json | 2 +- patches/@ecl/twig-component-file+3.10.0.patch | 29 --------------- .../twig-component-site-footer+3.10.0.patch | 37 ++++++++++--------- 3 files changed, 20 insertions(+), 48 deletions(-) delete mode 100644 patches/@ecl/twig-component-file+3.10.0.patch diff --git a/package.json b/package.json index c274e903b..5857f296f 100644 --- a/package.json +++ b/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", diff --git a/patches/@ecl/twig-component-file+3.10.0.patch b/patches/@ecl/twig-component-file+3.10.0.patch deleted file mode 100644 index a22d3c571..000000000 --- a/patches/@ecl/twig-component-file+3.10.0.patch +++ /dev/null @@ -1,29 +0,0 @@ -patch-package ---- a/node_modules/@ecl/twig-component-file/file.html.twig -+++ b/node_modules/@ecl/twig-component-file/file.html.twig -@@ -113,7 +113,11 @@ -
-
- {% if _labels is defined %} -- {{- _labelsMarkup -}} -+ {% for _label in _labels %} -+
-+ {% include '@ecl/label/label.html.twig' with _label only %} -+
-+ {% endfor %} - {% endif %} - {% if _meta_detail_string is not empty %} -
-@@ -146,7 +150,11 @@ -
- {% if _variant == 'default' %} - {% if _labels is defined %} -- {{ _labelsMarkup }} -+ {% for _label in _labels %} -+
-+ {% include '@ecl/label/label.html.twig' with _label only %} -+
-+ {% endfor %} - {% endif %} - {% if _meta_detail_string is not empty %} -
diff --git a/patches/@ecl/twig-component-site-footer+3.10.0.patch b/patches/@ecl/twig-component-site-footer+3.10.0.patch index 9bdc091c5..2a80a839d 100644 --- a/patches/@ecl/twig-component-site-footer+3.10.0.patch +++ b/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 %} From 85fc4caa76817182c11c8894172fbfd08f5abd70 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Fri, 20 Oct 2023 08:14:27 +0300 Subject: [PATCH 3/4] EWPP-3626: Allow empty alt for media gallery items. --- .../src/MediaDataExtractorPluginBase.php | 2 +- patches/@ecl/twig-component-gallery+3.10.0.patch | 12 ++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 patches/@ecl/twig-component-gallery+3.10.0.patch diff --git a/modules/oe_theme_helper/src/MediaDataExtractorPluginBase.php b/modules/oe_theme_helper/src/MediaDataExtractorPluginBase.php index 060691f7a..97bf61b14 100644 --- a/modules/oe_theme_helper/src/MediaDataExtractorPluginBase.php +++ b/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(), ]); } diff --git a/patches/@ecl/twig-component-gallery+3.10.0.patch b/patches/@ecl/twig-component-gallery+3.10.0.patch new file mode 100644 index 000000000..6da4ed98a --- /dev/null +++ b/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({ From 59b79a82865ea6131de7bb504260ccb0a2514418 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Fri, 20 Oct 2023 08:15:00 +0300 Subject: [PATCH 4/4] EWPP-3626: Allot empty alt for banner and carousel patterns. --- .../FieldFormatter/MediaGalleryFormatterTest.php | 4 ++-- oe_theme.theme | 3 ++- templates/patterns/banners/banner.ui_patterns.yml | 1 + templates/patterns/banners/pattern-banner.html.twig | 12 +++++++++++- templates/patterns/carousel/carousel.ui_patterns.yml | 1 + .../patterns/carousel/pattern-carousel.html.twig | 11 ++++++++++- tests/src/Kernel/Paragraphs/MediaParagraphsTest.php | 8 ++++++++ tests/src/PatternAssertions/CarouselAssert.php | 6 ++++++ 8 files changed, 41 insertions(+), 5 deletions(-) diff --git a/modules/oe_theme_helper/tests/src/Kernel/Plugin/Field/FieldFormatter/MediaGalleryFormatterTest.php b/modules/oe_theme_helper/tests/src/Kernel/Plugin/Field/FieldFormatter/MediaGalleryFormatterTest.php index f4d7be860..800e2a2ba 100644 --- a/modules/oe_theme_helper/tests/src/Kernel/Plugin/Field/FieldFormatter/MediaGalleryFormatterTest.php +++ b/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') diff --git a/oe_theme.theme b/oe_theme.theme index 4081a57a9..d5a72a792 100644 --- a/oe_theme.theme +++ b/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. diff --git a/templates/patterns/banners/banner.ui_patterns.yml b/templates/patterns/banners/banner.ui_patterns.yml index e82b7b147..2350b34b9 100644 --- a/templates/patterns/banners/banner.ui_patterns.yml +++ b/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" diff --git a/templates/patterns/banners/pattern-banner.html.twig b/templates/patterns/banners/pattern-banner.html.twig index d3006c747..c35d946df 100644 --- a/templates/patterns/banners/pattern-banner.html.twig +++ b/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({'_': '-'}) %} @@ -29,7 +39,7 @@ title: title, description: description, link: _link, - image: image.src, + picture: _picture, size: size, centered: centered, full_width: full_width, diff --git a/templates/patterns/carousel/carousel.ui_patterns.yml b/templates/patterns/carousel/carousel.ui_patterns.yml index 09e9b6eac..1c0a1a17a 100644 --- a/templates/patterns/carousel/carousel.ui_patterns.yml +++ b/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" diff --git a/templates/patterns/carousel/pattern-carousel.html.twig b/templates/patterns/carousel/pattern-carousel.html.twig index 1856df2dd..5f7457c3e 100644 --- a/templates/patterns/carousel/pattern-carousel.html.twig +++ b/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('') diff --git a/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php b/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php index 0fe7ea9ba..c166ccd8a 100644 --- a/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php +++ b/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,6 +1006,7 @@ 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(); @@ -1011,6 +1014,7 @@ public function testCarousel(): void { '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/'; diff --git a/tests/src/PatternAssertions/CarouselAssert.php b/tests/src/PatternAssertions/CarouselAssert.php index 6ba382f60..3bbdb692b 100644 --- a/tests/src/PatternAssertions/CarouselAssert.php +++ b/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')); + } } } }