fix(sbb-teaser, sbb-teaser-product): allow screen readers to navigate…

… the content (#3250) Co-authored-by: Jeremias Peier <[email protected]>
sbb-design-systems · Dec 2, 2024 · 7ff6552 · 7ff6552
1 parent 2744c8f
commit 7ff6552
Show file tree

Hide file tree

Showing 13 changed files with 222 additions and 94 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/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
@@ -79,11 +78,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 {
@@ -98,8 +93,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);
@@ -140,7 +140,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
@@ -28,20 +28,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
@@ -29,25 +29,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 */
 
@@ -59,8 +65,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"
     }
   ]
 }
@@ -76,7 +90,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-product-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,20 @@
   }
 }
 
-.sbb-teaser-product {
-  &:focus-visible {
-    :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & {
-      @include sbb.focus-outline;
+::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));
+}
 
-      border-radius: var(--sbb-teaser-product-border-radius);
-    }
-  }
+.sbb-teaser-product__wrapper {
+  position: relative;
+}
+
+.sbb-teaser-product__root {
+  pointer-events: none;
 
   @include sbb.if-forced-colors {
     &::after {
@@ -34,10 +47,15 @@
   }
 }
 
-::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 {
+  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 '../../image.js';
@@ -78,7 +78,7 @@ const defaultArgs: Args = {
   withFooter: true,
   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 {