From 44676e55598a66fb0ec01ca217ac68d7a6af52d6 Mon Sep 17 00:00:00 2001
From: Minna Salonen <minsalon@Minnas-MBP.home>
Date: Wed, 12 Jul 2023 08:51:44 +0300
Subject: [PATCH] hds-1672: added ariaLabel as optional property

---
 .../src/components/header/Header.stories.tsx  | 34 +++++++++++++++++++
 .../components/skipLink/SkipLink.module.scss  |  2 +-
 .../header/components/skipLink/SkipLink.tsx   |  8 +++--
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/header/Header.stories.tsx b/packages/react/src/components/header/Header.stories.tsx
index e838b6de33..369b89f250 100644
--- a/packages/react/src/components/header/Header.stories.tsx
+++ b/packages/react/src/components/header/Header.stories.tsx
@@ -224,3 +224,37 @@ export const WithSkipLink = (args) => {
     </Header>
   );
 };
+
+export const WithSkipLinkAriaLabel = (args) => {
+  return (
+    <Header {...args} onDidChangeLanguage={languageChangedAction}>
+      <Header.SkipLink skipTo="#content" label="Skip To Content" ariaLabel="Skip navigation links" />
+      <Header.ActionBar
+        title="Helsingin kaupunki"
+        titleAriaLabel="Helsingin kaupunki"
+        titleUrl="https://hel.fi"
+        titleStyle={TitleStyleType.black}
+      >
+        <Header.NavigationLanguageSelector languages={languages}>
+          <h3>Tietoa muilla kielillä</h3>
+          <Link external href="www.example.com">
+            Selkosuomi
+          </Link>
+          <Link external href="www.example.com">
+            Viittomakieli
+          </Link>
+        </Header.NavigationLanguageSelector>
+
+        <Header.ActionBarItem label="Kirjaudu" icon={IconUser} style={{ order: 10 }} id="action-bar-login">
+          <h3>Kirjautumisvalinnat</h3>
+        </Header.ActionBarItem>
+      </Header.ActionBar>
+
+      <Header.NavigationMenu>
+        <Header.NavigationLink href="#" label="Link 1" />
+        <Header.NavigationLink href="#" label="Link 2" />
+        <Header.NavigationLink href="#" label="Link 3" />
+      </Header.NavigationMenu>
+    </Header>
+  );
+};
diff --git a/packages/react/src/components/header/components/skipLink/SkipLink.module.scss b/packages/react/src/components/header/components/skipLink/SkipLink.module.scss
index dcbbf6e752..4a1fea204f 100644
--- a/packages/react/src/components/header/components/skipLink/SkipLink.module.scss
+++ b/packages/react/src/components/header/components/skipLink/SkipLink.module.scss
@@ -40,7 +40,7 @@
     width: var(--width);
     z-index: 99;  
   
-    & > span.skipLinkLabel {
+    & > .skipLinkLabel {
       align-items: center;
       color: var(--text-color);
       display: flex;
diff --git a/packages/react/src/components/header/components/skipLink/SkipLink.tsx b/packages/react/src/components/header/components/skipLink/SkipLink.tsx
index 4abe529e20..e1d72b6b9f 100644
--- a/packages/react/src/components/header/components/skipLink/SkipLink.tsx
+++ b/packages/react/src/components/header/components/skipLink/SkipLink.tsx
@@ -13,12 +13,16 @@ export type SkipLinkProps = {
    * Label for skip link shortcut
    */
   label: string;
+  /**
+   * Aria label for skip link shortcut (alternative text for screen reader)
+   */
+  ariaLabel?: string;
 };
-export const SkipLink = ({ skipTo, label }: SkipLinkProps) => {
+export const SkipLink = ({ skipTo, label, ariaLabel }: SkipLinkProps) => {
   const href = skipTo.startsWith('#') ? skipTo : `#${skipTo}`;
 
   return (
-    <a href={href} className={styles.skipLink}>
+    <a href={href} aria-label={ariaLabel} className={styles.skipLink}>
       <span className={styles.skipLinkLabel}>{label}</span>
     </a>
   );