docs(accordion): update accordion's doc - INNO-1629

src/website/src/pages/ec/components/accordion/docs/usage.mdx

@@ -15,12 +15,12 @@ import { Paragraph, Anatomy } from '@ecl/website-components';
   . They help keep the interface clean and reduce scrolling by saving vertical space.
 </Paragraph>
 
-**Accordions display relevant information (through labels) at a higher level, acting as cues users scan for, while indicating that additional content or options are available through additional interaction.** For this reason, accordion header labels (collapsed state) should be as descriptive and concise as possible, allowing users to form a mental model of the information available.
+**Accordions display easy to scan labels of the relevant information, indicative of the additional content that is available through extra interaction.** For this reason, accordion labels (collapsed state) should be as descriptive and concise as possible, helping users to form a mental model of the information available.
 
 ## Anatomy
 
 <Anatomy
-  image="https://inno-ecl.s3.amazonaws.com/media/images/EC/Accordion/Accordion%20-%20Expanded.jpg"
+  image="https://inno-ecl.s3.amazonaws.com/media/images/EC/Accordion/Accordion2.jpg"
   alt="Anatomy of accordion"
   legend={{
     items: [
@@ -36,40 +36,41 @@ import { Paragraph, Anatomy } from '@ecl/website-components';
   }}
 />
 
-| Elements         | Mandatory | Description                                                                                                                      |
-| ---------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| Action indicator | Yes       | Varies depending on the state (collapsed/expanded). Indicates what the next action will do - displays content container on click |
-| Label            | Yes       | The title must describe the content within concisely                                                                             |
-| Details          | Yes       | The description displays relevant content in a container that's initially hidden                                                 |
+| Elements          | Mandatory | Description                                                                                                                                                                    |
+| ----------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Action indicator  | Yes       | Varies depending on the state (collapsed/expanded). **Indicates what the next action will do - expands/collapses content container on click**                                  |
+| Button            | Yes       | Actionable item (expands/collapses) - The button label must be short and **descriptive of the action that follows after being clicked**.<br/>Contains Label & Action indicator |
+| Content Container | Yes       | This element displays relevant content in a **container that's initially hidden**                                                                                              |
 
 ## Do's
 
-- **order** logically, matching real-world task succession and interactions
-- use **titles that are representative** of the content behind each section - this allows users to form a mental model of the information available while scanning the page
+- use **labels that are representative** of the content inside the (initially hidden) container
+- **order** logically (e.g. 1st quarter, 2nd quarter, 3rd quarter, 4th quarter)
 - make sure this component is needed (reduce vertical space) and users will benefit from the added interaction cost
 
 ## Don'ts
 
-- **don't use unless it’s necessary** to truncate information for the general layout/design
-- **don't use actionable items** (i.e. forms, accordions, buttons, CTAs, etc.) **or pictures in the description container** as this decreases visibility
+- **don't use unless** users will benefit from easy-to-scan, truncated, information
+- **don't use actionable items** (i.e. forms, accordions, buttons, CTAs, etc.) **or pictures in the content container** as they will have decreased visibility
 - **don't use when there are under 3 pieces of information**
 - **don't hide important information** that should be present at all times
-- **don't use long titles**, keep the title to one line (character count?)
-- **don't have over 7 lines of text** in the description container
+- **don't use long labels**, ideally keep it to one line, **maximum 2**
+- **don't have over 7 lines of text** in the content container
 
 ## When to use
 
-- when you need to **present multiple sections of content in a simple way** on one page, without overwhelming the user
-- when it’s not critical for every user to read every section of content, but **useful when a user wants to compare different sections**
-- when you can **make complex content easier to digest through descriptive headings**
+- when you need to **present multiple sections of content in a simple way** on one page, without overwhelming the user (especially applicable to mobile)
+- when it’s not critical for every user to read every section of content, adding value **when a user wants to compare different sections (multiple content containers can be opened simultaneously)**
+- when you can **make extensive and complex content easier to digest through descriptive labels**
 
 ## When not to use
 
-- don't use when pages are short (reading time: under 3 minute)
-- don't use when information is better structured horizontally and does not need comparison between sections - use tabs instead
+- don't use when pages are short (reading time: under 3 minutes)
+- don't use when information would be better structured horizontally (does not need comparison between sections) - use tabs instead
 
 ## Notes
 
 ### Accessibility
 
 - **progressive disclosure elements** can be helpful accessibility aids as **they give users the choice of revealing content to read or bypass**, making page navigation more efficient for screen-reader users and people using the keyboard or alternative input devices
+- **make sure the component is printer-friendly**, thus coded to be in the expanded state when printed

src/website/src/pages/eu/components/accordion/docs/usage.mdx

@@ -15,12 +15,12 @@ import { Paragraph, Anatomy } from '@ecl/website-components';
   . They help keep the interface clean and reduce scrolling by saving vertical space.
 </Paragraph>
 
-**Accordions display relevant information (through labels) at a higher level, acting as cues users scan for, while indicating that additional content or options are available through additional interaction.** For this reason, accordion header labels (collapsed state) should be as descriptive and concise as possible, allowing users to form a mental model of the information available.
+**Accordions display easy to scan labels of the relevant information, indicative of the additional content that is available through extra interaction.** For this reason, accordion labels (collapsed state) should be as descriptive and concise as possible, helping users to form a mental model of the information available.
 
 ## Anatomy
 
 <Anatomy
-  image="https://inno-ecl.s3.amazonaws.com/media/images/EC/Accordion/Accordion%20-%20Expanded.jpg"
+  image="https://inno-ecl.s3.amazonaws.com/media/images/EC/Accordion/Accordion2.jpg"
   alt="Anatomy of accordion"
   legend={{
     items: [
@@ -36,40 +36,41 @@ import { Paragraph, Anatomy } from '@ecl/website-components';
   }}
 />
 
-| Elements         | Mandatory | Description                                                                                                                      |
-| ---------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| Action indicator | Yes       | Varies depending on the state (collapsed/expanded). Indicates what the next action will do - displays content container on click |
-| Label            | Yes       | The title must describe the content within concisely                                                                             |
-| Details          | Yes       | The description displays relevant content in a container that's initially hidden                                                 |
+| Elements          | Mandatory | Description                                                                                                                                                                    |
+| ----------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Action indicator  | Yes       | Varies depending on the state (collapsed/expanded). **Indicates what the next action will do - expands/collapses content container on click**                                  |
+| Button            | Yes       | Actionable item (expands/collapses) - The button label must be short and **descriptive of the action that follows after being clicked**.<br/>Contains Label & Action indicator |
+| Content Container | Yes       | This element displays relevant content in a **container that's initially hidden**                                                                                              |
 
 ## Do's
 
-- **order** logically, matching real-world task succession and interactions
-- use **titles that are representative** of the content behind each section - this allows users to form a mental model of the information available while scanning the page
+- use **labels that are representative** of the content inside the (initially hidden) container
+- **order** logically (e.g. 1st quarter, 2nd quarter, 3rd quarter, 4th quarter)
 - make sure this component is needed (reduce vertical space) and users will benefit from the added interaction cost
 
 ## Don'ts
 
-- **don't use unless it’s necessary** to truncate information for the general layout/design
-- **don't use actionable items** (i.e. forms, accordions, buttons, CTAs, etc.) **or pictures in the description container** as this decreases visibility
+- **don't use unless** users will benefit from easy-to-scan, truncated, information
+- **don't use actionable items** (i.e. forms, accordions, buttons, CTAs, etc.) **or pictures in the content container** as they will have decreased visibility
 - **don't use when there are under 3 pieces of information**
 - **don't hide important information** that should be present at all times
-- **don't use long titles**, keep the title to one line (character count?)
-- **don't have over 7 lines of text** in the description container
+- **don't use long labels**, ideally keep it to one line, **maximum 2**
+- **don't have over 7 lines of text** in the content container
 
 ## When to use
 
-- when you need to **present multiple sections of content in a simple way** on one page, without overwhelming the user
-- when it’s not critical for every user to read every section of content, but **useful when a user wants to compare different sections**
-- when you can **make complex content easier to digest through descriptive headings**
+- when you need to **present multiple sections of content in a simple way** on one page, without overwhelming the user (especially applicable to mobile)
+- when it’s not critical for every user to read every section of content, adding value **when a user wants to compare different sections (multiple content containers can be opened simultaneously)**
+- when you can **make extensive and complex content easier to digest through descriptive labels**
 
 ## When not to use
 
-- don't use when pages are short (reading time: under 3 minute)
-- don't use when information is better structured horizontally and does not need comparison between sections - use tabs instead
+- don't use when pages are short (reading time: under 3 minutes)
+- don't use when information would be better structured horizontally (does not need comparison between sections) - use tabs instead
 
 ## Notes
 
 ### Accessibility
 
 - **progressive disclosure elements** can be helpful accessibility aids as **they give users the choice of revealing content to read or bypass**, making page navigation more efficient for screen-reader users and people using the keyboard or alternative input devices
+- **make sure the component is printer-friendly**, thus coded to be in the expanded state when printed