🐛 fix(segment): color and navbar brand logo clickable (#1582)

* fix(segment): adjust disabled icon color * feat(navbar): add a11y label and clickable logo
baloise · Jan 24, 2025 · e56817f · e56817f
1 parent 74316c2
commit e56817f
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 4 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/.changeset/friendly-moose-camp.md b/.changeset/friendly-moose-camp.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**segment**: adjust icon color in disable mode to dark grey
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -160,6 +160,10 @@ export namespace Components {
           * A11y attributes for the native button element.
          */
         "aria"?: BalProps.BalButtonAria;
+        /**
+          * If `true` the button is a popup.
+         */
+        "balPopup": any;
         /**
           * The color to use from your application's color palette.
          */
@@ -2025,6 +2029,7 @@ export namespace Components {
           * Defines if the logo animation should be active
          */
         "animated": boolean;
+        "configChanged": (state: BalConfigState) => Promise<void>;
         /**
           * Link of the logo / title.
          */
@@ -2034,6 +2039,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
          */
@@ -5226,6 +5239,10 @@ declare namespace LocalJSX {
           * A11y attributes for the native button element.
          */
         "aria"?: BalProps.BalButtonAria;
+        /**
+          * If `true` the button is a popup.
+         */
+        "balPopup"?: any;
         /**
           * The color to use from your application's color palette.
          */
@@ -7178,6 +7195,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-icon/bal-icon.tsx b/packages/core/src/components/bal-icon/bal-icon.tsx
@@ -144,6 +144,7 @@ export class Icon implements BalConfigObserver, BalElementStateInfo {
       'blue',
       'grey',
       'grey-light',
+      'grey-dark',
       'danger',
       'danger-dark',
       'danger-darker',

diff --git a/packages/core/src/components/bal-icon/bal-icon.vars.sass b/packages/core/src/components/bal-icon/bal-icon.vars.sass
@@ -25,7 +25,7 @@
   // icon colors
   --bal-icon-color-grey: var(--bal-color-grey-5)
   --bal-icon-color-grey-light: var(--bal-color-border-grey-dark)
-  --bal-icon-color-grey-dark: var(--bal-color-grey-dark)
+  --bal-icon-color-grey-dark: var(--bal-color-grey-6)
   --bal-icon-color-success: var(--bal-color-success)
   --bal-icon-color-success-dark: var(--bal-color-success-5)
   --bal-icon-color-success-darker: var(--bal-color-success-6)

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
         )}