fix(sbb-teaser-product): allow screen readers to navigate the content

src/elements/teaser-product/teaser-product/teaser-product.scss

@@ -16,7 +16,23 @@
   }
 }
 
+::slotted(:is(img, sbb-image)) {
+  will-change: filter;
+  transition-property: filter;
+  transition-duration: var(--sbb-teaser-product-animation-duration);
+  transition-timing-function: var(--sbb-animation-easing);
+  filter: brightness(var(--sbb-teaser-product-brightness, 1));
+}
+
+.sbb-teaser-product__wrapper {
+  position: relative;
+}
+
 .sbb-teaser-product {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+
   &:focus-visible {
     :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & {
       @include sbb.focus-outline;
@@ -33,11 +49,3 @@
     }
   }
 }
-
-::slotted(:is(img, sbb-image)) {
-  will-change: filter;
-  transition-property: filter;
-  transition-duration: var(--sbb-teaser-product-animation-duration);
-  transition-timing-function: var(--sbb-animation-easing);
-  filter: brightness(var(--sbb-teaser-product-brightness, 1));
-}

src/elements/teaser-product/teaser-product/teaser-product.ts

@@ -1,5 +1,6 @@
-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';
@@ -19,6 +20,13 @@ 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()} ${this.renderTemplate()}</div>
+    `;
+  }
 }
 
 declare global {