provide an argument for the main header nav aria-label

Author: Dietr

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">

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',
 };