feat(ecl-3.10): Aligning the affected components - FRONT-4087

ec-europa · Sep 13, 2023 · 4ec7b80 · 4ec7b80
1 parent 18c0b0d
commit 4ec7b80
Show file tree

Hide file tree

Showing 16 changed files with 327 additions and 20 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -14,9 +14,11 @@ export namespace Components {
     }
     interface EclAccordionItem {
         "expanded": boolean;
+        "itemId": string;
         "label": string;
         "styleClass": string;
         "theme": string;
+        "titleId": string;
     }
     interface EclBanner {
         "bannerTitle": string;
@@ -296,6 +298,7 @@ export namespace Components {
         "theme": string;
     }
     interface EclGallery {
+        "ariaLabel": string;
         "closeLabel": string;
         "counterLabel": string;
         "counterSeparator": string;
@@ -358,6 +361,7 @@ export namespace Components {
         "sprite": string;
         "styleClass": string;
         "theme": string;
+        "titleTag": string;
         "transform": string;
     }
     interface EclInpageNavigation {
@@ -1348,9 +1352,11 @@ declare namespace LocalJSX {
     }
     interface EclAccordionItem {
         "expanded"?: boolean;
+        "itemId"?: string;
         "label"?: string;
         "styleClass"?: string;
         "theme"?: string;
+        "titleId"?: string;
     }
     interface EclBanner {
         "bannerTitle"?: string;
@@ -1633,6 +1639,7 @@ declare namespace LocalJSX {
         "theme"?: string;
     }
     interface EclGallery {
+        "ariaLabel"?: string;
         "closeLabel"?: string;
         "counterLabel"?: string;
         "counterSeparator"?: string;
@@ -1695,6 +1702,7 @@ declare namespace LocalJSX {
         "sprite"?: string;
         "styleClass"?: string;
         "theme"?: string;
+        "titleTag"?: string;
         "transform"?: string;
     }
     interface EclInpageNavigation {

diff --git a/src/components/ecl-accordion/ecl-accordion-item.tsx b/src/components/ecl-accordion/ecl-accordion-item.tsx
@@ -12,6 +12,8 @@ export class EclAccordionItem {
   @Element() el: HTMLElement;
   @Prop() styleClass: string;
   @Prop() label: string;
+  @Prop() itemId: string;
+  @Prop() titleId: string;
   @Prop({reflect:true}) expanded: boolean;
   @Prop() theme: string = 'ec';
 
@@ -25,8 +27,15 @@ export class EclAccordionItem {
 
   render() {
     return (
-      <div class={this.getClass()}>
-        <h3 class={`ecl-accordion__title sc-ecl-accordion-${this.theme}`}>
+      <div
+        class={this.getClass()}
+        id={this.itemId || null}
+        aria-labelledby={this.titleId || null}
+      >
+        <h3 
+          class={`ecl-accordion__title sc-ecl-accordion-${this.theme}`}
+          id={this.titleId || null}
+        >
           <button
             data-ecl-accordion-toggle
             aria-controls={`${this.el.id}-content`}

diff --git a/src/components/ecl-accordion/ecl-accordion.stories.ts b/src/components/ecl-accordion/ecl-accordion.stories.ts
@@ -8,7 +8,8 @@ const Template = (args) =>
     ecl-script
   >
     <ecl-accordion-item
-      id="ecl-accordion-item-id-1"
+      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}"
     >
@@ -18,16 +19,18 @@ const Template = (args) =>
     </ecl-accordion-item>
 
     <ecl-accordion-item
-      id="ecl-accordion-item-id-2"
+      item-id="ecl-accordion-item-id-2"
       label="Energy union and climate"
+      title-id="accordion-example-title-2"
       expanded
       theme="${args.theme}"
     >
       A balanced and progressive trade policy to harness globalisation
     </ecl-accordion-item>
 
     <ecl-accordion-item
-      id="ecl-accordion-item-id-3"
+      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}"
     >

diff --git a/src/components/ecl-accordion/readme.md b/src/components/ecl-accordion/readme.md
@@ -10,9 +10,11 @@
 | 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` |
 
 
 ## Dependencies

diff --git a/src/components/ecl-expandable/ecl-expandable.stories.ts b/src/components/ecl-expandable/ecl-expandable.stories.ts
@@ -19,11 +19,9 @@ Expandable.args = {
   id: 'expandable-example',
   labelCollapsed: 'Expand',
   labelExpanded: 'Collapse',
-  content: `<ecl-text tag="p" size="m">
-    The EU is building an energy union that ensures Europe’s energy supply is safe,
+  content: `<p>The EU is building an energy union that ensures Europe’s energy supply is safe,
     viable and accessible to all. In doing so, it can boost the economy and attract investments that can create new jobs
-    opportunities.
-  </ecl-text>`,
+    opportunities.</p>`,
 };
 Expandable.argTypes = {
   id: {

diff --git a/src/components/ecl-expandable/ecl-expandable.tsx b/src/components/ecl-expandable/ecl-expandable.tsx
@@ -23,6 +23,14 @@ export class EclExpandable {
   @Prop() theme: string = 'ec';
 
   componentDidRender() {
+    const p = this.el.querySelectorAll('p');
+
+    if (p[0]) {
+      p.forEach((paragraph) => {
+        paragraph.classList.add(`sc-ecl-expandable-${this.theme}`);
+      });
+    }
+
     const src = getAssetPath('./build/scripts/ecl-expandable-vanilla.js');
     if (document.querySelector(`script[src="${src}"]`)) {
       document.querySelector(`script[src="${src}"]`).remove();

diff --git a/src/components/ecl-expandable/src/styles/ecl-expandable-ec.scss b/src/components/ecl-expandable/src/styles/ecl-expandable-ec.scss
@@ -2,3 +2,7 @@
 
 @use '@ecl/vanilla-component-button/button-ec';
 @use '@ecl/vanilla-component-expandable/expandable-ec';
+
+.ecl-expandable__content p {
+  max-width: 80ch;
+}
diff --git a/src/components/ecl-expandable/test/__snapshots__/ecl-expandable.spec.tsx.snap b/src/components/ecl-expandable/test/__snapshots__/ecl-expandable.spec.tsx.snap
@@ -18,7 +18,7 @@ exports[`ecl-expandable renders 1`] = `
       </button>
     </ecl-button>
     <div class="ecl-expandable__content" hidden="" id="expandable-id-content">
-      <p class="ecl-u-type-paragraph-m">
+      <p class="ecl-u-type-paragraph-m sc-ecl-expandable-ec">
         The EU is building an energy union that ensures Europe’s energy supply is safe, viable and accessible to all. In doing so, it can boost the economy and attract investments that can create new jobs opportunities.
       </p>
     </div>

diff --git a/src/components/ecl-footer/ecl-footer.stories.ts b/src/components/ecl-footer/ecl-footer.stories.ts
@@ -295,7 +295,7 @@ const TemplateEu = () =>
       Privacy policy
     </ecl-footer-item>
     <ecl-footer-item
-      link="https://european-union.europa.eu/privacy-policy_en"
+      link="https://european-union.europa.eu/legal-notice_en"
       theme="eu"
       slot="ecl-footer-list-bottom-right"
     >
@@ -345,7 +345,7 @@ const TemplateEu = () =>
       Council of the European Union
     </ecl-footer-item>
     <ecl-footer-item
-      link="https://ec.europa.eu/commission/index_en"
+      link="https://commission.europa.eu/index_en"
       theme="eu"
       slot="ecl-footer-list-right"
     >
@@ -626,7 +626,7 @@ const TemplateEuHarmonised = () =>
       Privacy policy
     </ecl-footer-item>
     <ecl-footer-item
-      link="https://european-union.europa.eu/privacy-policy_en"
+      link="https://european-union.europa.eu/legal-notice_en"
       theme="eu"
       slot="ecl-footer-list-main-bottom"
     >

diff --git a/src/components/ecl-gallery/ecl-gallery.stories.ts b/src/components/ecl-gallery/ecl-gallery.stories.ts
@@ -21,6 +21,7 @@ const Template = (args) =>
   footer-link-path="${randomizedLink('/example.html')}"
   footer-link-label="further media items"
   expandable
+  aria-label="Gallery overlay"
 >
   <ecl-gallery-item
     theme="${args.theme}"

diff --git a/src/components/ecl-gallery/ecl-gallery.tsx b/src/components/ecl-gallery/ecl-gallery.tsx
@@ -36,6 +36,7 @@ export class EclGallery {
   @Prop() expandable: boolean = true;
   @Prop() fullScreenLabel: string = '';
   @Prop() noOverlay: boolean = false;
+  @Prop() ariaLabel: string;
 
   getClass(): string {
     const styleClasses = [
@@ -117,6 +118,7 @@ export class EclGallery {
         <dialog
           class="ecl-gallery__overlay"
           data-ecl-gallery-overlay
+          aria-label={this.ariaLabel || null}
         >
           <header
             class="ecl-gallery__close"

diff --git a/src/components/ecl-icon/ecl-icon.tsx b/src/components/ecl-icon/ecl-icon.tsx
@@ -17,6 +17,7 @@ export class EclIcon {
   @Prop() icon: string = '';
   @Prop() size: string = 'xs';
   @Prop() color: string = '';
+  @Prop() titleTag: string = '';
   @Prop({ mutable: true }) path: string;
   @Prop() transform: string = '';
   @Prop() theme: string = 'ec';
@@ -53,6 +54,7 @@ export class EclIcon {
   render() {
     return (
       <svg class={this.getClass()}>
+      { this.titleTag ? <title>{this.titleTag}</title> : '' } 
         <use xlinkHref={`${this.path}#${this.icon}`}></use>
       </svg>
     )

diff --git a/src/components/ecl-icon/readme.md b/src/components/ecl-icon/readme.md
@@ -14,6 +14,7 @@
 | `sprite`     | `sprite`      |             | `string` | `''`        |
 | `styleClass` | `style-class` |             | `string` | `''`        |
 | `theme`      | `theme`       |             | `string` | `'ec'`      |
+| `titleTag`   | `title-tag`   |             | `string` | `''`        |
 | `transform`  | `transform`   |             | `string` | `''`        |
 
 

diff --git a/src/components/ecl-link/ecl-link.stories.ts b/src/components/ecl-link/ecl-link.stories.ts
@@ -70,6 +70,7 @@ const Template = (args) => `
     theme="${args.theme}"
     path="${args.path}"
     external="${args.external}"
+    aria-label="Accessibility enhancer"
   >
   ${args.icon && args.iconPosition === 'before' ?
     `<ecl-icon 

diff --git a/src/components/ecl-link/ecl-link.tsx b/src/components/ecl-link/ecl-link.tsx
@@ -67,7 +67,8 @@ export class EclLink {
       <ecl-icon 
         icon="external"
         style-class={`ecl-link__icon ecl-link__icon--after sc-ecl-link-${this.theme}`}
-        size = "2xs"
+        size="2xs"
+        title-tag={this.ariaLabel}
       >
       </ecl-icon>
     )  
@@ -85,7 +86,7 @@ export class EclLink {
     if (this.download) {
       attrs['download'] = true;
     }
-    if (this.ariaLabel) {
+    if (this.ariaLabel && !this.external) {
       attrs['aria-label'] = this.ariaLabel;
     }
     if (this.target) {