refactor(sbb-alert): remove sbb-link from shadow DOM (#3270)

BREAKING CHANGE: The link properties (`linkContent`, `href`, `target`, `rel`, `accessibilityLabel`) of the `sbb-alert` have been removed. Consumers have to slot a `<sbb-link>` into the unnamed content slot.
sbb-design-systems · Dec 3, 2024 · 8197bf1 · 8197bf1
1 parent 399e8aa
commit 8197bf1
Show file tree

Hide file tree

Showing 18 changed files with 99 additions and 285 deletions.
diff --git a/src/elements/alert/alert-group/__snapshots__/alert-group.snapshot.spec.snap.js b/src/elements/alert/alert-group/__snapshots__/alert-group.snapshot.spec.snap.js
@@ -10,7 +10,6 @@ snapshots["sbb-alert-group renders DOM"] =
   <sbb-alert
     animation="all"
     data-state="opening"
-    href="https://www.sbb.ch"
     size="m"
     title-content="Interruption between Genève and Lausanne"
   >
@@ -44,7 +43,6 @@ snapshots["sbb-alert-group renders with slotted DOM"] =
   <sbb-alert
     animation="all"
     data-state="opening"
-    href="https://www.sbb.ch"
     size="m"
     title-content="Interruption between Genève and Lausanne"
   >
@@ -84,11 +82,7 @@ snapshots["sbb-alert-group renders A11y tree Chrome"] =
     },
     {
       "role": "text",
-      "name": "The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. "
-    },
-    {
-      "role": "link",
-      "name": "Find out more"
+      "name": "The rail traffic between Allaman and Morges is interrupted. All trains are cancelled."
     },
     {
       "role": "button",
@@ -120,11 +114,6 @@ snapshots["sbb-alert-group renders A11y tree Firefox"] =
       "role": "text leaf",
       "name": "The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. "
     },
-    {
-      "role": "link",
-      "name": "Find out more",
-      "value": "https://www.sbb.ch/"
-    },
     {
       "role": "button",
       "name": "Close message"

diff --git a/src/elements/alert/alert-group/alert-group.snapshot.spec.ts b/src/elements/alert/alert-group/alert-group.snapshot.spec.ts
@@ -4,6 +4,7 @@ import { html } from 'lit/static-html.js';
 import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
 import type { SbbAlertGroupElement } from './alert-group.js';
+
 import './alert-group.js';
 import '../alert.js';
 
@@ -14,10 +15,7 @@ describe(`sbb-alert-group`, () => {
     beforeEach(async () => {
       root = await fixture(html`
         <sbb-alert-group accessibility-title="Disruptions" accessibility-title-level="3">
-          <sbb-alert
-            title-content="Interruption between Genève and Lausanne"
-            href="https://www.sbb.ch"
-          >
+          <sbb-alert title-content="Interruption between Genève and Lausanne">
             The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
           </sbb-alert>
         </sbb-alert-group>
@@ -42,11 +40,7 @@ describe(`sbb-alert-group`, () => {
       root = await fixture(html`
         <sbb-alert-group accessibility-title-level="3">
           <span slot="accessibility-title">Interruptions</span>
-          <sbb-alert
-            title-content="Interruption between Genève and Lausanne"
-            href="https://www.sbb.ch"
-            data-state="opening"
-          >
+          <sbb-alert title-content="Interruption between Genève and Lausanne" data-state="opening">
             The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
           </sbb-alert>
         </sbb-alert-group>

diff --git a/src/elements/alert/alert-group/alert-group.spec.ts b/src/elements/alert/alert-group/alert-group.spec.ts
@@ -24,8 +24,8 @@ describe(`sbb-alert-group`, () => {
         accessibility-title="${accessibilityTitle}"
         accessibility-title-level="${accessibilityTitleLevel}"
       >
-        <sbb-alert title-content="Interruption" href="www.sbb.ch" id="alert1">First</sbb-alert>
-        <sbb-alert title-content="Interruption" href="www.sbb.ch" id="alert2">Second</sbb-alert>
+        <sbb-alert title-content="Interruption" id="alert1">First</sbb-alert>
+        <sbb-alert title-content="Interruption" id="alert2">Second</sbb-alert>
       </sbb-alert-group>
     `);
     const emptySpy = new EventSpy(SbbAlertGroupElement.events.empty);

diff --git a/src/elements/alert/alert-group/alert-group.ssr.spec.ts b/src/elements/alert/alert-group/alert-group.ssr.spec.ts
@@ -12,8 +12,8 @@ describe(`sbb-alert-group ssr`, () => {
     root = await ssrHydratedFixture(
       html`
         <sbb-alert-group accessibility-title="Disruptions" accessibility-title-level="3">
-          <sbb-alert title-content="Interruption" href="www.sbb.ch">First</sbb-alert>
-          <sbb-alert title-content="Interruption" href="www.sbb.ch">Second</sbb-alert>
+          <sbb-alert title-content="Interruption">First</sbb-alert>
+          <sbb-alert title-content="Interruption">Second</sbb-alert>
         </sbb-alert-group>
       `,
       { modules: ['./alert-group.js', '../alert.js'] },

diff --git a/src/elements/alert/alert-group/alert-group.stories.ts b/src/elements/alert/alert-group/alert-group.stories.ts
@@ -10,19 +10,18 @@ import { SbbAlertElement } from '../alert.js';
 import { SbbAlertGroupElement } from './alert-group.js';
 import readme from './readme.md?raw';
 
+import '../../link/link.js';
+
 const Template = (args: Args): TemplateResult => html`
   <sbb-alert-group ${sbbSpread(args)}>
-    <sbb-alert
-      title-content="Interruption between Genève and Lausanne"
-      href="https://www.sbb.ch"
-      size="l"
-    >
+    <sbb-alert title-content="Interruption between Genève and Lausanne" size="l">
       The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
+      <sbb-link href="https://www.sbb.ch">Find out more</sbb-link>
     </sbb-alert>
-    <sbb-alert title-content="Interruption between Berne and Olten" href="https://www.sbb.ch">
+    <sbb-alert title-content="Interruption between Berne and Olten">
       Between Berne and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 o'clock
       construction work will take place. You have to expect changed travel times and changed
-      connections.
+      connections. <sbb-link href="https://www.sbb.ch">Find out more</sbb-link>
     </sbb-alert>
   </sbb-alert-group>
 `;

diff --git a/src/elements/alert/alert-group/alert-group.visual.spec.ts b/src/elements/alert/alert-group/alert-group.visual.spec.ts
@@ -9,10 +9,7 @@ import { SbbAlertElement } from '../alert.js';
 import './alert-group.js';
 
 describe(`sbb-alert-group`, () => {
-  const alert = html`<sbb-alert
-    title-content="Interruption between Berne and Olten"
-    href="https://www.sbb.ch"
-  >
+  const alert = html`<sbb-alert title-content="Interruption between Berne and Olten">
     Between Berne and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 o'clock
     construction work will take place. You have to expect changed travel times and changed
     connections.

diff --git a/src/elements/alert/alert-group/readme.md b/src/elements/alert/alert-group/readme.md
@@ -3,17 +3,15 @@ The `sbb-alert-group` manages the accessibility of one or multiple
 
 ```html
 <sbb-alert-group accessibility-title="Disruptions" accessibility-level="2">
-  <sbb-alert
-    title-content="Interruption between Genève and Lausanne"
-    href="https://www.sbb.ch"
-    size="l"
-  >
+  <sbb-alert title-content="Interruption between Genève and Lausanne" size="l">
     The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
+    <sbb-link href="https://www.sbb.ch">Find out more</sbb-link>
   </sbb-alert>
-  <sbb-alert title-content="Interruption between Berne and Olten" href="https://www.sbb.ch">
+  <sbb-alert title-content="Interruption between Berne and Olten">
     Between Berne and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 o'clock
     construction work will take place. You have to expect changed travel times and changed
     connections.
+    <sbb-link href="https://www.sbb.ch">Find out more</sbb-link>
   </sbb-alert>
 </sbb-alert-group>
 ```

diff --git a/src/elements/alert/alert/__snapshots__/alert.snapshot.spec.snap.js b/src/elements/alert/alert/__snapshots__/alert.snapshot.spec.snap.js
@@ -76,19 +76,25 @@ snapshots["sbb-alert should render default properties Shadow DOM"] =
 
 snapshots["sbb-alert should render customized properties DOM"] = 
 `<sbb-alert
-  accessibility-label="label"
   animation="all"
   data-state="opening"
-  href="https://www.sbb.ch"
   icon-name="disruption"
-  link-content="Show much more"
-  rel="noopener"
   size="l"
-  target="_blank"
   title-content="Interruption"
   title-level="2"
 >
   Alert content
+  <sbb-link
+    data-action=""
+    data-link=""
+    data-sbb-link=""
+    data-slot-names="unnamed"
+    href="https://www.sbb.ch"
+    negative=""
+    size="s"
+  >
+    Find out more
+  </sbb-link>
 </sbb-alert>
 `;
 /* end snapshot sbb-alert should render customized properties DOM */
@@ -125,20 +131,6 @@ snapshots["sbb-alert should render customized properties Shadow DOM"] =
           <slot>
           </slot>
         </p>
-        <sbb-link
-          accessibility-label="label"
-          data-action=""
-          data-link=""
-          data-sbb-link=""
-          data-slot-names="unnamed"
-          href="https://www.sbb.ch"
-          negative=""
-          rel="noopener"
-          size="s"
-          target="_blank"
-        >
-          Show much more
-        </sbb-link>
       </span>
       <span class="sbb-alert__close-button-wrapper">
         <sbb-divider
@@ -185,7 +177,7 @@ snapshots["sbb-alert A11y tree Chrome"] =
     },
     {
       "role": "link",
-      "name": "test-a11y-label"
+      "name": "Find out more"
     },
     {
       "role": "button",
@@ -214,7 +206,7 @@ snapshots["sbb-alert A11y tree Firefox"] =
     },
     {
       "role": "link",
-      "name": "test-a11y-label",
+      "name": "Find out more",
       "value": "https://www.sbb.ch/"
     },
     {

diff --git a/src/elements/alert/alert/alert.snapshot.spec.ts b/src/elements/alert/alert/alert.snapshot.spec.ts
@@ -6,6 +6,7 @@ import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 import type { SbbAlertElement } from './alert.js';
 
 import './alert.js';
+import '../../link/link.js';
 
 describe(`sbb-alert`, () => {
   let element: SbbAlertElement;
@@ -16,9 +17,11 @@ describe(`sbb-alert`, () => {
         html`<sbb-alert title-content="Interruption">Alert content</sbb-alert>`,
       );
     });
+
     it('DOM', async () => {
       await expect(element).dom.to.be.equalSnapshot();
     });
+
     it('Shadow DOM', async () => {
       await expect(element).shadowDom.to.be.equalSnapshot();
     });
@@ -32,30 +35,25 @@ describe(`sbb-alert`, () => {
           title-level="2"
           size="l"
           icon-name="disruption"
-          accessibility-label="label"
-          href="https://www.sbb.ch"
-          rel="noopener"
-          target="_blank"
-          link-content="Show much more"
-          >Alert content</sbb-alert
-        >`,
+        >
+          Alert content <sbb-link href="https://www.sbb.ch">Find out more</sbb-link>
+        </sbb-alert>`,
       );
     });
+
     it('DOM', async () => {
       await expect(element).dom.to.be.equalSnapshot();
     });
+
     it('Shadow DOM', async () => {
       await expect(element).shadowDom.to.be.equalSnapshot();
     });
   });
 
   testA11yTreeSnapshot(html`
-    <sbb-alert
-      title-content="Interruption"
-      href="https://www.sbb.ch"
-      accessibility-label="test-a11y-label"
-    >
+    <sbb-alert title-content="Interruption">
       Alert content
+      <sbb-link href="https://www.sbb.ch">Find out more</sbb-link>
     </sbb-alert>
   `);
 });