hds-1672: added ariaLabel as optional property

City-of-Helsinki · Jul 12, 2023 · 44676e5 · 44676e5
1 parent c0e8b3b
commit 44676e5
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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>
   );