Merge branch 'v3.10-dev' into FRONT-4019-New-old-icons

ec-europa · Sep 11, 2023 · 1684ab3 · 1684ab3
2 parents 68a2c20 + a817c10
commit 1684ab3
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 9 deletions.
diff --git a/src/implementations/twig/components/accordion/__snapshots__/accordion.test.js.snap b/src/implementations/twig/components/accordion/__snapshots__/accordion.test.js.snap
@@ -12,6 +12,7 @@ exports[`Accordion renders correctly 1`] = `
     >
       <h3
         class="ecl-accordion__title"
+        id="accordion-example-title"
       >
         <button
           aria-controls="accordion-example-content"
@@ -52,6 +53,7 @@ exports[`Accordion renders correctly 1`] = `
         </button>
       </h3>
       <div
+        aria-labelledby="accordion-example-title"
         class="ecl-accordion__content"
         hidden=""
         id="accordion-example-content"
@@ -65,6 +67,7 @@ exports[`Accordion renders correctly 1`] = `
     >
       <h3
         class="ecl-accordion__title"
+        id="accordion-example2-title"
       >
         <button
           aria-controls="accordion-example2-content"
@@ -105,6 +108,7 @@ exports[`Accordion renders correctly 1`] = `
         </button>
       </h3>
       <div
+        aria-labelledby="accordion-example2-title"
         class="ecl-accordion__content"
         hidden=""
         id="accordion-example2-content"
@@ -118,6 +122,7 @@ exports[`Accordion renders correctly 1`] = `
     >
       <h3
         class="ecl-accordion__title"
+        id="accordion-example3-title"
       >
         <button
           aria-controls="accordion-example3-content"
@@ -158,6 +163,7 @@ exports[`Accordion renders correctly 1`] = `
         </button>
       </h3>
       <div
+        aria-labelledby="accordion-example3-title"
         class="ecl-accordion__content"
         hidden=""
         id="accordion-example3-content"
@@ -184,6 +190,7 @@ exports[`Accordion renders correctly with extra attributes 1`] = `
     >
       <h3
         class="ecl-accordion__title"
+        id="accordion-example-title"
       >
         <button
           aria-controls="accordion-example-content"
@@ -224,6 +231,7 @@ exports[`Accordion renders correctly with extra attributes 1`] = `
         </button>
       </h3>
       <div
+        aria-labelledby="accordion-example-title"
         class="ecl-accordion__content"
         hidden=""
         id="accordion-example-content"
@@ -237,6 +245,7 @@ exports[`Accordion renders correctly with extra attributes 1`] = `
     >
       <h3
         class="ecl-accordion__title"
+        id="accordion-example2-title"
       >
         <button
           aria-controls="accordion-example2-content"
@@ -277,6 +286,7 @@ exports[`Accordion renders correctly with extra attributes 1`] = `
         </button>
       </h3>
       <div
+        aria-labelledby="accordion-example2-title"
         class="ecl-accordion__content"
         hidden=""
         id="accordion-example2-content"
@@ -290,6 +300,7 @@ exports[`Accordion renders correctly with extra attributes 1`] = `
     >
       <h3
         class="ecl-accordion__title"
+        id="accordion-example3-title"
       >
         <button
           aria-controls="accordion-example3-content"
@@ -330,6 +341,7 @@ exports[`Accordion renders correctly with extra attributes 1`] = `
         </button>
       </h3>
       <div
+        aria-labelledby="accordion-example3-title"
         class="ecl-accordion__content"
         hidden=""
         id="accordion-example3-content"
@@ -354,6 +366,7 @@ exports[`Accordion renders correctly with extra class names 1`] = `
     >
       <h3
         class="ecl-accordion__title"
+        id="accordion-example-title"
       >
         <button
           aria-controls="accordion-example-content"
@@ -394,6 +407,7 @@ exports[`Accordion renders correctly with extra class names 1`] = `
         </button>
       </h3>
       <div
+        aria-labelledby="accordion-example-title"
         class="ecl-accordion__content"
         hidden=""
         id="accordion-example-content"
@@ -407,6 +421,7 @@ exports[`Accordion renders correctly with extra class names 1`] = `
     >
       <h3
         class="ecl-accordion__title"
+        id="accordion-example2-title"
       >
         <button
           aria-controls="accordion-example2-content"
@@ -447,6 +462,7 @@ exports[`Accordion renders correctly with extra class names 1`] = `
         </button>
       </h3>
       <div
+        aria-labelledby="accordion-example2-title"
         class="ecl-accordion__content"
         hidden=""
         id="accordion-example2-content"
@@ -460,6 +476,7 @@ exports[`Accordion renders correctly with extra class names 1`] = `
     >
       <h3
         class="ecl-accordion__title"
+        id="accordion-example3-title"
       >
         <button
           aria-controls="accordion-example3-content"
@@ -500,6 +517,7 @@ exports[`Accordion renders correctly with extra class names 1`] = `
         </button>
       </h3>
       <div
+        aria-labelledby="accordion-example3-title"
         class="ecl-accordion__content"
         hidden=""
         id="accordion-example3-content"

diff --git a/src/implementations/twig/components/accordion/accordion.html.twig b/src/implementations/twig/components/accordion/accordion.html.twig
@@ -58,7 +58,7 @@
   {% if _items is not empty %}
     {% for _item in _items %}
       <div class="ecl-accordion__item">
-        <h{{ _item.level|default(3) }} class="ecl-accordion__title">
+        <h{{ _item.level|default(3) }} class="ecl-accordion__title" id="{{ _item.id }}-title">
           <button
             type="button"
             class="ecl-accordion__toggle"
@@ -91,6 +91,7 @@
           hidden
           id="{{ _item.id }}-content"
           role="region"
+          aria-labelledby="{{ _item.id }}-title"
         >
           {%- set _content = _item.content|default('') %}
           {%- block content _content -%}

diff --git a/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap b/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap
@@ -594,6 +594,7 @@ exports[`Gallery Default renders correctly 1`] = `
       </div>
     </div>
     <dialog
+      aria-label="Gallery overlay"
       class="ecl-gallery__overlay"
       data-ecl-gallery-overlay=""
     >
@@ -1372,6 +1373,7 @@ exports[`Gallery Default renders correctly with deprecated data 1`] = `
       </div>
     </div>
     <dialog
+      aria-label="Gallery overlay"
       class="ecl-gallery__overlay"
       data-ecl-gallery-overlay=""
     >
@@ -2152,6 +2154,7 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = `
       </div>
     </div>
     <dialog
+      aria-label="Gallery overlay"
       class="ecl-gallery__overlay"
       data-ecl-gallery-overlay=""
     >
@@ -2930,6 +2933,7 @@ exports[`Gallery Default renders correctly with extra class names 1`] = `
       </div>
     </div>
     <dialog
+      aria-label="Gallery overlay"
       class="ecl-gallery__overlay"
       data-ecl-gallery-overlay=""
     >
@@ -3708,6 +3712,7 @@ exports[`Gallery Default renders correctly with old data 1`] = `
       </div>
     </div>
     <dialog
+      aria-label="Gallery overlay"
       class="ecl-gallery__overlay"
       data-ecl-gallery-overlay=""
     >

diff --git a/...mplementations/twig/components/media-container/__snapshots__/media-container.test.js.snap b/...mplementations/twig/components/media-container/__snapshots__/media-container.test.js.snap
@@ -174,9 +174,7 @@ exports[`Media Container infographic renders correctly 1`] = `
         hidden=""
         id="expandable-example-content"
       >
-        <p
-          class="ecl-u-type-paragraph-m"
-        >
+        <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et varius est. Sed elementum rutrum libero, at vulputate nisl posuere et. Morbi dui sem, rhoncus non fermentum eget, finibus non purus.
         </p>
       </div>

diff --git a/src/implementations/vanilla/components/expandable/_expandable.scss b/src/implementations/vanilla/components/expandable/_expandable.scss
@@ -17,10 +17,24 @@ $_expandable-content-color: null !default;
 }
 
 .ecl-expandable__content {
+  border-bottom: 1px solid map.get(theme.$color, 'grey-25');
   color: $_expandable-content-color;
-  font-family: #{map.get(theme.$font-family, 'default')};
+  font: map.get(theme.$font-prolonged, 'm');
+  margin-top: map.get(theme.$spacing, 'm');
+  padding-inline-start: map.get(theme.$spacing, 'm');
+  padding-bottom: map.get(theme.$spacing, 'l');
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
 }
 
-.no-js .ecl-expandable__content {
-  display: block;
+.no-js {
+  .ecl-expandable__content {
+    display: block;
+  }
 }
diff --git a/src/implementations/vanilla/components/expandable/expandable-print.scss b/src/implementations/vanilla/components/expandable/expandable-print.scss
@@ -10,11 +10,15 @@
   margin: 0;
 }
 
-.ecl-expandable__toggle {
+.ecl-button.ecl-expandable__toggle {
   display: none;
 }
 
 .ecl-expandable__content {
+  border-bottom: 1px solid map.get(theme.$color, 'grey-25');
   display: block;
   font-family: #{map.get(theme.$font-family-print, 'default')};
+  max-width: 80ch;
+  padding: map.get(theme.$spacing-print, 'm') 0
+    map.get(theme.$spacing-print, 'l') map.get(theme.$spacing-print, 'm');
 }
diff --git a/src/implementations/vanilla/components/menu/menu.js b/src/implementations/vanilla/components/menu/menu.js
@@ -813,6 +813,9 @@ export class Menu {
       if (menuExpanded === 'true') {
         this.handleClickOnClose();
       }
+      this.items.forEach((item) => {
+        item.setAttribute('aria-expanded', 'false');
+      });
     }
   }
 

diff --git a/src/specs/components/gallery/demo/data.js b/src/specs/components/gallery/demo/data.js
@@ -233,6 +233,7 @@ module.exports = {
         path: '/icons.svg',
       },
     },
+    extra_attributes: [{ name: 'aria-label', value: 'Gallery overlay' }],
   },
   disable_overlay: false,
   view_all_label: 'See all',

diff --git a/src/specs/components/media-container/demo/data--infographic.js b/src/specs/components/media-container/demo/data--infographic.js
@@ -21,6 +21,6 @@ module.exports = {
     label_expanded: 'Expanded',
     label_collapsed: 'Collapsed',
     content:
-      '<p class="ecl-u-type-paragraph-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et varius est. Sed elementum rutrum libero, at vulputate nisl posuere et. Morbi dui sem, rhoncus non fermentum eget, finibus non purus.</p>',
+      '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et varius est. Sed elementum rutrum libero, at vulputate nisl posuere et. Morbi dui sem, rhoncus non fermentum eget, finibus non purus.</p>',
   },
 };
diff --git a/src/website/src/pages/ec/components/navigation/menu/docs/code.mdx b/src/website/src/pages/ec/components/navigation/menu/docs/code.mdx
@@ -12,6 +12,7 @@ import menu from '../demo';
   selectedStory="default"
   showFrame
   frameHeight="350"
+  disableAutoResize
 >
   <Html markup={menu} />
 </Playground>
diff --git a/src/website/src/pages/eu/components/navigation/menu/docs/code.mdx b/src/website/src/pages/eu/components/navigation/menu/docs/code.mdx
@@ -12,6 +12,7 @@ import menu from '../demo';
   selectedStory="default"
   showFrame
   frameHeight="350"
+  disableAutoResize
 >
   <Html markup={menu} />
 </Playground>