From d1d996f2dd9c2c70c361adbb3440f9d033ada7ab Mon Sep 17 00:00:00 2001
From: Dieter Peirs <github@dieterpeirs.com>
Date: Thu, 5 Sep 2024 13:14:05 +0200
Subject: [PATCH] provide an argument for the main header nav aria-label

---
 addon/components/au-main-header.gts                | 8 +++++++-
 stories/5-components/Brand/AuMainHeader.stories.js | 7 +++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/addon/components/au-main-header.gts b/addon/components/au-main-header.gts
index 032d171ca..b27b4fc47 100644
--- a/addon/components/au-main-header.gts
+++ b/addon/components/au-main-header.gts
@@ -15,6 +15,7 @@ export interface AuMainHeaderSignature {
     contactRoute?: string;
     contactLabel?: string;
     homeRoute?: string;
+    navigationAriaLabel?: string;
   };
   Blocks: {
     default: [];
@@ -28,6 +29,11 @@ export default class AuMainHeader extends Component<AuMainHeaderSignature> {
     else return 'Contacteer ons';
   }
 
+  get navigationAriaLabel() {
+    if (this.args.navigationAriaLabel) return this.args.navigationAriaLabel;
+    else return 'Informatie en instellingen';
+  }
+
   @action
   headerLinkFocus() {
     document.querySelector<HTMLElement>('#main')?.focus();
@@ -56,7 +62,7 @@ export default class AuMainHeader extends Component<AuMainHeaderSignature> {
         </a>
       </div>
       <nav
-        aria-label="Informatie en instellingen"
+        aria-label="{{this.navigationAriaLabel}}"
         class="au-c-main-header__actions"
       >
         <ul class="au-c-list-horizontal">
diff --git a/stories/5-components/Brand/AuMainHeader.stories.js b/stories/5-components/Brand/AuMainHeader.stories.js
index 22c9275ae..108e27da8 100644
--- a/stories/5-components/Brand/AuMainHeader.stories.js
+++ b/stories/5-components/Brand/AuMainHeader.stories.js
@@ -18,6 +18,11 @@ export default {
       description:
         'Set the label for the contact link (default: Contacteer ons)',
     },
+    navigationAriaLabel: {
+      control: 'text',
+      description:
+        'Set the aria-label for the navigation (default: Informatie en instellingen)',
+    },
   },
   parameters: {
     layout: 'padded',
@@ -32,6 +37,7 @@ const Template = (args) => ({
       @homeRoute={{this.homeRoute}}
       @contactRoute={{this.contactRoute}}
       @contactLabel={{this.contactLabel}}
+      @navigationAriaLabel={{this.navigationAriaLabel}}
     >
       <AuDropdown @title="Demo dropdown" @alignment="right" role="menu">
         <AuButton @skin="link" @icon="logout" role="menuitem">
@@ -49,4 +55,5 @@ Component.args = {
   homeRoute: 'home',
   contactRoute: 'contact',
   contactLabel: 'Contacteer ons',
+  navigationAriaLabel: 'Informatie en instellingen',
 };