feat(menu): Accessibility improvments

ec-europa · Jan 18, 2024 · d8c097c · d8c097c
1 parent 36d1d14
commit d8c097c
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 16 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -465,6 +465,7 @@ export namespace Components {
         "eclScript": boolean;
         "group": string;
         "maxLines": number;
+        "menuId": string;
         "menuLink": string;
         "menuTitle": string;
         "nextLabel": string;
@@ -1894,6 +1895,7 @@ declare namespace LocalJSX {
         "eclScript"?: boolean;
         "group"?: string;
         "maxLines"?: number;
+        "menuId"?: string;
         "menuLink"?: string;
         "menuTitle"?: string;
         "nextLabel"?: string;

diff --git a/src/components/ecl-menu/ecl-menu.stories.ts b/src/components/ecl-menu/ecl-menu.stories.ts
@@ -1,5 +1,6 @@
 const getArgs = () => {
   return {
+    menuId: 'menu-demo',
     menuTitle: 'Menu',
     menuLink: '/example.html',
     backMenu: 'Back',
@@ -12,41 +13,46 @@ const getArgs = () => {
 
 const getArgTypes = () => {
   return {
+    menuId: {
+      name: 'menu-id',
+      type: { name: 'string' },
+      description: 'Id of the menu',
+    },
     menuTitle: {
-      name: 'Title of the menu',
+      name: 'menu-title',
       type: { name: 'string' },
-      description: '',
+      description: 'Title of the menu',
     },
     menuLink: {
-      name: 'Menu link',
+      name: 'menu-link',
       type: { name: 'string' },
-      description: '',
+      description: 'Link for the menu',
     },
     closeMenu: {
-      name: 'Label of the close button',
+      name: 'close-menu',
       type: { name: 'string' },
-      description: '',
+      description: 'Label for the close button',
     },
     backMenu: {
-      name: 'Label of the back button',
+      name: 'back-menu',
       type: { name: 'string' },
-      description: '',
+      description: 'Label of the back button',
     },
     previousLabel: {
-      name: 'Label of the back button (slider)',
+      name: 'previous-label',
       type: { name: 'string' },
-      description: '',
+      description: 'Label of the back button (slider)',
     },
     nextLabel: {
-      name: 'Label of the next button (slider)',
+      name: 'next-label',
       type: { name: 'string' },
-      description: '',
+      description: 'Label of the next button (slider)',
     },
     maxLines: {
-      name: 'Allowed number of text lines per item',
+      name: 'max-lines',
       type: { name: 'select' },
       options: [1, 2, 3, 4],
-      description: 'You can limit the number of lines for item when it wraps',
+      description: 'Allowed number of text lines per item',
     },    
   };
 };
@@ -62,6 +68,7 @@ const Template = args =>
     back-label="${args.backMenu}"
     menu-link="${args.menuLink}"
     ecl-script
+    menu-id="${args.menuId}"
     menu-title="${args.menuTitle}"
     previousLabel="${args.previousLabel}"
     nextLabel="${args.nextLabel}"

diff --git a/src/components/ecl-menu/ecl-menu.tsx b/src/components/ecl-menu/ecl-menu.tsx
@@ -16,6 +16,7 @@ declare const ECL: any;
 export class EclMenu {
   @Element() el: HTMLElement;
   @Prop() theme: string = 'ec';
+  @Prop() menuId: string;
   @Prop() eclScript: boolean = false;
   @Prop() styleClass: string;
   @Prop() group: string = 'group1';
@@ -55,6 +56,17 @@ export class EclMenu {
     }
   }
 
+  componentDidRender() {
+    if (this.menuId) {
+      const items = this.el.querySelectorAll('.ecl-menu__item');
+      if (items) {
+        items.forEach((item, i) => {
+          item.id = `ecl-menu-item-${this.menuId}-${i}`;
+        });
+      }
+    }
+  }
+
   getAttrs() {
     const attrs = {
       'aria-expanded': 'false',
@@ -86,7 +98,11 @@ export class EclMenu {
             ></ecl-icon>
             {this.menuTitle}
           </a>
-          <section class="ecl-menu__inner" data-ecl-menu-inner>
+          <section
+            class="ecl-menu__inner"
+            data-ecl-menu-inner role="application"
+            aria-label={this.menuTitle}
+          >
             <header class="ecl-menu__inner-header">
               <button
                 class="ecl-menu__close ecl-button ecl-button--text"

diff --git a/src/components/ecl-menu/test/__snapshots__/ecl-menu.spec.tsx.snap b/src/components/ecl-menu/test/__snapshots__/ecl-menu.spec.tsx.snap
@@ -14,7 +14,7 @@ exports[`ecl-menu renders 1`] = `
         </ecl-icon>
         Menu
       </a>
-      <section class="ecl-menu__inner" data-ecl-menu-inner>
+      <section aria-label="Menu" class="ecl-menu__inner" data-ecl-menu-inner role="application">
         <header class="ecl-menu__inner-header">
           <button class="ecl-button ecl-button--text ecl-menu__close" data-ecl-menu-close type="submit">
             <span class="ecl-button__container ecl-menu__close-container">

diff --git a/src/components/ecl-site-header/ecl-site-header.stories.ts b/src/components/ecl-site-header/ecl-site-header.stories.ts
@@ -525,6 +525,7 @@ const TemplateHarmonised = (args) =>
   ></ecl-language-item>
   <ecl-menu
     slot="menu"
+    menu-id="site-header-menu"
     theme="${args.theme}"
     close-label="Close"
     back-label="Back"