fix: logo only focusable if href provided (#2207)

telekom · Nov 29, 2023 · 63c8657 · 63c8657
1 parent b53b711
commit 63c8657
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 9 deletions.
diff --git a/packages/components/src/components/telekom/logo/logo.tsx b/packages/components/src/components/telekom/logo/logo.tsx
@@ -87,7 +87,7 @@ export class Logo {
         <a
           href={this.href}
           part={this.getCssClassMap()}
-          tabIndex={this.focusable === false ? -1 : 0}
+          tabindex={this.focusable === false ? '-1' : '0'}
           onFocus={() => {
             if (this.scrollIntoViewOnFocus === true) {
               window.scrollTo({ top: 0 });
@@ -96,7 +96,6 @@ export class Logo {
           title={this.logoHideTitle ? undefined : this.logoTitle}
           aria-describedby={this.logoAriaDescribedBy}
           aria-hidden={this.logoAriaHidden}
-          tabindex={this.logoAriaHidden ? -1 : 0}
         >
           <scale-logo-svg
             part="icon"

diff --git a/packages/components/src/components/telekom/telekom-footer/readme.md b/packages/components/src/components/telekom/telekom-footer/readme.md
@@ -7,11 +7,11 @@
 
 ## Properties
 
-| Property        | Attribute         | Description                        | Type      | Default                 |
-| --------------- | ----------------- | ---------------------------------- | --------- | ----------------------- |
-| `logoHideTitle` | `logo-hide-title` | (optional) set logo specific title | `boolean` | `false`                 |
-| `logoHref`      | `logo-href`       | (optional) Logo link               | `string`  | `'javascript:void(0);'` |
-| `logoTitle`     | `logo-title`      | (optional) set logo specific title | `string`  | `'Telekom Logo'`        |
+| Property        | Attribute         | Description                        | Type      | Default          |
+| --------------- | ----------------- | ---------------------------------- | --------- | ---------------- |
+| `logoHideTitle` | `logo-hide-title` | (optional) set logo specific title | `boolean` | `false`          |
+| `logoHref`      | `logo-href`       | (optional) Logo link               | `string`  | `''`             |
+| `logoTitle`     | `logo-title`      | (optional) set logo specific title | `string`  | `'Telekom Logo'` |
 
 
 ## Shadow Parts

diff --git a/packages/components/src/components/telekom/telekom-footer/telekom-footer-content.tsx b/packages/components/src/components/telekom/telekom-footer/telekom-footer-content.tsx
@@ -18,7 +18,7 @@ import { Component, h, Host, Prop } from '@stencil/core';
 })
 export class TelekomFooterContent {
   /** (optional) Logo link */
-  @Prop() logoHref?: string = 'javascript:void(0);';
+  @Prop() logoHref?: string = '';
   /** (optional) set logo specific title */
   @Prop() logoTitle?: string = 'Telekom Logo';
   /** (optional) set logo specific title */
@@ -42,6 +42,7 @@ export class TelekomFooterContent {
                 href={this.logoHref}
                 logoHideTitle={this.logoHideTitle}
                 logoTitle={this.logoHideTitle ? undefined : this.logoTitle}
+                focusable={this.logoHref ? true : false}
               ></scale-logo>
             </div>
             <div part="body">

diff --git a/packages/components/src/components/telekom/telekom-header/telekom-header.tsx b/packages/components/src/components/telekom/telekom-header/telekom-header.tsx
@@ -76,6 +76,7 @@ export class TelekomHeader {
                   href={this.logoHref}
                   logoTitle={this.logoTitle}
                   logoHideTitle={this.logoHideTitle}
+                  focusable={this.logoHref ? true : false}
                 ></scale-logo>
               </slot>
 

diff --git a/packages/storybook-vue/stories/components/telekom-footer/FooterContent.vue b/packages/storybook-vue/stories/components/telekom-footer/FooterContent.vue
@@ -2,7 +2,7 @@
   export default {
     name: 'FooterContent',
     props: {
-        logoHref: { type: String, default: 'javascript:void(0);' },
+        logoHref: { type: String, default: '' },
         logoTitle: { type: String, default: 'Telekom Logo' },
         logoHideTitle: { type: Boolean, default: false }
     }