feat(navbar): add a11y label and clickable logo

baloise · Jan 24, 2025 · 83fc8b7 · 83fc8b7
1 parent 1e1b805
commit 83fc8b7
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 3 deletions.
diff --git a/.changeset/forty-rats-watch.md b/.changeset/forty-rats-watch.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**navbar**: add a11y label for logo and make it clickable
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -2021,6 +2021,7 @@ export namespace Components {
           * Defines if the logo animation should be active
          */
         "animated": boolean;
+        "configChanged": (state: BalConfigState) => Promise<void>;
         /**
           * Link of the logo / title.
          */
@@ -2030,6 +2031,14 @@ export namespace Components {
           * Src to display a logo -> replaces the default Baloise Logo
          */
         "logo"?: string;
+        /**
+          * If `true` the logo is rendered as a button
+         */
+        "logoClickable": boolean;
+        /**
+          * Defines the label of the logo
+         */
+        "logoLabel"?: string;
         /**
           * Size of the logo SVG
          */
@@ -7178,6 +7187,14 @@ declare namespace LocalJSX {
           * Src to display a logo -> replaces the default Baloise Logo
          */
         "logo"?: string;
+        /**
+          * If `true` the logo is rendered as a button
+         */
+        "logoClickable"?: boolean;
+        /**
+          * Defines the label of the logo
+         */
+        "logoLabel"?: string;
         /**
           * Size of the logo SVG
          */

diff --git a/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.i18n.ts b/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.i18n.ts
@@ -0,0 +1,38 @@
+import { I18n } from '../../../interfaces'
+
+export interface I18nBalNavbarBrand {
+  logoButtonLabel: string
+}
+
+export const i18nBalNavbarBrand: I18n<I18nBalNavbarBrand> = {
+  en: {
+    logoButtonLabel: 'To Homepage',
+  },
+  fr: {
+    logoButtonLabel: 'Vers la page d’accueil',
+  },
+  it: {
+    logoButtonLabel: 'Alla pagina principale',
+  },
+  nl: {
+    logoButtonLabel: 'Naar de startpagina',
+  },
+  es: {
+    logoButtonLabel: 'A la página principal',
+  },
+  pt: {
+    logoButtonLabel: 'Para a página inicial',
+  },
+  sv: {
+    logoButtonLabel: 'Till startsidan',
+  },
+  fi: {
+    logoButtonLabel: 'Etusivulle',
+  },
+  de: {
+    logoButtonLabel: 'Zur Startseite',
+  },
+  pl: {
+    logoButtonLabel: 'Na stronę główną',
+  },
+}
diff --git a/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.tsx b/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.tsx
@@ -1,8 +1,10 @@
-import { Component, Element, h, Host, Prop, State, Event, EventEmitter } from '@stencil/core'
+import { Component, Element, h, Host, Prop, State, Event, EventEmitter, Method } from '@stencil/core'
 import { BEM } from '../../../utils/bem'
 import { BalScrollHandler } from '../../../utils/scroll'
 import { balBrowser } from '../../../utils/browser'
-import { wait, waitAfterFramePaint, waitForRequestIdleCallback } from '../../../utils/helpers'
+import { wait } from '../../../utils/helpers'
+import { i18nBalNavbarBrand } from './bal-navbar-brand.i18n'
+import { BalConfigState, BalLanguage, defaultConfig, ListenToConfig } from '../../../utils/config'
 
 @Component({
   tag: 'bal-navbar-brand',
@@ -12,13 +14,24 @@ export class NavbarBrand {
 
   @Element() el!: HTMLElement
 
+  @State() language: BalLanguage = defaultConfig.language
   @State() isMenuActive = false
 
   /**
    * Link of the logo / title.
    */
   @Prop() href?: string = ''
 
+  /**
+   * If `true` the logo is rendered as a button
+   */
+  @Prop() logoClickable = false
+
+  /**
+   * Defines the label of the logo
+   */
+  @Prop() logoLabel?: string
+
   /**
    * Specifies where to display the linked URL.
    * Only applies when an `href` is provided.
@@ -83,6 +96,15 @@ export class NavbarBrand {
     this.bodyScrollHandler.disconnect()
   }
 
+  /**
+   * @internal define config for the component
+   */
+  @Method()
+  @ListenToConfig()
+  async configChanged(state: BalConfigState): Promise<void> {
+    this.language = state.language
+  }
+
   async resetIsMenuActive(ev: MediaQueryListEvent) {
     if (ev.matches && !this.simple) {
       this.toggle(false)
@@ -131,6 +153,8 @@ export class NavbarBrand {
       <bal-logo animated={this.animated} color={'white'} size={this.logoSize}></bal-logo>
     )
 
+    const logoLabel = this.logoLabel ? this.logoLabel : i18nBalNavbarBrand[this.language].logoButtonLabel
+
     return (
       <Host
         class={{
@@ -139,9 +163,19 @@ export class NavbarBrand {
         }}
       >
         {this.href ? (
-          <a href={this.href} target={this.target} onClick={(ev: MouseEvent) => this.balNavigate.emit(ev)}>
+          <a
+            aria-label={logoLabel}
+            title={logoLabel}
+            href={this.href}
+            target={this.target}
+            onClick={(ev: MouseEvent) => this.balNavigate.emit(ev)}
+          >
             {logoTemplate}
           </a>
+        ) : this.logoClickable ? (
+          <button aria-label={logoLabel} title={logoLabel} onClick={(ev: MouseEvent) => this.balNavigate.emit(ev)}>
+            {logoTemplate}
+          </button>
         ) : (
           logoTemplate
         )}