fix(sbb-flip-card): fix accessibility issues (#3000)

Closes #2983
sbb-design-systems · Aug 15, 2024 · 1f107a0 · 1f107a0
1 parent ff68e28
commit 1f107a0
Show file tree

Hide file tree

Showing 16 changed files with 303 additions and 156 deletions.
diff --git a/src/elements/core/i18n/i18n.ts b/src/elements/core/i18n/i18n.ts
@@ -638,7 +638,7 @@ export const i18nFlipCard: Record<string, string> = {
 
 export const i18nReverseCard: Record<string, string> = {
   de: 'Klicken Sie auf diese Karte, um zurück zur Zusammenfassung zu gelangen',
-  en: 'Click on this card to go back to summary',
+  en: 'Click on this card to go back to the summary',
   fr: 'Cliquez sur cette carte pour revenir au résumé',
   it: 'Clicca su questa scheda per tornare al sommario',
 };

diff --git a/...lements/flip-card/flip-card-summary/__snapshots__/flip-card-summary.snapshot.spec.snap.js b/...lements/flip-card/flip-card-summary/__snapshots__/flip-card-summary.snapshot.spec.snap.js
@@ -31,9 +31,9 @@ snapshots["sbb-flip-card-summary DOM"] =
     Summary
   </sbb-title>
   <sbb-image
-    aspect-ratio="free"
-    border-radius="none"
-    image-src="https://cdn.img.sbb.ch/content/dam/internet/lyne/Billetkontrolle.jpg"
+    aspect-ratio="16-9"
+    border-radius="default"
+    image-src="http://localhost:8000/src/elements/core/testing/assets/placeholder-image.png"
     slot="image"
   >
   </sbb-image>

diff --git a/src/elements/flip-card/flip-card-summary/flip-card-summary.scss b/src/elements/flip-card/flip-card-summary/flip-card-summary.scss
@@ -76,6 +76,9 @@
 }
 
 ::slotted(sbb-image) {
+  --sbb-image-border-radius: 0;
+  --sbb-image-aspect-ratio: auto;
+
   width: 100%;
   height: 100%;
 }
diff --git a/src/elements/flip-card/flip-card-summary/flip-card-summary.snapshot.spec.ts b/src/elements/flip-card/flip-card-summary/flip-card-summary.snapshot.spec.ts
@@ -1,7 +1,6 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import sampleImages from '../../core/images.js';
 import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
 import type { SbbFlipCardSummaryElement } from './flip-card-summary.js';
@@ -10,19 +9,16 @@ import './flip-card-summary.js';
 import '../../title.js';
 import '../../image.js';
 
+const imageUrl = import.meta.resolve('../../core/testing/assets/placeholder-image.png');
+
 describe(`sbb-flip-card-summary`, () => {
   let element: SbbFlipCardSummaryElement;
 
   beforeEach(async () => {
     element = await fixture(
       html`<sbb-flip-card-summary image-alignment="below">
         <sbb-title level="4">Summary</sbb-title>
-        <sbb-image
-          slot="image"
-          border-radius="none"
-          aspect-ratio="free"
-          image-src=${sampleImages[0]}
-        ></sbb-image>
+        <sbb-image slot="image" image-src=${imageUrl}></sbb-image>
       </sbb-flip-card-summary>`,
     );
   });

diff --git a/src/elements/flip-card/flip-card-summary/flip-card-summary.stories.ts b/src/elements/flip-card/flip-card-summary/flip-card-summary.stories.ts
@@ -54,8 +54,7 @@ const Template = (args: Args): TemplateResult => html`
       <sbb-image
         slot="image"
         image-src=${sampleImages[0]}
-        border-radius="none"
-        aspect-ratio="free"
+        alt="Conductor controlling a ticket"
       ></sbb-image>
     </sbb-flip-card-summary>
   </div>

diff --git a/src/elements/flip-card/flip-card-summary/flip-card-summary.visual.spec.ts b/src/elements/flip-card/flip-card-summary/flip-card-summary.visual.spec.ts
@@ -21,12 +21,7 @@ const imageBase64 = await loadAssetAsBase64(
 const images = [
   {
     selector: 'sbb-image',
-    image: html`<sbb-image
-      slot="image"
-      image-src=${imageUrl}
-      border-radius="none"
-      aspect-ratio="free"
-    ></sbb-image>`,
+    image: html`<sbb-image slot="image" image-src=${imageUrl}></sbb-image>`,
   },
   {
     selector: 'img',
@@ -57,7 +52,7 @@ describe(`sbb-flip-card-summary`, () => {
                     'background-color': 'var(--sbb-color-cloud-alpha-80)',
                   })}
                 >
-                  <sbb-flip-card-summary slot="summary" image-alignment=${imageAlignment}>
+                  <sbb-flip-card-summary image-alignment=${imageAlignment}>
                     ${image.image}
                     <sbb-title level="4">Summary</sbb-title>
                   </sbb-flip-card-summary>

diff --git a/src/elements/flip-card/flip-card-summary/readme.md b/src/elements/flip-card/flip-card-summary/readme.md
@@ -5,7 +5,7 @@ The component's slot is implicitly set to `"summary"`.
 <sbb-flip-card>
   <sbb-flip-card-summary>
     <sbb-title> Card Title </sbb-title>
-    <sbb-image slot="image" image-src="..."></sbb-image>
+    <sbb-image slot="image" image-src="..." alt="..."></sbb-image>
   </sbb-flip-card-summary>
 </sbb-flip-card>
 ```

diff --git a/src/elements/flip-card/flip-card/__snapshots__/flip-card.snapshot.spec.snap.js b/src/elements/flip-card/flip-card/__snapshots__/flip-card.snapshot.spec.snap.js
@@ -40,9 +40,9 @@ snapshots["sbb-flip-card DOM"] =
       Summary
     </sbb-title>
     <sbb-image
-      aspect-ratio="free"
-      border-radius="none"
-      image-src="https://cdn.img.sbb.ch/content/dam/internet/lyne/Billetkontrolle.jpg"
+      aspect-ratio="16-9"
+      border-radius="default"
+      image-src="http://localhost:8000/src/elements/core/testing/assets/placeholder-image.png"
       slot="image"
     >
     </sbb-image>
@@ -74,27 +74,27 @@ snapshots["sbb-flip-card DOM"] =
 
 snapshots["sbb-flip-card Shadow DOM"] = 
 `<div class="sbb-flip-card">
-  <slot name="summary">
-  </slot>
   <button
     aria-expanded="false"
-    aria-label="Click on this card for details"
+    class="sbb-flip-card-button"
   >
+    <sbb-screen-reader-only>
+      Summary, Click on this card for details
+    </sbb-screen-reader-only>
   </button>
+  <slot name="summary">
+  </slot>
   <slot name="details">
   </slot>
-  <sbb-secondary-button
+  <sbb-secondary-button-static
     class="sbb-flip-card--toggle-button"
     data-action=""
-    data-button=""
     data-sbb-button=""
     dir="ltr"
     icon-name="plus-small"
-    role="button"
     size="s"
-    tabindex="0"
   >
-  </sbb-secondary-button>
+  </sbb-secondary-button-static>
 </div>
 `;
 /* end snapshot sbb-flip-card Shadow DOM */
@@ -105,18 +105,14 @@ snapshots["sbb-flip-card A11y tree Chrome"] =
   "role": "WebArea",
   "name": "",
   "children": [
-    {
-      "role": "heading",
-      "name": "Summary",
-      "level": 4
-    },
     {
       "role": "button",
-      "name": "Click on this card for details"
+      "name": "Summary, Click on this card for details"
     },
     {
-      "role": "button",
-      "name": ""
+      "role": "heading",
+      "name": "Summary",
+      "level": 4
     }
   ]
 }
@@ -130,18 +126,14 @@ snapshots["sbb-flip-card A11y tree Firefox"] =
   "role": "document",
   "name": "",
   "children": [
-    {
-      "role": "heading",
-      "name": "Summary",
-      "level": 4
-    },
     {
       "role": "button",
-      "name": "Click on this card for details"
+      "name": "Summary, Click on this card for details"
     },
     {
-      "role": "button",
-      "name": ""
+      "role": "heading",
+      "name": "Summary",
+      "level": 4
     }
   ]
 }

diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss
@@ -29,7 +29,9 @@
 }
 
 :host(:hover) {
-  --sbb-flip-card-background-color: var(--sbb-color-cloud-alpha-80);
+  @include sbb.hover-mq($hover: true) {
+    --sbb-flip-card-background-color: var(--sbb-color-cloud-alpha-80);
+  }
 }
 
 :host([data-flipped]) {
@@ -75,6 +77,24 @@
   border-radius: var(--sbb-flip-card-border-radius);
   transition: var(--sbb-flip-card-summary-transition-duration) ease-out;
   transition-delay: var(--sbb-flip-card-summary-transition-delay);
+  cursor: pointer;
+
+  @include sbb.if-forced-colors {
+    &::after {
+      content: '';
+      border: var(--sbb-border-width-2x) solid CanvasText;
+      border-radius: var(--sbb-flip-card-border-radius);
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+
+      :host(:hover) & {
+        @include sbb.hover-mq($hover: true) {
+          border-color: Highlight;
+        }
+      }
+    }
+  }
 }
 
 .sbb-flip-card--toggle-button {
@@ -87,13 +107,14 @@
   }
 }
 
-button {
+.sbb-flip-card-button {
   @include sbb.button-reset;
 
-  cursor: pointer;
   position: absolute;
   inset: 0;
+  width: 100%;
   border-radius: var(--sbb-flip-card-border-radius);
+  cursor: pointer;
 
   &:not([data-focus-origin='mouse'], [data-focus-origin='touch']):focus-visible {
     @include sbb.focus-outline;

diff --git a/src/elements/flip-card/flip-card/flip-card.snapshot.spec.ts b/src/elements/flip-card/flip-card/flip-card.snapshot.spec.ts
@@ -1,7 +1,6 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import sampleImages from '../../core/images.js';
 import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
 import type { SbbFlipCardElement } from './flip-card.js';
@@ -13,23 +12,20 @@ import '../../title.js';
 import '../../image.js';
 import '../../link.js';
 
+const imageUrl = import.meta.resolve('../../core/testing/assets/placeholder-image.png');
+
 describe(`sbb-flip-card`, () => {
   let element: SbbFlipCardElement;
 
   beforeEach(async () => {
     element = await fixture(html`
       <sbb-flip-card>
-        <sbb-flip-card-summary slot="summary">
+        <sbb-flip-card-summary>
           <sbb-title level="4">Summary</sbb-title>
-          <sbb-image
-            slot="image"
-            image-src=${sampleImages[0]}
-            border-radius="none"
-            aspect-ratio="free"
-          ></sbb-image>
+          <sbb-image slot="image" image-src=${imageUrl}></sbb-image>
         </sbb-flip-card-summary>
-        <sbb-flip-card-details slot="details"
-          >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus ornare condimentum.
+        <sbb-flip-card-details>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus ornare condimentum.
           Vivamus turpis elit, dapibus eget fringilla pellentesque, lobortis in nibh. Duis dapibus
           vitae tortor ullamcorper maximus. In convallis consectetur felis.
           <sbb-link href="https://www.sbb.ch" negative>Link</sbb-link>