Merge branch 'refs/heads/main' into feat/sbb-image-cleanup

# Conflicts: # src/elements/teaser-product/teaser-product/teaser-product.scss # src/elements/teaser/teaser.scss
sbb-design-systems · Dec 2, 2024 · ae475d6 · ae475d6
2 parents b463ea1 + fb2eac5
commit ae475d6
Show file tree

Hide file tree

Showing 17 changed files with 236 additions and 107 deletions.
diff --git a/src/elements/core/base-elements/link-base-element.ts b/src/elements/core/base-elements/link-base-element.ts
@@ -73,6 +73,10 @@ abstract class SbbLinkBaseElement extends SbbActionBaseElement {
 
   /** Default render method for link-like components. Can be overridden if the LinkRenderVariables are not needed. */
   protected override render(): TemplateResult {
+    return this.renderLink(this.renderTemplate());
+  }
+
+  protected renderLink(renderContent: TemplateResult): TemplateResult {
     return html`
       <a
         class="sbb-action-base ${this.localName}"
@@ -84,7 +88,7 @@ abstract class SbbLinkBaseElement extends SbbActionBaseElement {
         tabindex=${this.maybeDisabled && !this.maybeDisabledInteractive ? '-1' : nothing}
         aria-disabled=${this.maybeDisabled ? 'true' : nothing}
       >
-        ${this.renderTemplate()}
+        ${renderContent}
         ${!!this.href && this.target === '_blank'
           ? html`<sbb-screen-reader-only
               >. ${i18nTargetOpensInNewWindow[this.language.current]}</sbb-screen-reader-only

diff --git a/src/elements/core/config/config.ts b/src/elements/core/config/config.ts
@@ -22,12 +22,18 @@ export interface SbbConfig {
 
 export function readConfig(): SbbConfig {
   if (!('sbbConfig' in globalThis)) {
-    (globalThis as any).sbbConfig = {}; // TODO: fix any type
+    globalThis.sbbConfig = {};
   }
-  return (globalThis as any).sbbConfig as SbbConfig; // TODO: fix any type
+  return globalThis.sbbConfig as SbbConfig;
 }
 
 export function mergeConfig(config: Partial<SbbConfig>): void {
   const oldConfig = readConfig();
   Object.assign(oldConfig, config);
 }
+
+declare global {
+  // Only `var` is working
+  // eslint-disable-next-line no-var
+  var sbbConfig: SbbConfig;
+}
diff --git a/src/elements/icon/icon.snapshot.spec.ts b/src/elements/icon/icon.snapshot.spec.ts
@@ -122,7 +122,7 @@ describe(`sbb-icon`, () => {
     let interceptorCalled = false;
     globalConfig.icon = {};
 
-    const sbbIconConfig: SbbIconConfig = (globalThis as any).sbbConfig.icon; // TODO: fix any type
+    const sbbIconConfig: SbbIconConfig = globalThis.sbbConfig.icon!;
     sbbIconConfig.namespaces = new Map<string, string>().set(
       'kom',
       'https://icons.app.sbb.ch/kom/',
@@ -154,7 +154,7 @@ describe(`sbb-icon`, () => {
     expect(interceptorCalled).to.be.true;
 
     // Reset icon config
-    delete (globalThis as any).sbbConfig.icon; // TODO: fix any type
+    delete globalThis.sbbConfig.icon;
   });
 
   testA11yTreeSnapshot(html`<sbb-icon name="app-icon-medium"></sbb-icon>`);

diff --git a/src/elements/navigation/navigation/navigation.scss b/src/elements/navigation/navigation/navigation.scss
@@ -82,14 +82,8 @@
   --sbb-navigation-content-transform: translateX(-100%);
 
   @include sbb.mq($from: 'large') {
-    --sbb-navigation-expanded-width: 100vw;
+    --sbb-navigation-expanded-width: 100dvw;
     --sbb-navigation-content-transform: translateX(0%);
-
-    // Needed for backwards compatibility
-    // TODO: Remove once not needed
-    @supports (height: 100dvw) {
-      --sbb-navigation-expanded-width: 100dvw;
-    }
   }
 }
 

diff --git a/src/elements/teaser-product/common/teaser-product-common.scss b/src/elements/teaser-product/common/teaser-product-common.scss
@@ -39,7 +39,6 @@
 }
 
 .sbb-teaser-product__image-container {
-  display: block;
   overflow: hidden;
 
   // We have to remove the image bottom border-radius when stacked
@@ -64,11 +63,7 @@
   margin-block-start: var(--sbb-spacing-responsive-xxs);
 }
 
-.sbb-action-base {
-  display: block;
-  position: relative;
-  text-decoration: none;
-
+.sbb-teaser-product__root {
   @include sbb.if-forced-colors {
     // Apply a visual border for forced color mode
     &::after {
@@ -83,8 +78,13 @@
   }
 }
 
-.sbb-teaser-product__container {
+.sbb-action-base {
   display: block;
+  position: relative;
+  text-decoration: none;
+}
+
+.sbb-teaser-product__container {
   background: var(--sbb-teaser-product-background);
   border-radius: 0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);
   padding: var(--sbb-spacing-responsive-s);
@@ -125,7 +125,6 @@
 
 .sbb-teaser-product__footnote {
   grid-area: footnote;
-  display: block;
   padding-block-start: var(--sbb-spacing-responsive-s);
   color: var(--sbb-teaser-product-footer-color);
 

diff --git a/src/elements/teaser-product/common/teaser-product-common.ts b/src/elements/teaser-product/common/teaser-product-common.ts
@@ -4,9 +4,9 @@ import { property } from 'lit/decorators.js';
 import type { SbbActionBaseElement } from '../../core/base-elements.js';
 import { slotState } from '../../core/decorators.js';
 import {
+  type AbstractConstructor,
   SbbNegativeMixin,
   type SbbNegativeMixinType,
-  type AbstractConstructor,
 } from '../../core/mixins.js';
 
 export declare class SbbTeaserProductCommonElementMixinType extends SbbNegativeMixinType {
@@ -33,15 +33,17 @@ export const SbbTeaserProductCommonElementMixin = <
 
     protected override renderTemplate(): TemplateResult {
       return html`
-        <span class="sbb-teaser-product__image-container"><slot name="image"></slot></span>
-        <span class="sbb-teaser-product__container">
-          <span class="sbb-teaser-product__content">
-            <slot></slot>
-          </span>
-          <span class="sbb-teaser-product__footnote">
-            <slot name="footnote"></slot>
-          </span>
-        </span>
+        <div class="sbb-teaser-product__root">
+          <div class="sbb-teaser-product__image-container"><slot name="image"></slot></div>
+          <div class="sbb-teaser-product__container">
+            <span class="sbb-teaser-product__content">
+              <slot></slot>
+            </span>
+            <div class="sbb-teaser-product__footnote">
+              <slot name="footnote"></slot>
+            </div>
+          </div>
+        </div>
       `;
     }
   }

diff --git a/...r-product/teaser-product-static/__snapshots__/teaser-product-static.snapshot.spec.snap.js b/...r-product/teaser-product-static/__snapshots__/teaser-product-static.snapshot.spec.snap.js
@@ -29,20 +29,22 @@ snapshots["sbb-teaser-product-static renders DOM"] =
 
 snapshots["sbb-teaser-product-static renders Shadow DOM"] = 
 `<span class="sbb-action-base sbb-teaser-product-static">
-  <span class="sbb-teaser-product__image-container">
-    <slot name="image">
-    </slot>
-  </span>
-  <span class="sbb-teaser-product__container">
-    <span class="sbb-teaser-product__content">
-      <slot>
+  <div class="sbb-teaser-product__root">
+    <div class="sbb-teaser-product__image-container">
+      <slot name="image">
       </slot>
-    </span>
-    <span class="sbb-teaser-product__footnote">
-      <slot name="footnote">
-      </slot>
-    </span>
-  </span>
+    </div>
+    <div class="sbb-teaser-product__container">
+      <span class="sbb-teaser-product__content">
+        <slot>
+        </slot>
+      </span>
+      <div class="sbb-teaser-product__footnote">
+        <slot name="footnote">
+        </slot>
+      </div>
+    </div>
+  </div>
 </span>
 `;
 /* end snapshot sbb-teaser-product-static renders Shadow DOM */

diff --git a/...elements/teaser-product/teaser-product/__snapshots__/teaser-product.snapshot.spec.snap.js b/...elements/teaser-product/teaser-product/__snapshots__/teaser-product.snapshot.spec.snap.js
@@ -30,25 +30,31 @@ snapshots["sbb-teaser-product renders DOM"] =
 /* end snapshot sbb-teaser-product renders DOM */
 
 snapshots["sbb-teaser-product renders Shadow DOM"] = 
-`<a
-  class="sbb-action-base sbb-teaser-product"
-  href="https://www.sbb.ch"
->
-  <span class="sbb-teaser-product__image-container">
-    <slot name="image">
-    </slot>
-  </span>
-  <span class="sbb-teaser-product__container">
-    <span class="sbb-teaser-product__content">
-      <slot>
-      </slot>
-    </span>
-    <span class="sbb-teaser-product__footnote">
-      <slot name="footnote">
+`<div class="sbb-teaser-product__wrapper">
+  <a
+    class="sbb-action-base sbb-teaser-product"
+    href="https://www.sbb.ch"
+  >
+    <sbb-screen-reader-only>
+    </sbb-screen-reader-only>
+  </a>
+  <div class="sbb-teaser-product__root">
+    <div class="sbb-teaser-product__image-container">
+      <slot name="image">
       </slot>
-    </span>
-  </span>
-</a>
+    </div>
+    <div class="sbb-teaser-product__container">
+      <span class="sbb-teaser-product__content">
+        <slot>
+        </slot>
+      </span>
+      <div class="sbb-teaser-product__footnote">
+        <slot name="footnote">
+        </slot>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 /* end snapshot sbb-teaser-product renders Shadow DOM */
 
@@ -60,8 +66,16 @@ snapshots["sbb-teaser-product renders A11y tree Firefox"] =
   "children": [
     {
       "role": "link",
-      "name": "Content Footnote",
+      "name": "",
       "value": "https://www.sbb.ch/"
+    },
+    {
+      "role": "text leaf",
+      "name": "Content"
+    },
+    {
+      "role": "text leaf",
+      "name": "Footnote"
     }
   ]
 }
@@ -77,7 +91,15 @@ snapshots["sbb-teaser-product renders A11y tree Chrome"] =
   "children": [
     {
       "role": "link",
-      "name": "Content Footnote"
+      "name": ""
+    },
+    {
+      "role": "text",
+      "name": "Content"
+    },
+    {
+      "role": "text",
+      "name": "Footnote"
     }
   ]
 }

diff --git a/src/elements/teaser-product/teaser-product/teaser-product.scss b/src/elements/teaser-product/teaser-product/teaser-product.scss
@@ -8,6 +8,13 @@
   );
   --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);
   --sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);
+
+  // Simulate link color optically
+  @include sbb.if-forced-colors {
+    --sbb-title-text-color-normal-override: LinkText !important;
+    --sbb-teaser-product-content-color: LinkText !important;
+    --sbb-teaser-product-footer-color: LinkText !important;
+  }
 }
 
 :host(:hover) {
@@ -16,14 +23,12 @@
   }
 }
 
-.sbb-teaser-product {
-  &:focus-visible {
-    :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & {
-      @include sbb.focus-outline;
+.sbb-teaser-product__wrapper {
+  position: relative;
+}
 
-      border-radius: var(--sbb-teaser-product-border-radius);
-    }
-  }
+.sbb-teaser-product__root {
+  pointer-events: none;
 
   @include sbb.if-forced-colors {
     &::after {
@@ -33,3 +38,16 @@
     }
   }
 }
+
+.sbb-teaser-product {
+  position: absolute;
+  inset: 0;
+
+  &:focus-visible {
+    :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & {
+      @include sbb.focus-outline;
+
+      border-radius: var(--sbb-teaser-product-border-radius);
+    }
+  }
+}
diff --git a/src/elements/teaser-product/teaser-product/teaser-product.stories.ts b/src/elements/teaser-product/teaser-product/teaser-product.stories.ts
@@ -8,13 +8,13 @@ import type {
   StoryContext,
   StoryObj,
 } from '@storybook/web-components';
-import { nothing, type TemplateResult } from 'lit';
-import { html } from 'lit';
+import { html, nothing, type TemplateResult } from 'lit';
 
 import { sbbSpread } from '../../../storybook/helpers/spread.js';
 import sampleImages from '../../core/images.js';
 
 import readme from './readme.md?raw';
+
 import './teaser-product.js';
 import '../../button/button-static.js';
 import '../../chip-label.js';
@@ -87,7 +87,7 @@ const defaultArgs: Args = {
   withChip: false,
   slottedImg: false,
   href: 'https://www.sbb.ch',
-  'accessibility-label': undefined,
+  'accessibility-label': 'Benefit from up to 70% discount, Follow the link to benefit.',
 };
 
 const content = (): TemplateResult => html`

diff --git a/src/elements/teaser-product/teaser-product/teaser-product.ts b/src/elements/teaser-product/teaser-product/teaser-product.ts
@@ -1,11 +1,14 @@
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
 
 import { SbbLinkBaseElement } from '../../core/base-elements.js';
 import { SbbTeaserProductCommonElementMixin, teaserProductCommonStyle } from '../common.js';
 
 import style from './teaser-product.scss?lit&inline';
 
+import '../../screen-reader-only.js';
+
 /**
  * Displays a text and a footnote, combined with an image, to tease a product
  *
@@ -19,6 +22,19 @@ export
 @customElement('sbb-teaser-product')
 class SbbTeaserProductElement extends SbbTeaserProductCommonElementMixin(SbbLinkBaseElement) {
   public static override styles: CSSResultGroup = [teaserProductCommonStyle, style];
+
+  protected override render(): TemplateResult {
+    // We render the content outside the anchor tag to allow screen readers to navigate through it
+    return html`
+      <div class="sbb-teaser-product__wrapper">
+        ${this.renderLink(
+          // For SEO we add the accessibility hidden as hidden content of the link
+          html`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`,
+        )}
+        ${this.renderTemplate()}
+      </div>
+    `;
+  }
 }
 
 declare global {