feat: add i18n property to menu bar (#2384)

Co-authored-by: Erik Lumme <[email protected]>
vaadin · Aug 24, 2021 · 8c35b43 · 8c35b43
1 parent 9035e18
commit 8c35b43
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 2 deletions.
diff --git a/packages/vaadin-menu-bar/src/interfaces.d.ts b/packages/vaadin-menu-bar/src/interfaces.d.ts
@@ -13,6 +13,10 @@ export interface SubMenuItem {
   children?: SubMenuItem[];
 }
 
+export interface MenuBarI18n {
+  moreOptions: string;
+}
+
 /**
  * Fired when a submenu item or menu bar button without children is clicked.
  */

diff --git a/packages/vaadin-menu-bar/src/vaadin-menu-bar.d.ts b/packages/vaadin-menu-bar/src/vaadin-menu-bar.d.ts
@@ -6,7 +6,7 @@ import { ButtonsMixin } from './vaadin-menu-bar-buttons-mixin.js';
 
 import { InteractionsMixin } from './vaadin-menu-bar-interactions-mixin.js';
 
-import { MenuBarEventMap, MenuBarItem } from './interfaces';
+import { MenuBarEventMap, MenuBarI18n, MenuBarItem } from './interfaces';
 
 /**
  * `<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering
@@ -80,6 +80,28 @@ declare class MenuBarElement extends ButtonsMixin(InteractionsMixin(ElementMixin
    */
   items: MenuBarItem[];
 
+  /**
+   * The object used to localize this component.
+   * To change the default localization, replace the entire
+   * `i18n` object with a custom one.
+   *
+   * To update individual properties, extend the existing i18n object like so:
+   * ```
+   * menuBar.i18n = {
+   *   ...menuBar.i18n,
+   *   moreOptions: 'More options'
+   * }
+   * ```
+   *
+   * The object has the following JSON structure and default values:
+   * ```
+   * {
+   *   moreOptions: 'More options'
+   * }
+   * ```
+   */
+  i18n: MenuBarI18n;
+
   addEventListener<K extends keyof MenuBarEventMap>(
     type: K,
     listener: (this: MenuBarElement, ev: MenuBarEventMap[K]) => void,

diff --git a/packages/vaadin-menu-bar/src/vaadin-menu-bar.js b/packages/vaadin-menu-bar/src/vaadin-menu-bar.js
@@ -95,7 +95,7 @@ class MenuBarElement extends ButtonsMixin(InteractionsMixin(ElementMixin(Themabl
       </style>
 
       <div part="container">
-        <vaadin-menu-bar-button part="overflow-button" hidden$="[[!_hasOverflow]]">
+        <vaadin-menu-bar-button part="overflow-button" hidden$="[[!_hasOverflow]]" aria-label$="[[i18n.moreOptions]]">
           <div class="dots"></div>
         </vaadin-menu-bar-button>
       </div>
@@ -163,6 +163,38 @@ class MenuBarElement extends ButtonsMixin(InteractionsMixin(ElementMixin(Themabl
       items: {
         type: Array,
         value: () => []
+      },
+
+      /**
+       * The object used to localize this component.
+       * To change the default localization, replace the entire
+       * `i18n` object with a custom one.
+       *
+       * To update individual properties, extend the existing i18n object like so:
+       * ```
+       * menuBar.i18n = {
+       *   ...menuBar.i18n,
+       *   moreOptions: 'More options'
+       * }
+       * ```
+       *
+       * The object has the following JSON structure and default values:
+       * ```
+       * {
+       *   moreOptions: 'More options'
+       * }
+       * ```
+       *
+       * @type {!MenuBarI18n}
+       * @default {English/US}
+       */
+      i18n: {
+        type: Object,
+        value: () => {
+          return {
+            moreOptions: 'More options'
+          };
+        }
       }
     };
   }

diff --git a/packages/vaadin-menu-bar/test/menu-bar.test.js b/packages/vaadin-menu-bar/test/menu-bar.test.js
@@ -360,6 +360,13 @@ describe('overflow button', () => {
     expect(overflow.hasAttribute('hidden')).to.be.true;
     expect(overflow.item.children.length).to.equal(0);
   });
+
+  it('should set the aria-label of the overflow button according to the i18n of the menu bar', () => {
+    const moreOptionsSv = 'Fler alternativ';
+    expect(overflow.getAttribute('aria-label')).to.equal('More options');
+    menu.i18n = { ...menu.i18n, moreOptions: moreOptionsSv };
+    expect(overflow.getAttribute('aria-label')).to.equal(moreOptionsSv);
+  });
 });
 
 describe('responsive behaviour in container', () => {