fix(nav): sets aria label to meta buttons first and otherwise label

baloise · Jan 19, 2025 · af6e761 · af6e761
1 parent 2af2799
commit af6e761
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/.changeset/lovely-pants-smoke.md b/.changeset/lovely-pants-smoke.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**nav**: sets aria label to meta buttons first and otherwise label
diff --git a/packages/core/src/components/bal-nav/models/bal-nav-meta-button.tsx b/packages/core/src/components/bal-nav/models/bal-nav-meta-button.tsx
@@ -46,7 +46,7 @@ export class NavMetaButton extends NavLinkItem implements BalProps.BalNavMetaBut
           target={this.target}
           aria={{
             title: this.htmlTitle,
-            label: this.label,
+            label: this.ariaLabel || this.label,
           }}
         >
           {this.label}
@@ -64,7 +64,7 @@ export class NavMetaButton extends NavLinkItem implements BalProps.BalNavMetaBut
         square={!this.label || this.label.length < 3}
         aria={{
           title: this.htmlTitle,
-          label: this.label,
+          label: this.ariaLabel || this.label,
         }}
         inverted={true}
         bal-popup={this.popoverId}
@@ -94,7 +94,7 @@ export class NavMetaButton extends NavLinkItem implements BalProps.BalNavMetaBut
             target={this.target}
             aria={{
               title: this.htmlTitle,
-              label: this.label,
+              label: this.ariaLabel || this.label,
             }}
           >
             {this.icon ? '' : this.label}
@@ -112,7 +112,7 @@ export class NavMetaButton extends NavLinkItem implements BalProps.BalNavMetaBut
           inverted={false}
           aria={{
             title: this.htmlTitle,
-            label: this.label,
+            label: this.ariaLabel || this.label,
           }}
           bal-popup={this.popoverId}
           bal-popup-variant="fullscreen"
@@ -137,7 +137,7 @@ export class NavMetaButton extends NavLinkItem implements BalProps.BalNavMetaBut
             square={!this.label || this.label.length < 3}
             aria={{
               title: this.htmlTitle,
-              label: this.label,
+              label: this.ariaLabel || this.label,
             }}
             href={this.href}
             target={this.target}
@@ -157,7 +157,7 @@ export class NavMetaButton extends NavLinkItem implements BalProps.BalNavMetaBut
           inverted={false}
           aria={{
             title: this.htmlTitle,
-            label: this.label,
+            label: this.ariaLabel || this.label,
           }}
           bal-popup={this.popoverId}
           bal-popup-variant="drawer"

diff --git a/packages/core/src/components/bal-nav/test/bal-nav.visual.html b/packages/core/src/components/bal-nav/test/bal-nav.visual.html
@@ -236,7 +236,7 @@ <h2 class="title text-xx-large mb-normal">Heading</h2>
               icon: 'call',
               popupId: 'popup-call',
               touchPlacement: 'bottom',
-              ariaLabel: '24h Kundenservice',
+              ariaLabel: '24h Kundenservice Aria',
               htmlTitle: '24h Kundenservice',
             },
             {