From 72d4678ea16b59992a10b14686a5418683590f44 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Fri, 26 Jan 2024 10:28:25 +0200
Subject: [PATCH 1/2] fix(accordion): Fixing markup of the item, removing
 unneeded title-id - FRONT-4228

---
 src/components.d.ts                           |  6 ++--
 .../ecl-accordion/ecl-accordion-item.tsx      | 20 +++++++----
 .../ecl-accordion/ecl-accordion.stories.ts    |  9 +++--
 src/components/ecl-accordion/readme.md        | 17 +++++-----
 .../__snapshots__/ecl-accordion.spec.tsx.snap | 33 ++++++++++++-------
 .../ecl-accordion/test/ecl-accordion.spec.tsx | 12 +++++--
 6 files changed, 63 insertions(+), 34 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index d01dd726..85ac00e6 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -16,9 +16,10 @@ export namespace Components {
         "expanded": boolean;
         "itemId": string;
         "label": string;
+        "labelCollapsed": string;
+        "labelExpanded": string;
         "styleClass": string;
         "theme": string;
-        "titleId": string;
     }
     interface EclBanner {
         "bannerTitle": string;
@@ -1442,9 +1443,10 @@ declare namespace LocalJSX {
         "expanded"?: boolean;
         "itemId"?: string;
         "label"?: string;
+        "labelCollapsed"?: string;
+        "labelExpanded"?: string;
         "styleClass"?: string;
         "theme"?: string;
-        "titleId"?: string;
     }
     interface EclBanner {
         "bannerTitle"?: string;
diff --git a/src/components/ecl-accordion/ecl-accordion-item.tsx b/src/components/ecl-accordion/ecl-accordion-item.tsx
index 15bf6be0..bf12bbbd 100644
--- a/src/components/ecl-accordion/ecl-accordion-item.tsx
+++ b/src/components/ecl-accordion/ecl-accordion-item.tsx
@@ -13,9 +13,10 @@ export class EclAccordionItem {
   @Prop() styleClass: string;
   @Prop() label: string;
   @Prop() itemId: string;
-  @Prop() titleId: string;
   @Prop({reflect:true}) expanded: boolean;
   @Prop() theme: string = 'ec';
+  @Prop() labelExpanded = '';
+  @Prop() labelCollapsed = '';
   
   getClass(): string {
     return [
@@ -26,24 +27,31 @@ export class EclAccordionItem {
   }
 
   render() {
+    const titleId = `${this.itemId}-title`;
+    const contentId = `${this.itemId}-content`;
     return (
       <div
         class={this.getClass()}
-        id={this.itemId || null}
-        aria-labelledby={this.titleId || null}
+        aria-labelledby={titleId}
       >
         <h3 
           class={`ecl-accordion__title sc-ecl-accordion-${this.theme}`}
-          id={this.titleId || null}
+          id={titleId}
         >
           <button
+            type="button"
             data-ecl-accordion-toggle
-            aria-controls={`${this.el.id}-content`}
+            aria-controls={contentId}
             class={`ecl-accordion__toggle sc-ecl-accordion-${this.theme}`}
             aria-expanded={this.expanded ? 'true' : 'false'}
+            data-ecl-label-collapsed={this.labelCollapsed}
+            data-ecl-label-expanded={this.labelExpanded}
           >
             <span class={`ecl-accordion__toggle-flex sc-ecl-accordion-${this.theme}`}>
               <span class={`ecl-accordion__toggle-indicator sc-ecl-accordion-${this.theme}`}>
+                <span class={`ecl-accordion__toggle-label sc-ecl-accordion-${this.theme}`}>
+                  {this.expanded ? this.labelExpanded : this.labelCollapsed}
+                </span>
                 <ecl-icon
                   icon={this.expanded ? "minus" : 'plus'}
                   theme={this.theme}
@@ -61,7 +69,7 @@ export class EclAccordionItem {
         <div 
           class={`ecl-accordion__content sc-ecl-accordion-${this.theme}`}
           role="region"
-          id={`${this.el.id}-content`}
+          id={contentId}
           hidden={this.expanded !== true}
         >
           <slot></slot>
diff --git a/src/components/ecl-accordion/ecl-accordion.stories.ts b/src/components/ecl-accordion/ecl-accordion.stories.ts
index 0d83b622..13d024a9 100644
--- a/src/components/ecl-accordion/ecl-accordion.stories.ts
+++ b/src/components/ecl-accordion/ecl-accordion.stories.ts
@@ -9,9 +9,10 @@ const Template = (args) =>
   >
     <ecl-accordion-item
       item-id="ecl-accordion-item-id-1"
-      title-id="accordion-example-title-1"
       label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy"
       theme="${args.theme}"
+      label-expanded="Close"
+      label-collapsed="Open"
     >
       The College of Commissioners held today the first weekly meeting of 2019 which was devoted to discussing the
       challenges of this new year. Commissioners used the opportunity to take stock and discuss the year ahead,
@@ -21,18 +22,20 @@ const Template = (args) =>
     <ecl-accordion-item
       item-id="ecl-accordion-item-id-2"
       label="Energy union and climate"
-      title-id="accordion-example-title-2"
       expanded
       theme="${args.theme}"
+      label-expanded="Close"
+      label-collapsed="Open"
     >
       A balanced and progressive trade policy to harness globalisation
     </ecl-accordion-item>
 
     <ecl-accordion-item
       item-id="ecl-accordion-item-id-3"
-      title-id="accordion-example-title-3"
       label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy"
       theme="${args.theme}"
+      label-expanded="Close"
+      label-collapsed="Open"
     >
       In the modern global economy trade is essential for growth, <ecl-link path="https://ec.europa.eu/">jobs</ecl-link> and competiveness, and the EU is committed to
       maintaining an open and rules-based trading system. With the rising threat of protectionism and weakened
diff --git a/src/components/ecl-accordion/readme.md b/src/components/ecl-accordion/readme.md
index a3420a0f..c5fa4c6e 100644
--- a/src/components/ecl-accordion/readme.md
+++ b/src/components/ecl-accordion/readme.md
@@ -7,14 +7,15 @@
 
 ## Properties
 
-| Property     | Attribute     | Description | Type      | Default     |
-| ------------ | ------------- | ----------- | --------- | ----------- |
-| `expanded`   | `expanded`    |             | `boolean` | `undefined` |
-| `itemId`     | `item-id`     |             | `string`  | `undefined` |
-| `label`      | `label`       |             | `string`  | `undefined` |
-| `styleClass` | `style-class` |             | `string`  | `undefined` |
-| `theme`      | `theme`       |             | `string`  | `'ec'`      |
-| `titleId`    | `title-id`    |             | `string`  | `undefined` |
+| Property         | Attribute         | Description | Type      | Default     |
+| ---------------- | ----------------- | ----------- | --------- | ----------- |
+| `expanded`       | `expanded`        |             | `boolean` | `undefined` |
+| `itemId`         | `item-id`         |             | `string`  | `undefined` |
+| `label`          | `label`           |             | `string`  | `undefined` |
+| `labelCollapsed` | `label-collapsed` |             | `string`  | `''`        |
+| `labelExpanded`  | `label-expanded`  |             | `string`  | `''`        |
+| `styleClass`     | `style-class`     |             | `string`  | `undefined` |
+| `theme`          | `theme`           |             | `string`  | `'ec'`      |
 
 
 ## Dependencies
diff --git a/src/components/ecl-accordion/test/__snapshots__/ecl-accordion.spec.tsx.snap b/src/components/ecl-accordion/test/__snapshots__/ecl-accordion.spec.tsx.snap
index 9e41a839..3ff97764 100644
--- a/src/components/ecl-accordion/test/__snapshots__/ecl-accordion.spec.tsx.snap
+++ b/src/components/ecl-accordion/test/__snapshots__/ecl-accordion.spec.tsx.snap
@@ -4,13 +4,16 @@ exports[`ecl-accordion renders 1`] = `
 <ecl-accordion theme="ec">
   <!---->
   <div class="ecl-accordion">
-    <ecl-accordion-item icon-path="/icons.svg" id="ecl-accordion-item-id-1" label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy">
+    <ecl-accordion-item icon-path="/icons.svg" item-id="ecl-accordion-item-id-1" label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy" label-collapsed="Open" label-expanded="Close">
       <!---->
-      <div class="ecl-accordion__item sc-ecl-accordion-ec">
-        <h3 class="ecl-accordion__title sc-ecl-accordion-ec">
-          <button aria-controls="ecl-accordion-item-id-1-content" aria-expanded="false" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle>
+      <div aria-labelledby="ecl-accordion-item-id-1-title" class="ecl-accordion__item sc-ecl-accordion-ec">
+        <h3 class="ecl-accordion__title sc-ecl-accordion-ec" id="ecl-accordion-item-id-1-title">
+          <button aria-controls="ecl-accordion-item-id-1-content" aria-expanded="false" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle data-ecl-label-collapsed="Open" data-ecl-label-expanded="Close" type="button">
             <span class="ecl-accordion__toggle-flex sc-ecl-accordion-ec">
               <span class="ecl-accordion__toggle-indicator sc-ecl-accordion-ec">
+                <span class="ecl-accordion__toggle-label sc-ecl-accordion-ec">
+                  Open
+                </span>
                 <ecl-icon data-ecl-accordion-icon icon="plus" size="m" style-class="ecl-accordion__toggle-icon sc-ecl-accordion-ec" theme="ec"></ecl-icon>
               </span>
               <span class="ecl-accordion__toggle-title sc-ecl-accordion-ec">
@@ -24,13 +27,16 @@ exports[`ecl-accordion renders 1`] = `
         </div>
       </div>
     </ecl-accordion-item>
-    <ecl-accordion-item expanded="" icon-path="/icons.svg" id="ecl-accordion-item-id-2" label="Energy union and climate">
+    <ecl-accordion-item expanded="" icon-path="/icons.svg" item-id="ecl-accordion-item-id-2" label="Energy union and climate" label-collapsed="Open" label-expanded="Close">
       <!---->
-      <div class="ecl-accordion__item sc-ecl-accordion-ec">
-        <h3 class="ecl-accordion__title sc-ecl-accordion-ec">
-          <button aria-controls="ecl-accordion-item-id-2-content" aria-expanded="true" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle>
+      <div aria-labelledby="ecl-accordion-item-id-2-title" class="ecl-accordion__item sc-ecl-accordion-ec">
+        <h3 class="ecl-accordion__title sc-ecl-accordion-ec" id="ecl-accordion-item-id-2-title">
+          <button aria-controls="ecl-accordion-item-id-2-content" aria-expanded="true" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle data-ecl-label-collapsed="Open" data-ecl-label-expanded="Close" type="button">
             <span class="ecl-accordion__toggle-flex sc-ecl-accordion-ec">
               <span class="ecl-accordion__toggle-indicator sc-ecl-accordion-ec">
+                <span class="ecl-accordion__toggle-label sc-ecl-accordion-ec">
+                  Close
+                </span>
                 <ecl-icon data-ecl-accordion-icon icon="minus" size="m" style-class="ecl-accordion__toggle-icon sc-ecl-accordion-ec" theme="ec"></ecl-icon>
               </span>
               <span class="ecl-accordion__toggle-title sc-ecl-accordion-ec">
@@ -44,13 +50,16 @@ exports[`ecl-accordion renders 1`] = `
         </div>
       </div>
     </ecl-accordion-item>
-    <ecl-accordion-item id="ecl-accordion-item-id-3" label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy">
+    <ecl-accordion-item item-id="ecl-accordion-item-id-3" label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy" label-collapsed="Open" label-expanded="Close">
       <!---->
-      <div class="ecl-accordion__item sc-ecl-accordion-ec">
-        <h3 class="ecl-accordion__title sc-ecl-accordion-ec">
-          <button aria-controls="ecl-accordion-item-id-3-content" aria-expanded="false" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle>
+      <div aria-labelledby="ecl-accordion-item-id-3-title" class="ecl-accordion__item sc-ecl-accordion-ec">
+        <h3 class="ecl-accordion__title sc-ecl-accordion-ec" id="ecl-accordion-item-id-3-title">
+          <button aria-controls="ecl-accordion-item-id-3-content" aria-expanded="false" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle data-ecl-label-collapsed="Open" data-ecl-label-expanded="Close" type="button">
             <span class="ecl-accordion__toggle-flex sc-ecl-accordion-ec">
               <span class="ecl-accordion__toggle-indicator sc-ecl-accordion-ec">
+                <span class="ecl-accordion__toggle-label sc-ecl-accordion-ec">
+                  Open
+                </span>
                 <ecl-icon data-ecl-accordion-icon icon="plus" size="m" style-class="ecl-accordion__toggle-icon sc-ecl-accordion-ec" theme="ec"></ecl-icon>
               </span>
               <span class="ecl-accordion__toggle-title sc-ecl-accordion-ec">
diff --git a/src/components/ecl-accordion/test/ecl-accordion.spec.tsx b/src/components/ecl-accordion/test/ecl-accordion.spec.tsx
index 7b20fe19..514ea28a 100644
--- a/src/components/ecl-accordion/test/ecl-accordion.spec.tsx
+++ b/src/components/ecl-accordion/test/ecl-accordion.spec.tsx
@@ -8,23 +8,29 @@ describe('ecl-accordion', () => {
       components: [EclAccordion, EclAccordionItem],
       html: `<ecl-accordion theme="ec">
               <ecl-accordion-item
-                id="ecl-accordion-item-id-1"
+                item-id="ecl-accordion-item-id-1"
                 label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy"
                 icon-path="/icons.svg"
+                label-expanded="Close"
+                label-collapsed="Open"
               >
                 Accordion item label
               </ecl-accordion-item>
               <ecl-accordion-item
-                id="ecl-accordion-item-id-2"
+                item-id="ecl-accordion-item-id-2"
                 label="Energy union and climate"
                 icon-path="/icons.svg"
                 expanded
+                label-expanded="Close"
+                label-collapsed="Open"
               >
                 Accordion item label
               </ecl-accordion-item>
               <ecl-accordion-item
-                id="ecl-accordion-item-id-3"
+                item-id="ecl-accordion-item-id-3"
                 label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy"
+                label-expanded="Close"
+                label-collapsed="Open"
               >
                 Accordion item label
               </ecl-accordion-item>

From 2bb169f60ba6010d5e357a801110cb252a331f1c Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Fri, 26 Jan 2024 10:59:30 +0200
Subject: [PATCH 2/2] fix(accordion): Fixing item margin - FRONT-4228

---
 .../ecl-accordion/src/styles/ecl-accordion-item.scss          | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/ecl-accordion/src/styles/ecl-accordion-item.scss b/src/components/ecl-accordion/src/styles/ecl-accordion-item.scss
index 5d4e87f3..48f49f4a 100644
--- a/src/components/ecl-accordion/src/styles/ecl-accordion-item.scss
+++ b/src/components/ecl-accordion/src/styles/ecl-accordion-item.scss
@@ -1,3 +1,7 @@
 :host {
   display: block;
 }
+
+.ecl-accordion__item {
+  margin-top: 0.5rem;
+}