EWPP-3479: Add additional hidden parameter in order to render only th…

…e attribute when needed.

templates/patterns/text_featured_media/pattern-text-featured-media.html.twig

@@ -53,24 +53,35 @@
 {% endif %}
 
 {% if expandable is defined and expandable.content is not empty %}
-  {% set _media_container = _media_container|merge({
-    'expandable': {
-      'id': expandable.id|default('text-featured-media-' ~ random(100)),
-      'button': {
-        label: expandable.label_collapsed,
-        variant: 'secondary',
-        icon: {
-          name: 'corner-arrow',
-          transform: 'rotate-180',
-          size: 'm',
-          path: ecl_icon_path,
-        }
-      },
-      label_expanded: expandable.label_expanded|default('Expanded'|t),
-      label_collapsed: expandable.label_collapsed|default('Collapsed'|t),
-      content: expandable.content,
-    }
-  }) %}
+  {% if expandable.hidden == true %}
+    {% set aria_describedby_id = expandable.id|default('text-featured-media-' ~ random(100)) %}
+    {% set extra_attributes = [
+      {
+        'name': 'aria-describedby',
+        'value': aria_describedby_id,
+      }
+    ] %}
+    <div id="{{aria_describedby_id}}" hidden class="text-featured-media-hidden-content">{{ expandable.content }}</div>
+  {% else %}
+    {% set _media_container = _media_container|merge({
+      'expandable': {
+        'id': expandable.id|default('text-featured-media-' ~ random(10)),
+        'button': {
+          label: expandable.label_collapsed,
+          variant: 'secondary',
+          icon: {
+            name: 'corner-arrow',
+            transform: 'rotate-180',
+            size: 'm',
+            path: ecl_icon_path,
+          }
+        },
+        label_expanded: expandable.label_expanded|default('Expanded'|t),
+        label_collapsed: expandable.label_collapsed|default('Collapsed'|t),
+        content: expandable.content,
+      }
+    }) %}
+  {% endif %}
 {% endif %}
 
 {% if title %}
@@ -84,4 +95,5 @@
   link: call_to_action_link,
   media_container: _media_container|default([]),
   position: _position,
+  extra_attributes: extra_attributes|default([]),
 } %}

templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml

@@ -30,7 +30,7 @@ text_featured_media:
       label: "Image"
       description: "Featured image. Either this or the video need to be provided. If both are provided the image will take preference."
       preview:
-        src: "https://placeimg.com/1000/500/arch"
+        src: "https://picsum.photos/1000/500"
         alt: "Alternative text for featured item image"
     video:
       type: "text"
@@ -71,6 +71,7 @@ text_featured_media:
       description: "Optional expandable text block with extra information about the media item. The block cannot be rendered without actual text and the id must be unique on the page."
       preview:
         id: ""
+        hidden: true
         label_expanded: "Expanded"
         label_collapsed: "Collapsed"
         content:

tests/src/Kernel/fixtures/rendering.yml

@@ -2796,6 +2796,7 @@
         path: "http://example.com"
       highlighted: true
       expandable:
+        hidden: false
         label_expanded: "Expand"
         label_collapsed: "Collapse"
         content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
@@ -2827,6 +2828,10 @@
       text_title: "Title"
       caption: "Some caption text for the image"
       text: "Some more text"
+      expandable:
+        id: 'text-featured-media-1'
+        hidden: true
+        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
   assertions:
     count:
       'article.ecl-featured-item.ecl-featured-item--extended': 0
@@ -2840,10 +2845,12 @@
       'figcaption.ecl-media-container__caption': 0
       'a.ecl-link': 0
       'div.ecl-expandable.ecl-media-container__expandable': 0
+      'div#text-featured-media-1.text-featured-media-hidden-content': 1
     equals:
       'h2.ecl-u-type-heading-2': "Heading"
       'div.ecl-featured-item__title': "Title"
       'div.ecl-featured-item__item div.ecl-featured-item__description': "Some more text"
+      'div#text-featured-media-1.text-featured-media-hidden-content': "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
 - array:
     '#type': pattern
     '#id': text_featured_media

tests/src/PatternAssertions/TextFeaturedMediaAssert.php

@@ -128,8 +128,8 @@ protected function assertHighlighted(bool $highlighted, Crawler $crawler) {
    * Asserts the optional expandable block info.
    *
    * @param array $expected_block
-   *   Array with keys: 'id' (optional), 'label_expanded', 'label_collapsed'
-   *   and 'content'.
+   *   Array with keys: 'id' (optional), 'label_expanded', 'label_collapsed',
+   *   (boolean) 'hidden' and 'content'.
    * @param \Symfony\Component\DomCrawler\Crawler $crawler
    *   The DomCrawler where to check the element.
    */
@@ -138,6 +138,17 @@ protected function assertExpandable(array $expected_block, Crawler $crawler): vo
       $this->assertElementNotExists('div.ecl-expandable.ecl-media-container__expandable', $crawler);
       return;
     }
+    if (isset($expected_block['hidden']) && $expected_block['hidden'] === TRUE) {
+      if (isset($expected_block['id'])) {
+        $this->assertElementExists('div#' . $expected_block['id'], $crawler);
+      }
+      // Assert the hidden content element.
+      $content = $crawler->filter('div.text-featured-media-hidden-content');
+      $this->assertEquals($expected_block['content'], $content->text());
+      // Assert the expandable selector is not present.
+      $this->assertElementNotExists('div.ecl-expandable.ecl-media-container__expandable', $crawler);
+      return;
+    }
     // Assert the expandable selector.
     $this->assertElementExists('div.ecl-expandable.ecl-media-container__expandable', $crawler);
     // Assert the button with its toggle labels and icon.