From c87b787bfaaa8d7ae074e4230d0e296e4f8d6b07 Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Wed, 31 Jan 2024 18:04:38 +0100
Subject: [PATCH] test: implemented a11y tree tests

---
 .../__snapshots__/accordion.spec.snap.js      |  129 ++
 src/components/accordion/accordion.spec.ts    |   71 +-
 .../__snapshots__/action-group.spec.snap.js   |  130 ++
 .../action-group/action-group.spec.ts         |   51 +-
 .../__snapshots__/alert-group.spec.snap.js    |  158 ++
 .../alert/alert-group/alert-group.spec.ts     |   56 +-
 .../alert/__snapshots__/alert.spec.snap.js    |  247 +++
 src/components/alert/alert/alert.e2e.ts       |    8 +
 src/components/alert/alert/alert.spec.ts      |   87 +-
 .../__snapshots__/autocomplete.spec.snap.js   |  377 +++++
 .../autocomplete/autocomplete.spec.ts         |  156 +-
 .../breadcrumb-group.spec.snap.js             |  182 ++-
 .../breadcrumb-group/breadcrumb-group.spec.ts |   30 +-
 .../__snapshots__/breadcrumb.spec.snap.js     |   73 +
 .../breadcrumb/breadcrumb/breadcrumb.spec.ts  |    7 +-
 .../__snapshots__/calendar.spec.snap.js       | 1320 +++++++++++++++++
 src/components/calendar/calendar.spec.ts      |  241 +--
 .../__snapshots__/card-badge.spec.snap.js     |   80 +
 .../card/card-badge/card-badge.spec.ts        |   37 +-
 .../card/card/__snapshots__/card.spec.snap.js |  148 ++
 src/components/card/card/card.e2e.ts          |   38 +-
 src/components/card/card/card.spec.ts         |   28 +-
 .../__snapshots__/checkbox-group.spec.snap.js |  141 ++
 .../checkbox-group/checkbox-group.spec.ts     |   41 +-
 .../__snapshots__/checkbox.spec.snap.js       |  101 ++
 .../checkbox/checkbox/checkbox.spec.ts        |    5 +
 .../chip/__snapshots__/chip.spec.snap.js      |   71 +
 src/components/chip/chip.spec.ts              |   26 +-
 .../clock/__snapshots__/clock.spec.snap.js    |   64 +
 src/components/clock/clock.spec.ts            |   46 +-
 .../datepicker-next-day.spec.snap.js          |   64 +
 .../datepicker-next-day.spec.ts               |   15 +-
 .../datepicker-previous-day.spec.snap.js      |   64 +
 .../datepicker-previous-day.spec.ts           |   18 +-
 .../datepicker-toggle.spec.snap.js            |  159 ++
 .../datepicker-toggle.spec.ts                 |  100 +-
 .../__snapshots__/datepicker.spec.snap.js     |   93 ++
 .../datepicker/datepicker/datepicker.spec.ts  |   17 +
 .../dialog/__snapshots__/dialog.spec.snap.js  |   30 +
 src/components/dialog/dialog.spec.ts          |    4 +
 .../__snapshots__/divider.spec.snap.js        |   33 +
 src/components/divider/divider.spec.ts        |    8 +-
 .../expansion-panel-content.spec.snap.js      |   67 +
 .../expansion-panel-content.spec.ts           |   24 +-
 .../expansion-panel-header.spec.snap.js       |   48 +
 .../expansion-panel-header.spec.ts            |    6 +
 .../expansion-panel.spec.snap.js              |  137 ++
 .../expansion-panel/expansion-panel.spec.ts   |   86 +-
 .../__snapshots__/file-selector.spec.snap.js  |   72 +
 .../file-selector/file-selector.spec.ts       |    3 +
 .../footer/__snapshots__/footer.spec.snap.js  |   67 +
 src/components/footer/footer.spec.ts          |   15 +-
 .../__snapshots__/form-error.spec.snap.js     |   63 +
 src/components/form-error/form-error.spec.ts  |   28 +-
 .../form-field-clear.spec.snap.js             |  173 +++
 .../form-field-clear/form-field-clear.spec.ts |   81 +-
 .../__snapshots__/form-field.spec.snap.js     |   72 +
 .../form-field/form-field/form-field.spec.ts  |   11 +
 .../header/__snapshots__/header.spec.snap.js  |   85 ++
 src/components/header/header/header.spec.ts   |   90 +-
 .../icon/__snapshots__/icon.spec.snap.js      |   30 +
 src/components/icon/icon.spec.ts              |    3 +
 .../__snapshots__/journey-header.spec.snap.js |  155 ++
 .../journey-header/journey-header.spec.ts     |   56 +-
 .../journey-summary.spec.snap.js              |  128 ++
 .../journey-summary/journey-summary.spec.ts   |  106 +-
 .../__snapshots__/link-list.spec.snap.js      |   30 +
 src/components/link-list/link-list.spec.ts    |    3 +
 .../loading-indicator.spec.snap.js            |  123 ++
 .../loading-indicator.spec.ts                 |   87 +-
 .../__snapshots__/map-container.spec.snap.js  |   77 +
 .../map-container/map-container.spec.ts       |   47 +-
 .../__snapshots__/message.spec.snap.js        |  163 ++
 src/components/message/message.spec.ts        |   84 +-
 .../__snapshots__/notification.spec.snap.js   |   30 +
 .../notification/notification.spec.ts         |   12 +-
 .../__snapshots__/optgroup.spec.snap.js       |  272 ++++
 .../option/optgroup/optgroup.spec.ts          |  107 +-
 .../option/__snapshots__/option.spec.snap.js  |   87 ++
 src/components/option/option/option.spec.ts   |   44 +-
 .../radio-button-group.spec.snap.js           |   54 +
 .../radio-button-group.spec.ts                |   35 +-
 .../__snapshots__/radio-button.spec.snap.js   |   83 ++
 .../radio-button/radio-button.spec.ts         |   35 +-
 .../screenreader-only.spec.snap.js            |   42 +
 .../screenreader-only.spec.ts                 |   12 +-
 .../select/__snapshots__/select.spec.snap.js  |  467 ++++++
 src/components/select/select.spec.ts          |  152 +-
 .../selection-panel/selection-panel.spec.ts   |   49 +-
 .../__snapshots__/skiplink-list.spec.snap.js  |  336 +++++
 .../skiplink-list/skiplink-list.spec.ts       |   86 +-
 .../slider/__snapshots__/slider.spec.snap.js  |  138 ++
 src/components/slider/slider.spec.ts          |   40 +-
 .../status/__snapshots__/status.spec.snap.js  |   62 +
 src/components/status/status.spec.ts          |    6 +
 .../__snapshots__/tab-group.spec.snap.js      |  135 ++
 .../tabs/tab-group/tab-group.spec.ts          |   15 +-
 .../__snapshots__/tab-title.spec.snap.js      |   50 +
 .../tabs/tab-title/tab-title.spec.ts          |    3 +
 .../__snapshots__/tag-group.spec.snap.js      |  129 ++
 .../tag/tag-group/tag-group.spec.ts           |   60 +-
 .../tag/tag/__snapshots__/tag.spec.snap.js    |   49 +
 src/components/tag/tag/tag.spec.ts            |    3 +
 .../__snapshots__/teaser-hero.spec.snap.js    |  206 +++
 .../teaser-hero/teaser-hero.spec.ts           |  129 +-
 .../teaser/__snapshots__/teaser.spec.snap.js  |   73 +
 src/components/teaser/teaser.spec.ts          |    3 +
 .../__snapshots__/time-input.spec.snap.js     |   67 +
 src/components/time-input/time-input.spec.ts  |   19 +-
 .../title/__snapshots__/title.spec.snap.js    |   54 +
 src/components/title/title.spec.ts            |   11 +-
 .../toast/__snapshots__/toast.spec.snap.js    |  152 ++
 src/components/toast/toast.spec.ts            |   70 +-
 .../__snapshots__/toggle-check.spec.snap.js   |  229 +++
 .../toggle-check/toggle-check.spec.ts         |  135 +-
 .../__snapshots__/toggle-option.spec.snap.js  |   51 +
 .../toggle-option/toggle-option.spec.ts       |    6 +
 .../toggle/__snapshots__/toggle.spec.snap.js  |   68 +
 src/components/toggle/toggle/toggle.spec.ts   |    3 +
 .../tooltip-trigger.spec.snap.js              |   81 +
 .../tooltip-trigger/tooltip-trigger.spec.ts   |   30 +-
 .../__snapshots__/tooltip.spec.snap.js        |   62 +
 .../tooltip/tooltip/tooltip.spec.ts           |   45 +-
 .../visual-checkbox.spec.snap.js              |   57 +
 .../visual-checkbox/visual-checkbox.spec.ts   |   62 +-
 125 files changed, 9195 insertions(+), 1985 deletions(-)
 create mode 100644 src/components/accordion/__snapshots__/accordion.spec.snap.js
 create mode 100644 src/components/action-group/__snapshots__/action-group.spec.snap.js
 create mode 100644 src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js
 create mode 100644 src/components/alert/alert/__snapshots__/alert.spec.snap.js
 create mode 100644 src/components/autocomplete/__snapshots__/autocomplete.spec.snap.js
 create mode 100644 src/components/calendar/__snapshots__/calendar.spec.snap.js
 create mode 100644 src/components/card/card-badge/__snapshots__/card-badge.spec.snap.js
 create mode 100644 src/components/card/card/__snapshots__/card.spec.snap.js
 create mode 100644 src/components/checkbox/checkbox-group/__snapshots__/checkbox-group.spec.snap.js
 create mode 100644 src/components/chip/__snapshots__/chip.spec.snap.js
 create mode 100644 src/components/clock/__snapshots__/clock.spec.snap.js
 create mode 100644 src/components/datepicker/datepicker-toggle/__snapshots__/datepicker-toggle.spec.snap.js
 create mode 100644 src/components/divider/__snapshots__/divider.spec.snap.js
 create mode 100644 src/components/expansion-panel/expansion-panel-content/__snapshots__/expansion-panel-content.spec.snap.js
 create mode 100644 src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js
 create mode 100644 src/components/footer/__snapshots__/footer.spec.snap.js
 create mode 100644 src/components/form-error/__snapshots__/form-error.spec.snap.js
 create mode 100644 src/components/form-field/form-field-clear/__snapshots__/form-field-clear.spec.snap.js
 create mode 100644 src/components/header/header/__snapshots__/header.spec.snap.js
 create mode 100644 src/components/journey-header/__snapshots__/journey-header.spec.snap.js
 create mode 100644 src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js
 create mode 100644 src/components/loading-indicator/__snapshots__/loading-indicator.spec.snap.js
 create mode 100644 src/components/map-container/__snapshots__/map-container.spec.snap.js
 create mode 100644 src/components/message/__snapshots__/message.spec.snap.js
 create mode 100644 src/components/option/optgroup/__snapshots__/optgroup.spec.snap.js
 create mode 100644 src/components/option/option/__snapshots__/option.spec.snap.js
 create mode 100644 src/components/radio-button/radio-button-group/__snapshots__/radio-button-group.spec.snap.js
 create mode 100644 src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js
 create mode 100644 src/components/select/__snapshots__/select.spec.snap.js
 create mode 100644 src/components/slider/__snapshots__/slider.spec.snap.js
 create mode 100644 src/components/tabs/tab-group/__snapshots__/tab-group.spec.snap.js
 create mode 100644 src/components/tag/tag-group/__snapshots__/tag-group.spec.snap.js
 create mode 100644 src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js
 create mode 100644 src/components/time-input/__snapshots__/time-input.spec.snap.js
 create mode 100644 src/components/title/__snapshots__/title.spec.snap.js
 create mode 100644 src/components/toast/__snapshots__/toast.spec.snap.js
 create mode 100644 src/components/toggle-check/__snapshots__/toggle-check.spec.snap.js
 create mode 100644 src/components/toggle/toggle/__snapshots__/toggle.spec.snap.js
 create mode 100644 src/components/tooltip/tooltip-trigger/__snapshots__/tooltip-trigger.spec.snap.js
 create mode 100644 src/components/tooltip/tooltip/__snapshots__/tooltip.spec.snap.js
 create mode 100644 src/components/visual-checkbox/__snapshots__/visual-checkbox.spec.snap.js

diff --git a/src/components/accordion/__snapshots__/accordion.spec.snap.js b/src/components/accordion/__snapshots__/accordion.spec.snap.js
new file mode 100644
index 00000000000..f69dca3cb9d
--- /dev/null
+++ b/src/components/accordion/__snapshots__/accordion.spec.snap.js
@@ -0,0 +1,129 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-accordion renders - Dom"] = 
+`<sbb-accordion>
+  <sbb-expansion-panel
+    data-accordion=""
+    data-accordion-first=""
+  >
+    <sbb-expansion-panel-header
+      aria-controls="sbb-expansion-panel-content-1"
+      aria-expanded="false"
+      data-slot-names="unnamed"
+      dir="ltr"
+      id="sbb-expansion-panel-header-1"
+      role="button"
+      slot="header"
+      tabindex="0"
+    >
+      Header 1
+    </sbb-expansion-panel-header>
+    <sbb-expansion-panel-content
+      aria-hidden="true"
+      aria-labelledby="sbb-expansion-panel-header-1"
+      id="sbb-expansion-panel-content-1"
+      role="region"
+      slot="content"
+    >
+      Content 1
+    </sbb-expansion-panel-content>
+  </sbb-expansion-panel>
+  <sbb-expansion-panel
+    data-accordion=""
+    data-accordion-last=""
+  >
+    <sbb-expansion-panel-header
+      aria-controls="sbb-expansion-panel-content-2"
+      aria-expanded="false"
+      data-slot-names="unnamed"
+      dir="ltr"
+      id="sbb-expansion-panel-header-2"
+      role="button"
+      slot="header"
+      tabindex="0"
+    >
+      Header 2
+    </sbb-expansion-panel-header>
+    <sbb-expansion-panel-content
+      aria-hidden="true"
+      aria-labelledby="sbb-expansion-panel-header-2"
+      id="sbb-expansion-panel-content-2"
+      role="region"
+      slot="content"
+    >
+      Content 2
+    </sbb-expansion-panel-content>
+  </sbb-expansion-panel>
+</sbb-accordion>
+`;
+/* end snapshot sbb-accordion renders - Dom */
+
+snapshots["sbb-accordion renders - ShadowDom"] = 
+`<div class="sbb-accordion">
+  <slot>
+  </slot>
+</div>
+`;
+/* end snapshot sbb-accordion renders - ShadowDom */
+
+snapshots["sbb-accordion A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Header 1"
+    },
+    {
+      "role": "button",
+      "name": "Header 2"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-accordion A11y tree Chrome */
+
+snapshots["sbb-accordion A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Header 1"
+    },
+    {
+      "role": "button",
+      "name": "Header 2"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-accordion A11y tree Firefox */
+
+snapshots["sbb-accordion A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Header 1"
+    },
+    {
+      "role": "button",
+      "name": "Header 2"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-accordion A11y tree Safari */
+
diff --git a/src/components/accordion/accordion.spec.ts b/src/components/accordion/accordion.spec.ts
index c52fcfe03e2..946c8e76210 100644
--- a/src/components/accordion/accordion.spec.ts
+++ b/src/components/accordion/accordion.spec.ts
@@ -1,11 +1,18 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { waitForLitRender } from '../core/testing';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
+import type { SbbAccordionElement } from './accordion';
 import './accordion';
 import '../expansion-panel';
 
 describe('sbb-accordion', () => {
-  it('renders', async () => {
-    const root = await fixture(html`
+  let element: SbbAccordionElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`
       <sbb-accordion>
         <sbb-expansion-panel>
           <sbb-expansion-panel-header>Header 1</sbb-expansion-panel-header>
@@ -17,56 +24,16 @@ describe('sbb-accordion', () => {
         </sbb-expansion-panel>
       </sbb-accordion>
     `);
+    await waitForLitRender(element);
+  });
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-accordion>
-          <sbb-expansion-panel data-accordion data-accordion-first>
-            <sbb-expansion-panel-header
-              aria-controls="sbb-expansion-panel-content-1"
-              aria-expanded="false"
-              dir="ltr"
-              id="sbb-expansion-panel-header-1"
-              role="button"
-              slot="header"
-              tabindex="0"
-              data-slot-names="unnamed"
-            >Header 1</sbb-expansion-panel-header>
-            <sbb-expansion-panel-content
-              aria-hidden="true"
-              aria-labelledby="sbb-expansion-panel-header-1"
-              id="sbb-expansion-panel-content-1"
-              role="region"
-              slot="content"
-            >Content 1</sbb-expansion-panel-content>
-          </sbb-expansion-panel>
-          <sbb-expansion-panel data-accordion data-accordion-last>
-            <sbb-expansion-panel-header
-              aria-controls="sbb-expansion-panel-content-2"
-              aria-expanded="false"
-              dir="ltr"
-              id="sbb-expansion-panel-header-2"
-              role="button"
-              slot="header"
-              tabindex="0"
-              data-slot-names="unnamed">Header 2</sbb-expansion-panel-header>
-            <sbb-expansion-panel-content
-              aria-hidden="true"
-              aria-labelledby="sbb-expansion-panel-header-2"
-              id="sbb-expansion-panel-content-2"
-              role="region"
-              slot="content"
-            >Content 2</sbb-expansion-panel-content>
-          </sbb-expansion-panel>
-        </sbb-accordion>
-      `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <div class="sbb-accordion">
-          <slot></slot>
-        </div>
-      `,
-    );
+  it('renders - Dom', async () => {
+    await expect(element).dom.to.be.equalSnapshot();
   });
+
+  it('renders - ShadowDom', async () => {
+    await expect(element).shadowDom.to.be.equalSnapshot();
+  });
+
+  testA11yTreeSnapshot();
 });
diff --git a/src/components/action-group/__snapshots__/action-group.spec.snap.js b/src/components/action-group/__snapshots__/action-group.spec.snap.js
new file mode 100644
index 00000000000..febe259b1dd
--- /dev/null
+++ b/src/components/action-group/__snapshots__/action-group.spec.snap.js
@@ -0,0 +1,130 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-action-group renders renders - Dom"] = 
+`<sbb-action-group
+  align-group="start"
+  button-size="l"
+  horizontal-from="medium"
+  link-size="m"
+  orientation="horizontal"
+>
+  <sbb-button
+    data-slot-names="unnamed"
+    dir="ltr"
+    role="button"
+    size="l"
+    tabindex="0"
+    variant="secondary"
+  >
+    Button
+  </sbb-button>
+  <sbb-link
+    data-slot-names="unnamed"
+    dir="ltr"
+    href="https://github.com/lyne-design-system/lyne-components"
+    icon-name="chevron-small-left-small"
+    role="link"
+    size="m"
+    tabindex="0"
+    variant="block"
+  >
+    Link
+  </sbb-link>
+</sbb-action-group>
+`;
+/* end snapshot sbb-action-group renders renders - Dom */
+
+snapshots["sbb-action-group renders renders - ShadowDom"] = 
+`<div class="sbb-action-group">
+  <slot>
+  </slot>
+</div>
+`;
+/* end snapshot sbb-action-group renders renders - ShadowDom */
+
+snapshots["sbb-action-group renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Button"
+    },
+    {
+      "role": "link",
+      "name": "Link",
+      "children": [
+        {
+          "role": "link",
+          "name": "Link"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-action-group renders A11y tree Chrome */
+
+snapshots["sbb-action-group renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Button"
+    },
+    {
+      "role": "link",
+      "name": "Link",
+      "children": [
+        {
+          "role": "link",
+          "name": "Link",
+          "value": "https://github.com/lyne-design-system/lyne-components"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-action-group renders A11y tree Firefox */
+
+snapshots["sbb-action-group renders A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Button"
+    },
+    {
+      "role": "link",
+      "name": "",
+      "children": [
+        {
+          "role": "link",
+          "name": "Link",
+          "children": [
+            {
+              "role": "text",
+              "name": "Link"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-action-group renders A11y tree Safari */
+
diff --git a/src/components/action-group/action-group.spec.ts b/src/components/action-group/action-group.spec.ts
index ef9c0310647..9d10b77e92c 100644
--- a/src/components/action-group/action-group.spec.ts
+++ b/src/components/action-group/action-group.spec.ts
@@ -2,43 +2,42 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import type { SbbButtonElement } from '../button';
+import { waitForLitRender } from '../core/testing';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
 
 import type { SbbActionGroupElement } from './action-group';
-import '.';
+import './action-group';
+import '../button';
+import '../link';
 
 describe('sbb-action-group', () => {
-  it('renders', async () => {
-    const root = await fixture(html`
-      <sbb-action-group align-group="start" orientation="horizontal">
-        <sbb-button variant="secondary">Button</sbb-button>
-        <sbb-link
-          icon-name="chevron-small-left-small"
-          href="https://github.com/lyne-design-system/lyne-components"
-        >
-          Link
-        </sbb-link>
-      </sbb-action-group>
-    `);
+  describe('renders', () => {
+    let element: SbbActionGroupElement;
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-action-group align-group="start" orientation="horizontal" align-group="start" horizontal-from="medium" button-size="l" link-size="m">
+    beforeEach(async () => {
+      element = await fixture(html`
+        <sbb-action-group align-group="start" orientation="horizontal">
           <sbb-button variant="secondary">Button</sbb-button>
           <sbb-link
             icon-name="chevron-small-left-small"
-            href="https://github.com/lyne-design-system/lyne-components">
+            href="https://github.com/lyne-design-system/lyne-components"
+          >
             Link
           </sbb-link>
         </sbb-action-group>
-      `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <div class="sbb-action-group">
-          <slot></slot>
-        </div>
-      `,
-    );
+      `);
+      await waitForLitRender(element);
+    });
+
+    it('renders - Dom', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('renders - ShadowDom', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 
   describe('property sync', () => {
diff --git a/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js b/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js
new file mode 100644
index 00000000000..f83b6bf0a0e
--- /dev/null
+++ b/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js
@@ -0,0 +1,158 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-alert-group should render Dom"] = 
+`<sbb-alert-group
+  accessibility-level="3"
+  accessibility-title="Disruptions"
+  role="status"
+>
+  <sbb-alert
+    href="https://www.sbb.ch"
+    size="m"
+    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>
+`;
+/* end snapshot sbb-alert-group should render Dom */
+
+snapshots["sbb-alert-group should render ShadowDom"] = 
+`<div class="sbb-alert-group">
+  <h2 class="sbb-alert-group__title">
+    <slot name="accessibility-title">
+      Disruptions
+    </slot>
+  </h2>
+  <slot>
+  </slot>
+</div>
+`;
+/* end snapshot sbb-alert-group should render ShadowDom */
+
+snapshots["sbb-alert-group should render A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Disruptions",
+      "level": 2
+    },
+    {
+      "role": "heading",
+      "name": "Interruption between Genève and Lausanne",
+      "level": 3
+    },
+    {
+      "role": "text",
+      "name": "The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. "
+    },
+    {
+      "role": "link",
+      "name": "Find out more",
+      "children": [
+        {
+          "role": "link",
+          "name": "Find out more"
+        }
+      ]
+    },
+    {
+      "role": "button",
+      "name": "Close message"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-alert-group should render A11y tree Chrome */
+
+snapshots["sbb-alert-group should render A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Disruptions",
+      "level": 2
+    },
+    {
+      "role": "heading",
+      "name": "Interruption between Genève and Lausanne",
+      "level": 3
+    },
+    {
+      "role": "text leaf",
+      "name": "The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. "
+    },
+    {
+      "role": "link",
+      "name": "Find out more",
+      "children": [
+        {
+          "role": "link",
+          "name": "Find out more",
+          "value": "https://www.sbb.ch/"
+        }
+      ]
+    },
+    {
+      "role": "button",
+      "name": "Close message"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-alert-group should render A11y tree Firefox */
+
+snapshots["sbb-alert-group should render A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Disruptions"
+    },
+    {
+      "role": "text",
+      "name": "Interruption between Genève and Lausanne"
+    },
+    {
+      "role": "text",
+      "name": "The rail traffic between Allaman and Morges is interrupted. All trains are cancelled."
+    },
+    {
+      "role": "link",
+      "name": "",
+      "children": [
+        {
+          "role": "link",
+          "name": "Find out more",
+          "children": [
+            {
+              "role": "text",
+              "name": "Find out more"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "role": "button",
+      "name": "Close message"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-alert-group should render A11y tree Safari */
+
diff --git a/src/components/alert/alert-group/alert-group.spec.ts b/src/components/alert/alert-group/alert-group.spec.ts
index b83dd1fcf28..eb30fa91081 100644
--- a/src/components/alert/alert-group/alert-group.spec.ts
+++ b/src/components/alert/alert-group/alert-group.spec.ts
@@ -1,42 +1,40 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
+import type { SbbAlertGroupElement } from './alert-group';
 import './alert-group';
 import '../alert';
 
 describe('sbb-alert-group', () => {
-  it('should render', async () => {
-    const root = await fixture(html`
-      <sbb-alert-group accessibility-title="Disruptions" accessibility-level="3">
-        <sbb-alert
-          title-content="Interruption between Genève and Lausanne"
-          href="https://www.sbb.ch"
-        >
-          The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
-        </sbb-alert>
-      </sbb-alert-group>
-    `);
+  describe('should render', () => {
+    let root: SbbAlertGroupElement;
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-alert-group accessibility-title='Disruptions' accessibility-level='3' role='status'>
-          <sbb-alert title-content='Interruption between Genève and Lausanne' href='https://www.sbb.ch' size="m">
+    beforeEach(async () => {
+      root = await fixture(html`
+        <sbb-alert-group accessibility-title="Disruptions" accessibility-level="3">
+          <sbb-alert
+            title-content="Interruption between Genève and Lausanne"
+            href="https://www.sbb.ch"
+          >
             The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
           </sbb-alert>
         </sbb-alert-group>
-      `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <div class="sbb-alert-group">
-          <h2 class="sbb-alert-group__title">
-            <slot name="accessibility-title">
-              Disruptions
-            </slot>
-          </h2>
-          <slot></slot>
-        </div>
-      `,
-    );
+      `);
+      await waitForLitRender(root);
+    });
+
+    it('Dom', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
+
+    it('ShadowDom', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 
   it('should render with slots', async () => {
diff --git a/src/components/alert/alert/__snapshots__/alert.spec.snap.js b/src/components/alert/alert/__snapshots__/alert.spec.snap.js
new file mode 100644
index 00000000000..f4cb69b98f6
--- /dev/null
+++ b/src/components/alert/alert/__snapshots__/alert.spec.snap.js
@@ -0,0 +1,247 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-alert should render default properties"] = 
+`<div class="sbb-alert__transition-wrapper">
+  <div class="sbb-alert">
+    <span class="sbb-alert__icon">
+      <slot name="icon">
+        <sbb-icon
+          aria-hidden="true"
+          data-namespace="default"
+          name="info"
+          role="img"
+        >
+        </sbb-icon>
+      </slot>
+    </span>
+    <span class="sbb-alert__content">
+      <sbb-title
+        aria-level="3"
+        class="sbb-alert__title"
+        level="3"
+        negative=""
+        role="heading"
+        visual-level="5"
+      >
+        <slot name="title">
+          Interruption
+        </slot>
+      </sbb-title>
+      <p class="sbb-alert__content-slot">
+        <slot>
+        </slot>
+      </p>
+    </span>
+    <span class="sbb-alert__close-button-wrapper">
+      <sbb-divider
+        aria-orientation="vertical"
+        class="sbb-alert__close-button-divider"
+        negative=""
+        orientation="vertical"
+        role="separator"
+      >
+      </sbb-divider>
+      <sbb-button
+        aria-label="Close message"
+        class="sbb-alert__close-button"
+        dir="ltr"
+        icon-name="cross-small"
+        negative=""
+        role="button"
+        size="m"
+        tabindex="0"
+        variant="transparent"
+      >
+      </sbb-button>
+    </span>
+  </div>
+</div>
+`;
+/* end snapshot sbb-alert should render default properties */
+
+snapshots["sbb-alert should render customized properties"] = 
+`<div class="sbb-alert__transition-wrapper">
+  <div class="sbb-alert">
+    <span class="sbb-alert__icon">
+      <slot name="icon">
+        <sbb-icon
+          aria-hidden="true"
+          data-namespace="default"
+          name="disruption"
+          role="img"
+        >
+        </sbb-icon>
+      </slot>
+    </span>
+    <span class="sbb-alert__content">
+      <sbb-title
+        aria-level="2"
+        class="sbb-alert__title"
+        level="2"
+        negative=""
+        role="heading"
+        visual-level="3"
+      >
+        <slot name="title">
+          Interruption
+        </slot>
+      </sbb-title>
+      <p class="sbb-alert__content-slot">
+        <slot>
+        </slot>
+      </p>
+      <sbb-link
+        aria-label="label"
+        data-slot-names="unnamed"
+        dir="ltr"
+        href="https://www.sbb.ch"
+        negative=""
+        rel="noopener"
+        role="link"
+        size="s"
+        tabindex="0"
+        target="_blank"
+        variant="inline"
+      >
+        Show much more
+      </sbb-link>
+    </span>
+    <span class="sbb-alert__close-button-wrapper">
+      <sbb-divider
+        aria-orientation="vertical"
+        class="sbb-alert__close-button-divider"
+        negative=""
+        orientation="vertical"
+        role="separator"
+      >
+      </sbb-divider>
+      <sbb-button
+        aria-label="Close message"
+        class="sbb-alert__close-button"
+        dir="ltr"
+        icon-name="cross-small"
+        negative=""
+        role="button"
+        size="m"
+        tabindex="0"
+        variant="transparent"
+      >
+      </sbb-button>
+    </span>
+  </div>
+</div>
+`;
+/* end snapshot sbb-alert should render customized properties */
+
+snapshots["sbb-alert A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Interruption",
+      "level": 3
+    },
+    {
+      "role": "text",
+      "name": "Alert content "
+    },
+    {
+      "role": "link",
+      "name": "test-a11y-label",
+      "children": [
+        {
+          "role": "link",
+          "name": "Find out more"
+        }
+      ]
+    },
+    {
+      "role": "button",
+      "name": "Close message"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-alert A11y tree Chrome */
+
+snapshots["sbb-alert A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Interruption",
+      "level": 3
+    },
+    {
+      "role": "text leaf",
+      "name": "Alert content "
+    },
+    {
+      "role": "link",
+      "name": "test-a11y-label",
+      "children": [
+        {
+          "role": "link",
+          "name": "Find out more",
+          "value": "https://www.sbb.ch/"
+        }
+      ]
+    },
+    {
+      "role": "button",
+      "name": "Close message"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-alert A11y tree Firefox */
+
+snapshots["sbb-alert A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Interruption"
+    },
+    {
+      "role": "text",
+      "name": "Alert content "
+    },
+    {
+      "role": "link",
+      "name": "test-a11y-label",
+      "children": [
+        {
+          "role": "link",
+          "name": "Find out more",
+          "children": [
+            {
+              "role": "text",
+              "name": "Find out more"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "role": "button",
+      "name": "Close message"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-alert A11y tree Safari */
+
diff --git a/src/components/alert/alert/alert.e2e.ts b/src/components/alert/alert/alert.e2e.ts
index 533606ebbf8..e8ee2c570d9 100644
--- a/src/components/alert/alert/alert.e2e.ts
+++ b/src/components/alert/alert/alert.e2e.ts
@@ -24,4 +24,12 @@ describe('sbb-alert', () => {
     await waitForCondition(() => didPresentSpy.events.length === 1);
     expect(didPresentSpy.count).to.be.equal(1);
   });
+
+  it('should hide close button in readonly mode', async () => {
+    alert = await fixture(
+      html`<sbb-alert title-content="Interruption" readonly>Alert content</sbb-alert>`,
+    );
+
+    expect(alert.shadowRoot!.querySelector('.sbb-alert__close-button-wrapper')).to.be.null;
+  });
 });
diff --git a/src/components/alert/alert/alert.spec.ts b/src/components/alert/alert/alert.spec.ts
index ecfee4fb0f2..3177967dc94 100644
--- a/src/components/alert/alert/alert.spec.ts
+++ b/src/components/alert/alert/alert.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 
 import type { SbbAlertElement } from './alert';
 
@@ -14,7 +15,6 @@ describe('sbb-alert', () => {
     element = await fixture(
       html`<sbb-alert disable-animation title-content="Interruption">Alert content</sbb-alert>`,
     );
-
     await waitForLitRender(element);
 
     expect(element).dom.to.be.equal(
@@ -24,36 +24,7 @@ describe('sbb-alert', () => {
         </sbb-alert>
       `,
     );
-    expect(element).shadowDom.to.be.equal(
-      `
-        <div class="sbb-alert__transition-wrapper">
-          <div class="sbb-alert">
-            <span class="sbb-alert__icon">
-              <slot name="icon">
-                <sbb-icon
-                  aria-hidden="true"
-                  data-namespace="default"
-                  name="info"
-                  role="img"
-                ></sbb-icon>
-              </slot>
-            </span>
-            <span class="sbb-alert__content">
-              <sbb-title class="sbb-alert__title" aria-level="3" level="3" negative visual-level="5" role="heading">
-                <slot name="title">Interruption</slot>
-              </sbb-title>
-              <p class="sbb-alert__content-slot">
-                <slot></slot>
-              </p>
-            </span>
-            <span class="sbb-alert__close-button-wrapper">
-            <sbb-divider aria-orientation="vertical" role="separator" class="sbb-alert__close-button-divider" negative="" orientation="vertical" aria-orientation="vertical"></sbb-divider>
-            <sbb-button aria-label="Close message" dir="ltr" class="sbb-alert__close-button" icon-name="cross-small" negative role="button" size="m" tabindex="0" variant="transparent"></sbb-button>
-            </span>
-          </div>
-        </div>
-      `,
-    );
+    await expect(element).shadowDom.to.be.equalSnapshot();
   });
 
   it('should render customized properties', async () => {
@@ -82,46 +53,20 @@ describe('sbb-alert', () => {
         </sbb-alert>
       `,
     );
-    expect(element).shadowDom.to.be.equal(
-      `
-        <div class="sbb-alert__transition-wrapper">
-          <div class="sbb-alert">
-            <span class="sbb-alert__icon">
-              <slot name="icon">
-                <sbb-icon
-                  aria-hidden="true"
-                  data-namespace="default"
-                  name="disruption"
-                  role="img"
-                ></sbb-icon>
-              </slot>
-            </span>
-            <span class="sbb-alert__content">
-              <sbb-title class="sbb-alert__title" aria-level="2" role="heading" level="2" negative visual-level="3">
-                <slot name="title">Interruption</slot>
-              </sbb-title>
-              <p class="sbb-alert__content-slot">
-                <slot></slot>
-              </p>
-              <sbb-link negative variant="inline" aria-label="label" dir="ltr" role="link" size="s" tabindex="0" href="https://www.sbb.ch" rel="noopener" target="_blank" data-slot-names="unnamed">
-                Show much more
-              </sbb-link>
-            </span>
-            <span class="sbb-alert__close-button-wrapper">
-            <sbb-divider class="sbb-alert__close-button-divider" negative aria-orientation="vertical" orientation="vertical" role="separator"></sbb-divider>
-            <sbb-button aria-label="Close message" class="sbb-alert__close-button" dir="ltr" icon-name="cross-small" negative size="m" role="button" tabindex="0" variant="transparent"></sbb-button>
-            </span>
-          </div>
-        </div>
-      `,
-    );
+    await expect(element).shadowDom.to.be.equalSnapshot();
   });
 
-  it('should hide close button in readonly mode', async () => {
-    element = await fixture(
-      html`<sbb-alert title-content="Interruption" readonly>Alert content</sbb-alert>`,
-    );
-
-    expect(element.shadowRoot!.querySelector('.sbb-alert__close-button-wrapper')).to.be.null;
-  });
+  testA11yTreeSnapshot(
+    undefined,
+    html`
+      <sbb-alert
+        disable-animation
+        title-content="Interruption"
+        href="https://www.sbb.ch"
+        accessibility-label="test-a11y-label"
+      >
+        Alert content
+      </sbb-alert>
+    `,
+  );
 });
diff --git a/src/components/autocomplete/__snapshots__/autocomplete.spec.snap.js b/src/components/autocomplete/__snapshots__/autocomplete.spec.snap.js
new file mode 100644
index 00000000000..7f868c6a24b
--- /dev/null
+++ b/src/components/autocomplete/__snapshots__/autocomplete.spec.snap.js
@@ -0,0 +1,377 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-autocomplete renders standalone Chrome-Firefox Dom"] = 
+`<sbb-autocomplete
+  data-state="closed"
+  dir="ltr"
+  origin="origin"
+  trigger="trigger"
+>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-slot-names="unnamed"
+    data-variant="autocomplete"
+    id="sbb-option-1"
+    role="option"
+    value="1"
+  >
+    1
+  </sbb-option>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-slot-names="unnamed"
+    data-variant="autocomplete"
+    id="sbb-option-2"
+    role="option"
+    value="2"
+  >
+    2
+  </sbb-option>
+</sbb-autocomplete>
+`;
+/* end snapshot sbb-autocomplete renders standalone Chrome-Firefox Dom */
+
+snapshots["sbb-autocomplete renders in form field Chrome-Firefox Dom"] = 
+`<sbb-form-field
+  data-input-empty=""
+  data-input-type="input"
+  data-slot-names="unnamed"
+  error-space="none"
+  size="m"
+  width="default"
+>
+  <input
+    aria-autocomplete="list"
+    aria-controls="sbb-autocomplete-3"
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-owns="sbb-autocomplete-3"
+    autocomplete="off"
+    role="combobox"
+  >
+  <sbb-autocomplete
+    data-state="closed"
+    dir="ltr"
+  >
+    <sbb-option
+      aria-disabled="false"
+      aria-selected="false"
+      data-slot-names="unnamed"
+      data-variant="autocomplete"
+      id="sbb-option-5"
+      role="option"
+      value="1"
+    >
+      1
+    </sbb-option>
+    <sbb-option
+      aria-disabled="false"
+      aria-selected="false"
+      data-slot-names="unnamed"
+      data-variant="autocomplete"
+      id="sbb-option-6"
+      role="option"
+      value="2"
+    >
+      2
+    </sbb-option>
+  </sbb-autocomplete>
+</sbb-form-field>
+`;
+/* end snapshot sbb-autocomplete renders in form field Chrome-Firefox Dom */
+
+snapshots["sbb-autocomplete renders in form field Chrome-Firefox ShadowDom"] = 
+`<div class="sbb-form-field__space-wrapper">
+  <div
+    class="sbb-form-field__wrapper"
+    id="overlay-anchor"
+  >
+    <slot name="prefix">
+    </slot>
+    <div class="sbb-form-field__input-container">
+      <span
+        aria-hidden="true"
+        class="sbb-form-field__label-spacer"
+      >
+      </span>
+      <span class="sbb-form-field__label">
+        <span class="sbb-form-field__label-ellipsis">
+          <slot name="label">
+          </slot>
+        </span>
+      </span>
+      <div class="sbb-form-field__input">
+        <slot>
+        </slot>
+      </div>
+    </div>
+    <slot name="suffix">
+    </slot>
+  </div>
+  <div class="sbb-form-field__error">
+    <slot name="error">
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot sbb-autocomplete renders in form field Chrome-Firefox ShadowDom */
+
+snapshots["sbb-autocomplete renders in form field A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "​"
+    },
+    {
+      "role": "combobox",
+      "name": "",
+      "autocomplete": "list",
+      "haspopup": "listbox"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete renders in form field A11y tree Chrome */
+
+snapshots["sbb-autocomplete renders standalone Chrome-Firefox ShadowDom"] = 
+`<div class="sbb-autocomplete__gap-fix">
+</div>
+<div class="sbb-autocomplete__container">
+  <div class="sbb-autocomplete__gap-fix">
+    <div class="sbb-gap-fix-wrapper">
+      <div
+        class="sbb-gap-fix-corner"
+        id="left"
+      >
+      </div>
+    </div>
+    <div class="sbb-gap-fix-wrapper">
+      <div
+        class="sbb-gap-fix-corner"
+        id="right"
+      >
+      </div>
+    </div>
+  </div>
+  <div class="sbb-autocomplete__panel">
+    <div class="sbb-autocomplete__wrapper">
+      <div
+        class="sbb-autocomplete__options"
+        id="sbb-autocomplete-2"
+        role="listbox"
+      >
+        <slot>
+        </slot>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot sbb-autocomplete renders standalone Chrome-Firefox ShadowDom */
+
+snapshots["sbb-autocomplete renders in form field A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "statictext",
+      "name": "​"
+    },
+    {
+      "role": "combobox",
+      "name": "",
+      "autocomplete": "list",
+      "haspopup": "listbox"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete renders in form field A11y tree Firefox */
+
+snapshots["sbb-autocomplete renders standalone Safari Dom"] = 
+`<sbb-autocomplete
+  data-state="closed"
+  dir="ltr"
+  id="sbb-autocomplete-1"
+  origin="origin"
+  role="listbox"
+  trigger="trigger"
+>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-slot-names="unnamed"
+    data-variant="autocomplete"
+    id="sbb-option-1"
+    role="option"
+    value="1"
+  >
+    1
+  </sbb-option>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-slot-names="unnamed"
+    data-variant="autocomplete"
+    id="sbb-option-2"
+    role="option"
+    value="2"
+  >
+    2
+  </sbb-option>
+</sbb-autocomplete>
+`;
+/* end snapshot sbb-autocomplete renders standalone Safari Dom */
+
+snapshots["sbb-autocomplete renders standalone Safari ShadowDom"] = 
+`<div class="sbb-autocomplete__gap-fix">
+</div>
+<div class="sbb-autocomplete__container">
+  <div class="sbb-autocomplete__gap-fix">
+    <div class="sbb-gap-fix-wrapper">
+      <div
+        class="sbb-gap-fix-corner"
+        id="left"
+      >
+      </div>
+    </div>
+    <div class="sbb-gap-fix-wrapper">
+      <div
+        class="sbb-gap-fix-corner"
+        id="right"
+      >
+      </div>
+    </div>
+  </div>
+  <div class="sbb-autocomplete__panel">
+    <div class="sbb-autocomplete__wrapper">
+      <div class="sbb-autocomplete__options">
+        <slot>
+        </slot>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot sbb-autocomplete renders standalone Safari ShadowDom */
+
+snapshots["sbb-autocomplete renders in form field Safari Dom"] = 
+`<sbb-form-field
+  data-input-empty=""
+  data-input-type="input"
+  data-slot-names="unnamed"
+  error-space="none"
+  size="m"
+  width="default"
+>
+  <input
+    aria-autocomplete="list"
+    aria-controls="sbb-autocomplete-3"
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-owns="sbb-autocomplete-3"
+    autocomplete="off"
+    role="combobox"
+  >
+  <sbb-autocomplete
+    data-state="closed"
+    dir="ltr"
+    id="sbb-autocomplete-3"
+    role="listbox"
+  >
+    <sbb-option
+      aria-disabled="false"
+      aria-selected="false"
+      data-slot-names="unnamed"
+      data-variant="autocomplete"
+      id="sbb-option-5"
+      role="option"
+      value="1"
+    >
+      1
+    </sbb-option>
+    <sbb-option
+      aria-disabled="false"
+      aria-selected="false"
+      data-slot-names="unnamed"
+      data-variant="autocomplete"
+      id="sbb-option-6"
+      role="option"
+      value="2"
+    >
+      2
+    </sbb-option>
+  </sbb-autocomplete>
+</sbb-form-field>
+`;
+/* end snapshot sbb-autocomplete renders in form field Safari Dom */
+
+snapshots["sbb-autocomplete renders in form field Safari ShadowDom"] = 
+`<div class="sbb-form-field__space-wrapper">
+  <div
+    class="sbb-form-field__wrapper"
+    id="overlay-anchor"
+  >
+    <slot name="prefix">
+    </slot>
+    <div class="sbb-form-field__input-container">
+      <span
+        aria-hidden="true"
+        class="sbb-form-field__label-spacer"
+      >
+      </span>
+      <span class="sbb-form-field__label">
+        <span class="sbb-form-field__label-ellipsis">
+          <slot name="label">
+          </slot>
+        </span>
+      </span>
+      <div class="sbb-form-field__input">
+        <slot>
+        </slot>
+      </div>
+    </div>
+    <slot name="suffix">
+    </slot>
+  </div>
+  <div class="sbb-form-field__error">
+    <slot name="error">
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot sbb-autocomplete renders in form field Safari ShadowDom */
+
+snapshots["sbb-autocomplete renders in form field A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "​"
+    },
+    {
+      "role": "combobox",
+      "name": "",
+      "autocomplete": "list",
+      "haspopup": "listbox"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete renders in form field A11y tree Safari */
+
diff --git a/src/components/autocomplete/autocomplete.spec.ts b/src/components/autocomplete/autocomplete.spec.ts
index 1a0d75976e4..27c4d958151 100644
--- a/src/components/autocomplete/autocomplete.spec.ts
+++ b/src/components/autocomplete/autocomplete.spec.ts
@@ -1,96 +1,90 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { isSafari } from '../core/dom';
+import { waitForLitRender } from '../core/testing';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+import type { SbbFormFieldElement } from '../form-field';
+
+import type { SbbAutocompleteElement } from './autocomplete';
 import '../form-field';
 import '../option';
 import './autocomplete';
-import { isSafari } from '../core/dom';
 
 describe('sbb-autocomplete', () => {
-  it('renders standalone', async () => {
-    await fixture(html`
-      <div id="origin"></div>
-      <input id="trigger" />
-      <sbb-autocomplete origin="origin" trigger="trigger">
-        <sbb-option value="1">1</sbb-option>
-        <sbb-option value="2">2</sbb-option>
-      </sbb-autocomplete>
-    `);
-    const elem = document.querySelector('sbb-autocomplete');
-    const listboxAttr = 'id="sbb-autocomplete-1" role="listbox"';
-
-    expect(elem).dom.to.be.equal(`
-      <sbb-autocomplete data-state="closed" origin="origin" trigger="trigger" 
-        dir="ltr" ${isSafari() ? listboxAttr : ''}>
-        <sbb-option value="1" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-1" role="option" data-slot-names="unnamed">1</sbb-option>
-        <sbb-option value="2" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-2" role="option" data-slot-names="unnamed">2</sbb-option>
-      </sbb-autocomplete>
-    `);
-    expect(elem).shadowDom.to.be.equal(`
-      <div class="sbb-autocomplete__gap-fix"></div>
-      <div class="sbb-autocomplete__container">
-        <div class="sbb-autocomplete__gap-fix">
-          <div class="sbb-gap-fix-wrapper">
-            <div class="sbb-gap-fix-corner" id="left"></div>
-          </div>
-          <div class="sbb-gap-fix-wrapper">
-            <div class="sbb-gap-fix-corner" id="right"></div>
-          </div>
-        </div>
-        <div class="sbb-autocomplete__panel">
-          <div class="sbb-autocomplete__wrapper">
-            <div class="sbb-autocomplete__options" ${!isSafari() ? listboxAttr : ''}>
-              <slot></slot>
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
-  });
+  describe('renders standalone', async () => {
+    let elem: SbbAutocompleteElement;
 
-  it('renders in form field', async () => {
-    const root = await fixture(html`
-      <sbb-form-field>
-        <input />
-        <sbb-autocomplete>
+    beforeEach(async () => {
+      await fixture(html`
+        <div id="origin"></div>
+        <input id="trigger" />
+        <sbb-autocomplete origin="origin" trigger="trigger">
           <sbb-option value="1">1</sbb-option>
           <sbb-option value="2">2</sbb-option>
         </sbb-autocomplete>
-      </sbb-form-field>
-    `);
-    const elem = root.querySelector('sbb-autocomplete');
-    const listboxAttr = 'id="sbb-autocomplete-4" role="listbox"';
+      `);
+      elem = document.querySelector('sbb-autocomplete')!;
+      await waitForLitRender(elem);
+    });
 
-    expect(root).dom.to.be.equal(`
-      <sbb-form-field error-space="none" size="m" width="default" data-input-empty data-input-type="input" data-slot-names="unnamed">
-        <input
-          aria-autocomplete="list" aria-controls="sbb-autocomplete-4" aria-expanded="false" aria-haspopup="listbox"
-          aria-owns="sbb-autocomplete-4" autocomplete="off" role="combobox">
-        <sbb-autocomplete data-state="closed" dir="ltr" ${isSafari() ? listboxAttr : ''}>
-          <sbb-option value="1" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-7" role="option" data-slot-names="unnamed">1</sbb-option>
-          <sbb-option value="2" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-8" role="option" data-slot-names="unnamed">2</sbb-option>
-        </sbb-autocomplete>
-      </sbb-form-field>
-    `);
-    expect(elem).shadowDom.to.equal(`
-      <div class="sbb-autocomplete__gap-fix"></div>
-      <div class="sbb-autocomplete__container">
-        <div class="sbb-autocomplete__gap-fix">
-          <div class="sbb-gap-fix-wrapper">
-            <div class="sbb-gap-fix-corner" id="left"></div>
-          </div>
-          <div class="sbb-gap-fix-wrapper">
-            <div class="sbb-gap-fix-corner" id="right"></div>
-          </div>
-        </div>
-        <div class="sbb-autocomplete__panel">
-          <div class="sbb-autocomplete__wrapper">
-            <div class="sbb-autocomplete__options" ${!isSafari() ? listboxAttr : ''}>
-              <slot></slot>
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
+    (!isSafari() ? describe : describe.skip)('Chrome-Firefox', async () => {
+      it('Dom', async () => {
+        await expect(elem).dom.to.be.equalSnapshot();
+      });
+
+      it('ShadowDom', async () => {
+        await expect(elem).shadowDom.to.be.equalSnapshot();
+      });
+    });
+
+    (isSafari() ? describe : describe.skip)('Safari', async () => {
+      it('Dom', async () => {
+        await expect(elem).dom.to.be.equalSnapshot();
+      });
+
+      it('ShadowDom', async () => {
+        await expect(elem).shadowDom.to.be.equalSnapshot();
+      });
+    });
+  });
+
+  describe('renders in form field', async () => {
+    let root: SbbFormFieldElement;
+
+    beforeEach(async () => {
+      root = await fixture(html`
+        <sbb-form-field>
+          <input />
+          <sbb-autocomplete>
+            <sbb-option value="1">1</sbb-option>
+            <sbb-option value="2">2</sbb-option>
+          </sbb-autocomplete>
+        </sbb-form-field>
+      `);
+      await waitForLitRender(root);
+    });
+
+    (!isSafari() ? describe : describe.skip)('Chrome-Firefox', async () => {
+      it('Dom', async () => {
+        await expect(root).dom.to.be.equalSnapshot();
+      });
+
+      it('ShadowDom', async () => {
+        await expect(root).shadowDom.to.be.equalSnapshot();
+      });
+    });
+
+    (isSafari() ? describe : describe.skip)('Safari', async () => {
+      it('Dom', async () => {
+        await expect(root).dom.to.be.equalSnapshot();
+      });
+
+      it('ShadowDom', async () => {
+        await expect(root).shadowDom.to.be.equalSnapshot();
+      });
+    });
+
+    testA11yTreeSnapshot();
   });
 });
diff --git a/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js b/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js
index 98925817665..cf2a31c8584 100644
--- a/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js
+++ b/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js
@@ -1,7 +1,44 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-breadcrumb-group renders"] = 
+snapshots["sbb-breadcrumb-group renders - Dom"] = 
+`<sbb-breadcrumb-group
+  data-loaded=""
+  role="navigation"
+>
+  <sbb-breadcrumb
+    dir="ltr"
+    href="/"
+    icon-name="pie-small"
+    role="link"
+    slot="li-0"
+    tabindex="0"
+  >
+  </sbb-breadcrumb>
+  <sbb-breadcrumb
+    dir="ltr"
+    href="/one"
+    role="link"
+    slot="li-1"
+    tabindex="0"
+  >
+    One
+  </sbb-breadcrumb>
+  <sbb-breadcrumb
+    aria-current="page"
+    dir="ltr"
+    href="/one"
+    role="link"
+    slot="li-2"
+    tabindex="0"
+  >
+    Two
+  </sbb-breadcrumb>
+</sbb-breadcrumb-group>
+`;
+/* end snapshot sbb-breadcrumb-group renders - Dom */
+
+snapshots["sbb-breadcrumb-group renders - ShadowDom"] = 
 `<ol class="sbb-breadcrumb-group">
   <li class="sbb-breadcrumb-group__item">
     <slot name="li-0">
@@ -37,5 +74,146 @@ snapshots["sbb-breadcrumb-group renders"] =
   </slot>
 </span>
 `;
-/* end snapshot sbb-breadcrumb-group renders */
+/* end snapshot sbb-breadcrumb-group renders - ShadowDom */
+
+snapshots["sbb-breadcrumb-group A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "",
+      "children": [
+        {
+          "role": "link",
+          "name": ""
+        }
+      ]
+    },
+    {
+      "role": "link",
+      "name": "One",
+      "children": [
+        {
+          "role": "link",
+          "name": "One"
+        }
+      ]
+    },
+    {
+      "role": "link",
+      "name": "Two",
+      "children": [
+        {
+          "role": "link",
+          "name": "Two"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-breadcrumb-group A11y tree Chrome */
+
+snapshots["sbb-breadcrumb-group A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "",
+      "children": [
+        {
+          "role": "link",
+          "name": "",
+          "value": "http://localhost:8000/"
+        }
+      ]
+    },
+    {
+      "role": "link",
+      "name": "One",
+      "children": [
+        {
+          "role": "link",
+          "name": "One",
+          "value": "http://localhost:8000/one"
+        }
+      ]
+    },
+    {
+      "role": "link",
+      "name": "Two",
+      "children": [
+        {
+          "role": "link",
+          "name": "Two",
+          "value": "http://localhost:8000/one"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-breadcrumb-group A11y tree Firefox */
+
+snapshots["sbb-breadcrumb-group A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "",
+      "children": [
+        {
+          "role": "link",
+          "name": ""
+        }
+      ]
+    },
+    {
+      "role": "link",
+      "name": "",
+      "children": [
+        {
+          "role": "link",
+          "name": "One",
+          "children": [
+            {
+              "role": "text",
+              "name": "One"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "role": "link",
+      "name": "",
+      "children": [
+        {
+          "role": "link",
+          "name": "Two",
+          "children": [
+            {
+              "role": "text",
+              "name": "Two"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-breadcrumb-group A11y tree Safari */
 
diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts
index 3adb44d2067..5734d3cc676 100644
--- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts
+++ b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts
@@ -1,34 +1,34 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
+import type { SbbBreadcrumbGroupElement } from './breadcrumb-group';
 import '../breadcrumb';
 import './breadcrumb-group';
-import { waitForLitRender } from '../../core/testing';
 
 describe('sbb-breadcrumb-group', () => {
-  it('renders', async () => {
-    const root = await fixture(html`
+  let root: SbbBreadcrumbGroupElement;
+
+  beforeEach(async () => {
+    root = await fixture(html`
       <sbb-breadcrumb-group>
         <sbb-breadcrumb href="/" icon-name="pie-small"></sbb-breadcrumb>
         <sbb-breadcrumb href="/one">One</sbb-breadcrumb>
         <sbb-breadcrumb href="/one">Two</sbb-breadcrumb>
       </sbb-breadcrumb-group>
     `);
-
     await waitForLitRender(root);
+  });
 
-    expect(root).dom.to.be.equal(`
-      <sbb-breadcrumb-group role='navigation' data-loaded>
-        <sbb-breadcrumb href="/" icon-name="pie-small" slot="li-0" dir="ltr" role="link" tabindex="0"></sbb-breadcrumb>
-        <sbb-breadcrumb href="/one" slot="li-1" dir="ltr" role="link" tabindex="0">
-          One
-        </sbb-breadcrumb>
-        <sbb-breadcrumb href="/one" slot="li-2" aria-current="page" dir="ltr" role="link" tabindex="0">
-          Two
-        </sbb-breadcrumb>
-      </sbb-breadcrumb-group>
-    `);
+  it('renders - Dom', async () => {
+    await expect(root).dom.to.be.equalSnapshot();
+  });
 
+  it('renders - ShadowDom', async () => {
     await expect(root).shadowDom.to.equalSnapshot();
   });
+
+  testA11yTreeSnapshot();
 });
diff --git a/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js b/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js
index 9de65f093b8..484b92e69c5 100644
--- a/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js
+++ b/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js
@@ -89,3 +89,76 @@ snapshots["sbb-breadcrumb renders as span if no href is provided"] =
 `;
 /* end snapshot sbb-breadcrumb renders as span if no href is provided */
 
+snapshots["sbb-breadcrumb A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "Breadcrumb",
+      "children": [
+        {
+          "role": "link",
+          "name": "Breadcrumb"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-breadcrumb A11y tree Chrome */
+
+snapshots["sbb-breadcrumb A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "Breadcrumb",
+      "children": [
+        {
+          "role": "link",
+          "name": "Breadcrumb",
+          "value": "http://localhost:8000/test"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-breadcrumb A11y tree Firefox */
+
+snapshots["sbb-breadcrumb A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "",
+      "children": [
+        {
+          "role": "link",
+          "name": "Breadcrumb",
+          "children": [
+            {
+              "role": "text",
+              "name": "Breadcrumb"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-breadcrumb A11y tree Safari */
+
diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts
index 6da7c4ac3ff..fa2b4ece570 100644
--- a/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts
+++ b/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 
 import './breadcrumb';
 
@@ -33,8 +34,8 @@ describe('sbb-breadcrumb', () => {
     const root = await fixture(html`
       <sbb-breadcrumb href="/" icon-name="house-small"></sbb-breadcrumb>
     `);
-
     await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`
       <sbb-breadcrumb
         dir="ltr"
@@ -51,8 +52,8 @@ describe('sbb-breadcrumb', () => {
     const root = await fixture(html`
       <sbb-breadcrumb href="/" icon-name="house-small">Home</sbb-breadcrumb>
     `);
-
     await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`
       <sbb-breadcrumb
         dir="ltr"
@@ -78,4 +79,6 @@ describe('sbb-breadcrumb', () => {
 
     await expect(root).shadowDom.to.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(undefined, html` <sbb-breadcrumb href="/test">Breadcrumb</sbb-breadcrumb> `);
 });
diff --git a/src/components/calendar/__snapshots__/calendar.spec.snap.js b/src/components/calendar/__snapshots__/calendar.spec.snap.js
new file mode 100644
index 00000000000..fe036caec11
--- /dev/null
+++ b/src/components/calendar/__snapshots__/calendar.spec.snap.js
@@ -0,0 +1,1320 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-calendar renders"] = 
+`<div class="sbb-calendar__wrapper">
+  <div class="sbb-calendar__controls">
+    <sbb-button
+      aria-label="Change to the previous month"
+      dir="ltr"
+      icon-name="chevron-small-left-small"
+      id="sbb-calendar__controls-previous"
+      role="button"
+      size="m"
+      tabindex="0"
+      variant="secondary"
+    >
+    </sbb-button>
+    <div class="sbb-calendar__controls-month">
+      <button
+        aria-label="Choose year and month January 2023"
+        class="sbb-calendar__controls-change-date"
+        id="sbb-calendar__date-selection"
+        type="button"
+      >
+        January 2023
+        <sbb-icon
+          aria-hidden="true"
+          data-namespace="default"
+          name="chevron-small-down-small"
+          role="img"
+        >
+        </sbb-icon>
+      </button>
+      <span
+        class="sbb-calendar__visually-hidden"
+        role="status"
+      >
+        January 2023
+      </span>
+    </div>
+    <sbb-button
+      aria-label="Change to the next month"
+      dir="ltr"
+      icon-name="chevron-small-right-small"
+      id="sbb-calendar__controls-next"
+      role="button"
+      size="m"
+      tabindex="0"
+      variant="secondary"
+    >
+    </sbb-button>
+  </div>
+  <div class="sbb-calendar__table-container sbb-calendar__table-day-view">
+    <table class="sbb-calendar__table">
+      <thead class="sbb-calendar__table-header">
+        <tr class="sbb-calendar__table-header-row">
+          <th class="sbb-calendar__table-header">
+            <span class="sbb-calendar__visually-hidden">
+              Monday
+            </span>
+            <span aria-hidden="true">
+              M
+            </span>
+          </th>
+          <th class="sbb-calendar__table-header">
+            <span class="sbb-calendar__visually-hidden">
+              Tuesday
+            </span>
+            <span aria-hidden="true">
+              T
+            </span>
+          </th>
+          <th class="sbb-calendar__table-header">
+            <span class="sbb-calendar__visually-hidden">
+              Wednesday
+            </span>
+            <span aria-hidden="true">
+              W
+            </span>
+          </th>
+          <th class="sbb-calendar__table-header">
+            <span class="sbb-calendar__visually-hidden">
+              Thursday
+            </span>
+            <span aria-hidden="true">
+              T
+            </span>
+          </th>
+          <th class="sbb-calendar__table-header">
+            <span class="sbb-calendar__visually-hidden">
+              Friday
+            </span>
+            <span aria-hidden="true">
+              F
+            </span>
+          </th>
+          <th class="sbb-calendar__table-header">
+            <span class="sbb-calendar__visually-hidden">
+              Saturday
+            </span>
+            <span aria-hidden="true">
+              S
+            </span>
+          </th>
+          <th class="sbb-calendar__table-header">
+            <span class="sbb-calendar__visually-hidden">
+              Sunday
+            </span>
+            <span aria-hidden="true">
+              S
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody class="sbb-calendar__table-body">
+        <tr>
+          <td
+            class="sbb-calendar__table-data"
+            data-day="0 1 2023"
+          >
+          </td>
+          <td
+            class="sbb-calendar__table-data"
+            data-day="0 1 2023"
+          >
+          </td>
+          <td
+            class="sbb-calendar__table-data"
+            data-day="0 1 2023"
+          >
+          </td>
+          <td
+            class="sbb-calendar__table-data"
+            data-day="0 1 2023"
+          >
+          </td>
+          <td
+            class="sbb-calendar__table-data"
+            data-day="0 1 2023"
+          >
+          </td>
+          <td
+            class="sbb-calendar__table-data"
+            data-day="0 1 2023"
+          >
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 1, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="1 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              1
+            </button>
+          </td>
+        </tr>
+        <tr>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 2, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="2 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              2
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 3, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="3 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              3
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-current="date"
+              aria-disabled="false"
+              aria-label="January 4, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__cell-current sbb-calendar__day"
+              data-day="4 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              4
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 5, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="5 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              5
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 6, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="6 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              6
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 7, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="7 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              7
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 8, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="8 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              8
+            </button>
+          </td>
+        </tr>
+        <tr>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 9, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="9 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              9
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 10, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="10 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              10
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 11, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="11 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              11
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 12, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="12 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              12
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 13, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="13 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              13
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 14, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="14 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              14
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 15, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="15 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              15
+            </button>
+          </td>
+        </tr>
+        <tr>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 16, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="16 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              16
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 17, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="17 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              17
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 18, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="18 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              18
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 19, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="19 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              19
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data sbb-calendar__table-data-selected">
+            <button
+              aria-disabled="false"
+              aria-label="January 20, 2023"
+              aria-pressed="true"
+              class="sbb-calendar__cell sbb-calendar__day sbb-calendar__selected"
+              data-day="20 1 2023"
+              sbb-tooltip-close=""
+              tabindex="0"
+            >
+              20
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 21, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="21 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              21
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 22, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="22 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              22
+            </button>
+          </td>
+        </tr>
+        <tr>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 23, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="23 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              23
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 24, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="24 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              24
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 25, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="25 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              25
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 26, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="26 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              26
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 27, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="27 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              27
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 28, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="28 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              28
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 29, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="29 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              29
+            </button>
+          </td>
+        </tr>
+        <tr>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 30, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="30 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              30
+            </button>
+          </td>
+          <td class="sbb-calendar__table-data">
+            <button
+              aria-disabled="false"
+              aria-label="January 31, 2023"
+              aria-pressed="false"
+              class="sbb-calendar__cell sbb-calendar__day"
+              data-day="31 1 2023"
+              sbb-tooltip-close=""
+              tabindex="-1"
+            >
+              31
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+/* end snapshot sbb-calendar renders */
+
+snapshots["sbb-calendar A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Change to the previous month"
+    },
+    {
+      "role": "button",
+      "name": "Choose year and month January 2023"
+    },
+    {
+      "role": "text",
+      "name": "January 2023"
+    },
+    {
+      "role": "button",
+      "name": "Change to the next month"
+    },
+    {
+      "role": "text",
+      "name": "Monday"
+    },
+    {
+      "role": "text",
+      "name": "Tuesday"
+    },
+    {
+      "role": "text",
+      "name": "Wednesday"
+    },
+    {
+      "role": "text",
+      "name": "Thursday"
+    },
+    {
+      "role": "text",
+      "name": "Friday"
+    },
+    {
+      "role": "text",
+      "name": "Saturday"
+    },
+    {
+      "role": "text",
+      "name": "Sunday"
+    },
+    {
+      "role": "button",
+      "name": "January 1, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 2, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 3, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 4, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 5, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 6, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 7, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 8, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 9, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 10, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 11, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 12, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 13, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 14, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 15, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 16, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 17, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 18, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 19, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 20, 2023",
+      "pressed": true
+    },
+    {
+      "role": "button",
+      "name": "January 21, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 22, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 23, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 24, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 25, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 26, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 27, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 28, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 29, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 30, 2023",
+      "pressed": false
+    },
+    {
+      "role": "button",
+      "name": "January 31, 2023",
+      "pressed": false
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-calendar A11y tree Chrome */
+
+snapshots["sbb-calendar A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Change to the previous month"
+    },
+    {
+      "role": "button",
+      "name": "Choose year and month January 2023"
+    },
+    {
+      "role": "text leaf",
+      "name": "January 2023 "
+    },
+    {
+      "role": "button",
+      "name": "Change to the next month"
+    },
+    {
+      "role": "text leaf",
+      "name": "Monday"
+    },
+    {
+      "role": "text leaf",
+      "name": "Tuesday"
+    },
+    {
+      "role": "text leaf",
+      "name": "Wednesday"
+    },
+    {
+      "role": "text leaf",
+      "name": "Thursday"
+    },
+    {
+      "role": "text leaf",
+      "name": "Friday"
+    },
+    {
+      "role": "text leaf",
+      "name": "Saturday"
+    },
+    {
+      "role": "text leaf",
+      "name": "Sunday"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 1, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 2, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 3, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 4, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 5, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 6, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 7, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 8, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 9, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 10, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 11, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 12, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 13, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 14, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 15, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 16, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 17, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 18, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 19, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 20, 2023",
+      "pressed": true
+    },
+    {
+      "role": "toggle button",
+      "name": "January 21, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 22, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 23, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 24, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 25, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 26, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 27, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 28, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 29, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 30, 2023"
+    },
+    {
+      "role": "toggle button",
+      "name": "January 31, 2023"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-calendar A11y tree Firefox */
+
+snapshots["sbb-calendar A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Change to the previous month"
+    },
+    {
+      "role": "button",
+      "name": "Choose year and month January 2023"
+    },
+    {
+      "role": "text",
+      "name": "January 2023"
+    },
+    {
+      "role": "button",
+      "name": "Change to the next month"
+    },
+    {
+      "role": "text",
+      "name": "Monday"
+    },
+    {
+      "role": "text",
+      "name": "Tuesday"
+    },
+    {
+      "role": "text",
+      "name": "Wednesday"
+    },
+    {
+      "role": "text",
+      "name": "Thursday"
+    },
+    {
+      "role": "text",
+      "name": "Friday"
+    },
+    {
+      "role": "text",
+      "name": "Saturday"
+    },
+    {
+      "role": "text",
+      "name": "Sunday"
+    },
+    {
+      "role": "button",
+      "name": "January 1, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 2, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 3, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 4, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 5, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 6, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 7, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 8, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 9, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 10, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 11, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 12, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 13, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 14, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 15, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 16, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 17, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 18, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 19, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 20, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 21, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 22, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 23, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 24, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 25, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 26, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 27, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 28, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 29, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 30, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 31, 2023"
+    },
+    {
+      "role": "text",
+      "name": "Monday"
+    },
+    {
+      "role": "button",
+      "name": "January 2, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 9, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 16, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 23, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 30, 2023"
+    },
+    {
+      "role": "text",
+      "name": "Tuesday"
+    },
+    {
+      "role": "button",
+      "name": "January 3, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 10, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 17, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 24, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 31, 2023"
+    },
+    {
+      "role": "text",
+      "name": "Wednesday"
+    },
+    {
+      "role": "button",
+      "name": "January 4, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 11, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 18, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 25, 2023"
+    },
+    {
+      "role": "text",
+      "name": "Thursday"
+    },
+    {
+      "role": "button",
+      "name": "January 5, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 12, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 19, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 26, 2023"
+    },
+    {
+      "role": "text",
+      "name": "Friday"
+    },
+    {
+      "role": "button",
+      "name": "January 6, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 13, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 20, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 27, 2023"
+    },
+    {
+      "role": "text",
+      "name": "Saturday"
+    },
+    {
+      "role": "button",
+      "name": "January 7, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 14, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 21, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 28, 2023"
+    },
+    {
+      "role": "text",
+      "name": "Sunday"
+    },
+    {
+      "role": "button",
+      "name": "January 1, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 8, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 15, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 22, 2023"
+    },
+    {
+      "role": "button",
+      "name": "January 29, 2023"
+    },
+    {
+      "role": "text",
+      "name": "Monday"
+    },
+    {
+      "role": "text",
+      "name": "Tuesday"
+    },
+    {
+      "role": "text",
+      "name": "Wednesday"
+    },
+    {
+      "role": "text",
+      "name": "Thursday"
+    },
+    {
+      "role": "text",
+      "name": "Friday"
+    },
+    {
+      "role": "text",
+      "name": "Saturday"
+    },
+    {
+      "role": "text",
+      "name": "Sunday"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-calendar A11y tree Safari */
+
diff --git a/src/components/calendar/calendar.spec.ts b/src/components/calendar/calendar.spec.ts
index e99063cb744..2f607267344 100644
--- a/src/components/calendar/calendar.spec.ts
+++ b/src/components/calendar/calendar.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../core/testing';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
 
 import './calendar';
 import '../button';
@@ -14,242 +15,12 @@ describe('sbb-calendar', () => {
         data-now="1672790400000"
       ></sbb-calendar>`,
     );
-
     await waitForLitRender(root);
 
     expect(root).dom.to.be.equal(
       `<sbb-calendar data-now="1672790400000" selected-date="2023-01-20T00:00:00"></sbb-calendar>`,
     );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <div class="sbb-calendar__wrapper">
-          <div class="sbb-calendar__controls">
-            <sbb-button tabindex="0" role="button" dir="ltr" aria-label="Change to the previous month" icon-name="chevron-small-left-small" id="sbb-calendar__controls-previous" size="m" variant="secondary"></sbb-button>
-            <div class="sbb-calendar__controls-month">
-              <button type="button" aria-label="Choose year and month January 2023" id="sbb-calendar__date-selection" class="sbb-calendar__controls-change-date">
-                January 2023
-                <sbb-icon aria-hidden="true" data-namespace="default" name="chevron-small-down-small" role="img"></sbb-icon>
-              </button>
-              <span class="sbb-calendar__visually-hidden" role="status">
-                January 2023
-              </span>
-            </div>
-            <sbb-button tabindex="0" role="button" dir="ltr" aria-label="Change to the next month" icon-name="chevron-small-right-small" id="sbb-calendar__controls-next" size="m" variant="secondary"></sbb-button>
-          </div>
-          <div class="sbb-calendar__table-container sbb-calendar__table-day-view">
-            <table class="sbb-calendar__table">
-              <thead class="sbb-calendar__table-header">
-                <tr class="sbb-calendar__table-header-row">
-                  <th class="sbb-calendar__table-header">
-                    <span class="sbb-calendar__visually-hidden">Monday</span>
-                    <span aria-hidden="true">M</span>
-                  </th>
-                  <th class="sbb-calendar__table-header">
-                    <span class="sbb-calendar__visually-hidden">Tuesday</span>
-                    <span aria-hidden="true">T</span>
-                  </th>
-                  <th class="sbb-calendar__table-header">
-                    <span class="sbb-calendar__visually-hidden">Wednesday</span>
-                    <span aria-hidden="true">W</span>
-                  </th>
-                  <th class="sbb-calendar__table-header">
-                    <span class="sbb-calendar__visually-hidden">Thursday</span>
-                    <span aria-hidden="true">T</span>
-                  </th>
-                  <th class="sbb-calendar__table-header">
-                    <span class="sbb-calendar__visually-hidden">Friday</span>
-                    <span aria-hidden="true">F</span>
-                  </th>
-                  <th class="sbb-calendar__table-header">
-                    <span class="sbb-calendar__visually-hidden">Saturday</span>
-                    <span aria-hidden="true">S</span>
-                  </th>
-                  <th class="sbb-calendar__table-header">
-                    <span class="sbb-calendar__visually-hidden">Sunday</span>
-                    <span aria-hidden="true">S</span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody class="sbb-calendar__table-body">
-                <tr>
-                  <td class="sbb-calendar__table-data" data-day="0 1 2023"></td>
-                  <td class="sbb-calendar__table-data" data-day="0 1 2023"></td>
-                  <td class="sbb-calendar__table-data" data-day="0 1 2023"></td>
-                  <td class="sbb-calendar__table-data" data-day="0 1 2023"></td>
-                  <td class="sbb-calendar__table-data" data-day="0 1 2023"></td>
-                  <td class="sbb-calendar__table-data" data-day="0 1 2023"></td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 1, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="1 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      1
-                    </button>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 2, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="2 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      2
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 3, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="3 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      3
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-current="date" aria-disabled="false" aria-label="January 4, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day sbb-calendar__cell-current" data-day="4 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      4
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 5, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="5 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      5
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 6, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="6 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      6
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 7, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="7 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      7
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 8, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="8 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      8
-                    </button>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 9, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="9 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      9
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 10, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="10 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      10
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 11, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="11 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      11
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 12, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="12 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      12
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 13, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="13 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      13
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 14, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="14 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      14
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 15, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="15 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      15
-                    </button>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 16, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="16 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      16
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 17, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="17 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      17
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 18, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="18 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      18
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 19, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="19 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      19
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data sbb-calendar__table-data-selected">
-                    <button aria-disabled="false" aria-label="January 20, 2023" aria-pressed="true" class="sbb-calendar__cell sbb-calendar__day sbb-calendar__selected" data-day="20 1 2023" sbb-tooltip-close="" tabindex="0">
-                      20
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 21, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="21 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      21
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 22, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="22 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      22
-                    </button>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 23, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="23 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      23
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 24, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="24 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      24
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 25, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="25 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      25
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 26, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="26 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      26
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 27, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="27 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      27
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 28, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="28 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      28
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 29, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="29 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      29
-                    </button>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 30, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="30 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      30
-                    </button>
-                  </td>
-                  <td class="sbb-calendar__table-data">
-                    <button aria-disabled="false" aria-label="January 31, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="31 1 2023" sbb-tooltip-close="" tabindex="-1">
-                      31
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      `,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders with min and max', async () => {
@@ -287,4 +58,12 @@ describe('sbb-calendar', () => {
     expect(firstDisabledMaxDate).to.have.attribute('disabled');
     expect(firstDisabledMaxDate).to.have.attribute('aria-disabled', 'true');
   });
+
+  testA11yTreeSnapshot(
+    undefined,
+    html`<sbb-calendar
+      selected-date="2023-01-20T00:00:00"
+      data-now="1672790400000"
+    ></sbb-calendar>`,
+  );
 });
diff --git a/src/components/card/card-badge/__snapshots__/card-badge.spec.snap.js b/src/components/card/card-badge/__snapshots__/card-badge.spec.snap.js
new file mode 100644
index 00000000000..ca05f6439fb
--- /dev/null
+++ b/src/components/card/card-badge/__snapshots__/card-badge.spec.snap.js
@@ -0,0 +1,80 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-card-badge renders - Dom"] = 
+`<sbb-card-badge
+  color="charcoal"
+  dir="ltr"
+  role="text"
+  slot="badge"
+>
+  Black Friday Special
+</sbb-card-badge>
+`;
+/* end snapshot sbb-card-badge renders - Dom */
+
+snapshots["sbb-card-badge renders - ShadowDom"] = 
+`<span class="sbb-card-badge-wrapper">
+  <span class="sbb-card-badge">
+    <span
+      aria-hidden="true"
+      class="sbb-card-badge-background"
+    >
+    </span>
+    <span class="sbb-card-badge-content">
+      <slot>
+      </slot>
+    </span>
+  </span>
+</span>
+`;
+/* end snapshot sbb-card-badge renders - ShadowDom */
+
+snapshots["sbb-card-badge A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Black Friday Special"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-card-badge A11y tree Chrome */
+
+snapshots["sbb-card-badge A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Black Friday Special"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-card-badge A11y tree Firefox */
+
+snapshots["sbb-card-badge A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Black Friday Special"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-card-badge A11y tree Safari */
+
diff --git a/src/components/card/card-badge/card-badge.spec.ts b/src/components/card/card-badge/card-badge.spec.ts
index b84980afe8a..7f4e89bf238 100644
--- a/src/components/card/card-badge/card-badge.spec.ts
+++ b/src/components/card/card-badge/card-badge.spec.ts
@@ -1,28 +1,25 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
+import type { SbbCardBadgeElement } from './card-badge';
 import './card-badge';
 
 describe('sbb-card-badge', () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-card-badge></sbb-card-badge>`);
+  let element: SbbCardBadgeElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<sbb-card-badge>Black Friday Special</sbb-card-badge>`);
+  });
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-card-badge slot="badge" color="charcoal" role="text" dir="ltr">
-        </sbb-card-badge>
-      `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <span class="sbb-card-badge-wrapper">
-          <span class="sbb-card-badge">
-            <span class="sbb-card-badge-background" aria-hidden="true"></span>
-            <span class="sbb-card-badge-content">
-              <slot></slot>
-            </span>
-          </span>
-        </span>
-      `,
-    );
+  it('renders - Dom', async () => {
+    await expect(element).dom.to.be.equalSnapshot();
   });
+
+  it('renders - ShadowDom', async () => {
+    await expect(element).shadowDom.to.be.equalSnapshot();
+  });
+
+  testA11yTreeSnapshot();
 });
diff --git a/src/components/card/card/__snapshots__/card.spec.snap.js b/src/components/card/card/__snapshots__/card.spec.snap.js
new file mode 100644
index 00000000000..6536d56fd2f
--- /dev/null
+++ b/src/components/card/card/__snapshots__/card.spec.snap.js
@@ -0,0 +1,148 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-card should render with sbb-card-badge - Dom"] = 
+`<sbb-card
+  color="white"
+  data-has-card-badge=""
+  size="xl"
+>
+  <h2>
+    Title
+  </h2>
+  Content text
+  <sbb-card-badge
+    color="charcoal"
+    dir="ltr"
+    role="text"
+    slot="badge"
+  >
+    <span>
+      %
+    </span>
+    <span>
+      from CHF
+    </span>
+    <span>
+      19.99
+    </span>
+  </sbb-card-badge>
+</sbb-card>
+`;
+/* end snapshot sbb-card should render with sbb-card-badge - Dom */
+
+snapshots["sbb-card should render with sbb-card-badge - ShadowDom"] = 
+`<span class="sbb-card">
+  <slot name="action">
+  </slot>
+  <span class="sbb-card__wrapper">
+    <slot>
+    </slot>
+  </span>
+  <span class="sbb-card__badge-wrapper">
+    <slot name="badge">
+    </slot>
+  </span>
+</span>
+`;
+/* end snapshot sbb-card should render with sbb-card-badge - ShadowDom */
+
+snapshots["sbb-card A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Title",
+      "level": 2
+    },
+    {
+      "role": "text",
+      "name": "Content text"
+    },
+    {
+      "role": "text",
+      "name": "%"
+    },
+    {
+      "role": "text",
+      "name": "from CHF"
+    },
+    {
+      "role": "text",
+      "name": "19.99"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-card A11y tree Chrome */
+
+snapshots["sbb-card A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Title",
+      "level": 2
+    },
+    {
+      "role": "text leaf",
+      "name": "Content text "
+    },
+    {
+      "role": "text leaf",
+      "name": "%"
+    },
+    {
+      "role": "text leaf",
+      "name": "from CHF"
+    },
+    {
+      "role": "text leaf",
+      "name": "19.99"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-card A11y tree Firefox */
+
+snapshots["sbb-card A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Title",
+      "level": 2
+    },
+    {
+      "role": "text",
+      "name": "Content text"
+    },
+    {
+      "role": "text",
+      "name": "%"
+    },
+    {
+      "role": "text",
+      "name": "from CHF"
+    },
+    {
+      "role": "text",
+      "name": "19.99"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-card A11y tree Safari */
+
diff --git a/src/components/card/card/card.e2e.ts b/src/components/card/card/card.e2e.ts
index 599aa2ffa1c..c663b82c635 100644
--- a/src/components/card/card/card.e2e.ts
+++ b/src/components/card/card/card.e2e.ts
@@ -31,28 +31,6 @@ describe('sbb-card', () => {
       ).getPropertyValue('display'),
     ).not.to.be.equal('none');
     expect(element).to.have.attribute('data-has-card-badge');
-    expect(element).dom.to.be.equal(`
-      <sbb-card color="white" data-has-card-badge size="xl">
-        <h2>Title</h2>
-        Content text
-        <sbb-card-badge color="charcoal" dir="ltr" role="text" slot="badge">
-          <span>%</span>
-          <span>from CHF</span>
-          <span>19.99</span>
-        </sbb-card-badge>
-      </sbb-card>
-    `);
-    expect(element).shadowDom.to.be.equal(`
-      <span class="sbb-card">
-        <slot name="action"></slot>
-        <span class="sbb-card__wrapper">
-          <slot></slot>
-        </span>
-        <span class="sbb-card__badge-wrapper">
-          <slot name="badge"></slot>
-        </span>
-      </span>
-    `);
   });
 
   it('should render without sbb-card-badge', async () => {
@@ -70,4 +48,20 @@ describe('sbb-card', () => {
     ).to.be.equal('none');
     expect(element).not.to.have.attribute('data-has-card-badge');
   });
+
+  it('should not render sbb-card-badge for small sizes', async () => {
+    const root = await fixture(
+      html` <sbb-card size="xs">
+        <h2>Title</h2>
+        Content text
+        <sbb-card-badge>
+          <span>%</span>
+          <span>from CHF</span>
+          <span>19.99</span>
+        </sbb-card-badge>
+      </sbb-card>`,
+    );
+
+    expect(root.shadowRoot!.querySelector('.sbb-card__badge-wrapper')).not.to.be.ok;
+  });
 });
diff --git a/src/components/card/card/card.spec.ts b/src/components/card/card/card.spec.ts
index 7b1c5b21fce..67f9f2aa2ec 100644
--- a/src/components/card/card/card.spec.ts
+++ b/src/components/card/card/card.spec.ts
@@ -1,16 +1,20 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
+import type { SbbCardElement } from './card';
 import './card';
 import '../card-badge';
 
-const cardBadgeWrapperSelector = '.sbb-card__badge-wrapper';
-
 describe('sbb-card', () => {
-  it('should not render sbb-card-badge for small sizes', async () => {
+  let element: SbbCardElement;
+
+  beforeEach(async () => {
     // Note: for easier testing, we add the slot="badge"
     // to <sbb-card-badge> which would not be needed in real.
-    const root = await fixture(
-      html` <sbb-card size="xs">
+    element = await fixture(html`
+      <sbb-card size="xl">
         <h2>Title</h2>
         Content text
         <sbb-card-badge slot="badge">
@@ -18,9 +22,17 @@ describe('sbb-card', () => {
           <span>from CHF</span>
           <span>19.99</span>
         </sbb-card-badge>
-      </sbb-card>`,
-    );
+      </sbb-card>
+    `);
+  });
+
+  it('should render with sbb-card-badge - Dom', async () => {
+    await expect(element).dom.to.be.equalSnapshot();
+  });
 
-    expect(root.shadowRoot!.querySelector(cardBadgeWrapperSelector)).not.to.be.ok;
+  it('should render with sbb-card-badge - ShadowDom', async () => {
+    await expect(element).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot();
 });
diff --git a/src/components/checkbox/checkbox-group/__snapshots__/checkbox-group.spec.snap.js b/src/components/checkbox/checkbox-group/__snapshots__/checkbox-group.spec.snap.js
new file mode 100644
index 00000000000..3d04b3f57b8
--- /dev/null
+++ b/src/components/checkbox/checkbox-group/__snapshots__/checkbox-group.spec.snap.js
@@ -0,0 +1,141 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-checkbox-group renders - ShadowDom"] = 
+`<div class="sbb-checkbox-group">
+  <slot>
+  </slot>
+</div>
+<div class="sbb-checkbox-group__error">
+  <slot name="error">
+  </slot>
+</div>
+`;
+/* end snapshot sbb-checkbox-group renders - ShadowDom */
+
+snapshots["sbb-checkbox-group renders - Dom"] = 
+`<sbb-checkbox-group
+  data-slot-names="unnamed"
+  orientation="horizontal"
+>
+  <sbb-checkbox
+    aria-checked="false"
+    aria-disabled="false"
+    aria-required="false"
+    data-slot-names="unnamed"
+    icon-placement="end"
+    role="checkbox"
+    size="m"
+    tabindex="0"
+    value="checkbox-1"
+  >
+    Label 1
+  </sbb-checkbox>
+  <sbb-checkbox
+    aria-checked="false"
+    aria-disabled="false"
+    aria-required="false"
+    data-slot-names="unnamed"
+    icon-placement="end"
+    role="checkbox"
+    size="m"
+    tabindex="0"
+    value="checkbox-2"
+  >
+    Label 2
+  </sbb-checkbox>
+  <sbb-checkbox
+    aria-checked="false"
+    aria-disabled="false"
+    aria-required="false"
+    data-slot-names="unnamed"
+    icon-placement="end"
+    role="checkbox"
+    size="m"
+    tabindex="0"
+    value="checkbox-3"
+  >
+    Label 3
+  </sbb-checkbox>
+</sbb-checkbox-group>
+`;
+/* end snapshot sbb-checkbox-group renders - Dom */
+
+snapshots["sbb-checkbox-group A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "checkbox",
+      "name": "​ Label 1",
+      "checked": false
+    },
+    {
+      "role": "checkbox",
+      "name": "​ Label 2",
+      "checked": false
+    },
+    {
+      "role": "checkbox",
+      "name": "​ Label 3",
+      "checked": false
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-checkbox-group A11y tree Chrome */
+
+snapshots["sbb-checkbox-group A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "checkbox",
+      "name": "​ Label 1"
+    },
+    {
+      "role": "checkbox",
+      "name": "​ Label 2"
+    },
+    {
+      "role": "checkbox",
+      "name": "​ Label 3"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-checkbox-group A11y tree Firefox */
+
+snapshots["sbb-checkbox-group A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "checkbox",
+      "name": "​ Label 1",
+      "checked": false
+    },
+    {
+      "role": "checkbox",
+      "name": "​ Label 2",
+      "checked": false
+    },
+    {
+      "role": "checkbox",
+      "name": "​ Label 3",
+      "checked": false
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-checkbox-group A11y tree Safari */
+
diff --git a/src/components/checkbox/checkbox-group/checkbox-group.spec.ts b/src/components/checkbox/checkbox-group/checkbox-group.spec.ts
index 5c7fe969199..e364947114b 100644
--- a/src/components/checkbox/checkbox-group/checkbox-group.spec.ts
+++ b/src/components/checkbox/checkbox-group/checkbox-group.spec.ts
@@ -1,35 +1,32 @@
-import './checkbox-group';
-
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
+import type { SbbCheckboxGroupElement } from './checkbox-group';
+import './checkbox-group';
+import '../checkbox';
+
 describe('sbb-checkbox-group', () => {
-  it('renders', async () => {
-    const root = await fixture(html`
+  let element: SbbCheckboxGroupElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`
       <sbb-checkbox-group>
         <sbb-checkbox value="checkbox-1">Label 1</sbb-checkbox>
         <sbb-checkbox value="checkbox-2">Label 2</sbb-checkbox>
         <sbb-checkbox value="checkbox-3">Label 3</sbb-checkbox>
       </sbb-checkbox-group>
     `);
+  });
 
-    expect(root).dom.to.be.equal(
-      `
-      <sbb-checkbox-group orientation="horizontal" data-slot-names="unnamed">
-        <sbb-checkbox value="checkbox-1">Label 1</sbb-checkbox>
-        <sbb-checkbox value="checkbox-2">Label 2</sbb-checkbox>
-        <sbb-checkbox value="checkbox-3">Label 3</sbb-checkbox>
-      </sbb-checkbox-group>
-    `,
-    );
-    expect(root).shadowDom.to.be.equal(`
-      <div class="sbb-checkbox-group">
-        <slot></slot>
-      </div>
-      <div class="sbb-checkbox-group__error">
-        <slot name="error">
-        </slot>
-      </div>
-    `);
+  it('renders - Dom', async () => {
+    await expect(element).dom.to.be.equalSnapshot();
   });
+
+  it('renders - ShadowDom', async () => {
+    await expect(element).shadowDom.to.be.equalSnapshot();
+  });
+
+  testA11yTreeSnapshot();
 });
diff --git a/src/components/checkbox/checkbox/__snapshots__/checkbox.spec.snap.js b/src/components/checkbox/checkbox/__snapshots__/checkbox.spec.snap.js
index 6e701468ab3..d5f4803ba25 100644
--- a/src/components/checkbox/checkbox/__snapshots__/checkbox.spec.snap.js
+++ b/src/components/checkbox/checkbox/__snapshots__/checkbox.spec.snap.js
@@ -172,3 +172,104 @@ snapshots["sbb-checkbox icon position with slotted icon"] =
 `;
 /* end snapshot sbb-checkbox icon position with slotted icon */
 
+snapshots["sbb-checkbox Unchecked - A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "checkbox",
+      "name": "​ Label",
+      "checked": false
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-checkbox Unchecked - A11y tree Chrome */
+
+snapshots["sbb-checkbox Checked - A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "checkbox",
+      "name": "​ Label",
+      "checked": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-checkbox Checked - A11y tree Chrome */
+
+snapshots["sbb-checkbox Unchecked - A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "checkbox",
+      "name": "​ Label"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-checkbox Unchecked - A11y tree Firefox */
+
+snapshots["sbb-checkbox Checked - A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "checkbox",
+      "name": "​ Label",
+      "checked": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-checkbox Checked - A11y tree Firefox */
+
+snapshots["sbb-checkbox Unchecked - A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "checkbox",
+      "name": "​ Label",
+      "checked": false
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-checkbox Unchecked - A11y tree Safari */
+
+snapshots["sbb-checkbox Checked - A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "checkbox",
+      "name": "​ Label",
+      "checked": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-checkbox Checked - A11y tree Safari */
+
diff --git a/src/components/checkbox/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox/checkbox.spec.ts
index 9ccd5da2210..ae88216ef59 100644
--- a/src/components/checkbox/checkbox/checkbox.spec.ts
+++ b/src/components/checkbox/checkbox/checkbox.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 
 import './checkbox';
 
@@ -96,4 +97,8 @@ describe('sbb-checkbox', () => {
       await expect(root).shadowDom.to.be.equalSnapshot();
     });
   });
+
+  testA11yTreeSnapshot('Unchecked - A11y tree', html`<sbb-checkbox>Label</sbb-checkbox>`);
+
+  testA11yTreeSnapshot('Checked - A11y tree', html`<sbb-checkbox checked>Label</sbb-checkbox>`);
 });
diff --git a/src/components/chip/__snapshots__/chip.spec.snap.js b/src/components/chip/__snapshots__/chip.spec.snap.js
new file mode 100644
index 00000000000..8b154609289
--- /dev/null
+++ b/src/components/chip/__snapshots__/chip.spec.snap.js
@@ -0,0 +1,71 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-chip renders - Dom"] = 
+`<sbb-chip
+  color="milk"
+  size="xxs"
+>
+  Label
+</sbb-chip>
+`;
+/* end snapshot sbb-chip renders - Dom */
+
+snapshots["sbb-chip renders - ShadowDom"] = 
+`<span class="sbb-chip">
+  <span class="sbb-chip__text-wrapper">
+    <slot>
+    </slot>
+  </span>
+</span>
+`;
+/* end snapshot sbb-chip renders - ShadowDom */
+
+snapshots["sbb-chip A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Label"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-chip A11y tree Chrome */
+
+snapshots["sbb-chip A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Label"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-chip A11y tree Firefox */
+
+snapshots["sbb-chip A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Label"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-chip A11y tree Safari */
+
diff --git a/src/components/chip/chip.spec.ts b/src/components/chip/chip.spec.ts
index 452f2d5324c..f267b6fda45 100644
--- a/src/components/chip/chip.spec.ts
+++ b/src/components/chip/chip.spec.ts
@@ -1,19 +1,25 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
+import type { SbbChipElement } from './chip';
 import './chip';
 
 describe('sbb-chip', () => {
-  it('renders', async () => {
-    const root: Element = await fixture(html`<sbb-chip>Label</sbb-chip>`);
+  let element: SbbChipElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<sbb-chip>Label</sbb-chip>`);
+  });
 
-    expect(root).dom.to.be.equal(`<sbb-chip color="milk" size="xxs">Label</sbb-chip>`);
+  it('renders - Dom', async () => {
+    await expect(element).dom.to.be.equalSnapshot();
+  });
 
-    expect(root).shadowDom.to.be.equal(`
-      <span class="sbb-chip">
-        <span class="sbb-chip__text-wrapper">
-          <slot></slot>
-        </span>
-      </span>
-    `);
+  it('renders - ShadowDom', async () => {
+    await expect(element).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot();
 });
diff --git a/src/components/clock/__snapshots__/clock.spec.snap.js b/src/components/clock/__snapshots__/clock.spec.snap.js
new file mode 100644
index 00000000000..b19b2891c58
--- /dev/null
+++ b/src/components/clock/__snapshots__/clock.spec.snap.js
@@ -0,0 +1,64 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-clock renders"] = 
+`<div class="sbb-clock">
+  <span class="sbb-clock__face">
+  </span>
+  <span class="sbb-clock__hand-hours">
+  </span>
+  <span class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition">
+  </span>
+  <span class="sbb-clock__hand-seconds">
+  </span>
+</div>
+`;
+/* end snapshot sbb-clock renders */
+
+snapshots["sbb-clock renders with a fixed time"] = 
+`<div class="sbb-clock">
+  <span class="sbb-clock__face">
+  </span>
+  <span class="sbb-clock__hand-hours sbb-clock__hand-hours--initial-hour">
+  </span>
+  <span
+    class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"
+    style="transform: rotateZ(180deg);"
+  >
+  </span>
+  <span class="sbb-clock__hand-seconds sbb-clock__hand-seconds--initial-minute">
+  </span>
+</div>
+`;
+/* end snapshot sbb-clock renders with a fixed time */
+
+snapshots["sbb-clock A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-clock A11y tree Chrome */
+
+snapshots["sbb-clock A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-clock A11y tree Firefox */
+
+snapshots["sbb-clock A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-clock A11y tree Safari */
+
diff --git a/src/components/clock/clock.spec.ts b/src/components/clock/clock.spec.ts
index 629bff5723d..df3613c69a7 100644
--- a/src/components/clock/clock.spec.ts
+++ b/src/components/clock/clock.spec.ts
@@ -1,6 +1,8 @@
 import { assert, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
 import { SbbClockElement } from './clock';
 
 describe('sbb-clock', () => {
@@ -12,16 +14,7 @@ describe('sbb-clock', () => {
 
     expect(element).dom.to.be.equal(`<sbb-clock></sbb-clock>`);
 
-    expect(element).shadowDom.to.be.equal(
-      `
-          <div class="sbb-clock">
-            <span class="sbb-clock__face"></span>
-            <span class="sbb-clock__hand-hours"></span>
-            <span class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"></span>
-            <span class="sbb-clock__hand-seconds"></span>
-          </div>
-        `,
-    );
+    await expect(element).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders with a fixed time', async () => {
@@ -30,35 +23,8 @@ describe('sbb-clock', () => {
 
     expect(element).to.have.attribute('data-initialized');
 
-    expect(element).shadowDom.to.be.equal(`
-      <div class="sbb-clock">
-        <span class="sbb-clock__face">
-          <svg focusable="false" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg">
-            <g class="face">
-              <circle cx="52.5" cy="52.5" fill="#FFF" r="52.5"></circle>
-              <path d="M50.75 4h3.5v12h-3.5zM50.75 89h3.5v12h-3.5zM75.233 9.623l3.03 1.75-6 10.392-3.03-1.75zM32.734 83.233l3.03 1.75-6 10.392-3.03-1.75zM93.628 26.732l1.75 3.031-10.392 6-1.75-3.03zM20.017 69.234l1.75 3.031-10.392 6-1.75-3.03zM101 50.75v3.5H89v-3.5zM16 50.75v3.5H4v-3.5zM95.379 75.232l-1.75 3.031-10.392-6 1.75-3.03zM21.766 32.734l-1.75 3.031-10.392-6 1.75-3.03zM78.267 93.63l-3.03 1.75-6-10.393 3.03-1.75zM35.766 20.015l-3.03 1.75-6-10.392 3.03-1.75z"></path>
-              <g>
-                <path d="M56.873 4.19l1.392.147-.366 3.48-1.392-.145zM47.101 97.177l1.393.146-.366 3.481-1.392-.146zM61.896 4.914l1.37.29-.728 3.424-1.37-.29zM42.458 96.366l1.37.29-.728 3.424-1.37-.291zM66.825 6.157l1.332.432-1.082 3.33-1.331-.434zM37.931 95.085l1.332.432-1.082 3.33-1.331-.433zM71.584 7.906l1.28.569-1.424 3.197-1.28-.57zM33.56 93.32l1.278.569-1.423 3.197-1.28-.57zM80.44 12.852l1.133.823-2.058 2.831-1.132-.823zM25.481 88.494l1.133.822-2.057 2.832-1.133-.823zM84.43 15.986l1.04.937-2.342 2.6-1.04-.936zM21.87 85.469l1.04.936-2.341 2.601-1.04-.937zM88.072 19.522l.937 1.04-2.6 2.343-.937-1.04zM18.593 82.088l.937 1.04-2.601 2.342-.937-1.04zM91.328 23.425l.823 1.133-2.832 2.057-.823-1.132zM15.684 78.385l.823 1.132-2.832 2.058-.822-1.133zM96.52 32.128l.57 1.279-3.198 1.423-.57-1.278zM11.109 70.161l.569 1.279-3.197 1.423-.57-1.279zM98.407 36.85l.433 1.332-3.33 1.081-.432-1.331zM9.483 65.74l.432 1.33-3.329 1.082-.432-1.331zM99.795 41.726l.291 1.37-3.423.727-.29-1.37zM8.34 61.17l.292 1.37-3.424.728-.29-1.37zM100.66 46.73l.146 1.393-3.48.366-.147-1.392zM7.674 56.506l.146 1.392-3.48.366-.147-1.392zM100.811 56.873l-.146 1.392-3.48-.365.145-1.393zM7.821 47.101l-.146 1.392-3.48-.365.145-1.393zM100.09 61.895l-.291 1.369-3.424-.728.291-1.369zM8.631 42.46l-.291 1.37-3.423-.728.29-1.37zM98.84 66.827l-.432 1.331-3.329-1.081.433-1.332zM9.918 37.93l-.433 1.331-3.329-1.082.433-1.331zM97.098 71.585l-.569 1.28-3.197-1.424.57-1.28zM11.677 33.558l-.57 1.28-3.197-1.424.57-1.279zM92.149 80.439l-.823 1.133-2.832-2.058.823-1.132zM16.506 25.482l-.823 1.133-2.831-2.057.823-1.133zM89.017 84.431l-.937 1.04-2.6-2.341.936-1.04zM19.528 21.869l-.936 1.04-2.601-2.342.936-1.04zM85.48 88.076l-1.041.936-2.342-2.6 1.04-.937zM22.91 18.59l-1.04.937-2.341-2.601 1.04-.937zM81.574 91.328l-1.133.823-2.057-2.831 1.132-.823zM26.617 15.684l-1.133.823-2.057-2.832 1.132-.823zM72.873 96.524l-1.279.57-1.423-3.198 1.278-.57zM34.838 11.105l-1.279.57-1.423-3.198 1.279-.57zM68.151 98.405l-1.331.432-1.082-3.329 1.332-.432zM39.259 9.485l-1.332.433-1.081-3.33 1.331-.432zM63.272 99.799l-1.369.29-.728-3.422 1.37-.291zM43.83 8.337l-1.369.291-.727-3.423 1.37-.291zM58.27 100.662l-1.393.146-.366-3.48 1.393-.147zM48.494 7.672l-1.392.147-.366-3.481 1.392-.147z"></path>
-              </g>
-            </g>
-          </svg>
-        </span>
-        <span class="sbb-clock__hand-hours sbb-clock__hand-hours--initial-hour">
-          <svg focusable="false" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg">
-            <path d="M55.7 64.5h-6.4l.6-44h5.2z" id="mod_clock_svg_hours"></path>
-          </svg>
-        </span>
-        <span class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition" style="transform: rotateZ(180deg);">
-          <svg focusable="false" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg">
-            <path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"></path>
-          </svg>
-        </span>
-        <span class="sbb-clock__hand-seconds sbb-clock__hand-seconds--initial-minute">
-          <svg focusable="false" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg">
-            <path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"></path>
-          </svg>
-        </span>
-      </div>
-`);
+    await expect(element).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-clock></sbb-clock>`);
 });
diff --git a/src/components/datepicker/datepicker-next-day/__snapshots__/datepicker-next-day.spec.snap.js b/src/components/datepicker/datepicker-next-day/__snapshots__/datepicker-next-day.spec.snap.js
index ba1fde6d468..53c5d2d594b 100644
--- a/src/components/datepicker/datepicker-next-day/__snapshots__/datepicker-next-day.spec.snap.js
+++ b/src/components/datepicker/datepicker-next-day/__snapshots__/datepicker-next-day.spec.snap.js
@@ -14,3 +14,67 @@ snapshots["sbb-datepicker-next-day renders"] =
 `;
 /* end snapshot sbb-datepicker-next-day renders */
 
+snapshots["sbb-datepicker-next-day renders with connected datepicker"] = 
+`<sbb-datepicker-next-day
+  aria-label="Change to the next day, currently selected December 31, 2022."
+  date-picker="datepicker"
+  dir="ltr"
+  role="button"
+  slot="suffix"
+  tabindex="0"
+>
+</sbb-datepicker-next-day>
+`;
+/* end snapshot sbb-datepicker-next-day renders with connected datepicker */
+
+snapshots["sbb-datepicker-next-day A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Next day",
+      "disabled": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-datepicker-next-day A11y tree Chrome */
+
+snapshots["sbb-datepicker-next-day A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Next day",
+      "disabled": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-datepicker-next-day A11y tree Firefox */
+
+snapshots["sbb-datepicker-next-day A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Next day",
+      "disabled": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-datepicker-next-day A11y tree Safari */
+
diff --git a/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts b/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts
index 54b9e61c3d5..1430433e673 100644
--- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts
+++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts
@@ -1,6 +1,7 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 import type { SbbFormFieldElement } from '../../form-field';
 
 import type { SbbDatepickerNextDayElement } from './datepicker-next-day';
@@ -34,16 +35,8 @@ describe('sbb-datepicker-next-day', () => {
 
     const element: SbbDatepickerNextDayElement =
       page.querySelector<SbbDatepickerNextDayElement>('sbb-datepicker-next-day')!;
-    expect(element).dom.to.be.equal(`
-      <sbb-datepicker-next-day
-        date-picker="datepicker"
-        dir="ltr"
-        role="button"
-        slot="suffix"
-        tabindex="0"
-        aria-label="Change to the next day, currently selected December 31, 2022.">
-      </sbb-datepicker-next-day>
-    `);
+
+    await expect(element).dom.to.be.equalSnapshot();
 
     expect(element).shadowDom.to.be.equal(`
       <span class="sbb-datepicker-next-day">
@@ -79,4 +72,6 @@ describe('sbb-datepicker-next-day', () => {
       page.querySelector<SbbDatepickerNextDayElement>('sbb-datepicker-next-day')!;
     expect(element).to.have.attribute('data-disabled');
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-datepicker-next-day></sbb-datepicker-next-day>`);
 });
diff --git a/src/components/datepicker/datepicker-previous-day/__snapshots__/datepicker-previous-day.spec.snap.js b/src/components/datepicker/datepicker-previous-day/__snapshots__/datepicker-previous-day.spec.snap.js
index 9fe33d4f1ea..0deee4e6eb3 100644
--- a/src/components/datepicker/datepicker-previous-day/__snapshots__/datepicker-previous-day.spec.snap.js
+++ b/src/components/datepicker/datepicker-previous-day/__snapshots__/datepicker-previous-day.spec.snap.js
@@ -14,3 +14,67 @@ snapshots["sbb-datepicker-previous-day renders"] =
 `;
 /* end snapshot sbb-datepicker-previous-day renders */
 
+snapshots["sbb-datepicker-previous-day renders with connected datepicker"] = 
+`<sbb-datepicker-previous-day
+  aria-label="Change to the previous day, currently selected December 31, 2022."
+  date-picker="datepicker"
+  dir="ltr"
+  role="button"
+  slot="prefix"
+  tabindex="0"
+>
+</sbb-datepicker-previous-day>
+`;
+/* end snapshot sbb-datepicker-previous-day renders with connected datepicker */
+
+snapshots["sbb-datepicker-previous-day A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Previous day",
+      "disabled": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-datepicker-previous-day A11y tree Chrome */
+
+snapshots["sbb-datepicker-previous-day A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Previous day",
+      "disabled": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-datepicker-previous-day A11y tree Firefox */
+
+snapshots["sbb-datepicker-previous-day A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Previous day",
+      "disabled": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-datepicker-previous-day A11y tree Safari */
+
diff --git a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts
index bc26fd0932e..df85bfd50d8 100644
--- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts
+++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts
@@ -1,6 +1,7 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 import type { SbbFormFieldElement } from '../../form-field';
 
 import type { SbbDatepickerPreviousDayElement } from './datepicker-previous-day';
@@ -34,16 +35,8 @@ describe('sbb-datepicker-previous-day', () => {
 
     const element: SbbDatepickerPreviousDayElement =
       page.querySelector<SbbDatepickerPreviousDayElement>('sbb-datepicker-previous-day')!;
-    expect(element).dom.to.be.equal(`
-      <sbb-datepicker-previous-day
-        date-picker="datepicker"
-        dir="ltr"
-        role="button"
-        slot="prefix"
-        tabindex="0"
-        aria-label="Change to the previous day, currently selected December 31, 2022.">
-      </sbb-datepicker-previous-day>
-    `);
+
+    await expect(element).dom.to.be.equalSnapshot();
 
     expect(element).shadowDom.to.be.equal(`
       <span class="sbb-datepicker-previous-day">
@@ -79,4 +72,9 @@ describe('sbb-datepicker-previous-day', () => {
       page.querySelector<SbbDatepickerPreviousDayElement>('sbb-datepicker-previous-day')!;
     expect(element).to.have.attribute('data-disabled');
   });
+
+  testA11yTreeSnapshot(
+    undefined,
+    html`<sbb-datepicker-previous-day></sbb-datepicker-previous-day>`,
+  );
 });
diff --git a/src/components/datepicker/datepicker-toggle/__snapshots__/datepicker-toggle.spec.snap.js b/src/components/datepicker/datepicker-toggle/__snapshots__/datepicker-toggle.spec.snap.js
new file mode 100644
index 00000000000..53574eaff47
--- /dev/null
+++ b/src/components/datepicker/datepicker-toggle/__snapshots__/datepicker-toggle.spec.snap.js
@@ -0,0 +1,159 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-datepicker-toggle renders"] = 
+`<sbb-tooltip-trigger
+  aria-controls="sbb-tooltip-1"
+  aria-disabled="true"
+  aria-expanded="false"
+  aria-haspopup="dialog"
+  aria-label="Show calendar"
+  data-icon-small=""
+  dir="ltr"
+  disabled=""
+  icon-name="calendar-small"
+  role="button"
+>
+</sbb-tooltip-trigger>
+<sbb-tooltip
+  data-state="closed"
+  hide-close-button=""
+  id="sbb-tooltip-1"
+  role="tooltip"
+>
+  <sbb-calendar>
+  </sbb-calendar>
+</sbb-tooltip>
+`;
+/* end snapshot sbb-datepicker-toggle renders */
+
+snapshots["sbb-datepicker-toggle renders in form-field renders in form-field"] = 
+`<sbb-tooltip-trigger
+  aria-controls="sbb-tooltip-3"
+  aria-expanded="false"
+  aria-haspopup="dialog"
+  aria-label="Show calendar"
+  data-icon-small=""
+  dir="ltr"
+  icon-name="calendar-small"
+  role="button"
+  tabindex="0"
+>
+</sbb-tooltip-trigger>
+<sbb-tooltip
+  data-state="closed"
+  hide-close-button=""
+  id="sbb-tooltip-3"
+  role="tooltip"
+>
+  <sbb-calendar>
+  </sbb-calendar>
+</sbb-tooltip>
+`;
+/* end snapshot sbb-datepicker-toggle renders in form-field renders in form-field */
+
+snapshots["sbb-datepicker-toggle renders in form-field renders in disabled form-field"] = 
+`<sbb-tooltip-trigger
+  aria-controls="sbb-tooltip-5"
+  aria-disabled="true"
+  aria-expanded="false"
+  aria-haspopup="dialog"
+  aria-label="Show calendar"
+  data-icon-small=""
+  dir="ltr"
+  disabled=""
+  icon-name="calendar-small"
+  role="button"
+>
+</sbb-tooltip-trigger>
+<sbb-tooltip
+  data-state="closed"
+  hide-close-button=""
+  id="sbb-tooltip-5"
+  role="tooltip"
+>
+  <sbb-calendar>
+  </sbb-calendar>
+</sbb-tooltip>
+`;
+/* end snapshot sbb-datepicker-toggle renders in form-field renders in disabled form-field */
+
+snapshots["sbb-datepicker-toggle renders in form-field renders in form-field with calendar parameters"] = 
+`<sbb-tooltip-trigger
+  aria-controls="sbb-tooltip-7"
+  aria-expanded="false"
+  aria-haspopup="dialog"
+  aria-label="Show calendar"
+  data-icon-small=""
+  dir="ltr"
+  icon-name="calendar-small"
+  role="button"
+  tabindex="0"
+>
+</sbb-tooltip-trigger>
+<sbb-tooltip
+  data-state="closed"
+  hide-close-button=""
+  id="sbb-tooltip-7"
+  role="tooltip"
+>
+  <sbb-calendar wide="">
+  </sbb-calendar>
+</sbb-tooltip>
+`;
+/* end snapshot sbb-datepicker-toggle renders in form-field renders in form-field with calendar parameters */
+
+snapshots["sbb-datepicker-toggle A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Show calendar",
+      "disabled": true,
+      "haspopup": "dialog"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-datepicker-toggle A11y tree Chrome */
+
+snapshots["sbb-datepicker-toggle A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Show calendar",
+      "disabled": true,
+      "haspopup": "dialog"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-datepicker-toggle A11y tree Firefox */
+
+snapshots["sbb-datepicker-toggle A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Show calendar",
+      "disabled": true,
+      "haspopup": "dialog"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-datepicker-toggle A11y tree Safari */
+
diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts
index 049c82c0705..21f92a6058e 100644
--- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts
+++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts
@@ -1,6 +1,7 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 import type { SbbFormFieldElement } from '../../form-field';
 
 import type { SbbDatepickerToggleElement } from './datepicker-toggle';
@@ -13,29 +14,7 @@ describe('sbb-datepicker-toggle', () => {
     const page = await fixture(html`<sbb-datepicker-toggle></sbb-datepicker-toggle>`);
 
     expect(page).dom.to.equal(`<sbb-datepicker-toggle slot="prefix"></sbb-datepicker-toggle>`);
-    expect(page).shadowDom.to.equal(`
-      <sbb-tooltip-trigger
-        aria-label="Show calendar"
-        aria-controls="sbb-tooltip-1"
-        aria-expanded="false"
-        aria-haspopup="dialog"
-        dir="ltr"
-        aria-disabled="true"
-        icon-name="calendar-small"
-        role="button"
-        disabled=""
-        data-icon-small=""
-      ></sbb-tooltip-trigger>
-      <sbb-tooltip
-        hide-close-button=""
-        data-state="closed"
-        hide-close-button=""
-        id="sbb-tooltip-1"
-        role="tooltip"
-      >
-        <sbb-calendar></sbb-calendar>
-      </sbb-tooltip>
-    `);
+    await expect(page).shadowDom.to.equalSnapshot();
   });
 
   describe('renders in form-field', () => {
@@ -52,29 +31,7 @@ describe('sbb-datepicker-toggle', () => {
       expect(element).dom.to.be.equal(
         `<sbb-datepicker-toggle slot="prefix"></sbb-datepicker-toggle>`,
       );
-      expect(element).shadowDom.to.be.equal(
-        `
-          <sbb-tooltip-trigger
-            tabindex="0"
-            aria-label="Show calendar"
-            dir="ltr"
-            aria-haspopup="dialog"
-            aria-expanded="false"
-            icon-name="calendar-small"
-            data-icon-small=""
-            role="button"
-            aria-controls="sbb-tooltip-4"
-          ></sbb-tooltip-trigger>
-            <sbb-tooltip
-              hide-close-button=""
-              data-state="closed"
-              id="sbb-tooltip-4"
-              role="tooltip"
-            >
-              <sbb-calendar></sbb-calendar>
-            </sbb-tooltip>
-          `,
-      );
+      await expect(element).shadowDom.to.be.equalSnapshot();
     });
 
     it('renders in disabled form-field', async () => {
@@ -90,30 +47,7 @@ describe('sbb-datepicker-toggle', () => {
       expect(element).dom.to.be.equal(
         `<sbb-datepicker-toggle slot="prefix"></sbb-datepicker-toggle>`,
       );
-      expect(element).shadowDom.to.be.equal(
-        `
-          <sbb-tooltip-trigger
-            aria-label="Show calendar"
-            aria-controls="sbb-tooltip-7"
-            aria-disabled="true"
-            aria-expanded="false"
-            aria-haspopup="dialog"
-            disabled=""
-            dir="ltr"
-            icon-name="calendar-small"
-            role="button"
-            data-icon-small=""
-          ></sbb-tooltip-trigger>
-          <sbb-tooltip
-            data-state="closed"
-            id="sbb-tooltip-7"
-            hide-close-button=""
-            role="tooltip"
-          >
-            <sbb-calendar></sbb-calendar>
-          </sbb-tooltip>
-        `,
-      );
+      await expect(element).shadowDom.to.be.equalSnapshot();
     });
 
     it('renders in form-field with calendar parameters', async () => {
@@ -129,29 +63,9 @@ describe('sbb-datepicker-toggle', () => {
       expect(element).dom.to.be.equal(
         `<sbb-datepicker-toggle slot="prefix"></sbb-datepicker-toggle>`,
       );
-      expect(element).shadowDom.to.be.equal(
-        `
-          <sbb-tooltip-trigger
-            tabindex="0"
-            aria-label="Show calendar"
-            dir="ltr"
-            aria-haspopup="dialog"
-            aria-expanded="false"
-            icon-name="calendar-small"
-            data-icon-small=""
-            role="button"
-            aria-controls="sbb-tooltip-10"
-          ></sbb-tooltip-trigger>
-          <sbb-tooltip
-            hide-close-button=""
-            data-state="closed"
-            id="sbb-tooltip-10"
-            role="tooltip"
-          >
-            <sbb-calendar wide=""></sbb-calendar>
-          </sbb-tooltip>
-        `,
-      );
+      await expect(element).shadowDom.to.be.equalSnapshot();
     });
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-datepicker-toggle></sbb-datepicker-toggle>`);
 });
diff --git a/src/components/datepicker/datepicker/__snapshots__/datepicker.spec.snap.js b/src/components/datepicker/datepicker/__snapshots__/datepicker.spec.snap.js
index dc7008007f6..59f27a48da4 100644
--- a/src/components/datepicker/datepicker/__snapshots__/datepicker.spec.snap.js
+++ b/src/components/datepicker/datepicker/__snapshots__/datepicker.spec.snap.js
@@ -10,3 +10,96 @@ snapshots["sbb-datepicker renders"] =
 `;
 /* end snapshot sbb-datepicker renders */
 
+snapshots["sbb-datepicker A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "textbox",
+      "name": "DD.MM.YYYY"
+    },
+    {
+      "role": "button",
+      "name": "Previous day",
+      "disabled": true
+    },
+    {
+      "role": "button",
+      "name": "Next day",
+      "disabled": true
+    },
+    {
+      "role": "button",
+      "name": "Show calendar",
+      "haspopup": "dialog"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-datepicker A11y tree Chrome */
+
+snapshots["sbb-datepicker A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "textbox",
+      "name": "DD.MM.YYYY"
+    },
+    {
+      "role": "button",
+      "name": "Previous day",
+      "disabled": true
+    },
+    {
+      "role": "button",
+      "name": "Next day",
+      "disabled": true
+    },
+    {
+      "role": "button",
+      "name": "Show calendar",
+      "haspopup": "dialog"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-datepicker A11y tree Firefox */
+
+snapshots["sbb-datepicker A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "textbox",
+      "name": "DD.MM.YYYY"
+    },
+    {
+      "role": "button",
+      "name": "Previous day",
+      "disabled": true
+    },
+    {
+      "role": "button",
+      "name": "Next day",
+      "disabled": true
+    },
+    {
+      "role": "button",
+      "name": "Show calendar",
+      "haspopup": "dialog"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-datepicker A11y tree Safari */
+
diff --git a/src/components/datepicker/datepicker/datepicker.spec.ts b/src/components/datepicker/datepicker/datepicker.spec.ts
index 4ee4819897e..21eecccf31b 100644
--- a/src/components/datepicker/datepicker/datepicker.spec.ts
+++ b/src/components/datepicker/datepicker/datepicker.spec.ts
@@ -3,6 +3,7 @@ import { html } from 'lit/static-html.js';
 
 import { NativeDateAdapter } from '../../core/datetime';
 import { findInput } from '../../core/dom';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 import type { SbbFormFieldElement } from '../../form-field';
 import type { SbbDatepickerNextDayElement, SbbDatepickerPreviousDayElement } from '../index';
 
@@ -14,6 +15,9 @@ import {
   findNextAvailableDate,
   isDateAvailable,
 } from './datepicker';
+import '../datepicker-next-day';
+import '../datepicker-previous-day';
+import '../datepicker-toggle';
 
 describe('sbb-datepicker', () => {
   it('renders', async () => {
@@ -22,6 +26,19 @@ describe('sbb-datepicker', () => {
     expect(root).dom.to.be.equal(`<sbb-datepicker></sbb-datepicker>`);
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(
+    undefined,
+    html`
+      <sbb-form-field>
+        <input />
+        <sbb-datepicker></sbb-datepicker>
+        <sbb-datepicker-previous-day></sbb-datepicker-previous-day>
+        <sbb-datepicker-next-day></sbb-datepicker-next-day>
+        <sbb-datepicker-toggle></sbb-datepicker-toggle>
+      </sbb-form-field>
+    `,
+  );
 });
 
 describe('getDatePicker', () => {
diff --git a/src/components/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/__snapshots__/dialog.spec.snap.js
index 47a26582569..4106207d37a 100644
--- a/src/components/dialog/__snapshots__/dialog.spec.snap.js
+++ b/src/components/dialog/__snapshots__/dialog.spec.snap.js
@@ -53,3 +53,33 @@ snapshots["sbb-dialog renders"] =
 `;
 /* end snapshot sbb-dialog renders */
 
+snapshots["sbb-dialog A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-dialog A11y tree Chrome */
+
+snapshots["sbb-dialog A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-dialog A11y tree Firefox */
+
+snapshots["sbb-dialog A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-dialog A11y tree Safari */
+
diff --git a/src/components/dialog/dialog.spec.ts b/src/components/dialog/dialog.spec.ts
index 065cecf7f4b..896b3c6d1c1 100644
--- a/src/components/dialog/dialog.spec.ts
+++ b/src/components/dialog/dialog.spec.ts
@@ -1,6 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
 import '.';
 
 describe('sbb-dialog', () => {
@@ -11,4 +13,6 @@ describe('sbb-dialog', () => {
 
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-dialog></sbb-dialog>`);
 });
diff --git a/src/components/divider/__snapshots__/divider.spec.snap.js b/src/components/divider/__snapshots__/divider.spec.snap.js
new file mode 100644
index 00000000000..d494526a59c
--- /dev/null
+++ b/src/components/divider/__snapshots__/divider.spec.snap.js
@@ -0,0 +1,33 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-divider A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-divider A11y tree Chrome */
+
+snapshots["sbb-divider A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-divider A11y tree Firefox */
+
+snapshots["sbb-divider A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-divider A11y tree Safari */
+
diff --git a/src/components/divider/divider.spec.ts b/src/components/divider/divider.spec.ts
index b7f10442653..ee40538ee7f 100644
--- a/src/components/divider/divider.spec.ts
+++ b/src/components/divider/divider.spec.ts
@@ -1,8 +1,10 @@
-import './divider';
-
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
+import './divider';
+
 describe('sbb-divider', () => {
   it('should render with default values', async () => {
     const element: Element = await fixture(html`<sbb-divider></sbb-divider>`);
@@ -31,4 +33,6 @@ describe('sbb-divider', () => {
     );
     expect(element).shadowDom.to.be.equal(`<div class='sbb-divider'></div>`);
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-divider></sbb-divider>`);
 });
diff --git a/src/components/expansion-panel/expansion-panel-content/__snapshots__/expansion-panel-content.spec.snap.js b/src/components/expansion-panel/expansion-panel-content/__snapshots__/expansion-panel-content.spec.snap.js
new file mode 100644
index 00000000000..49881a885ee
--- /dev/null
+++ b/src/components/expansion-panel/expansion-panel-content/__snapshots__/expansion-panel-content.spec.snap.js
@@ -0,0 +1,67 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-expansion-panel-content renders"] = 
+`<div class="sbb-expansion-panel-content">
+  <slot>
+  </slot>
+</div>
+`;
+/* end snapshot sbb-expansion-panel-content renders */
+
+snapshots["sbb-expansion-panel-content renders expanded"] = 
+`<div class="sbb-expansion-panel-content">
+  <slot>
+  </slot>
+</div>
+`;
+/* end snapshot sbb-expansion-panel-content renders expanded */
+
+snapshots["sbb-expansion-panel-content A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Content"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-expansion-panel-content A11y tree Chrome */
+
+snapshots["sbb-expansion-panel-content A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Content"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-expansion-panel-content A11y tree Firefox */
+
+snapshots["sbb-expansion-panel-content A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Content"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-expansion-panel-content A11y tree Safari */
+
diff --git a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.spec.ts b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.spec.ts
index ab40a795634..085c9791e84 100644
--- a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.spec.ts
+++ b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.spec.ts
@@ -1,5 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
 import './expansion-panel-content';
 
 describe('sbb-expansion-panel-content', () => {
@@ -15,13 +18,7 @@ describe('sbb-expansion-panel-content', () => {
         </sbb-expansion-panel-content>
       `,
     );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <div class="sbb-expansion-panel-content">
-          <slot></slot>
-        </div>
-      `,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders expanded', async () => {
@@ -36,12 +33,11 @@ describe('sbb-expansion-panel-content', () => {
         </sbb-expansion-panel-content>
       `,
     );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <div class="sbb-expansion-panel-content">
-          <slot></slot>
-        </div>
-      `,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(
+    undefined,
+    html`<sbb-expansion-panel-content>Content</sbb-expansion-panel-content>`,
+  );
 });
diff --git a/src/components/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.spec.snap.js b/src/components/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.spec.snap.js
index 9bec3a80bdd..3faa70d2203 100644
--- a/src/components/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.spec.snap.js
+++ b/src/components/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.spec.snap.js
@@ -80,3 +80,51 @@ snapshots["sbb-expansion-panel-header renders with slotted icon"] =
 `;
 /* end snapshot sbb-expansion-panel-header renders with slotted icon */
 
+snapshots["sbb-expansion-panel-header A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Header"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-expansion-panel-header A11y tree Chrome */
+
+snapshots["sbb-expansion-panel-header A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Header"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-expansion-panel-header A11y tree Firefox */
+
+snapshots["sbb-expansion-panel-header A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Header"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-expansion-panel-header A11y tree Safari */
+
diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.spec.ts b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.spec.ts
index 057cf524b8a..85568beb0b4 100644
--- a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.spec.ts
+++ b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 
 import './expansion-panel-header';
 
@@ -74,4 +75,9 @@ describe('sbb-expansion-panel-header', () => {
     );
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(
+    undefined,
+    html`<sbb-expansion-panel-header>Header</sbb-expansion-panel-header>`,
+  );
 });
diff --git a/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js b/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js
new file mode 100644
index 00000000000..0a075040704
--- /dev/null
+++ b/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js
@@ -0,0 +1,137 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-expansion-panel renders Dom"] = 
+`<sbb-expansion-panel>
+  <sbb-expansion-panel-header
+    aria-controls="sbb-expansion-panel-content-1"
+    aria-expanded="false"
+    data-slot-names="unnamed"
+    dir="ltr"
+    id="sbb-expansion-panel-header-1"
+    role="button"
+    slot="header"
+    tabindex="0"
+  >
+    Header
+  </sbb-expansion-panel-header>
+  <sbb-expansion-panel-content
+    aria-hidden="true"
+    aria-labelledby="sbb-expansion-panel-header-1"
+    id="sbb-expansion-panel-content-1"
+    role="region"
+    slot="content"
+  >
+    Content
+  </sbb-expansion-panel-content>
+</sbb-expansion-panel>
+`;
+/* end snapshot sbb-expansion-panel renders Dom */
+
+snapshots["sbb-expansion-panel renders ShadowDom"] = 
+`<div class="sbb-expansion-panel">
+  <div class="sbb-expansion-panel__header">
+    <slot name="header">
+    </slot>
+  </div>
+  <div class="sbb-expansion-panel__content-wrapper">
+    <span class="sbb-expansion-panel__content">
+      <slot name="content">
+      </slot>
+    </span>
+  </div>
+</div>
+`;
+/* end snapshot sbb-expansion-panel renders ShadowDom */
+
+snapshots["sbb-expansion-panel renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Header"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-expansion-panel renders A11y tree Chrome */
+
+snapshots["sbb-expansion-panel renders with level set Dom"] = 
+`<sbb-expansion-panel title-level="4">
+  <sbb-expansion-panel-header
+    aria-controls="sbb-expansion-panel-content-4"
+    aria-expanded="false"
+    data-slot-names="unnamed"
+    dir="ltr"
+    id="sbb-expansion-panel-header-4"
+    role="button"
+    slot="header"
+    tabindex="0"
+  >
+    Header
+  </sbb-expansion-panel-header>
+  <sbb-expansion-panel-content
+    aria-hidden="true"
+    aria-labelledby="sbb-expansion-panel-header-4"
+    id="sbb-expansion-panel-content-4"
+    role="region"
+    slot="content"
+  >
+    Content
+  </sbb-expansion-panel-content>
+</sbb-expansion-panel>
+`;
+/* end snapshot sbb-expansion-panel renders with level set Dom */
+
+snapshots["sbb-expansion-panel renders with level set ShadowDom"] = 
+`<div class="sbb-expansion-panel">
+  <h4 class="sbb-expansion-panel__header">
+    <slot name="header">
+    </slot>
+  </h4>
+  <div class="sbb-expansion-panel__content-wrapper">
+    <span class="sbb-expansion-panel__content">
+      <slot name="content">
+      </slot>
+    </span>
+  </div>
+</div>
+`;
+/* end snapshot sbb-expansion-panel renders with level set ShadowDom */
+
+snapshots["sbb-expansion-panel renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Header"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-expansion-panel renders A11y tree Firefox */
+
+snapshots["sbb-expansion-panel renders A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Header"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-expansion-panel renders A11y tree Safari */
+
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts
index 26259936414..6b0a611d70b 100644
--- a/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts
+++ b/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts
@@ -1,69 +1,55 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
+import type { SbbExpansionPanelElement } from './expansion-panel';
 import './expansion-panel';
+import '../expansion-panel-header';
+import '../expansion-panel-content';
 
 describe('sbb-expansion-panel', () => {
-  it('renders', async () => {
-    const root = await fixture(html`
-      <sbb-expansion-panel>
-        <sbb-expansion-panel-header>Header</sbb-expansion-panel-header>
-        <sbb-expansion-panel-content>Content</sbb-expansion-panel-content>
-      </sbb-expansion-panel>
-    `);
+  describe('renders', () => {
+    let element: SbbExpansionPanelElement;
 
-    expect(root).dom.to.be.equal(
-      `
+    beforeEach(async () => {
+      element = await fixture(html`
         <sbb-expansion-panel>
           <sbb-expansion-panel-header>Header</sbb-expansion-panel-header>
           <sbb-expansion-panel-content>Content</sbb-expansion-panel-content>
         </sbb-expansion-panel>
-      `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <div class="sbb-expansion-panel">
-          <div class="sbb-expansion-panel__header">
-            <slot name="header"></slot>
-          </div>
-          <div class="sbb-expansion-panel__content-wrapper">
-            <span class="sbb-expansion-panel__content">
-              <slot name="content"></slot>
-            </span>
-          </div>
-        </div>
-      `,
-    );
+      `);
+    });
+
+    it('Dom', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('ShadowDom', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 
-  it('renders with level set', async () => {
-    const root = await fixture(html`
-      <sbb-expansion-panel title-level="4">
-        <sbb-expansion-panel-header>Header</sbb-expansion-panel-header>
-        <sbb-expansion-panel-content>Content</sbb-expansion-panel-content>
-      </sbb-expansion-panel>
-    `);
+  describe('renders with level set', () => {
+    let element: SbbExpansionPanelElement;
 
-    expect(root).dom.to.be.equal(
-      `
+    beforeEach(async () => {
+      element = await fixture(html`
         <sbb-expansion-panel title-level="4">
           <sbb-expansion-panel-header>Header</sbb-expansion-panel-header>
           <sbb-expansion-panel-content>Content</sbb-expansion-panel-content>
         </sbb-expansion-panel>
-      `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <div class="sbb-expansion-panel">
-          <h4 class="sbb-expansion-panel__header">
-            <slot name="header"></slot>
-          </h4>
-          <div class="sbb-expansion-panel__content-wrapper">
-            <span class="sbb-expansion-panel__content">
-              <slot name="content"></slot>
-            </span>
-          </div>
-        </div>
-      `,
-    );
+      `);
+    });
+
+    it('Dom', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('ShadowDom', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
   });
 });
diff --git a/src/components/file-selector/__snapshots__/file-selector.spec.snap.js b/src/components/file-selector/__snapshots__/file-selector.spec.snap.js
index 352c4c6b84c..ace155dead5 100644
--- a/src/components/file-selector/__snapshots__/file-selector.spec.snap.js
+++ b/src/components/file-selector/__snapshots__/file-selector.spec.snap.js
@@ -84,3 +84,75 @@ snapshots["sbb-file-selector renders with dropzone area"] =
 `;
 /* end snapshot sbb-file-selector renders with dropzone area */
 
+snapshots["sbb-file-selector A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Choose a file"
+    },
+    {
+      "role": "button",
+      "name": "Choose a file",
+      "value": "No file chosen"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-file-selector A11y tree Chrome */
+
+snapshots["sbb-file-selector A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Choose a file"
+    },
+    {
+      "role": "group",
+      "name": "",
+      "children": [
+        {
+          "role": "button",
+          "name": "Browse…"
+        },
+        {
+          "role": "text leaf",
+          "name": "…"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-file-selector A11y tree Firefox */
+
+snapshots["sbb-file-selector A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Choose a file"
+    },
+    {
+      "role": "button",
+      "name": "Choose File",
+      "roledescription": "file upload button"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-file-selector A11y tree Safari */
+
diff --git a/src/components/file-selector/file-selector.spec.ts b/src/components/file-selector/file-selector.spec.ts
index 2b6634ff7bc..cfb89375a5b 100644
--- a/src/components/file-selector/file-selector.spec.ts
+++ b/src/components/file-selector/file-selector.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../core/testing';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
 
 import './file-selector';
 
@@ -27,4 +28,6 @@ describe('sbb-file-selector', () => {
     `);
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-file-selector></sbb-file-selector>`);
 });
diff --git a/src/components/footer/__snapshots__/footer.spec.snap.js b/src/components/footer/__snapshots__/footer.spec.snap.js
new file mode 100644
index 00000000000..44a5fec6d49
--- /dev/null
+++ b/src/components/footer/__snapshots__/footer.spec.snap.js
@@ -0,0 +1,67 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-footer renders"] = 
+`<footer class="sbb-footer">
+  <div class="sbb-footer-wrapper">
+    <h1 class="sbb-footer__title">
+      Footer
+    </h1>
+    <slot>
+    </slot>
+  </div>
+</footer>
+`;
+/* end snapshot sbb-footer renders */
+
+snapshots["sbb-footer A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Footer",
+      "level": 1
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-footer A11y tree Chrome */
+
+snapshots["sbb-footer A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Footer",
+      "level": 1
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-footer A11y tree Firefox */
+
+snapshots["sbb-footer A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Footer",
+      "level": 1
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-footer A11y tree Safari */
+
diff --git a/src/components/footer/footer.spec.ts b/src/components/footer/footer.spec.ts
index ae3bb7b853d..f5c1cd47863 100644
--- a/src/components/footer/footer.spec.ts
+++ b/src/components/footer/footer.spec.ts
@@ -1,6 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
 import type { SbbFooterElement } from './footer';
 
 import './footer';
@@ -16,15 +18,8 @@ describe('sbb-footer', () => {
         <sbb-footer accessibility-title="Footer" variant="default"></sbb-footer>
       `,
     );
-    expect(element).shadowDom.to.be.equal(
-      `
-            <footer class="sbb-footer">
-              <div class="sbb-footer-wrapper">
-                <h1 class="sbb-footer__title">Footer</h1>
-                <slot></slot>
-              </div>
-            </footer>
-          `,
-    );
+    await expect(element).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-footer accessibility-title="Footer"></sbb-footer>`);
 });
diff --git a/src/components/form-error/__snapshots__/form-error.spec.snap.js b/src/components/form-error/__snapshots__/form-error.spec.snap.js
new file mode 100644
index 00000000000..e4126a44bf3
--- /dev/null
+++ b/src/components/form-error/__snapshots__/form-error.spec.snap.js
@@ -0,0 +1,63 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-form-error renders"] = 
+`<span class="form-error__icon">
+  <slot name="icon">
+  </slot>
+</span>
+<span class="form-error-content">
+  <slot>
+  </slot>
+</span>
+`;
+/* end snapshot sbb-form-error renders */
+
+snapshots["sbb-form-error A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Required"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-form-error A11y tree Chrome */
+
+snapshots["sbb-form-error A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Required"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-form-error A11y tree Firefox */
+
+snapshots["sbb-form-error A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Required"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-form-error A11y tree Safari */
+
diff --git a/src/components/form-error/form-error.spec.ts b/src/components/form-error/form-error.spec.ts
index e6229a8af2e..12d74386905 100644
--- a/src/components/form-error/form-error.spec.ts
+++ b/src/components/form-error/form-error.spec.ts
@@ -1,5 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
 import './form-error';
 
 describe('sbb-form-error', () => {
@@ -11,27 +14,8 @@ describe('sbb-form-error', () => {
         Required
       </sbb-form-error>
     `);
-    expect(root).shadowDom.to.be.equal(`
-      <span class="form-error__icon">
-        <slot name='icon'>
-          <svg
-            class="form-error__icon-svg"
-            aria-hidden="true"
-            width="14"
-            height="14"
-            viewBox="0 0 14 14"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <line x1="7" y1="3" x2="7" y2="8.5" />
-            <line x1="7" y1="10" x2="7" y2="11" />
-            <circle cx="7" cy="7" r="6.5" />
-          </svg>
-        </slot>
-      </span>
-      <span class="form-error-content">
-        <slot></slot>
-      </span>
-    `);
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-form-error>Required</sbb-form-error>`);
 });
diff --git a/src/components/form-field/form-field-clear/__snapshots__/form-field-clear.spec.snap.js b/src/components/form-field/form-field-clear/__snapshots__/form-field-clear.spec.snap.js
new file mode 100644
index 00000000000..96e3de1e544
--- /dev/null
+++ b/src/components/form-field/form-field-clear/__snapshots__/form-field-clear.spec.snap.js
@@ -0,0 +1,173 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-form-field-clear renders Formfield Dom"] = 
+`<sbb-form-field
+  data-input-type="input"
+  data-slot-names="label suffix unnamed"
+  error-space="none"
+  label="Label"
+  size="m"
+  width="default"
+>
+  <label
+    data-creator="SBB-FORM-FIELD"
+    for="sbb-form-field-input-0"
+    slot="label"
+  >
+    Label
+  </label>
+  <input
+    id="sbb-form-field-input-0"
+    placeholder="Input placeholder"
+    type="text"
+    value="Input value"
+  >
+  <sbb-form-field-clear
+    aria-label="Clear input value"
+    dir="ltr"
+    role="button"
+    slot="suffix"
+    tabindex="0"
+  >
+  </sbb-form-field-clear>
+</sbb-form-field>
+`;
+/* end snapshot sbb-form-field-clear renders Formfield Dom */
+
+snapshots["sbb-form-field-clear renders Formfield ShadowDom"] = 
+`<div class="sbb-form-field__space-wrapper">
+  <div
+    class="sbb-form-field__wrapper"
+    id="overlay-anchor"
+  >
+    <slot name="prefix">
+    </slot>
+    <div class="sbb-form-field__input-container">
+      <span
+        aria-hidden="true"
+        class="sbb-form-field__label-spacer"
+      >
+      </span>
+      <span class="sbb-form-field__label">
+        <span class="sbb-form-field__label-ellipsis">
+          <slot name="label">
+          </slot>
+        </span>
+      </span>
+      <div class="sbb-form-field__input">
+        <slot>
+        </slot>
+      </div>
+    </div>
+    <slot name="suffix">
+    </slot>
+  </div>
+  <div class="sbb-form-field__error">
+    <slot name="error">
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot sbb-form-field-clear renders Formfield ShadowDom */
+
+snapshots["sbb-form-field-clear renders FormfieldClear ShadowDom"] = 
+`<span class="sbb-form-field-clear">
+  <sbb-icon
+    aria-hidden="true"
+    data-namespace="default"
+    name="cross-small"
+    role="img"
+  >
+  </sbb-icon>
+</span>
+`;
+/* end snapshot sbb-form-field-clear renders FormfieldClear ShadowDom */
+
+snapshots["sbb-form-field-clear renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "​"
+    },
+    {
+      "role": "text",
+      "name": "Label"
+    },
+    {
+      "role": "textbox",
+      "name": "Label",
+      "value": "Input value"
+    },
+    {
+      "role": "button",
+      "name": "Clear input value"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-form-field-clear renders A11y tree Chrome */
+
+snapshots["sbb-form-field-clear renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "statictext",
+      "name": "​"
+    },
+    {
+      "role": "text leaf",
+      "name": "Label"
+    },
+    {
+      "role": "textbox",
+      "name": "Label",
+      "value": "Input value"
+    },
+    {
+      "role": "button",
+      "name": "Clear input value"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-form-field-clear renders A11y tree Firefox */
+
+snapshots["sbb-form-field-clear renders A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "​"
+    },
+    {
+      "role": "text",
+      "name": "Label"
+    },
+    {
+      "role": "textbox",
+      "name": "Label",
+      "value": "Input value"
+    },
+    {
+      "role": "button",
+      "name": "Clear input value"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-form-field-clear renders A11y tree Safari */
+
diff --git a/src/components/form-field/form-field-clear/form-field-clear.spec.ts b/src/components/form-field/form-field-clear/form-field-clear.spec.ts
index 70784ce1c50..cdd15f940df 100644
--- a/src/components/form-field/form-field-clear/form-field-clear.spec.ts
+++ b/src/components/form-field/form-field-clear/form-field-clear.spec.ts
@@ -2,60 +2,41 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+import type { SbbFormFieldElement } from '../form-field';
 
+import type { SbbFormFieldClearElement } from './form-field-clear';
 import './form-field-clear';
 import '../form-field';
 
 describe('sbb-form-field-clear', () => {
-  it('renders', async () => {
-    const formField = await fixture(html`
-      <sbb-form-field label="Label">
-        <input type="text" placeholder="Input placeholder" value="Input value" />
-        <sbb-form-field-clear></sbb-form-field-clear>
-      </sbb-form-field>
-    `);
-    await waitForLitRender(formField);
-
-    const formFieldClear = formField.querySelector('sbb-form-field-clear');
-
-    expect(formField).dom.to.be.equal(`
-      <sbb-form-field error-space="none" label="Label" size="m" width="default" data-input-type="input" data-slot-names="label suffix unnamed">
-        <label data-creator="SBB-FORM-FIELD" slot="label" for="sbb-form-field-input-0">
-          Label
-        </label>
-        <input placeholder="Input placeholder" type="text" value="Input value" id="sbb-form-field-input-0">
-        <sbb-form-field-clear aria-label="Clear input value" dir="ltr" role="button" slot="suffix" tabindex="0">
-        </sbb-form-field-clear>
-      </sbb-form-field>
-    `);
-
-    expect(formField).shadowDom.to.be.equal(`
-      <div class="sbb-form-field__space-wrapper">
-        <div class="sbb-form-field__wrapper" id="overlay-anchor">
-          <slot name="prefix"></slot>
-          <div class="sbb-form-field__input-container">
-            <span aria-hidden="true" class="sbb-form-field__label-spacer"></span>
-            <span class="sbb-form-field__label">
-              <span class="sbb-form-field__label-ellipsis">
-                <slot name="label"></slot>
-              </span>
-            </span>
-            <div class="sbb-form-field__input">
-              <slot></slot>
-            </div>
-          </div>
-          <slot name="suffix"></slot>
-        </div>
-        <div class="sbb-form-field__error">
-          <slot name="error"></slot>
-        </div>
-      </div>
-    `);
-
-    expect(formFieldClear).shadowDom.to.be.equal(`
-      <span class="sbb-form-field-clear">
-        <sbb-icon name="cross-small" aria-hidden="true" data-namespace="default" role="img"></sbb-icon>
-      </span>
-    `);
+  describe('renders', () => {
+    let root: SbbFormFieldElement;
+    let element: SbbFormFieldClearElement;
+
+    beforeEach(async () => {
+      root = await fixture(html`
+        <sbb-form-field label="Label">
+          <input type="text" placeholder="Input placeholder" value="Input value" />
+          <sbb-form-field-clear></sbb-form-field-clear>
+        </sbb-form-field>
+      `);
+      element = root.querySelector('sbb-form-field-clear')!;
+      await waitForLitRender(root);
+    });
+
+    it('Formfield Dom', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
+
+    it('Formfield ShadowDom', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
+
+    it('FormfieldClear ShadowDom', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 });
diff --git a/src/components/form-field/form-field/__snapshots__/form-field.spec.snap.js b/src/components/form-field/form-field/__snapshots__/form-field.spec.snap.js
index b44ad795745..22ef9376a9c 100644
--- a/src/components/form-field/form-field/__snapshots__/form-field.spec.snap.js
+++ b/src/components/form-field/form-field/__snapshots__/form-field.spec.snap.js
@@ -236,3 +236,75 @@ snapshots["sbb-form-field renders select with optional flag and borderless"] =
 `;
 /* end snapshot sbb-form-field renders select with optional flag and borderless */
 
+snapshots["sbb-form-field A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "​"
+    },
+    {
+      "role": "text",
+      "name": "Fill input"
+    },
+    {
+      "role": "textbox",
+      "name": "Fill input"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-form-field A11y tree Chrome */
+
+snapshots["sbb-form-field A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "statictext",
+      "name": "​"
+    },
+    {
+      "role": "text leaf",
+      "name": "Fill input"
+    },
+    {
+      "role": "textbox",
+      "name": "Fill input"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-form-field A11y tree Firefox */
+
+snapshots["sbb-form-field A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "​"
+    },
+    {
+      "role": "text",
+      "name": "Fill input"
+    },
+    {
+      "role": "textbox",
+      "name": "Fill input"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-form-field A11y tree Safari */
+
diff --git a/src/components/form-field/form-field/form-field.spec.ts b/src/components/form-field/form-field/form-field.spec.ts
index 032f159b320..1bca75495f9 100644
--- a/src/components/form-field/form-field/form-field.spec.ts
+++ b/src/components/form-field/form-field/form-field.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 
 import './form-field';
 
@@ -158,4 +159,14 @@ describe('sbb-form-field', () => {
     `);
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(
+    undefined,
+    html`
+      <sbb-form-field>
+        <label slot="label">Fill input</label>
+        <input class="input" placeholder="This is an input" />
+      </sbb-form-field>
+    `,
+  );
 });
diff --git a/src/components/header/header/__snapshots__/header.spec.snap.js b/src/components/header/header/__snapshots__/header.spec.snap.js
new file mode 100644
index 00000000000..e0bb08b19b1
--- /dev/null
+++ b/src/components/header/header/__snapshots__/header.spec.snap.js
@@ -0,0 +1,85 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-header renders"] = 
+`<header class="sbb-header">
+  <div class="sbb-header__wrapper">
+    <slot>
+    </slot>
+    <div class="sbb-header__logo">
+      <slot name="logo">
+        <sbb-logo protective-room="none">
+        </sbb-logo>
+      </slot>
+    </div>
+  </div>
+</header>
+`;
+/* end snapshot sbb-header renders */
+
+snapshots["sbb-header renders actions and logo Dom"] = 
+`<sbb-header>
+  <sbb-header-action
+    href="https://github.com/lyne-design-system/lyne-components"
+    icon-name="hamburger-menu-small"
+    text="Menu"
+  >
+  </sbb-header-action>
+  <div slot="logo">
+    <circle
+      cx="25"
+      cy="75"
+      r="20"
+    >
+    </circle>
+  </div>
+</sbb-header>
+`;
+/* end snapshot sbb-header renders actions and logo Dom */
+
+snapshots["sbb-header renders actions and logo ShadowDom"] = 
+`<header class="sbb-header">
+  <div class="sbb-header__wrapper">
+    <slot>
+    </slot>
+    <div class="sbb-header__logo">
+      <slot name="logo">
+        <sbb-logo protective-room="none">
+        </sbb-logo>
+      </slot>
+    </div>
+  </div>
+</header>
+`;
+/* end snapshot sbb-header renders actions and logo ShadowDom */
+
+snapshots["sbb-header renders actions and logo A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-header renders actions and logo A11y tree Chrome */
+
+snapshots["sbb-header renders actions and logo A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-header renders actions and logo A11y tree Firefox */
+
+snapshots["sbb-header renders actions and logo A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-header renders actions and logo A11y tree Safari */
+
diff --git a/src/components/header/header/header.spec.ts b/src/components/header/header/header.spec.ts
index 45cbcc83165..0e132c56d0c 100644
--- a/src/components/header/header/header.spec.ts
+++ b/src/components/header/header/header.spec.ts
@@ -1,69 +1,47 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
+import type { SbbHeaderElement } from './header';
 import './header';
 
 describe('sbb-header', () => {
   it('renders', async () => {
     const root = await fixture(html`<sbb-header></sbb-header>`);
 
-    expect(root).dom.to.be.equal(
-      `
-      <sbb-header></sbb-header>
-    `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-          <header class="sbb-header">
-            <div class="sbb-header__wrapper">
-              <slot></slot>
-              <div class="sbb-header__logo">
-                <slot name="logo">
-                  <sbb-logo protective-room="none"></sbb-logo>
-                </slot>
-              </div>
-            </div>
-          </header>
-        `,
-    );
+    expect(root).dom.to.be.equal(`<sbb-header></sbb-header>`);
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
-  it('renders actions and logo', async () => {
-    const root = await fixture(html`
-      <sbb-header>
-        <sbb-header-action
-          icon-name="hamburger-menu-small"
-          href="https://github.com/lyne-design-system/lyne-components"
-          text="Menu"
-        ></sbb-header-action>
-        <div slot="logo">
-          <circle cx="25" cy="75" r="20"></circle>
-        </div>
-      </sbb-header>
-    `);
+  describe('renders actions and logo', () => {
+    let element: SbbHeaderElement;
+
+    beforeEach(async () => {
+      element = await fixture(html`
+        <sbb-header>
+          <sbb-header-action
+            icon-name="hamburger-menu-small"
+            href="https://github.com/lyne-design-system/lyne-components"
+            text="Menu"
+          ></sbb-header-action>
+          <div slot="logo">
+            <circle cx="25" cy="75" r="20"></circle>
+          </div>
+        </sbb-header>
+      `);
+      await waitForLitRender(element);
+    });
+
+    it('Dom', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('ShadowDom', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
 
-    expect(root).dom.to.be.equal(
-      `
-      <sbb-header>
-        <sbb-header-action icon-name="hamburger-menu-small" href="https://github.com/lyne-design-system/lyne-components" text="Menu"></sbb-header-action>
-        <div slot="logo">
-          <circle cx="25" cy="75" r="20"></circle>
-        </div>
-      </sbb-header>
-    `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-          <header class="sbb-header">
-            <div class="sbb-header__wrapper">
-              <slot></slot>
-              <div class="sbb-header__logo">
-                <slot name="logo">
-                  <sbb-logo protective-room="none"></sbb-logo>
-                </slot>
-              </div>
-            </div>
-          </header>
-        `,
-    );
+    testA11yTreeSnapshot();
   });
 });
diff --git a/src/components/icon/__snapshots__/icon.spec.snap.js b/src/components/icon/__snapshots__/icon.spec.snap.js
index 9f337a98d23..ea3fa061013 100644
--- a/src/components/icon/__snapshots__/icon.spec.snap.js
+++ b/src/components/icon/__snapshots__/icon.spec.snap.js
@@ -52,3 +52,33 @@ snapshots["sbb-icon registers a custom namespace"] =
 `;
 /* end snapshot sbb-icon registers a custom namespace */
 
+snapshots["sbb-icon A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-icon A11y tree Chrome */
+
+snapshots["sbb-icon A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-icon A11y tree Firefox */
+
+snapshots["sbb-icon A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-icon A11y tree Safari */
+
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index 4dbade117e6..757274ef59c 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -4,6 +4,7 @@ import { html } from 'lit/static-html.js';
 import type { SbbIconConfig } from '../core/config';
 import { readConfig } from '../core/config';
 import { waitForLitRender } from '../core/testing';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
 
 import type { SbbIconElement } from './icon';
 
@@ -120,4 +121,6 @@ describe('sbb-icon', () => {
     // Reset icon config
     delete (globalThis as any).sbbConfig.icon; // FIXME any type
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-icon name="app-icon-medium"></sbb-icon>`);
 });
diff --git a/src/components/journey-header/__snapshots__/journey-header.spec.snap.js b/src/components/journey-header/__snapshots__/journey-header.spec.snap.js
new file mode 100644
index 00000000000..c7f96304ed7
--- /dev/null
+++ b/src/components/journey-header/__snapshots__/journey-header.spec.snap.js
@@ -0,0 +1,155 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-journey-header renders"] = 
+`<sbb-title
+  aria-level="3"
+  level="3"
+  role="heading"
+  visual-level="5"
+>
+  <span
+    class="sbb-journey-header"
+    dir="ltr"
+  >
+    <span class="sbb-journey-header__origin">
+      <span class="sbb-journey-header__connection--visually-hidden">
+        Connection from
+      </span>
+      A
+    </span>
+    <sbb-icon
+      aria-hidden="true"
+      data-namespace="default"
+      name="arrow-long-right-small"
+      role="img"
+    >
+    </sbb-icon>
+    <span class="sbb-journey-header__destination">
+      <span class="sbb-journey-header__connection--visually-hidden">
+        to
+      </span>
+      B
+    </span>
+  </span>
+</sbb-title>
+`;
+/* end snapshot sbb-journey-header renders */
+
+snapshots["sbb-journey-header renders H1 L-sized round-trip negative"] = 
+`<sbb-title
+  aria-level="1"
+  level="1"
+  negative=""
+  role="heading"
+  visual-level="4"
+>
+  <span
+    class="sbb-journey-header"
+    dir="ltr"
+  >
+    <span class="sbb-journey-header__origin">
+      <span class="sbb-journey-header__connection--visually-hidden">
+        Connection from
+      </span>
+      B
+    </span>
+    <sbb-icon
+      aria-hidden="true"
+      data-namespace="default"
+      name="arrows-long-right-left-small"
+      role="img"
+    >
+    </sbb-icon>
+    <span class="sbb-journey-header__destination">
+      <span class="sbb-journey-header__connection--visually-hidden">
+        to
+      </span>
+      C
+      <span class="sbb-journey-header__connection--visually-hidden">
+        and back to B.
+      </span>
+    </span>
+  </span>
+</sbb-title>
+`;
+/* end snapshot sbb-journey-header renders H1 L-sized round-trip negative */
+
+snapshots["sbb-journey-header A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Connection from  B  to  C and back to B.",
+      "level": 1
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-journey-header A11y tree Chrome */
+
+snapshots["sbb-journey-header A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Connection from  B  to  C and back to B.",
+      "level": 1
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-journey-header A11y tree Firefox */
+
+snapshots["sbb-journey-header A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Connection from"
+    },
+    {
+      "role": "text",
+      "name": " "
+    },
+    {
+      "role": "text",
+      "name": "B"
+    },
+    {
+      "role": "text",
+      "name": " "
+    },
+    {
+      "role": "text",
+      "name": "to"
+    },
+    {
+      "role": "text",
+      "name": " "
+    },
+    {
+      "role": "text",
+      "name": "C"
+    },
+    {
+      "role": "text",
+      "name": "and back to B."
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-journey-header A11y tree Safari */
+
diff --git a/src/components/journey-header/journey-header.spec.ts b/src/components/journey-header/journey-header.spec.ts
index e8bf6511cb9..ee95808be3d 100644
--- a/src/components/journey-header/journey-header.spec.ts
+++ b/src/components/journey-header/journey-header.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../core/testing';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
 
 import './journey-header';
 
@@ -17,25 +18,7 @@ describe('sbb-journey-header', () => {
       <sbb-journey-header origin="A" destination="B" size="m">
       </sbb-journey-header>
     `);
-    expect(root).shadowDom.to.be.equal(`
-      <sbb-title role="heading" level="3" visual-level="5" aria-level="3">
-        <span class="sbb-journey-header" dir="ltr">
-          <span class="sbb-journey-header__origin">
-            <span class="sbb-journey-header__connection--visually-hidden">
-              Connection from
-            </span>
-            A
-          </span>
-          <sbb-icon name="arrow-long-right-small" aria-hidden="true" data-namespace="default" role="img"></sbb-icon>
-          <span class="sbb-journey-header__destination">
-            <span class="sbb-journey-header__connection--visually-hidden">
-              to
-            </span>
-            B
-          </span>
-        </span>
-      </sbb-title>
-    `);
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders H1 L-sized round-trip negative', async () => {
@@ -56,27 +39,18 @@ describe('sbb-journey-header', () => {
       <sbb-journey-header level="1" size="l" round-trip="" origin="B" destination="C" negative>
       </sbb-journey-header>
     `);
-    expect(root).shadowDom.to.be.equal(`
-      <sbb-title level="1" aria-level="1" visual-level="4" role="heading" negative>
-        <span class="sbb-journey-header" dir="ltr">
-          <span class="sbb-journey-header__origin">
-            <span class="sbb-journey-header__connection--visually-hidden">
-              Connection from
-            </span>
-            B
-          </span>
-          <sbb-icon name="arrows-long-right-left-small" aria-hidden="true" data-namespace="default" role="img"></sbb-icon>
-          <span class="sbb-journey-header__destination">
-            <span class="sbb-journey-header__connection--visually-hidden">
-              to
-            </span>
-            C
-            <span class="sbb-journey-header__connection--visually-hidden">
-              and back to B.
-            </span>
-          </span>
-        </span>
-      </sbb-title>
-    `);
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(
+    undefined,
+    html`<sbb-journey-header
+      level="1"
+      size="l"
+      round-trip
+      origin="B"
+      destination="C"
+      negative
+    ></sbb-journey-header>`,
+  );
 });
diff --git a/src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js b/src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js
new file mode 100644
index 00000000000..53e39e9fe6c
--- /dev/null
+++ b/src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js
@@ -0,0 +1,128 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-journey-summary renders"] = 
+`<div class="sbb-journey-summary">
+  <div>
+    <div class="sbb-journey-summary__via-block">
+      <span class="sbb-journey-summary__via-text">
+        Via
+      </span>
+      <ul
+        class="sbb-journey-summary__vias"
+        role="presentation"
+      >
+        <li class="sbb-journey-summary__via">
+          via
+        </li>
+      </ul>
+    </div>
+    <div class="sbb-journey-summary__date">
+      <time datetime="29 8">
+        Mo. 29.08.2022
+      </time>
+      ,
+      <time>
+        <span class="sbb-screenreaderonly">
+          Travel time 1 Hour
+        </span>
+        <span aria-hidden="true">
+          1 h
+        </span>
+      </time>
+    </div>
+    <sbb-pearl-chain-time data-now="1661806800000">
+    </sbb-pearl-chain-time>
+  </div>
+</div>
+`;
+/* end snapshot sbb-journey-summary renders */
+
+snapshots["sbb-journey-summary renders without vias"] = 
+`<div class="sbb-journey-summary">
+  <div>
+    <div class="sbb-journey-summary__date">
+      <time datetime="29 8">
+        Mo. 29.08.2022
+      </time>
+      ,
+      <time>
+        <span class="sbb-screenreaderonly">
+          Travel time 1 Hour 40 Minutes
+        </span>
+        <span aria-hidden="true">
+          1 h 40 min
+        </span>
+      </time>
+    </div>
+    <sbb-pearl-chain-time data-now="1661806800000">
+    </sbb-pearl-chain-time>
+  </div>
+</div>
+`;
+/* end snapshot sbb-journey-summary renders without vias */
+
+snapshots["sbb-journey-summary renders with second journey"] = 
+`<div class="sbb-journey-summary">
+  <div>
+    <div class="sbb-journey-summary__date">
+      <time datetime="29 8">
+        Mo. 29.08.2022
+      </time>
+      ,
+      <time>
+        <span class="sbb-screenreaderonly">
+          Travel time 1 Hour 40 Minutes
+        </span>
+        <span aria-hidden="true">
+          1 h 40 min
+        </span>
+      </time>
+    </div>
+    <sbb-pearl-chain-time data-now="1661806800000">
+    </sbb-pearl-chain-time>
+  </div>
+  <div>
+    <sbb-divider
+      aria-orientation="horizontal"
+      class="sbb-journey-summary__divider"
+      orientation="horizontal"
+      role="separator"
+    >
+    </sbb-divider>
+    <div>
+      <div class="sbb-journey-summary__via-block">
+        <span class="sbb-journey-summary__via-text">
+          Via
+        </span>
+        <ul
+          class="sbb-journey-summary__vias"
+          role="presentation"
+        >
+          <li class="sbb-journey-summary__via">
+            via
+          </li>
+        </ul>
+      </div>
+      <div class="sbb-journey-summary__date">
+        <time datetime="29 8">
+          Mo. 29.08.2022
+        </time>
+        ,
+        <time>
+          <span class="sbb-screenreaderonly">
+            Travel time 1 Hour
+          </span>
+          <span aria-hidden="true">
+            1 h
+          </span>
+        </time>
+      </div>
+      <sbb-pearl-chain-time data-now="1661806800000">
+      </sbb-pearl-chain-time>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot sbb-journey-summary renders with second journey */
+
diff --git a/src/components/journey-summary/journey-summary.spec.ts b/src/components/journey-summary/journey-summary.spec.ts
index b7fdf73d864..f90a8171c0e 100644
--- a/src/components/journey-summary/journey-summary.spec.ts
+++ b/src/components/journey-summary/journey-summary.spec.ts
@@ -48,37 +48,7 @@ describe('sbb-journey-summary', () => {
     expect(root).dom.to.be.equal(`
       <sbb-journey-summary data-now="1661806800000">
       </sbb-journey-summary>`);
-    expect(root).shadowDom.to.be.equal(`
-      <div class="sbb-journey-summary">
-        <div>
-          <div class="sbb-journey-summary__via-block">
-            <span class="sbb-journey-summary__via-text">
-              Via
-            </span>
-            <ul class="sbb-journey-summary__vias" role="presentation">
-              <li class="sbb-journey-summary__via">
-                via
-              </li>
-            </ul>
-          </div>
-          <div class="sbb-journey-summary__date">
-            <time datetime="29 8">
-              Mo. 29.08.2022
-            </time>
-            ,
-            <time>
-              <span class="sbb-screenreaderonly">
-                Travel time 1 Hour
-              </span>
-              <span aria-hidden="true">
-                1 h
-              </span>
-            </time>
-          </div>
-          <sbb-pearl-chain-time data-now="1661806800000"></sbb-pearl-chain-time>
-        </div>
-      </div>
-    `);
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders without vias', async () => {
@@ -92,27 +62,7 @@ describe('sbb-journey-summary', () => {
     expect(root).dom.to.be.equal(`
       <sbb-journey-summary data-now="1661806800000">
       </sbb-journey-summary>`);
-    expect(root).shadowDom.to.be.equal(`
-      <div class="sbb-journey-summary">
-        <div>
-          <div class="sbb-journey-summary__date">
-            <time datetime="29 8">
-              Mo. 29.08.2022
-            </time>
-            ,
-            <time>
-              <span class="sbb-screenreaderonly">
-                Travel time 1 Hour 40 Minutes
-              </span>
-              <span aria-hidden="true">
-                1 h 40 min
-              </span>
-            </time>
-          </div>
-          <sbb-pearl-chain-time data-now="1661806800000"></sbb-pearl-chain-time>
-        </div>
-      </div>
-    `);
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders with second journey', async () => {
@@ -128,56 +78,6 @@ describe('sbb-journey-summary', () => {
     expect(root).dom.to.be.equal(`
       <sbb-journey-summary data-now="1661806800000">
       </sbb-journey-summary>`);
-    expect(root).shadowDom.to.be.equal(`
-      <div class="sbb-journey-summary">
-        <div>
-          <div class="sbb-journey-summary__date">
-            <time datetime="29 8">
-              Mo. 29.08.2022
-            </time>
-            ,
-            <time>
-              <span class="sbb-screenreaderonly">
-                Travel time 1 Hour 40 Minutes
-              </span>
-              <span aria-hidden="true">
-                1 h 40 min
-              </span>
-            </time>
-          </div>
-          <sbb-pearl-chain-time data-now="1661806800000"></sbb-pearl-chain-time>
-        </div>
-        <div>
-          <sbb-divider class="sbb-journey-summary__divider" role="separator" orientation="horizontal" aria-orientation="horizontal"></sbb-divider>
-          <div>
-            <div class="sbb-journey-summary__via-block">
-              <span class="sbb-journey-summary__via-text">
-                Via
-              </span>
-              <ul class="sbb-journey-summary__vias" role="presentation">
-                <li class="sbb-journey-summary__via">
-                  via
-                </li>
-              </ul>
-            </div>
-            <div class="sbb-journey-summary__date">
-              <time datetime="29 8">
-                Mo. 29.08.2022
-              </time>
-              ,
-              <time>
-                <span class="sbb-screenreaderonly">
-                  Travel time 1 Hour
-                </span>
-                <span aria-hidden="true">
-                  1 h
-                </span>
-              </time>
-            </div>
-            <sbb-pearl-chain-time data-now="1661806800000"></sbb-pearl-chain-time>
-          </div>
-        </div>
-      </div>
-    `);
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 });
diff --git a/src/components/link-list/__snapshots__/link-list.spec.snap.js b/src/components/link-list/__snapshots__/link-list.spec.snap.js
index d53482db5d8..d214b69ed22 100644
--- a/src/components/link-list/__snapshots__/link-list.spec.snap.js
+++ b/src/components/link-list/__snapshots__/link-list.spec.snap.js
@@ -394,3 +394,33 @@ snapshots["sbb-link-list rendered without a title in shadow DOM"] =
 `;
 /* end snapshot sbb-link-list rendered without a title in shadow DOM */
 
+snapshots["sbb-link-list rendered with a slotted title A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-link-list rendered with a slotted title A11y tree Chrome */
+
+snapshots["sbb-link-list rendered with a slotted title A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-link-list rendered with a slotted title A11y tree Firefox */
+
+snapshots["sbb-link-list rendered with a slotted title A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-link-list rendered with a slotted title A11y tree Safari */
+
diff --git a/src/components/link-list/link-list.spec.ts b/src/components/link-list/link-list.spec.ts
index 38dc3146f9d..5a6a03c58c3 100644
--- a/src/components/link-list/link-list.spec.ts
+++ b/src/components/link-list/link-list.spec.ts
@@ -1,6 +1,7 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
 import type { SbbLinkElement } from '../link';
 
 import type { SbbLinkListElement } from './link-list';
@@ -51,6 +52,8 @@ describe('sbb-link-list', () => {
     it('in shadow DOM', async () => {
       await expect(element).shadowDom.to.equalSnapshot();
     });
+
+    testA11yTreeSnapshot();
   });
 
   describe('rendered with a title from properties', () => {
diff --git a/src/components/loading-indicator/__snapshots__/loading-indicator.spec.snap.js b/src/components/loading-indicator/__snapshots__/loading-indicator.spec.snap.js
new file mode 100644
index 00000000000..b1a7c69a845
--- /dev/null
+++ b/src/components/loading-indicator/__snapshots__/loading-indicator.spec.snap.js
@@ -0,0 +1,123 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-loading-indicator renders with variant `window`"] = 
+`<span class="sbb-loading-indicator">
+  <span class="sbb-loading-indicator__animated-element">
+    <span>
+      <span>
+        <span>
+        </span>
+        <span>
+        </span>
+        <span>
+        </span>
+        <span>
+        </span>
+        <span>
+        </span>
+      </span>
+    </span>
+  </span>
+</span>
+`;
+/* end snapshot sbb-loading-indicator renders with variant `window` */
+
+snapshots["sbb-loading-indicator renders with variant `window` and color smoke"] = 
+`<span class="sbb-loading-indicator">
+  <span class="sbb-loading-indicator__animated-element">
+    <span>
+      <span>
+        <span>
+        </span>
+        <span>
+        </span>
+        <span>
+        </span>
+        <span>
+        </span>
+        <span>
+        </span>
+      </span>
+    </span>
+  </span>
+</span>
+`;
+/* end snapshot sbb-loading-indicator renders with variant `window` and color smoke */
+
+snapshots["sbb-loading-indicator renders with variant `window` and color white"] = 
+`<span class="sbb-loading-indicator">
+  <span class="sbb-loading-indicator__animated-element">
+    <span>
+      <span>
+        <span>
+        </span>
+        <span>
+        </span>
+        <span>
+        </span>
+        <span>
+        </span>
+        <span>
+        </span>
+      </span>
+    </span>
+  </span>
+</span>
+`;
+/* end snapshot sbb-loading-indicator renders with variant `window` and color white */
+
+snapshots["sbb-loading-indicator renders with variant `circle`"] = 
+`<span class="sbb-loading-indicator">
+  <span class="sbb-loading-indicator__animated-element">
+  </span>
+</span>
+`;
+/* end snapshot sbb-loading-indicator renders with variant `circle` */
+
+snapshots["sbb-loading-indicator renders with variant `circle` and color smoke"] = 
+`<span class="sbb-loading-indicator">
+  <span class="sbb-loading-indicator__animated-element">
+  </span>
+</span>
+`;
+/* end snapshot sbb-loading-indicator renders with variant `circle` and color smoke */
+
+snapshots["sbb-loading-indicator renders with variant `circle` and color white"] = 
+`<span class="sbb-loading-indicator">
+  <span class="sbb-loading-indicator__animated-element">
+  </span>
+</span>
+`;
+/* end snapshot sbb-loading-indicator renders with variant `circle` and color white */
+
+snapshots["sbb-loading-indicator A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-loading-indicator A11y tree Chrome */
+
+snapshots["sbb-loading-indicator A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-loading-indicator A11y tree Firefox */
+
+snapshots["sbb-loading-indicator A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-loading-indicator A11y tree Safari */
+
diff --git a/src/components/loading-indicator/loading-indicator.spec.ts b/src/components/loading-indicator/loading-indicator.spec.ts
index 4c2377053d4..7bb274b64f5 100644
--- a/src/components/loading-indicator/loading-indicator.spec.ts
+++ b/src/components/loading-indicator/loading-indicator.spec.ts
@@ -1,5 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
 import './loading-indicator';
 
 describe('sbb-loading-indicator', () => {
@@ -14,23 +17,7 @@ describe('sbb-loading-indicator', () => {
         </sbb-loading-indicator>
       `,
     );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <span class="sbb-loading-indicator">
-          <span class="sbb-loading-indicator__animated-element">
-            <span>
-              <span>
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-              </span>
-            </span>
-          </span>
-        </span>
-      `,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders with variant `window` and color smoke', async () => {
@@ -41,27 +28,10 @@ describe('sbb-loading-indicator', () => {
     expect(root).dom.to.be.equal(
       `
       <sbb-loading-indicator variant="window" size="m" color="smoke" role="progressbar" aria-busy='true'>
-        
       </sbb-loading-indicator>
     `,
     );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <span class="sbb-loading-indicator">
-          <span class="sbb-loading-indicator__animated-element">
-            <span>
-              <span>
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-              </span>
-            </span>
-          </span>
-        </span>
-      `,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders with variant `window` and color white', async () => {
@@ -75,23 +45,7 @@ describe('sbb-loading-indicator', () => {
         </sbb-loading-indicator>
       `,
     );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <span class="sbb-loading-indicator">
-          <span class="sbb-loading-indicator__animated-element">
-            <span>
-              <span>
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-              </span>
-            </span>
-          </span>
-        </span>
-      `,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders with variant `circle`', async () => {
@@ -105,13 +59,7 @@ describe('sbb-loading-indicator', () => {
         </sbb-loading-indicator>
       `,
     );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <span class="sbb-loading-indicator">
-          <span class="sbb-loading-indicator__animated-element"></span>
-        </span>
-      `,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders with variant `circle` and color smoke', async () => {
@@ -125,13 +73,7 @@ describe('sbb-loading-indicator', () => {
         </sbb-loading-indicator>
       `,
     );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <span class="sbb-loading-indicator">
-          <span class="sbb-loading-indicator__animated-element"></span>
-        </span>
-      `,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders with variant `circle` and color white', async () => {
@@ -145,12 +87,11 @@ describe('sbb-loading-indicator', () => {
         </sbb-loading-indicator>
       `,
     );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <span class="sbb-loading-indicator">
-          <span class="sbb-loading-indicator__animated-element"></span>
-        </span>
-      `,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(
+    undefined,
+    html`<sbb-loading-indicator variant="window" size="m"></sbb-loading-indicator>`,
+  );
 });
diff --git a/src/components/map-container/__snapshots__/map-container.spec.snap.js b/src/components/map-container/__snapshots__/map-container.spec.snap.js
new file mode 100644
index 00000000000..a1c0d1fc8cf
--- /dev/null
+++ b/src/components/map-container/__snapshots__/map-container.spec.snap.js
@@ -0,0 +1,77 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-map-container renders the container with button"] = 
+`<div class="sbb-map-container">
+  <div class="sbb-map-container__sidebar">
+    <span>
+    </span>
+    <slot>
+    </slot>
+    <sbb-button
+      class="sbb-map-container__sidebar-button"
+      data-slot-names="unnamed"
+      dir="ltr"
+      icon-name="location-pin-map-small"
+      inert=""
+      role="button"
+      size="l"
+      tabindex="0"
+      type="button"
+      variant="tertiary"
+    >
+      Show map
+    </sbb-button>
+  </div>
+  <div class="sbb-map-container__map">
+    <slot name="map">
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot sbb-map-container renders the container with button */
+
+snapshots["sbb-map-container renders the container without button"] = 
+`<div class="sbb-map-container">
+  <div class="sbb-map-container__sidebar">
+    <slot>
+    </slot>
+  </div>
+  <div class="sbb-map-container__map">
+    <slot name="map">
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot sbb-map-container renders the container without button */
+
+snapshots["sbb-map-container A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-map-container A11y tree Chrome */
+
+snapshots["sbb-map-container A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-map-container A11y tree Firefox */
+
+snapshots["sbb-map-container A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-map-container A11y tree Safari */
+
diff --git a/src/components/map-container/map-container.spec.ts b/src/components/map-container/map-container.spec.ts
index de6d347c0c3..c71ae7e94a0 100644
--- a/src/components/map-container/map-container.spec.ts
+++ b/src/components/map-container/map-container.spec.ts
@@ -1,6 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
 import type { SbbMapContainerElement } from './map-container';
 import '.';
 
@@ -16,32 +18,9 @@ describe('sbb-map-container', () => {
         </sbb-map-container>
       `,
     );
-    expect(element).shadowDom.to.be.equal(
-      `
-        <div class="sbb-map-container">
-          <div class="sbb-map-container__sidebar">
-            <span></span>
-            <slot></slot>
-            <sbb-button
-              dir="ltr"
-              class="sbb-map-container__sidebar-button"
-              variant="tertiary"
-              inert
-              role="button"
-              size="l"
-              tabindex="0"
-              icon-name="location-pin-map-small"
-              type="button"
-              data-slot-names="unnamed"
-            >Show map</sbb-button>
-          </div>
-          <div class="sbb-map-container__map">
-            <slot name="map"></slot>
-          </div>
-        </div>
-      `,
-    );
+    await expect(element).shadowDom.to.be.equalSnapshot();
   });
+
   it('renders the container without button', async () => {
     element = await fixture(html`<sbb-map-container hide-scroll-up-button></sbb-map-container>`);
 
@@ -51,17 +30,11 @@ describe('sbb-map-container', () => {
         </sbb-map-container>
       `,
     );
-    expect(element).shadowDom.to.be.equal(
-      `
-        <div class="sbb-map-container">
-          <div class="sbb-map-container__sidebar">
-            <slot></slot>
-          </div>
-          <div class="sbb-map-container__map">
-            <slot name="map"></slot>
-          </div>
-        </div>
-      `,
-    );
+    await expect(element).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(
+    undefined,
+    html`<sbb-map-container hide-scroll-up-button></sbb-map-container>`,
+  );
 });
diff --git a/src/components/message/__snapshots__/message.spec.snap.js b/src/components/message/__snapshots__/message.spec.snap.js
new file mode 100644
index 00000000000..95784b127a2
--- /dev/null
+++ b/src/components/message/__snapshots__/message.spec.snap.js
@@ -0,0 +1,163 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-message renders without optional slots"] = 
+`<div class="sbb-message__container">
+  <slot name="image">
+  </slot>
+  <sbb-title
+    aria-level="3"
+    class="sbb-message__title"
+    level="3"
+    role="heading"
+    visual-level="5"
+  >
+    <slot name="title">
+      Title.
+    </slot>
+  </sbb-title>
+  <slot name="subtitle">
+  </slot>
+  <slot name="legend">
+  </slot>
+  <slot name="action">
+  </slot>
+</div>
+`;
+/* end snapshot sbb-message renders without optional slots */
+
+snapshots["sbb-message renders Dom"] = 
+`<sbb-message title-content="Title.">
+  <sbb-image slot="image">
+  </sbb-image>
+  <p slot="subtitle">
+    Subtitle.
+  </p>
+  <p slot="legend">
+    Error code: 0001
+  </p>
+  <sbb-button
+    dir="ltr"
+    icon-name="arrows-circle-small"
+    role="button"
+    size="l"
+    slot="action"
+    tabindex="0"
+    variant="primary"
+  >
+  </sbb-button>
+</sbb-message>
+`;
+/* end snapshot sbb-message renders Dom */
+
+snapshots["sbb-message renders ShadowDom"] = 
+`<div class="sbb-message__container">
+  <slot name="image">
+  </slot>
+  <sbb-title
+    aria-level="3"
+    class="sbb-message__title"
+    level="3"
+    role="heading"
+    visual-level="5"
+  >
+    <slot name="title">
+      Title.
+    </slot>
+  </sbb-title>
+  <slot name="subtitle">
+  </slot>
+  <slot name="legend">
+  </slot>
+  <slot name="action">
+  </slot>
+</div>
+`;
+/* end snapshot sbb-message renders ShadowDom */
+
+snapshots["sbb-message renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Title.",
+      "level": 3
+    },
+    {
+      "role": "text",
+      "name": "Subtitle."
+    },
+    {
+      "role": "text",
+      "name": "Error code: 0001"
+    },
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-message renders A11y tree Chrome */
+
+snapshots["sbb-message renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Title.",
+      "level": 3
+    },
+    {
+      "role": "text leaf",
+      "name": "Subtitle."
+    },
+    {
+      "role": "text leaf",
+      "name": "Error code: 0001"
+    },
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-message renders A11y tree Firefox */
+
+snapshots["sbb-message renders A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Title."
+    },
+    {
+      "role": "text",
+      "name": "Subtitle."
+    },
+    {
+      "role": "text",
+      "name": "Error code: 0001"
+    },
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-message renders A11y tree Safari */
+
diff --git a/src/components/message/message.spec.ts b/src/components/message/message.spec.ts
index 6d31c867c96..ac4e3311dd9 100644
--- a/src/components/message/message.spec.ts
+++ b/src/components/message/message.spec.ts
@@ -1,48 +1,37 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
-import '.';
 
-describe('sbb-message', () => {
-  it('renders', async () => {
-    const root = await fixture(
-      html` <sbb-message title-content="Title.">
-        <sbb-image slot="image"></sbb-image>
-        <p slot="subtitle">Subtitle.</p>
-        <p slot="legend">Error code: 0001</p>
-        <sbb-button slot="action" icon-name="arrows-circle-small"></sbb-button>
-      </sbb-message>`,
-    );
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-message title-content="Title.">
+import type { SbbMessageElement } from './message';
+import './message';
+import '../image';
+import '../button';
+
+describe('sbb-message', () => {
+  describe('renders', () => {
+    let root: SbbMessageElement;
 
+    beforeEach(async () => {
+      root = await fixture(
+        html` <sbb-message title-content="Title.">
           <sbb-image slot="image"></sbb-image>
-          <p slot="subtitle">
-            Subtitle.
-          </p>
-          <p slot="legend">
-            Error code: 0001
-          </p>
-          <sbb-button icon-name="arrows-circle-small" slot="action"></sbb-button>
-        </sbb-message>
-      `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <div class="sbb-message__container">
-          <slot name="image"></slot>
-          <sbb-title level="3" visual-level="5" class="sbb-message__title" aria-level="3" role="heading">
-            <slot name="title">
-              Title.
-            </slot>
-          </sbb-title>
-          <slot name="subtitle"></slot>
-          <slot name="legend"></slot>
-          <slot name="action"></slot>
-        </div>
-      `,
-    );
+          <p slot="subtitle">Subtitle.</p>
+          <p slot="legend">Error code: 0001</p>
+          <sbb-button slot="action" icon-name="arrows-circle-small"></sbb-button>
+        </sbb-message>`,
+      );
+    });
+
+    it('Dom', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
+
+    it('ShadowDom', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 
   it('renders without optional slots', async () => {
@@ -55,27 +44,12 @@ describe('sbb-message', () => {
     expect(root).dom.to.be.equal(
       `
         <sbb-message title-content="Title.">
-
           <p slot="subtitle">
             Subtitle.
           </p>
         </sbb-message>
       `,
     );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <div class="sbb-message__container">
-          <slot name="image"></slot>
-          <sbb-title level="3" visual-level="5" class="sbb-message__title" aria-level="3" role="heading">
-            <slot name="title">
-              Title.
-            </slot>
-          </sbb-title>
-          <slot name="subtitle"></slot>
-          <slot name="legend"></slot>
-          <slot name="action"></slot>
-        </div>
-      `,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 });
diff --git a/src/components/notification/__snapshots__/notification.spec.snap.js b/src/components/notification/__snapshots__/notification.spec.snap.js
index 566415d0728..ea926bb7e47 100644
--- a/src/components/notification/__snapshots__/notification.spec.snap.js
+++ b/src/components/notification/__snapshots__/notification.spec.snap.js
@@ -183,3 +183,33 @@ snapshots["sbb-notification renders without the close button"] =
 `;
 /* end snapshot sbb-notification renders without the close button */
 
+snapshots["sbb-notification A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-notification A11y tree Chrome */
+
+snapshots["sbb-notification A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-notification A11y tree Firefox */
+
+snapshots["sbb-notification A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-notification A11y tree Safari */
+
diff --git a/src/components/notification/notification.spec.ts b/src/components/notification/notification.spec.ts
index 30a8522680d..6ae157c92f3 100644
--- a/src/components/notification/notification.spec.ts
+++ b/src/components/notification/notification.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../core/testing';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
 
 import './notification';
 import '../link';
@@ -16,7 +17,6 @@ describe('sbb-notification', () => {
         >The quick brown fox jumps over the lazy dog.</sbb-notification
       >`,
     );
-
     await waitForLitRender(root);
 
     expect(root).dom.to.be.equal(
@@ -34,7 +34,6 @@ describe('sbb-notification', () => {
         >The quick brown fox jumps over the lazy dog.</sbb-notification
       >`,
     );
-
     await waitForLitRender(root);
 
     expect(root).dom.to.be.equal(
@@ -53,7 +52,6 @@ describe('sbb-notification', () => {
         The quick brown fox jumps over the lazy dog.
       </sbb-notification>`,
     );
-
     await waitForLitRender(root);
 
     expect(root).dom.to.be.equal(
@@ -74,7 +72,6 @@ describe('sbb-notification', () => {
         >The quick brown fox jumps over the lazy dog.</sbb-notification
       >`,
     );
-
     await waitForLitRender(root);
 
     expect(root).dom.to.be.equal(
@@ -85,4 +82,11 @@ describe('sbb-notification', () => {
     );
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(
+    undefined,
+    html`<sbb-notification disable-animation title-content="Test title"
+      >Lorem ipsum ...</sbb-notification
+    >`,
+  );
 });
diff --git a/src/components/option/optgroup/__snapshots__/optgroup.spec.snap.js b/src/components/option/optgroup/__snapshots__/optgroup.spec.snap.js
new file mode 100644
index 00000000000..ba7ae1fc1d6
--- /dev/null
+++ b/src/components/option/optgroup/__snapshots__/optgroup.spec.snap.js
@@ -0,0 +1,272 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-optgroup autocomplete renders Chrome-Firefox Dom"] = 
+`<sbb-optgroup
+  aria-disabled="false"
+  aria-label="Label"
+  data-variant="autocomplete"
+  label="Label"
+  role="group"
+>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-slot-names="unnamed"
+    data-variant="autocomplete"
+    id="sbb-option-1"
+    role="option"
+    value="1"
+  >
+    1
+  </sbb-option>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-slot-names="unnamed"
+    data-variant="autocomplete"
+    id="sbb-option-2"
+    role="option"
+    value="2"
+  >
+    2
+  </sbb-option>
+</sbb-optgroup>
+`;
+/* end snapshot sbb-optgroup autocomplete renders Chrome-Firefox Dom */
+
+snapshots["sbb-optgroup autocomplete renders Chrome-Firefox ShadowDom"] = 
+`<div class="sbb-optgroup__divider">
+  <sbb-divider
+    aria-orientation="horizontal"
+    orientation="horizontal"
+    role="separator"
+  >
+  </sbb-divider>
+</div>
+<div
+  aria-hidden="true"
+  class="sbb-optgroup__label"
+>
+  <div class="sbb-optgroup__icon-space">
+  </div>
+  <span>
+    Label
+  </span>
+</div>
+<slot>
+</slot>
+`;
+/* end snapshot sbb-optgroup autocomplete renders Chrome-Firefox ShadowDom */
+
+snapshots["sbb-optgroup autocomplete renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-optgroup autocomplete renders A11y tree Chrome */
+
+snapshots["sbb-optgroup autocomplete renders disabled Chrome-Firefox Dom"] = 
+`<sbb-optgroup
+  aria-disabled="true"
+  aria-label="Label"
+  data-variant="autocomplete"
+  disabled=""
+  label="Label"
+  role="group"
+>
+  <sbb-option
+    aria-disabled="true"
+    aria-selected="false"
+    data-group-disabled=""
+    data-slot-names="unnamed"
+    data-variant="autocomplete"
+    id="sbb-option-7"
+    role="option"
+    value="1"
+  >
+    1
+  </sbb-option>
+  <sbb-option
+    aria-disabled="true"
+    aria-selected="false"
+    data-group-disabled=""
+    data-slot-names="unnamed"
+    data-variant="autocomplete"
+    id="sbb-option-8"
+    role="option"
+    value="2"
+  >
+    2
+  </sbb-option>
+</sbb-optgroup>
+`;
+/* end snapshot sbb-optgroup autocomplete renders disabled Chrome-Firefox Dom */
+
+snapshots["sbb-optgroup autocomplete renders disabled Chrome-Firefox ShadowDom"] = 
+`<div class="sbb-optgroup__divider">
+  <sbb-divider
+    aria-orientation="horizontal"
+    orientation="horizontal"
+    role="separator"
+  >
+  </sbb-divider>
+</div>
+<div
+  aria-hidden="true"
+  class="sbb-optgroup__label"
+>
+  <div class="sbb-optgroup__icon-space">
+  </div>
+  <span>
+    Label
+  </span>
+</div>
+<slot>
+</slot>
+`;
+/* end snapshot sbb-optgroup autocomplete renders disabled Chrome-Firefox ShadowDom */
+
+snapshots["sbb-optgroup autocomplete renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-optgroup autocomplete renders A11y tree Firefox */
+
+snapshots["sbb-optgroup autocomplete renders Safari Dom"] = 
+`<sbb-optgroup
+  data-variant="autocomplete"
+  label="Label"
+>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-slot-names="unnamed"
+    data-variant="autocomplete"
+    id="sbb-option-1"
+    role="option"
+    value="1"
+  >
+    1
+  </sbb-option>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-slot-names="unnamed"
+    data-variant="autocomplete"
+    id="sbb-option-2"
+    role="option"
+    value="2"
+  >
+    2
+  </sbb-option>
+</sbb-optgroup>
+`;
+/* end snapshot sbb-optgroup autocomplete renders Safari Dom */
+
+snapshots["sbb-optgroup autocomplete renders Safari ShadowDom"] = 
+`<div class="sbb-optgroup__divider">
+  <sbb-divider
+    aria-orientation="horizontal"
+    orientation="horizontal"
+    role="separator"
+  >
+  </sbb-divider>
+</div>
+<div
+  aria-hidden="true"
+  class="sbb-optgroup__label"
+>
+  <div class="sbb-optgroup__icon-space">
+  </div>
+  <span>
+    Label
+  </span>
+</div>
+<slot>
+</slot>
+`;
+/* end snapshot sbb-optgroup autocomplete renders Safari ShadowDom */
+
+snapshots["sbb-optgroup autocomplete renders A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "listbox",
+      "name": "",
+      "orientation": "vertical"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-optgroup autocomplete renders A11y tree Safari */
+
+snapshots["sbb-optgroup autocomplete renders disabled Safari Dom"] = 
+`<sbb-optgroup
+  data-variant="autocomplete"
+  disabled=""
+  label="Label"
+>
+  <sbb-option
+    aria-disabled="true"
+    aria-selected="false"
+    data-group-disabled=""
+    data-slot-names="unnamed"
+    data-variant="autocomplete"
+    id="sbb-option-7"
+    role="option"
+    value="1"
+  >
+    1
+  </sbb-option>
+  <sbb-option
+    aria-disabled="true"
+    aria-selected="false"
+    data-group-disabled=""
+    data-slot-names="unnamed"
+    data-variant="autocomplete"
+    id="sbb-option-8"
+    role="option"
+    value="2"
+  >
+    2
+  </sbb-option>
+</sbb-optgroup>
+`;
+/* end snapshot sbb-optgroup autocomplete renders disabled Safari Dom */
+
+snapshots["sbb-optgroup autocomplete renders disabled Safari ShadowDom"] = 
+`<div class="sbb-optgroup__divider">
+  <sbb-divider
+    aria-orientation="horizontal"
+    orientation="horizontal"
+    role="separator"
+  >
+  </sbb-divider>
+</div>
+<div
+  aria-hidden="true"
+  class="sbb-optgroup__label"
+>
+  <div class="sbb-optgroup__icon-space">
+  </div>
+  <span>
+    Label
+  </span>
+</div>
+<slot>
+</slot>
+`;
+/* end snapshot sbb-optgroup autocomplete renders disabled Safari ShadowDom */
+
diff --git a/src/components/option/optgroup/optgroup.spec.ts b/src/components/option/optgroup/optgroup.spec.ts
index 0a1d5a8eda8..7d09fdea1f4 100644
--- a/src/components/option/optgroup/optgroup.spec.ts
+++ b/src/components/option/optgroup/optgroup.spec.ts
@@ -1,15 +1,21 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { isSafari } from '../../core/dom';
+import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
+import type { SbbOptGroupElement } from './optgroup';
 import '../../autocomplete';
 import '../option';
 import './optgroup';
-import { isSafari } from '../../core/dom';
 
 describe('sbb-optgroup', () => {
-  describe('autocomplete', function () {
-    it('renders', async () => {
-      const root = (
+  describe('autocomplete', () => {
+    describe('renders', () => {
+      let elem: SbbOptGroupElement;
+
+      beforeEach(async () => {
         await fixture(html`
           <sbb-autocomplete origin="anchor">
             <sbb-optgroup label="Label">
@@ -18,30 +24,38 @@ describe('sbb-optgroup', () => {
             </sbb-optgroup>
           </sbb-autocomplete>
           <div id="anchor"></div>
-        `)
-      ).querySelector('sbb-optgroup');
-      const groupRoleAttr = 'aria-disabled="false" aria-label="Label" role="group"';
+        `);
+        elem = document.querySelector('sbb-optgroup')!;
+        await waitForLitRender(elem);
+      });
+
+      (!isSafari() ? describe : describe.skip)('Chrome-Firefox', async () => {
+        it('Dom', async () => {
+          await expect(elem).dom.to.be.equalSnapshot();
+        });
+
+        it('ShadowDom', async () => {
+          await expect(elem).shadowDom.to.be.equalSnapshot();
+        });
+      });
 
-      expect(root).dom.to.be.equal(`
-        <sbb-optgroup data-variant="autocomplete" label="Label" ${!isSafari() ? groupRoleAttr : ''}>
-          <sbb-option value="1" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-1" role="option" data-slot-names="unnamed">1</sbb-option>
-          <sbb-option value="2" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-2" role="option" data-slot-names="unnamed">2</sbb-option>
-        </sbb-optgroup>
-      `);
-      expect(root).shadowDom.to.be.equal(`
-        <div class="sbb-optgroup__divider">
-          <sbb-divider aria-orientation="horizontal" orientation="horizontal" role="separator"></sbb-divider>
-        </div>
-        <div class="sbb-optgroup__label" aria-hidden="true">
-          <div class="sbb-optgroup__icon-space"></div>
-          <span>Label</span>
-        </div>
-        <slot></slot>
-      `);
+      (isSafari() ? describe : describe.skip)('Safari', async () => {
+        it('Dom', async () => {
+          await expect(elem).dom.to.be.equalSnapshot();
+        });
+
+        it('ShadowDom', async () => {
+          await expect(elem).shadowDom.to.be.equalSnapshot();
+        });
+      });
+
+      testA11yTreeSnapshot();
     });
 
-    it('renders disabled', async () => {
-      const root = (
+    describe('renders disabled', () => {
+      let elem: SbbOptGroupElement;
+
+      beforeEach(async () => {
         await fixture(html`
           <sbb-autocomplete origin="anchor">
             <sbb-optgroup label="Label" disabled>
@@ -50,29 +64,30 @@ describe('sbb-optgroup', () => {
             </sbb-optgroup>
           </sbb-autocomplete>
           <div id="anchor"></div>
-        `)
-      ).querySelector('sbb-optgroup');
-      const groupRoleAttr = 'aria-disabled="true" aria-label="Label" role="group"';
+        `);
+        elem = document.querySelector('sbb-optgroup')!;
+        await waitForLitRender(elem);
+      });
+
+      (!isSafari() ? describe : describe.skip)('Chrome-Firefox', async () => {
+        it('Dom', async () => {
+          await expect(elem).dom.to.be.equalSnapshot();
+        });
+
+        it('ShadowDom', async () => {
+          await expect(elem).shadowDom.to.be.equalSnapshot();
+        });
+      });
 
-      expect(root).dom.to.be.equal(`
-        <sbb-optgroup disabled data-variant="autocomplete" label="Label" ${
-          !isSafari() ? groupRoleAttr : ''
-        }>
-          <sbb-option value="1" data-group-disabled aria-disabled="true" aria-selected="false" data-variant="autocomplete" id="sbb-option-7" role="option" data-slot-names="unnamed">1</sbb-option>
-          <sbb-option value="2" data-group-disabled aria-disabled="true" aria-selected="false" data-variant="autocomplete" id="sbb-option-8" role="option" data-slot-names="unnamed">2</sbb-option>
-        </sbb-optgroup>
-      `);
+      (isSafari() ? describe : describe.skip)('Safari', async () => {
+        it('Dom', async () => {
+          await expect(elem).dom.to.be.equalSnapshot();
+        });
 
-      expect(root).shadowDom.to.be.equal(`
-        <div class="sbb-optgroup__divider">
-          <sbb-divider aria-orientation="horizontal" orientation="horizontal" role="separator"></sbb-divider>
-        </div>
-        <div class="sbb-optgroup__label" aria-hidden="true">
-          <div class="sbb-optgroup__icon-space"></div>
-          <span>Label</span>
-        </div>
-        <slot></slot>
-      `);
+        it('ShadowDom', async () => {
+          await expect(elem).shadowDom.to.be.equalSnapshot();
+        });
+      });
     });
   });
 });
diff --git a/src/components/option/option/__snapshots__/option.spec.snap.js b/src/components/option/option/__snapshots__/option.spec.snap.js
new file mode 100644
index 00000000000..fb4798f6aa9
--- /dev/null
+++ b/src/components/option/option/__snapshots__/option.spec.snap.js
@@ -0,0 +1,87 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-option autocomplete renders selected and active"] = 
+`<div class="sbb-option__container">
+  <div class="sbb-option">
+    <span class="sbb-option__icon">
+      <slot name="icon">
+      </slot>
+    </span>
+    <span class="sbb-option__label">
+      <slot>
+      </slot>
+      Option 1
+    </span>
+  </div>
+</div>
+`;
+/* end snapshot sbb-option autocomplete renders selected and active */
+
+snapshots["sbb-option autocomplete renders disabled"] = 
+`<div class="sbb-option__container">
+  <div class="sbb-option">
+    <span class="sbb-option__icon">
+      <slot name="icon">
+      </slot>
+    </span>
+    <span class="sbb-option__label">
+      <slot>
+      </slot>
+      Option 1
+    </span>
+  </div>
+</div>
+`;
+/* end snapshot sbb-option autocomplete renders disabled */
+
+snapshots["sbb-option autocomplete A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Option 1"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-option autocomplete A11y tree Chrome */
+
+snapshots["sbb-option autocomplete A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "option",
+      "name": "Option 1",
+      "selected": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-option autocomplete A11y tree Firefox */
+
+snapshots["sbb-option autocomplete A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "option",
+      "name": "Option 1",
+      "selected": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-option autocomplete A11y tree Safari */
+
diff --git a/src/components/option/option/option.spec.ts b/src/components/option/option/option.spec.ts
index c3f819e1380..700b990db1d 100644
--- a/src/components/option/option/option.spec.ts
+++ b/src/components/option/option/option.spec.ts
@@ -1,12 +1,15 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
 import '../../autocomplete';
 import './option';
 
 describe('sbb-option', () => {
   describe('autocomplete', () => {
     it('renders selected and active', async () => {
-      const root = (
+      const option = (
         await fixture(html`
           <sbb-autocomplete origin="anchor">
             <sbb-option value="1" selected active>Option 1</sbb-option>
@@ -15,28 +18,16 @@ describe('sbb-option', () => {
         `)
       ).querySelector('sbb-option');
 
-      expect(root).dom.to.be.equal(`
+      expect(option).dom.to.be.equal(`
         <sbb-option selected="" active="" aria-disabled="false" aria-selected="true" data-variant="autocomplete" id="sbb-option-1" role="option" value="1" data-slot-names="unnamed">
           Option 1
         </sbb-option>
       `);
-      expect(root).shadowDom.to.be.equal(`
-        <div class="sbb-option__container">
-          <div class="sbb-option">
-            <span class="sbb-option__icon">
-              <slot name="icon"></slot>
-            </span>
-            <span class="sbb-option__label">
-              <slot></slot>
-              Option 1
-            </span>
-          </div>
-        </div>
-      `);
+      await expect(option).shadowDom.to.be.equalSnapshot();
     });
 
     it('renders disabled', async () => {
-      const root = (
+      const option = (
         await fixture(html`
           <sbb-autocomplete origin="anchor">
             <sbb-option value="1" disabled>Option 1</sbb-option>
@@ -45,24 +36,17 @@ describe('sbb-option', () => {
         `)
       ).querySelector('sbb-option');
 
-      expect(root).dom.to.be.equal(`
+      expect(option).dom.to.be.equal(`
         <sbb-option disabled aria-disabled="true" aria-selected="false" data-variant="autocomplete" id="sbb-option-4" role="option" value="1" data-slot-names="unnamed">
           Option 1
         </sbb-option>
       `);
-      expect(root).shadowDom.to.be.equal(`
-        <div class="sbb-option__container">
-          <div class="sbb-option">
-            <span class="sbb-option__icon">
-              <slot name="icon"></slot>
-            </span>
-            <span class="sbb-option__label">
-              <slot></slot>
-              Option 1
-            </span>
-          </div>
-        </div>
-      `);
+      await expect(option).shadowDom.to.be.equalSnapshot();
     });
+
+    testA11yTreeSnapshot(
+      undefined,
+      html`<sbb-option value="1" selected active>Option 1</sbb-option>`,
+    );
   });
 });
diff --git a/src/components/radio-button/radio-button-group/__snapshots__/radio-button-group.spec.snap.js b/src/components/radio-button/radio-button-group/__snapshots__/radio-button-group.spec.snap.js
new file mode 100644
index 00000000000..57e0acca907
--- /dev/null
+++ b/src/components/radio-button/radio-button-group/__snapshots__/radio-button-group.spec.snap.js
@@ -0,0 +1,54 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-radio-button-group renders - Dom"] = 
+`<sbb-radio-button-group
+  orientation="horizontal"
+  role="radiogroup"
+>
+</sbb-radio-button-group>
+`;
+/* end snapshot sbb-radio-button-group renders - Dom */
+
+snapshots["sbb-radio-button-group renders - ShadowDom"] = 
+`<div class="sbb-radio-group">
+  <slot>
+  </slot>
+</div>
+<div class="sbb-radio-group__error">
+  <slot name="error">
+  </slot>
+</div>
+`;
+/* end snapshot sbb-radio-button-group renders - ShadowDom */
+
+snapshots["sbb-radio-button-group A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-radio-button-group A11y tree Chrome */
+
+snapshots["sbb-radio-button-group A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-radio-button-group A11y tree Firefox */
+
+snapshots["sbb-radio-button-group A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-radio-button-group A11y tree Safari */
+
diff --git a/src/components/radio-button/radio-button-group/radio-button-group.spec.ts b/src/components/radio-button/radio-button-group/radio-button-group.spec.ts
index 8038487db25..200e6e58870 100644
--- a/src/components/radio-button/radio-button-group/radio-button-group.spec.ts
+++ b/src/components/radio-button/radio-button-group/radio-button-group.spec.ts
@@ -1,26 +1,25 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
+import type { SbbRadioButtonGroupElement } from './radio-button-group';
 import './radio-button-group';
 
 describe('sbb-radio-button-group', () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-radio-button-group></sbb-radio-button-group>`);
+  let element: SbbRadioButtonGroupElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<sbb-radio-button-group></sbb-radio-button-group>`);
+  });
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-radio-button-group orientation="horizontal" role="radiogroup">
-        </sbb-radio-button-group>
-      `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-      <div class="sbb-radio-group">
-        <slot></slot>
-      </div>
-      <div class="sbb-radio-group__error">
-        <slot name="error"></slot>
-      </div>
-      `,
-    );
+  it('renders - Dom', async () => {
+    await expect(element).dom.to.be.equalSnapshot();
   });
+
+  it('renders - ShadowDom', async () => {
+    await expect(element).shadowDom.to.be.equalSnapshot();
+  });
+
+  testA11yTreeSnapshot();
 });
diff --git a/src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js b/src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js
new file mode 100644
index 00000000000..16db82dd82e
--- /dev/null
+++ b/src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js
@@ -0,0 +1,83 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-radio-button renders - Dom"] = 
+`<sbb-radio-button
+  aria-checked="false"
+  aria-disabled="false"
+  aria-required="false"
+  role="radio"
+  size="m"
+  value="radio-value"
+>
+</sbb-radio-button>
+`;
+/* end snapshot sbb-radio-button renders - Dom */
+
+snapshots["sbb-radio-button renders - ShadowDom"] = 
+`<label class="sbb-radio-button">
+  <input
+    aria-hidden="true"
+    class="sbb-radio-button__input"
+    tabindex="-1"
+    type="radio"
+    value="radio-value"
+  >
+  <span class="sbb-radio-button__label-slot">
+    <slot>
+    </slot>
+  </span>
+</label>
+`;
+/* end snapshot sbb-radio-button renders - ShadowDom */
+
+snapshots["sbb-radio-button A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": "",
+      "checked": false
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-radio-button A11y tree Chrome */
+
+snapshots["sbb-radio-button A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-radio-button A11y tree Firefox */
+
+snapshots["sbb-radio-button A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": "",
+      "checked": false
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-radio-button A11y tree Safari */
+
diff --git a/src/components/radio-button/radio-button/radio-button.spec.ts b/src/components/radio-button/radio-button/radio-button.spec.ts
index 64fab9827c6..df3ea3d367e 100644
--- a/src/components/radio-button/radio-button/radio-button.spec.ts
+++ b/src/components/radio-button/radio-button/radio-button.spec.ts
@@ -1,26 +1,25 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
+import type { SbbRadioButtonElement } from './radio-button';
 import './radio-button';
 
 describe('sbb-radio-button', () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-radio-button value="radio-value"></sbb-radio-button>`);
+  let element: SbbRadioButtonElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<sbb-radio-button value="radio-value"></sbb-radio-button>`);
+  });
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-radio-button aria-checked="false" aria-disabled="false" aria-required="false" size="m" value="radio-value" role="radio">
-        </sbb-radio-button>
-      `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <label class="sbb-radio-button">
-          <input aria-hidden="true" class="sbb-radio-button__input" tabindex="-1" type="radio" value="radio-value">
-          <span class="sbb-radio-button__label-slot">
-            <slot></slot>
-          </span>
-        </label>
-      `,
-    );
+  it('renders - Dom', async () => {
+    await expect(element).dom.to.be.equalSnapshot();
   });
+
+  it('renders - ShadowDom', async () => {
+    await expect(element).shadowDom.to.be.equalSnapshot();
+  });
+
+  testA11yTreeSnapshot();
 });
diff --git a/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js b/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js
index 6c617969308..2e126893951 100644
--- a/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js
+++ b/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js
@@ -13,3 +13,45 @@ snapshots["with Shadow DOM"] =
 `;
 /* end snapshot with Shadow DOM */
 
+snapshots["sbb-screenreader-only renders with Light DOM"] = 
+`<sbb-screenreader-only>
+</sbb-screenreader-only>
+`;
+/* end snapshot sbb-screenreader-only renders with Light DOM */
+
+snapshots["sbb-screenreader-only renders with Shadow DOM"] = 
+`<slot>
+</slot>
+`;
+/* end snapshot sbb-screenreader-only renders with Shadow DOM */
+
+snapshots["sbb-screenreader-only renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-screenreader-only renders A11y tree Chrome */
+
+snapshots["sbb-screenreader-only renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-screenreader-only renders A11y tree Firefox */
+
+snapshots["sbb-screenreader-only renders A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-screenreader-only renders A11y tree Safari */
+
diff --git a/src/components/screenreader-only/screenreader-only.spec.ts b/src/components/screenreader-only/screenreader-only.spec.ts
index aaa4ef72431..2550edf1653 100644
--- a/src/components/screenreader-only/screenreader-only.spec.ts
+++ b/src/components/screenreader-only/screenreader-only.spec.ts
@@ -1,10 +1,18 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
+import type { SbbScreenreaderOnlyElement } from './screenreader-only';
 import './screenreader-only';
 
 describe('sbb-screenreader-only', () => {
   describe('renders', async () => {
-    const root = await fixture(html`<sbb-screenreader-only></sbb-screenreader-only>`);
+    let root: SbbScreenreaderOnlyElement;
+
+    beforeEach(async () => {
+      root = await fixture(html`<sbb-screenreader-only></sbb-screenreader-only>`);
+    });
 
     it('with Light DOM', async () => {
       await expect(root).dom.to.be.equalSnapshot();
@@ -13,5 +21,7 @@ describe('sbb-screenreader-only', () => {
     it('with Shadow DOM', async () => {
       await expect(root).shadowDom.to.be.equalSnapshot();
     });
+
+    testA11yTreeSnapshot();
   });
 });
diff --git a/src/components/select/__snapshots__/select.spec.snap.js b/src/components/select/__snapshots__/select.spec.snap.js
new file mode 100644
index 00000000000..c1b701a304e
--- /dev/null
+++ b/src/components/select/__snapshots__/select.spec.snap.js
@@ -0,0 +1,467 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-select renders Chrome-Firefox Dom"] = 
+`<sbb-select
+  data-state="closed"
+  dir="ltr"
+>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-disable-highlight=""
+    data-slot-names="unnamed"
+    data-variant="select"
+    id="sbb-option-1"
+    role="option"
+    value="1"
+  >
+    Option 1
+  </sbb-option>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-disable-highlight=""
+    data-slot-names="unnamed"
+    data-variant="select"
+    id="sbb-option-2"
+    role="option"
+    value="2"
+  >
+    Option 2
+  </sbb-option>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-disable-highlight=""
+    data-slot-names="unnamed"
+    data-variant="select"
+    id="sbb-option-3"
+    role="option"
+    value="3"
+  >
+    Option 3
+  </sbb-option>
+</sbb-select>
+`;
+/* end snapshot sbb-select renders Chrome-Firefox Dom */
+
+snapshots["sbb-select renders Chrome-Firefox ShadowDom"] = 
+`<div
+  aria-hidden="true"
+  class="sbb-select__trigger"
+>
+  <span class="sbb-select__trigger--placeholder">
+  </span>
+</div>
+<div class="sbb-select__gap-fix">
+</div>
+<div class="sbb-select__container">
+  <div class="sbb-select__gap-fix">
+    <div class="sbb-gap-fix-wrapper">
+      <div
+        class="sbb-gap-fix-corner"
+        id="left"
+      >
+      </div>
+    </div>
+    <div class="sbb-gap-fix-wrapper">
+      <div
+        class="sbb-gap-fix-corner"
+        id="right"
+      >
+      </div>
+    </div>
+  </div>
+  <div class="sbb-select__panel">
+    <div class="sbb-select__wrapper">
+      <div
+        class="sbb-select__options"
+        id="sbb-select-2"
+        role="listbox"
+      >
+        <slot>
+        </slot>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot sbb-select renders Chrome-Firefox ShadowDom */
+
+snapshots["sbb-select renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "combobox",
+      "name": "",
+      "haspopup": "listbox"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-select renders A11y tree Chrome */
+
+snapshots["sbb-select renders multiple Chrome-Firefox Dom"] = 
+`<sbb-select
+  data-multiple=""
+  data-state="closed"
+  dir="ltr"
+  multiple=""
+>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-disable-highlight=""
+    data-multiple=""
+    data-slot-names="unnamed"
+    data-variant="select"
+    id="sbb-option-10"
+    role="option"
+    value="1"
+  >
+    Option 1
+  </sbb-option>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-disable-highlight=""
+    data-multiple=""
+    data-slot-names="unnamed"
+    data-variant="select"
+    id="sbb-option-11"
+    role="option"
+    value="2"
+  >
+    Option 2
+  </sbb-option>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-disable-highlight=""
+    data-multiple=""
+    data-slot-names="unnamed"
+    data-variant="select"
+    id="sbb-option-12"
+    role="option"
+    value="3"
+  >
+    Option 3
+  </sbb-option>
+</sbb-select>
+`;
+/* end snapshot sbb-select renders multiple Chrome-Firefox Dom */
+
+snapshots["sbb-select renders multiple Chrome-Firefox ShadowDom"] = 
+`<div
+  aria-hidden="true"
+  class="sbb-select__trigger"
+>
+  <span class="sbb-select__trigger--placeholder">
+  </span>
+</div>
+<div class="sbb-select__gap-fix">
+</div>
+<div class="sbb-select__container">
+  <div class="sbb-select__gap-fix">
+    <div class="sbb-gap-fix-wrapper">
+      <div
+        class="sbb-gap-fix-corner"
+        id="left"
+      >
+      </div>
+    </div>
+    <div class="sbb-gap-fix-wrapper">
+      <div
+        class="sbb-gap-fix-corner"
+        id="right"
+      >
+      </div>
+    </div>
+  </div>
+  <div class="sbb-select__panel">
+    <div class="sbb-select__wrapper">
+      <div
+        aria-multiselectable=""
+        class="sbb-select__options"
+        id="sbb-select-5"
+        role="listbox"
+      >
+        <slot>
+        </slot>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot sbb-select renders multiple Chrome-Firefox ShadowDom */
+
+snapshots["sbb-select renders multiple A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "combobox",
+      "name": "",
+      "haspopup": "listbox"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-select renders multiple A11y tree Chrome */
+
+snapshots["sbb-select renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "combobox",
+      "name": "",
+      "haspopup": "listbox"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-select renders A11y tree Firefox */
+
+snapshots["sbb-select renders multiple A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "combobox",
+      "name": "",
+      "haspopup": "listbox"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-select renders multiple A11y tree Firefox */
+
+snapshots["sbb-select renders Safari Dom"] = 
+`<sbb-select
+  data-state="closed"
+  dir="ltr"
+  id="sbb-select-1"
+  role="listbox"
+>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-disable-highlight=""
+    data-slot-names="unnamed"
+    data-variant="select"
+    id="sbb-option-1"
+    role="option"
+    value="1"
+  >
+    Option 1
+  </sbb-option>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-disable-highlight=""
+    data-slot-names="unnamed"
+    data-variant="select"
+    id="sbb-option-2"
+    role="option"
+    value="2"
+  >
+    Option 2
+  </sbb-option>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-disable-highlight=""
+    data-slot-names="unnamed"
+    data-variant="select"
+    id="sbb-option-3"
+    role="option"
+    value="3"
+  >
+    Option 3
+  </sbb-option>
+</sbb-select>
+`;
+/* end snapshot sbb-select renders Safari Dom */
+
+snapshots["sbb-select renders Safari ShadowDom"] = 
+`<div
+  aria-hidden="true"
+  class="sbb-select__trigger"
+>
+  <span class="sbb-select__trigger--placeholder">
+  </span>
+</div>
+<div class="sbb-select__gap-fix">
+</div>
+<div class="sbb-select__container">
+  <div class="sbb-select__gap-fix">
+    <div class="sbb-gap-fix-wrapper">
+      <div
+        class="sbb-gap-fix-corner"
+        id="left"
+      >
+      </div>
+    </div>
+    <div class="sbb-gap-fix-wrapper">
+      <div
+        class="sbb-gap-fix-corner"
+        id="right"
+      >
+      </div>
+    </div>
+  </div>
+  <div class="sbb-select__panel">
+    <div class="sbb-select__wrapper">
+      <div class="sbb-select__options">
+        <slot>
+        </slot>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot sbb-select renders Safari ShadowDom */
+
+snapshots["sbb-select renders A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "combobox",
+      "name": "",
+      "haspopup": "listbox"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-select renders A11y tree Safari */
+
+snapshots["sbb-select renders multiple Safari Dom"] = 
+`<sbb-select
+  data-multiple=""
+  data-state="closed"
+  dir="ltr"
+  id="sbb-select-4"
+  multiple=""
+  role="listbox"
+>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-disable-highlight=""
+    data-multiple=""
+    data-slot-names="unnamed"
+    data-variant="select"
+    id="sbb-option-10"
+    role="option"
+    value="1"
+  >
+    Option 1
+  </sbb-option>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-disable-highlight=""
+    data-multiple=""
+    data-slot-names="unnamed"
+    data-variant="select"
+    id="sbb-option-11"
+    role="option"
+    value="2"
+  >
+    Option 2
+  </sbb-option>
+  <sbb-option
+    aria-disabled="false"
+    aria-selected="false"
+    data-disable-highlight=""
+    data-multiple=""
+    data-slot-names="unnamed"
+    data-variant="select"
+    id="sbb-option-12"
+    role="option"
+    value="3"
+  >
+    Option 3
+  </sbb-option>
+</sbb-select>
+`;
+/* end snapshot sbb-select renders multiple Safari Dom */
+
+snapshots["sbb-select renders multiple Safari ShadowDom"] = 
+`<div
+  aria-hidden="true"
+  class="sbb-select__trigger"
+>
+  <span class="sbb-select__trigger--placeholder">
+  </span>
+</div>
+<div class="sbb-select__gap-fix">
+</div>
+<div class="sbb-select__container">
+  <div class="sbb-select__gap-fix">
+    <div class="sbb-gap-fix-wrapper">
+      <div
+        class="sbb-gap-fix-corner"
+        id="left"
+      >
+      </div>
+    </div>
+    <div class="sbb-gap-fix-wrapper">
+      <div
+        class="sbb-gap-fix-corner"
+        id="right"
+      >
+      </div>
+    </div>
+  </div>
+  <div class="sbb-select__panel">
+    <div class="sbb-select__wrapper">
+      <div
+        aria-multiselectable=""
+        class="sbb-select__options"
+      >
+        <slot>
+        </slot>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot sbb-select renders multiple Safari ShadowDom */
+
+snapshots["sbb-select renders multiple A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "combobox",
+      "name": "",
+      "haspopup": "listbox"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-select renders multiple A11y tree Safari */
+
diff --git a/src/components/select/select.spec.ts b/src/components/select/select.spec.ts
index a9da8a24bff..c9896ef8950 100644
--- a/src/components/select/select.spec.ts
+++ b/src/components/select/select.spec.ts
@@ -1,86 +1,86 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import '../option';
-import './select';
 import { isSafari } from '../core/dom';
+import { waitForLitRender } from '../core/testing';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
+import type { SbbSelectElement } from './select';
+import './select';
+import '../option';
 
 describe('sbb-select', () => {
-  it('renders', async () => {
-    const root = await fixture(html`
-      <sbb-select>
-        <sbb-option value="1">Option 1</sbb-option>
-        <sbb-option value="2">Option 2</sbb-option>
-        <sbb-option value="3">Option 3</sbb-option>
-      </sbb-select>
-    `);
-    const listboxAttr = 'id="sbb-select-1" role="listbox"';
-
-    expect(root.shadowRoot!.host).to.have.attribute('dir', 'ltr');
-    expect(root.shadowRoot!.host).to.have.attribute('data-state', 'closed');
-    expect(root).shadowDom.to.be.equal(`
-      <div class="sbb-select__trigger" aria-hidden="true">
-        <span class="sbb-select__trigger--placeholder"></span>
-      </div>
-      <div class="sbb-select__gap-fix"></div>
-      <div class="sbb-select__container">
-        <div class="sbb-select__gap-fix">
-          <div class="sbb-gap-fix-wrapper">
-            <div class="sbb-gap-fix-corner" id="left"></div>
-          </div>
-          <div class="sbb-gap-fix-wrapper">
-            <div class="sbb-gap-fix-corner" id="right"></div>
-          </div>
-        </div>
-        <div class="sbb-select__panel">
-          <div class="sbb-select__wrapper">
-            <div class="sbb-select__options" ${!isSafari() ? listboxAttr : ''}>
-              <slot></slot>
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
+  describe('renders', () => {
+    let elem: SbbSelectElement;
+
+    beforeEach(async () => {
+      elem = await fixture(html`
+        <sbb-select>
+          <sbb-option value="1">Option 1</sbb-option>
+          <sbb-option value="2">Option 2</sbb-option>
+          <sbb-option value="3">Option 3</sbb-option>
+        </sbb-select>
+      `);
+      await waitForLitRender(elem);
+    });
+
+    (!isSafari() ? describe : describe.skip)('Chrome-Firefox', async () => {
+      it('Dom', async () => {
+        await expect(elem).dom.to.be.equalSnapshot();
+      });
+
+      it('ShadowDom', async () => {
+        await expect(elem).shadowDom.to.be.equalSnapshot();
+      });
+    });
+
+    (isSafari() ? describe : describe.skip)('Safari', async () => {
+      it('Dom', async () => {
+        await expect(elem).dom.to.be.equalSnapshot();
+      });
+
+      it('ShadowDom', async () => {
+        await expect(elem).shadowDom.to.be.equalSnapshot();
+      });
+    });
+
+    testA11yTreeSnapshot();
   });
 
-  it('renders multiple', async () => {
-    const root = await fixture(html`
-      <sbb-select multiple>
-        <sbb-option value="1">Option 1</sbb-option>
-        <sbb-option value="2">Option 2</sbb-option>
-        <sbb-option value="3">Option 3</sbb-option>
-      </sbb-select>
-    `);
-    const listboxAttr = 'id="sbb-select-2" role="listbox"';
-
-    expect(root.shadowRoot!.host).to.have.attribute('dir', 'ltr');
-    expect(root.shadowRoot!.host).to.have.attribute('data-state', 'closed');
-    expect(root.shadowRoot!.host).to.have.attribute('data-multiple');
-    expect(root.shadowRoot!.host).to.have.attribute('multiple');
-    expect(root).shadowDom.to.be.equal(`
-      <div class="sbb-select__trigger" aria-hidden="true">
-        <span class="sbb-select__trigger--placeholder"></span>
-      </div>
-      <div class="sbb-select__gap-fix"></div>
-      <div class="sbb-select__container">
-        <div class="sbb-select__gap-fix">
-          <div class="sbb-gap-fix-wrapper">
-            <div class="sbb-gap-fix-corner" id="left"></div>
-          </div>
-          <div class="sbb-gap-fix-wrapper">
-            <div class="sbb-gap-fix-corner" id="right"></div>
-          </div>
-        </div>
-        <div class="sbb-select__panel">
-          <div class="sbb-select__wrapper">
-            <div class="sbb-select__options" aria-multiselectable="" ${
-              !isSafari() ? listboxAttr : ''
-            }>
-              <slot></slot>
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
+  describe('renders multiple', () => {
+    let elem: SbbSelectElement;
+
+    beforeEach(async () => {
+      elem = await fixture(html`
+        <sbb-select multiple>
+          <sbb-option value="1">Option 1</sbb-option>
+          <sbb-option value="2">Option 2</sbb-option>
+          <sbb-option value="3">Option 3</sbb-option>
+        </sbb-select>
+      `);
+      await waitForLitRender(elem);
+    });
+
+    (!isSafari() ? describe : describe.skip)('Chrome-Firefox', async () => {
+      it('Dom', async () => {
+        await expect(elem).dom.to.be.equalSnapshot();
+      });
+
+      it('ShadowDom', async () => {
+        await expect(elem).shadowDom.to.be.equalSnapshot();
+      });
+    });
+
+    (isSafari() ? describe : describe.skip)('Safari', async () => {
+      it('Dom', async () => {
+        await expect(elem).dom.to.be.equalSnapshot();
+      });
+
+      it('ShadowDom', async () => {
+        await expect(elem).shadowDom.to.be.equalSnapshot();
+      });
+    });
+
+    testA11yTreeSnapshot();
   });
 });
diff --git a/src/components/selection-panel/selection-panel.spec.ts b/src/components/selection-panel/selection-panel.spec.ts
index e525998ca15..21ec087eb3b 100644
--- a/src/components/selection-panel/selection-panel.spec.ts
+++ b/src/components/selection-panel/selection-panel.spec.ts
@@ -3,37 +3,42 @@ import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../core/testing';
 import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
+import type { SbbSelectionPanelElement } from './selection-panel';
 import './selection-panel';
 import '../checkbox';
 
 describe('sbb-selection-panel', () => {
-  // Note: for easier testing, we add the slot="badge"
-  // to <sbb-card-badge> which would not be needed in real.
-  const template = html`<sbb-selection-panel disable-animation>
-    <sbb-card-badge slot="badge">
-      <span>%</span>
-      <span>from CHF</span>
-      <span>19.99</span>
-    </sbb-card-badge>
-    <sbb-checkbox>
-      Value one
-      <span slot="subtext">Subtext</span>
-      <span slot="suffix">Suffix</span>
-    </sbb-checkbox>
-    <div slot="content">Inner content</div>
-  </sbb-selection-panel>`;
+  let element: SbbSelectionPanelElement;
+
+  beforeEach(async () => {
+    // Note: for easier testing, we add the slot="badge"
+    // to <sbb-card-badge> which would not be needed in real.
+    element = await fixture(html`
+      <sbb-selection-panel disable-animation>
+        <sbb-card-badge slot="badge">
+          <span>%</span>
+          <span>from CHF</span>
+          <span>19.99</span>
+        </sbb-card-badge>
+        <sbb-checkbox>
+          Value one
+          <span slot="subtext">Subtext</span>
+          <span slot="suffix">Suffix</span>
+        </sbb-checkbox>
+        <div slot="content">Inner content</div>
+      </sbb-selection-panel>
+    `);
+    await waitForLitRender(element);
+  });
 
   it('renders - Dom', async () => {
-    const root = await fixture(template);
-    await waitForLitRender(root);
-    await expect(root).dom.to.be.equalSnapshot();
+    await expect(element).dom.to.be.equalSnapshot();
   });
 
   it('renders - ShadowDom', async () => {
-    const root = await fixture(template);
-    await waitForLitRender(root);
-    await expect(root).shadowDom.to.be.equalSnapshot();
+    await expect(element).shadowDom.to.be.equalSnapshot();
   });
 
-  testA11yTreeSnapshot(undefined, template);
+  testA11yTreeSnapshot();
 });
diff --git a/src/components/skiplink-list/__snapshots__/skiplink-list.spec.snap.js b/src/components/skiplink-list/__snapshots__/skiplink-list.spec.snap.js
index fff23acc73c..3c654d017b5 100644
--- a/src/components/skiplink-list/__snapshots__/skiplink-list.spec.snap.js
+++ b/src/components/skiplink-list/__snapshots__/skiplink-list.spec.snap.js
@@ -122,3 +122,339 @@ snapshots["sbb-skiplink-list renders with title"] =
 `;
 /* end snapshot sbb-skiplink-list renders with title */
 
+snapshots["sbb-skiplink-list renders Dom"] = 
+`<sbb-skiplink-list data-slot-names="li-0 li-1 li-2">
+  <sbb-link
+    data-slot-names="unnamed"
+    dir="ltr"
+    href="#"
+    negative=""
+    role="link"
+    size="m"
+    slot="li-0"
+    tabindex="0"
+    variant="block"
+  >
+    Link 1
+  </sbb-link>
+  <sbb-link
+    data-slot-names="unnamed"
+    dir="ltr"
+    href="#"
+    negative=""
+    role="link"
+    size="m"
+    slot="li-1"
+    tabindex="0"
+    variant="block"
+  >
+    Link 2
+  </sbb-link>
+  <sbb-link
+    data-slot-names="unnamed"
+    dir="ltr"
+    href="#"
+    negative=""
+    role="link"
+    size="m"
+    slot="li-2"
+    tabindex="0"
+    variant="block"
+  >
+    Link 3
+  </sbb-link>
+</sbb-skiplink-list>
+`;
+/* end snapshot sbb-skiplink-list renders Dom */
+
+snapshots["sbb-skiplink-list renders ShadowDom"] = 
+`<div class="sbb-skiplink-list__wrapper">
+  <sbb-title
+    aria-level="2"
+    class="sbb-link-list-title"
+    id="sbb-skiplink-list-title-id"
+    level="2"
+    negative=""
+    role="heading"
+    visual-level="5"
+    visually-hidden=""
+  >
+    <slot name="title">
+    </slot>
+  </sbb-title>
+  <ul
+    aria-labelledby="sbb-skiplink-list-title-id"
+    class="sbb-skiplink-list"
+  >
+    <li>
+      <slot name="li-0">
+      </slot>
+    </li>
+    <li>
+      <slot name="li-1">
+      </slot>
+    </li>
+    <li>
+      <slot name="li-2">
+      </slot>
+    </li>
+  </ul>
+  <span hidden="">
+    <slot>
+    </slot>
+  </span>
+</div>
+`;
+/* end snapshot sbb-skiplink-list renders ShadowDom */
+
+snapshots["sbb-skiplink-list renders with title Dom"] = 
+`<sbb-skiplink-list
+  data-slot-names="li-0 li-1 li-2"
+  title-content="Skip to"
+  title-level="3"
+>
+  <sbb-link
+    data-slot-names="unnamed"
+    dir="ltr"
+    href="https://www.sbb.ch"
+    negative=""
+    role="link"
+    size="m"
+    slot="li-0"
+    tabindex="0"
+    variant="block"
+  >
+    Link 1
+  </sbb-link>
+  <sbb-link
+    data-slot-names="unnamed"
+    dir="ltr"
+    href="https://www.sbb.ch"
+    negative=""
+    role="link"
+    size="m"
+    slot="li-1"
+    tabindex="0"
+    variant="block"
+  >
+    Link 2
+  </sbb-link>
+  <sbb-link
+    data-slot-names="unnamed"
+    dir="ltr"
+    href="https://www.sbb.ch"
+    negative=""
+    role="link"
+    size="m"
+    slot="li-2"
+    tabindex="0"
+    variant="block"
+  >
+    Link 3
+  </sbb-link>
+</sbb-skiplink-list>
+`;
+/* end snapshot sbb-skiplink-list renders with title Dom */
+
+snapshots["sbb-skiplink-list renders with title ShadowDom"] = 
+`<div class="sbb-skiplink-list__wrapper">
+  <sbb-title
+    aria-level="3"
+    class="sbb-link-list-title"
+    id="sbb-skiplink-list-title-id"
+    level="3"
+    negative=""
+    role="heading"
+    visual-level="5"
+    visually-hidden=""
+  >
+    <slot name="title">
+      Skip to
+    </slot>
+  </sbb-title>
+  <ul
+    aria-labelledby="sbb-skiplink-list-title-id"
+    class="sbb-skiplink-list"
+  >
+    <li>
+      <slot name="li-0">
+      </slot>
+    </li>
+    <li>
+      <slot name="li-1">
+      </slot>
+    </li>
+    <li>
+      <slot name="li-2">
+      </slot>
+    </li>
+  </ul>
+  <span hidden="">
+    <slot>
+    </slot>
+  </span>
+</div>
+`;
+/* end snapshot sbb-skiplink-list renders with title ShadowDom */
+
+snapshots["sbb-skiplink-list renders with title A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Skip to",
+      "level": 3
+    },
+    {
+      "role": "link",
+      "name": "Link 1",
+      "children": [
+        {
+          "role": "link",
+          "name": "Link 1"
+        }
+      ]
+    },
+    {
+      "role": "link",
+      "name": "Link 2",
+      "children": [
+        {
+          "role": "link",
+          "name": "Link 2"
+        }
+      ]
+    },
+    {
+      "role": "link",
+      "name": "Link 3",
+      "children": [
+        {
+          "role": "link",
+          "name": "Link 3"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-skiplink-list renders with title A11y tree Chrome */
+
+snapshots["sbb-skiplink-list renders with title A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Skip to",
+      "level": 3
+    },
+    {
+      "role": "link",
+      "name": "Link 1",
+      "children": [
+        {
+          "role": "link",
+          "name": "Link 1",
+          "value": "https://www.sbb.ch/"
+        }
+      ]
+    },
+    {
+      "role": "link",
+      "name": "Link 2",
+      "children": [
+        {
+          "role": "link",
+          "name": "Link 2",
+          "value": "https://www.sbb.ch/"
+        }
+      ]
+    },
+    {
+      "role": "link",
+      "name": "Link 3",
+      "children": [
+        {
+          "role": "link",
+          "name": "Link 3",
+          "value": "https://www.sbb.ch/"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-skiplink-list renders with title A11y tree Firefox */
+
+snapshots["sbb-skiplink-list renders with title A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Skip to"
+    },
+    {
+      "role": "link",
+      "name": "",
+      "children": [
+        {
+          "role": "link",
+          "name": "Link 1",
+          "children": [
+            {
+              "role": "text",
+              "name": "Link 1"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "role": "link",
+      "name": "",
+      "children": [
+        {
+          "role": "link",
+          "name": "Link 2",
+          "children": [
+            {
+              "role": "text",
+              "name": "Link 2"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "role": "link",
+      "name": "",
+      "children": [
+        {
+          "role": "link",
+          "name": "Link 3",
+          "children": [
+            {
+              "role": "text",
+              "name": "Link 3"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-skiplink-list renders with title A11y tree Safari */
+
diff --git a/src/components/skiplink-list/skiplink-list.spec.ts b/src/components/skiplink-list/skiplink-list.spec.ts
index 8a813bcb06e..28be72fe397 100644
--- a/src/components/skiplink-list/skiplink-list.spec.ts
+++ b/src/components/skiplink-list/skiplink-list.spec.ts
@@ -1,50 +1,60 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { waitForLitRender } from '../core/testing';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
+import type { SbbSkiplinkListElement } from './skiplink-list';
 import './skiplink-list';
 import '../link';
 
 describe('sbb-skiplink-list', () => {
-  it('renders', async () => {
-    const root = await fixture(html`
-      <sbb-skiplink-list>
-        <sbb-link href="#">Link 1</sbb-link>
-        <sbb-link href="#">Link 2</sbb-link>
-        <sbb-link href="#">Link 3</sbb-link>
-      </sbb-skiplink-list>
-    `);
-
-    expect(root).dom.to.be.equal(
-      `
-      <sbb-skiplink-list data-slot-names="li-0 li-1 li-2">
-        <sbb-link dir="ltr" href='#' negative="" role="link" size="m" slot="li-0" tabindex="0" variant="block" data-slot-names="unnamed">Link 1</sbb-link>
-        <sbb-link dir="ltr" href='#' negative="" role="link" size="m" slot="li-1" tabindex="0" variant="block" data-slot-names="unnamed">Link 2</sbb-link>
-        <sbb-link dir="ltr" href='#' negative="" role="link" size="m" slot="li-2" tabindex="0" variant="block" data-slot-names="unnamed">Link 3</sbb-link>
-      </sbb-skiplink-list>
-    `,
-    );
-    await expect(root).shadowDom.to.be.equalSnapshot();
+  describe('renders', () => {
+    let element: SbbSkiplinkListElement;
+
+    beforeEach(async () => {
+      element = await fixture(html`
+        <sbb-skiplink-list>
+          <sbb-link href="#">Link 1</sbb-link>
+          <sbb-link href="#">Link 2</sbb-link>
+          <sbb-link href="#">Link 3</sbb-link>
+        </sbb-skiplink-list>
+      `);
+      await waitForLitRender(element);
+    });
+
+    it('Dom', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('ShadowDom', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
   });
 
-  it('renders with title', async () => {
-    const root = await fixture(html`
-      <sbb-skiplink-list title-content="Skip to" title-level="3">
-        <sbb-link href="#">Link 1</sbb-link>
-        <sbb-link href="#">Link 2</sbb-link>
-        <sbb-link href="#">Link 3</sbb-link>
-      </sbb-skiplink-list>
-    `);
-
-    expect(root).dom.to.be.equal(
-      `
-      <sbb-skiplink-list title-content="Skip to" title-level="3" data-slot-names="li-0 li-1 li-2">
-        <sbb-link dir="ltr" href='#' negative="" role="link" size="m" slot="li-0" tabindex="0" variant="block" data-slot-names="unnamed">Link 1</sbb-link>
-        <sbb-link dir="ltr" href='#' negative="" role="link" size="m" slot="li-1" tabindex="0" variant="block" data-slot-names="unnamed">Link 2</sbb-link>
-        <sbb-link dir="ltr" href='#' negative="" role="link" size="m" slot="li-2" tabindex="0" variant="block" data-slot-names="unnamed">Link 3</sbb-link>
-      </sbb-skiplink-list>
-    `,
-    );
-    await expect(root).shadowDom.to.be.equalSnapshot();
+  describe('renders with title', () => {
+    let element: SbbSkiplinkListElement;
+
+    beforeEach(async () => {
+      element = await fixture(html`
+        <sbb-skiplink-list title-content="Skip to" title-level="3">
+          <sbb-link href="https://www.sbb.ch">Link 1</sbb-link>
+          <sbb-link href="https://www.sbb.ch">Link 2</sbb-link>
+          <sbb-link href="https://www.sbb.ch">Link 3</sbb-link>
+        </sbb-skiplink-list>
+      `);
+      await waitForLitRender(element);
+    });
+
+    it('Dom', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('ShadowDom', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 
   it('should render named slots if data-ssr-child-count attribute is set', async () => {
diff --git a/src/components/slider/__snapshots__/slider.spec.snap.js b/src/components/slider/__snapshots__/slider.spec.snap.js
new file mode 100644
index 00000000000..142974a7dc1
--- /dev/null
+++ b/src/components/slider/__snapshots__/slider.spec.snap.js
@@ -0,0 +1,138 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-slider renders"] = 
+`<div class="sbb-slider__height-container">
+  <div class="sbb-slider__wrapper">
+    <slot name="prefix">
+      <sbb-icon
+        aria-hidden="true"
+        data-namespace="default"
+        name="walk-slow-small"
+        role="img"
+      >
+      </sbb-icon>
+    </slot>
+    <div
+      class="sbb-slider__container"
+      style="--sbb-slider-value-fraction:0.2;"
+    >
+      <input
+        class="sbb-slider__range-input"
+        max="500"
+        min="0"
+        tabindex="-1"
+        type="range"
+        value="100"
+        valueasnumber="100"
+      >
+      <div class="sbb-slider__line">
+        <div class="sbb-slider__selected-line">
+        </div>
+      </div>
+      <div class="sbb-slider__knob">
+      </div>
+    </div>
+    <slot name="suffix">
+      <sbb-icon
+        aria-hidden="true"
+        data-namespace="default"
+        name="walk-fast-small"
+        role="img"
+      >
+      </sbb-icon>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot sbb-slider renders */
+
+snapshots["sbb-slider renders with no icons and default min/max"] = 
+`<div class="sbb-slider__height-container">
+  <div class="sbb-slider__wrapper">
+    <slot name="prefix">
+    </slot>
+    <div
+      class="sbb-slider__container"
+      style="--sbb-slider-value-fraction:0.01;"
+    >
+      <input
+        class="sbb-slider__range-input"
+        max="100"
+        min="0"
+        tabindex="-1"
+        type="range"
+        value="1"
+        valueasnumber="1"
+      >
+      <div class="sbb-slider__line">
+        <div class="sbb-slider__selected-line">
+        </div>
+      </div>
+      <div class="sbb-slider__knob">
+      </div>
+    </div>
+    <slot name="suffix">
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot sbb-slider renders with no icons and default min/max */
+
+snapshots["sbb-slider A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "slider",
+      "name": "",
+      "valuetext": "",
+      "valuemin": 0,
+      "valuemax": 100,
+      "orientation": "horizontal",
+      "value": 1
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-slider A11y tree Chrome */
+
+snapshots["sbb-slider A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "slider",
+      "name": "",
+      "valuetext": "1",
+      "value": "1"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-slider A11y tree Firefox */
+
+snapshots["sbb-slider A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "slider",
+      "name": "",
+      "valuemax": 100,
+      "orientation": "horizontal"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-slider A11y tree Safari */
+
diff --git a/src/components/slider/slider.spec.ts b/src/components/slider/slider.spec.ts
index 0ccc9eee2cd..9bac9702a9a 100644
--- a/src/components/slider/slider.spec.ts
+++ b/src/components/slider/slider.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../core/testing';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
 
 import './slider';
 
@@ -15,7 +16,6 @@ describe('sbb-slider', () => {
         value="100"
       ></sbb-slider>`,
     );
-
     await waitForLitRender(root);
 
     expect(root).dom.to.be.equal(`
@@ -35,25 +35,7 @@ describe('sbb-slider', () => {
       </sbb-slider>
     `);
 
-    expect(root).shadowDom.to.be.equal(`
-      <div class="sbb-slider__height-container">
-        <div class="sbb-slider__wrapper">
-          <slot name="prefix">
-            <sbb-icon aria-hidden="true" data-namespace="default" name="walk-slow-small" role="img">
-          </slot>
-          <div class="sbb-slider__container" style="--sbb-slider-value-fraction:0.2;">
-            <input class="sbb-slider__range-input" max="500" min="0" tabindex="-1" value="100" valueasnumber="100" type="range">
-            <div class="sbb-slider__line">
-              <div class="sbb-slider__selected-line"></div>
-            </div>
-            <div class="sbb-slider__knob"></div>
-          </div>
-          <slot name="suffix">
-            <sbb-icon aria-hidden="true" data-namespace="default" name="walk-fast-small" role="img">
-          </slot>
-        </div>
-      </div>
-    `);
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders with no icons and default min/max', async () => {
@@ -63,20 +45,8 @@ describe('sbb-slider', () => {
       <sbb-slider aria-disabled="false" aria-readonly="false" aria-valuemax="100" aria-valuemin="0" aria-valuenow="1" role="slider" tabindex="0" value='1' name=''></sbb-slider>
     `);
 
-    expect(root).shadowDom.to.be.equal(`
-      <div class="sbb-slider__height-container">
-        <div class="sbb-slider__wrapper">
-          <slot name="prefix"></slot>
-            <div class="sbb-slider__container" style="--sbb-slider-value-fraction:0.01;">
-              <input class="sbb-slider__range-input" max="100" min="0" tabindex="-1" value="1" valueasnumber="1" type="range">
-              <div class="sbb-slider__line">
-                <div class="sbb-slider__selected-line"></div>
-              </div>
-              <div class="sbb-slider__knob"></div>
-            </div>
-          <slot name="suffix"></slot>
-        </div>
-      </div>
-    `);
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-slider value="1"></sbb-slider>`);
 });
diff --git a/src/components/status/__snapshots__/status.spec.snap.js b/src/components/status/__snapshots__/status.spec.snap.js
index cbcde8cde8e..63601a24938 100644
--- a/src/components/status/__snapshots__/status.spec.snap.js
+++ b/src/components/status/__snapshots__/status.spec.snap.js
@@ -62,3 +62,65 @@ snapshots["sbb-status renders with the status title"] =
 `;
 /* end snapshot sbb-status renders with the status title */
 
+snapshots["sbb-status A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Title",
+      "level": 3
+    },
+    {
+      "role": "text",
+      "name": "Status info text"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-status A11y tree Chrome */
+
+snapshots["sbb-status A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Title",
+      "level": 3
+    },
+    {
+      "role": "text leaf",
+      "name": "Status info text "
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-status A11y tree Firefox */
+
+snapshots["sbb-status A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Title"
+    },
+    {
+      "role": "text",
+      "name": "Status info text"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-status A11y tree Safari */
+
diff --git a/src/components/status/status.spec.ts b/src/components/status/status.spec.ts
index ad6a91894b3..7ad902ecad5 100644
--- a/src/components/status/status.spec.ts
+++ b/src/components/status/status.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../core/testing';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
 
 import './status';
 import '../icon';
@@ -33,4 +34,9 @@ describe('sbb-status', () => {
     `);
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(
+    undefined,
+    html` <sbb-status type="info" title-content="Title"> Status info text </sbb-status>`,
+  );
 });
diff --git a/src/components/tabs/tab-group/__snapshots__/tab-group.spec.snap.js b/src/components/tabs/tab-group/__snapshots__/tab-group.spec.snap.js
new file mode 100644
index 00000000000..37b4ea0a09e
--- /dev/null
+++ b/src/components/tabs/tab-group/__snapshots__/tab-group.spec.snap.js
@@ -0,0 +1,135 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-tab-group renders"] = 
+`<div
+  class="tab-group"
+  role="tablist"
+>
+  <slot name="tab-bar">
+  </slot>
+</div>
+<div class="tab-content">
+  <slot>
+  </slot>
+</div>
+`;
+/* end snapshot sbb-tab-group renders */
+
+snapshots["sbb-tab-group A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "tab",
+      "name": "Test tab label 1",
+      "selected": true
+    },
+    {
+      "role": "tab",
+      "name": "Test tab label 2"
+    },
+    {
+      "role": "tab",
+      "name": "Test tab label 3"
+    },
+    {
+      "role": "tab",
+      "name": "Test tab label 4"
+    },
+    {
+      "role": "tabpanel",
+      "name": "",
+      "children": [
+        {
+          "role": "text",
+          "name": "Test tab content 1"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tab-group A11y tree Chrome */
+
+snapshots["sbb-tab-group A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "tab",
+      "name": "Test tab label 1",
+      "selected": true
+    },
+    {
+      "role": "tab",
+      "name": "Test tab label 2"
+    },
+    {
+      "role": "tab",
+      "name": "Test tab label 3"
+    },
+    {
+      "role": "tab",
+      "name": "Test tab label 4"
+    },
+    {
+      "role": "tabpanel",
+      "name": "",
+      "children": [
+        {
+          "role": "text leaf",
+          "name": "Test tab content 1"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tab-group A11y tree Firefox */
+
+snapshots["sbb-tab-group A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "tab",
+      "name": "Test tab label 1",
+      "selected": true
+    },
+    {
+      "role": "tab",
+      "name": "Test tab label 2"
+    },
+    {
+      "role": "tab",
+      "name": "Test tab label 3"
+    },
+    {
+      "role": "tab",
+      "name": "Test tab label 4"
+    },
+    {
+      "role": "tabpanel",
+      "name": "",
+      "children": [
+        {
+          "role": "text",
+          "name": "Test tab content 1"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tab-group A11y tree Safari */
+
diff --git a/src/components/tabs/tab-group/tab-group.spec.ts b/src/components/tabs/tab-group/tab-group.spec.ts
index d494c2d4722..cfd2c2dfeb0 100644
--- a/src/components/tabs/tab-group/tab-group.spec.ts
+++ b/src/components/tabs/tab-group/tab-group.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 
 import type { SbbTabGroupElement } from './tab-group';
 import '.';
@@ -28,17 +29,7 @@ describe('sbb-tab-group', () => {
     const root = await fixture(html`<sbb-tab-group></sbb-tab-group>`);
 
     expect(root).dom.to.be.equal(`<sbb-tab-group></sbb-tab-group>`);
-    expect(root).shadowDom.to.be.equal(
-      `
-        <div class="tab-group" role="tablist">
-          <slot name="tab-bar"></slot>
-        </div>
-
-        <div class="tab-content">
-          <slot></slot>
-        </div>
-      `,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('activates tab by index', async () => {
@@ -81,4 +72,6 @@ describe('sbb-tab-group', () => {
       expect(tab).to.have.attribute('active');
     });
   });
+
+  testA11yTreeSnapshot();
 });
diff --git a/src/components/tabs/tab-title/__snapshots__/tab-title.spec.snap.js b/src/components/tabs/tab-title/__snapshots__/tab-title.spec.snap.js
index 9266a5b0058..00464e7525f 100644
--- a/src/components/tabs/tab-title/__snapshots__/tab-title.spec.snap.js
+++ b/src/components/tabs/tab-title/__snapshots__/tab-title.spec.snap.js
@@ -69,3 +69,53 @@ snapshots["sbb-tab-title renders an H1 heading tag if the provided level is grea
 `;
 /* end snapshot sbb-tab-title renders an H1 heading tag if the provided level is greater than 6 */
 
+snapshots["sbb-tab-title A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Tab title",
+      "level": 1
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tab-title A11y tree Chrome */
+
+snapshots["sbb-tab-title A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Tab title",
+      "level": 1
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tab-title A11y tree Firefox */
+
+snapshots["sbb-tab-title A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Tab title"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tab-title A11y tree Safari */
+
diff --git a/src/components/tabs/tab-title/tab-title.spec.ts b/src/components/tabs/tab-title/tab-title.spec.ts
index 100b1d2dc8d..8783b958eef 100644
--- a/src/components/tabs/tab-title/tab-title.spec.ts
+++ b/src/components/tabs/tab-title/tab-title.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 
 import './tab-title';
 
@@ -30,4 +31,6 @@ describe('sbb-tab-title', () => {
     expect(root).dom.to.be.equal(`<sbb-tab-title level="7" amount="78"></sbb-tab-title>`);
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-tab-title>Tab title</sbb-tab-title>`);
 });
diff --git a/src/components/tag/tag-group/__snapshots__/tag-group.spec.snap.js b/src/components/tag/tag-group/__snapshots__/tag-group.spec.snap.js
new file mode 100644
index 00000000000..6bf209f3b33
--- /dev/null
+++ b/src/components/tag/tag-group/__snapshots__/tag-group.spec.snap.js
@@ -0,0 +1,129 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-tag-group renders - Dom"] = 
+`<sbb-tag-group role="group">
+  <sbb-tag
+    slot="li-0"
+    value="tag-1"
+  >
+    First tag
+  </sbb-tag>
+  <sbb-tag
+    slot="li-1"
+    value="tag-2"
+  >
+    Second tag
+  </sbb-tag>
+  <div slot="li-2">
+  </div>
+  <sbb-tag
+    slot="li-3"
+    value="tag-3"
+  >
+    Third tag
+  </sbb-tag>
+</sbb-tag-group>
+`;
+/* end snapshot sbb-tag-group renders - Dom */
+
+snapshots["sbb-tag-group renders - ShadowDom"] = 
+`<div class="sbb-tag-group">
+  <ul class="sbb-tag-group__list">
+    <li>
+      <slot name="li-0">
+      </slot>
+    </li>
+    <li>
+      <slot name="li-1">
+      </slot>
+    </li>
+    <li>
+      <slot name="li-2">
+      </slot>
+    </li>
+    <li>
+      <slot name="li-3">
+      </slot>
+    </li>
+  </ul>
+  <span hidden="">
+    <slot>
+    </slot>
+  </span>
+</div>
+`;
+/* end snapshot sbb-tag-group renders - ShadowDom */
+
+snapshots["sbb-tag-group A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "First tag"
+    },
+    {
+      "role": "text",
+      "name": "Second tag"
+    },
+    {
+      "role": "text",
+      "name": "Third tag"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tag-group A11y tree Chrome */
+
+snapshots["sbb-tag-group A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "First tag"
+    },
+    {
+      "role": "text leaf",
+      "name": "Second tag"
+    },
+    {
+      "role": "text leaf",
+      "name": "Third tag"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tag-group A11y tree Firefox */
+
+snapshots["sbb-tag-group A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "First tag"
+    },
+    {
+      "role": "text",
+      "name": "Second tag"
+    },
+    {
+      "role": "text",
+      "name": "Third tag"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tag-group A11y tree Safari */
+
diff --git a/src/components/tag/tag-group/tag-group.spec.ts b/src/components/tag/tag-group/tag-group.spec.ts
index 42171dba5bb..39ccb64c123 100644
--- a/src/components/tag/tag-group/tag-group.spec.ts
+++ b/src/components/tag/tag-group/tag-group.spec.ts
@@ -1,10 +1,17 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
+import type { SbbTagGroupElement } from './tag-group';
 import './tag-group';
 
 describe('sbb-tag-group', () => {
-  it('renders', async () => {
-    const root = await fixture(html`
+  let element: SbbTagGroupElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`
       <sbb-tag-group>
         <sbb-tag value="tag-1">First tag</sbb-tag>
         <sbb-tag value="tag-2">Second tag</sbb-tag>
@@ -12,45 +19,16 @@ describe('sbb-tag-group', () => {
         <sbb-tag value="tag-3">Third tag</sbb-tag>
       </sbb-tag-group>
     `);
+    await waitForLitRender(element);
+  });
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-tag-group role="group">
-          <sbb-tag slot="li-0" value="tag-1">
-            First tag
-          </sbb-tag>
-          <sbb-tag slot="li-1" value="tag-2">
-            Second tag
-          </sbb-tag>
-          <div slot="li-2"></div>
-          <sbb-tag slot="li-3" value="tag-3">
-            Third tag
-          </sbb-tag>
-        </sbb-tag-group>
-      `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <div class="sbb-tag-group">
-          <ul class="sbb-tag-group__list">
-            <li>
-              <slot name="li-0"></slot>
-            </li>
-            <li>
-              <slot name="li-1"></slot>
-            </li>
-            <li>
-              <slot name="li-2"></slot>
-            </li>
-            <li>
-              <slot name="li-3"></slot>
-            </li>
-          </ul>
-          <span hidden="">
-            <slot></slot>
-          </span>
-        </div>
-      `,
-    );
+  it('renders - Dom', async () => {
+    await expect(element).dom.to.be.equalSnapshot();
   });
+
+  it('renders - ShadowDom', async () => {
+    await expect(element).shadowDom.to.be.equalSnapshot();
+  });
+
+  testA11yTreeSnapshot();
 });
diff --git a/src/components/tag/tag/__snapshots__/tag.spec.snap.js b/src/components/tag/tag/__snapshots__/tag.spec.snap.js
index 5b350f4917b..d5eb644d9a1 100644
--- a/src/components/tag/tag/__snapshots__/tag.spec.snap.js
+++ b/src/components/tag/tag/__snapshots__/tag.spec.snap.js
@@ -81,3 +81,52 @@ snapshots["sbb-tag renders slotted icon and amount"] =
 `;
 /* end snapshot sbb-tag renders slotted icon and amount */
 
+snapshots["sbb-tag A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Label",
+      "pressed": false
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tag A11y tree Chrome */
+
+snapshots["sbb-tag A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "toggle button",
+      "name": "Label"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tag A11y tree Firefox */
+
+snapshots["sbb-tag A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Label"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tag A11y tree Safari */
+
diff --git a/src/components/tag/tag/tag.spec.ts b/src/components/tag/tag/tag.spec.ts
index 3b699ca50a1..a0d3a70fdd2 100644
--- a/src/components/tag/tag/tag.spec.ts
+++ b/src/components/tag/tag/tag.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 
 import './tag';
 
@@ -76,4 +77,6 @@ describe('sbb-tag', () => {
     );
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-tag value="Value">Label</sbb-tag>`);
 });
diff --git a/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js b/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js
new file mode 100644
index 00000000000..975977d313b
--- /dev/null
+++ b/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js
@@ -0,0 +1,206 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-teaser-hero should render without link"] = 
+`<span class="sbb-teaser-hero">
+  <span class="sbb-teaser-hero__panel">
+    <p class="sbb-teaser-hero__panel-text">
+      <slot>
+      </slot>
+    </p>
+  </span>
+  <slot name="image">
+    <sbb-image
+      alt="SBB CFF FFS Employee"
+      image-src="https://cdn.img.sbb.ch/content/dam/internet/lyne/Hoehenrundweg-Gryden-Lenk.jpg"
+    >
+    </sbb-image>
+  </slot>
+</span>
+`;
+/* end snapshot sbb-teaser-hero should render without link */
+
+snapshots["sbb-teaser-hero should render with slots"] = 
+`<a
+  class="sbb-teaser-hero"
+  href="https://www.sbb.ch"
+  role="presentation"
+  tabindex="-1"
+>
+  <span class="sbb-teaser-hero__panel">
+    <p class="sbb-teaser-hero__panel-text">
+      <slot>
+      </slot>
+    </p>
+    <sbb-link
+      class="sbb-teaser-hero__panel-link"
+      data-slot-names="link-content unnamed"
+      dir="ltr"
+      icon-name="chevron-small-right-small"
+      icon-placement="end"
+      is-static=""
+      negative=""
+      size="m"
+      variant="block"
+    >
+      <slot name="link-content">
+      </slot>
+    </sbb-link>
+  </span>
+  <slot name="image">
+  </slot>
+</a>
+`;
+/* end snapshot sbb-teaser-hero should render with slots */
+
+snapshots["sbb-teaser-hero should render all properties Dom"] = 
+`<sbb-teaser-hero
+  aria-label="label"
+  dir="ltr"
+  href="https://www.sbb.ch"
+  image-alt="SBB CFF FFS Employee"
+  image-src="https://cdn.img.sbb.ch/content/dam/internet/lyne/Hoehenrundweg-Gryden-Lenk.jpg"
+  link-content="Find out more"
+  rel="external"
+  role="link"
+  tabindex="0"
+  target="_blank"
+>
+  Break out and explore castles and palaces.
+</sbb-teaser-hero>
+`;
+/* end snapshot sbb-teaser-hero should render all properties Dom */
+
+snapshots["sbb-teaser-hero should render all properties ShadowDom"] = 
+`<a
+  class="sbb-teaser-hero"
+  href="https://www.sbb.ch"
+  rel="external"
+  role="presentation"
+  tabindex="-1"
+  target="_blank"
+>
+  <span class="sbb-teaser-hero__panel">
+    <p class="sbb-teaser-hero__panel-text">
+      <slot>
+      </slot>
+    </p>
+    <sbb-link
+      class="sbb-teaser-hero__panel-link"
+      data-slot-names="unnamed"
+      dir="ltr"
+      icon-name="chevron-small-right-small"
+      icon-placement="end"
+      is-static=""
+      negative=""
+      size="m"
+      variant="block"
+    >
+      <slot name="link-content">
+        Find out more
+      </slot>
+    </sbb-link>
+  </span>
+  <slot name="image">
+    <sbb-image
+      alt="SBB CFF FFS Employee"
+      image-src="https://cdn.img.sbb.ch/content/dam/internet/lyne/Hoehenrundweg-Gryden-Lenk.jpg"
+    >
+    </sbb-image>
+  </slot>
+  <span class="sbb-teaser-hero__opens-in-new-window">
+    . Link target opens in new window.
+  </span>
+</a>
+`;
+/* end snapshot sbb-teaser-hero should render all properties ShadowDom */
+
+snapshots["sbb-teaser-hero should render all properties A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "label",
+      "children": [
+        {
+          "role": "link",
+          "name": "Break out and explore castles and palaces. Find out more . Link target opens in new window."
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-teaser-hero should render all properties A11y tree Chrome */
+
+snapshots["sbb-teaser-hero should render all properties A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "label",
+      "children": [
+        {
+          "role": "link",
+          "name": "Break out and explore castles and palaces. Find out more . Link target opens in new window.",
+          "value": "https://www.sbb.ch/"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-teaser-hero should render all properties A11y tree Firefox */
+
+snapshots["sbb-teaser-hero should render all properties A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "label",
+      "children": [
+        {
+          "role": "link",
+          "name": "Break out and explore castles and palaces. Find out more . Link target opens in new window.",
+          "children": [
+            {
+              "role": "text",
+              "name": "Break out and explore castles and palaces."
+            },
+            {
+              "role": "text",
+              "name": "Find out more"
+            },
+            {
+              "role": "image",
+              "name": "SBB CFF FFS Employee"
+            },
+            {
+              "role": "text",
+              "name": ". "
+            },
+            {
+              "role": "text",
+              "name": "Link target opens in new window."
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-teaser-hero should render all properties A11y tree Safari */
+
diff --git a/src/components/teaser-hero/teaser-hero.spec.ts b/src/components/teaser-hero/teaser-hero.spec.ts
index 1523a1779f0..2464cd7c040 100644
--- a/src/components/teaser-hero/teaser-hero.spec.ts
+++ b/src/components/teaser-hero/teaser-hero.spec.ts
@@ -2,28 +2,20 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import sampleImages from '../core/images';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
+import type { SbbTeaserHeroElement } from './teaser-hero';
 import './teaser-hero';
 import '../link';
 import '../image';
 
 describe('sbb-teaser-hero', () => {
-  it('should render all properties', async () => {
-    const root = await fixture(
-      html`<sbb-teaser-hero
-        aria-label="label"
-        href="https://www.sbb.ch"
-        rel="external"
-        target="_blank"
-        link-content="Find out more"
-        image-src="${sampleImages[1]}"
-        image-alt="SBB CFF FFS Employee"
-        >Break out and explore castles and palaces.</sbb-teaser-hero
-      >`,
-    );
+  describe('should render all properties', () => {
+    let element: SbbTeaserHeroElement;
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-teaser-hero
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-teaser-hero
           aria-label="label"
           href="https://www.sbb.ch"
           rel="external"
@@ -31,51 +23,20 @@ describe('sbb-teaser-hero', () => {
           link-content="Find out more"
           image-src="${sampleImages[1]}"
           image-alt="SBB CFF FFS Employee"
-          role="link"
-          tabindex="0"
-          dir="ltr"
-        >
-          Break out and explore castles and palaces.
-        </sbb-teaser-hero>
-      `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <a
-          class="sbb-teaser-hero"
-          href="https://www.sbb.ch"
-          rel="external"
-          target="_blank"
-          role="presentation"
-          tabindex="-1"
-        >
-          <span class="sbb-teaser-hero__panel">
-            <p class="sbb-teaser-hero__panel-text">
-              <slot></slot>
-            </p>
-            <sbb-link
-              dir="ltr"
-              is-static
-              variant="block"
-              class="sbb-teaser-hero__panel-link"
-              icon-name="chevron-small-right-small"
-              icon-placement="end"
-              size="m"
-              negative
-              data-slot-names="unnamed"
-            >
-              <slot name="link-content">Find out more</slot>
-            </sbb-link>
-          </span>
-          <slot name="image">
-            <sbb-image image-src="${sampleImages[1]}" alt="SBB CFF FFS Employee"></sbb-image>
-          </slot>
-          <span class="sbb-teaser-hero__opens-in-new-window">
-            . Link target opens in new window.
-          </span>
-        </a>
-      `,
-    );
+          >Break out and explore castles and palaces.</sbb-teaser-hero
+        >`,
+      );
+    });
+
+    it('Dom', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('ShadowDom', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 
   it('should render without link', async () => {
@@ -96,20 +57,7 @@ describe('sbb-teaser-hero', () => {
         </sbb-teaser-hero>
       `,
     );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <span class="sbb-teaser-hero">
-          <span class="sbb-teaser-hero__panel">
-            <p class="sbb-teaser-hero__panel-text">
-              <slot></slot>
-            </p>
-          </span>
-          <slot name="image">
-            <sbb-image image-src="${sampleImages[1]}" alt="SBB CFF FFS Employee"></sbb-image>
-          </slot>
-        </span>
-      `,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('should render with slots', async () => {
@@ -133,35 +81,6 @@ describe('sbb-teaser-hero', () => {
         </sbb-teaser-hero>
       `,
     );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <a
-          class="sbb-teaser-hero"
-          href="https://www.sbb.ch"
-          role="presentation"
-          tabindex="-1"
-        >
-          <span class="sbb-teaser-hero__panel">
-            <p class="sbb-teaser-hero__panel-text">
-              <slot></slot>
-            </p>
-            <sbb-link
-              dir="ltr"
-              is-static
-              variant="block"
-              class="sbb-teaser-hero__panel-link"
-              icon-name="chevron-small-right-small"
-              icon-placement="end"
-              size="m"
-              negative
-              data-slot-names="link-content unnamed"
-            >
-              <slot name="link-content"></slot>
-            </sbb-link>
-          </span>
-          <slot name="image"></slot>
-        </a>
-      `,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 });
diff --git a/src/components/teaser/__snapshots__/teaser.spec.snap.js b/src/components/teaser/__snapshots__/teaser.spec.snap.js
index b911da5ed45..c0d2dca0ac1 100644
--- a/src/components/teaser/__snapshots__/teaser.spec.snap.js
+++ b/src/components/teaser/__snapshots__/teaser.spec.snap.js
@@ -222,3 +222,76 @@ snapshots["sbb-teaser renders static - ShadowDOM"] =
 `;
 /* end snapshot sbb-teaser renders static - ShadowDOM */
 
+snapshots["sbb-teaser A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "SBB teaser",
+      "children": [
+        {
+          "role": "link",
+          "name": "​"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-teaser A11y tree Chrome */
+
+snapshots["sbb-teaser A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "SBB teaser",
+      "children": [
+        {
+          "role": "link",
+          "name": "​",
+          "value": "https://github.com/lyne-design-system/lyne-components"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-teaser A11y tree Firefox */
+
+snapshots["sbb-teaser A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "SBB teaser",
+      "children": [
+        {
+          "role": "link",
+          "name": "​",
+          "children": [
+            {
+              "role": "text",
+              "name": "​"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-teaser A11y tree Safari */
+
diff --git a/src/components/teaser/teaser.spec.ts b/src/components/teaser/teaser.spec.ts
index df0bc1a1657..e05d2aa4fe5 100644
--- a/src/components/teaser/teaser.spec.ts
+++ b/src/components/teaser/teaser.spec.ts
@@ -4,6 +4,7 @@ import { html } from 'lit/static-html.js';
 
 import { sbbSpread } from '../core/dom';
 import images from '../core/images';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
 
 import type { SbbTeaserElement } from './teaser';
 import './teaser';
@@ -86,4 +87,6 @@ describe('sbb-teaser', () => {
     const root: SbbTeaserElement = await fixture(createTeaser({ alignment: 'after-centered' }));
     await expect(root).shadowDom.to.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(undefined, createTeaser(argsAfterCentered));
 });
diff --git a/src/components/time-input/__snapshots__/time-input.spec.snap.js b/src/components/time-input/__snapshots__/time-input.spec.snap.js
new file mode 100644
index 00000000000..746f08bee1c
--- /dev/null
+++ b/src/components/time-input/__snapshots__/time-input.spec.snap.js
@@ -0,0 +1,67 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-time-input renders"] = 
+`<span>
+  <sbb-time-input input="id-1">
+  </sbb-time-input>
+  <input
+    data-sbb-time-input=""
+    id="id-1"
+    inputmode="numeric"
+    maxlength="5"
+    placeholder="HH:MM"
+    type="text"
+  >
+</span>
+`;
+/* end snapshot sbb-time-input renders */
+
+snapshots["sbb-time-input A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "textbox",
+      "name": "HH:MM"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-time-input A11y tree Chrome */
+
+snapshots["sbb-time-input A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "textbox",
+      "name": "HH:MM"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-time-input A11y tree Firefox */
+
+snapshots["sbb-time-input A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "textbox",
+      "name": "HH:MM"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-time-input A11y tree Safari */
+
diff --git a/src/components/time-input/time-input.spec.ts b/src/components/time-input/time-input.spec.ts
index d43c935dec4..b075d4b0464 100644
--- a/src/components/time-input/time-input.spec.ts
+++ b/src/components/time-input/time-input.spec.ts
@@ -1,5 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
 import './time-input';
 
 describe('sbb-time-input', () => {
@@ -12,15 +15,17 @@ describe('sbb-time-input', () => {
     );
     const elem = root.querySelector('sbb-time-input');
 
-    expect(root).dom.to.be.equal(`
-      <span>
-        <sbb-time-input input="id-1">
-        </sbb-time-input>
-        <input id="id-1" placeholder="HH:MM" type="text" maxlength="5" inputmode="numeric" data-sbb-time-input>
-      </span>
-    `);
+    await expect(root).dom.to.be.equalSnapshot();
     expect(elem).shadowDom.to.be.equal(`
       <p role="status"></p>
     `);
   });
+
+  testA11yTreeSnapshot(
+    undefined,
+    html` <span>
+      <sbb-time-input input="id-1"></sbb-time-input>
+      <input id="id-1" />
+    </span>`,
+  );
 });
diff --git a/src/components/title/__snapshots__/title.spec.snap.js b/src/components/title/__snapshots__/title.spec.snap.js
new file mode 100644
index 00000000000..123216698ee
--- /dev/null
+++ b/src/components/title/__snapshots__/title.spec.snap.js
@@ -0,0 +1,54 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-title A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Sample Title Text",
+      "level": 1
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-title A11y tree Chrome */
+
+snapshots["sbb-title A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Sample Title Text",
+      "level": 1
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-title A11y tree Firefox */
+
+snapshots["sbb-title A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Sample Title Text",
+      "level": 1
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-title A11y tree Safari */
+
diff --git a/src/components/title/title.spec.ts b/src/components/title/title.spec.ts
index bfda994a901..c203ffe33ca 100644
--- a/src/components/title/title.spec.ts
+++ b/src/components/title/title.spec.ts
@@ -1,8 +1,10 @@
-import './title';
-
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
+import './title';
+
 describe('sbb-title', () => {
   it('renders', async () => {
     const root = await fixture(
@@ -18,4 +20,9 @@ describe('sbb-title', () => {
       <h1 class="sbb-title" role="presentation"><slot></slot></h1>
     `);
   });
+
+  testA11yTreeSnapshot(
+    undefined,
+    html`<sbb-title level="1" visual-level="2">Sample Title Text</sbb-title>`,
+  );
 });
diff --git a/src/components/toast/__snapshots__/toast.spec.snap.js b/src/components/toast/__snapshots__/toast.spec.snap.js
new file mode 100644
index 00000000000..f1dfece1f48
--- /dev/null
+++ b/src/components/toast/__snapshots__/toast.spec.snap.js
@@ -0,0 +1,152 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-toast renders Chrome-Safari Dom"] = 
+`<sbb-toast
+  data-slot-names="unnamed"
+  data-state="closed"
+  dismissible=""
+  icon-name="circle-tick-small"
+  position="bottom-center"
+>
+  <span>
+    'Lorem ipsum dolor'
+  </span>
+</sbb-toast>
+`;
+/* end snapshot sbb-toast renders Chrome-Safari Dom */
+
+snapshots["sbb-toast renders Chrome-Safari ShadowDom"] = 
+`<div class="sbb-toast__overlay-container">
+  <div class="sbb-toast">
+    <div class="sbb-toast__icon">
+      <slot name="icon">
+        <sbb-icon
+          aria-hidden="true"
+          data-namespace="default"
+          name="circle-tick-small"
+          role="img"
+        >
+        </sbb-icon>
+      </slot>
+    </div>
+    <div
+      aria-live="polite"
+      class="sbb-toast__content"
+    >
+      <slot>
+      </slot>
+    </div>
+    <div class="sbb-toast__action">
+      <slot name="action">
+        <sbb-button
+          aria-label="Close message"
+          class="sbb-toast__action-button"
+          dir="ltr"
+          icon-name="cross-small"
+          negative=""
+          role="button"
+          sbb-toast-close=""
+          size="m"
+          tabindex="0"
+          variant="transparent"
+        >
+        </sbb-button>
+      </slot>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot sbb-toast renders Chrome-Safari ShadowDom */
+
+snapshots["sbb-toast renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-toast renders A11y tree Chrome */
+
+snapshots["sbb-toast renders Firefox Dom"] = 
+`<sbb-toast
+  data-slot-names="unnamed"
+  data-state="closed"
+  dismissible=""
+  icon-name="circle-tick-small"
+  position="bottom-center"
+>
+  <span>
+    'Lorem ipsum dolor'
+  </span>
+</sbb-toast>
+`;
+/* end snapshot sbb-toast renders Firefox Dom */
+
+snapshots["sbb-toast renders Firefox ShadowDom"] = 
+`<div class="sbb-toast__overlay-container">
+  <div
+    class="sbb-toast"
+    role="status"
+  >
+    <div class="sbb-toast__icon">
+      <slot name="icon">
+        <sbb-icon
+          aria-hidden="true"
+          data-namespace="default"
+          name="circle-tick-small"
+          role="img"
+        >
+        </sbb-icon>
+      </slot>
+    </div>
+    <div
+      aria-live="polite"
+      class="sbb-toast__content"
+    >
+      <slot>
+      </slot>
+    </div>
+    <div class="sbb-toast__action">
+      <slot name="action">
+        <sbb-button
+          aria-label="Close message"
+          class="sbb-toast__action-button"
+          dir="ltr"
+          icon-name="cross-small"
+          negative=""
+          role="button"
+          sbb-toast-close=""
+          size="m"
+          tabindex="0"
+          variant="transparent"
+        >
+        </sbb-button>
+      </slot>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot sbb-toast renders Firefox ShadowDom */
+
+snapshots["sbb-toast renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-toast renders A11y tree Firefox */
+
+snapshots["sbb-toast renders A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-toast renders A11y tree Safari */
+
diff --git a/src/components/toast/toast.spec.ts b/src/components/toast/toast.spec.ts
index a564809bf20..3505dab2e1d 100644
--- a/src/components/toast/toast.spec.ts
+++ b/src/components/toast/toast.spec.ts
@@ -3,49 +3,43 @@ import { html } from 'lit/static-html.js';
 
 import { isFirefox } from '../core/dom';
 import { waitForLitRender } from '../core/testing';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
 
 import type { SbbToastElement } from './toast';
 
 import './toast';
 
 describe('sbb-toast', () => {
-  it('renders', async () => {
-    const root: SbbToastElement = await fixture(html`
-      <sbb-toast icon-name="circle-tick-small" dismissible> 'Lorem ipsum dolor' </sbb-toast>
-    `);
-
-    await waitForLitRender(root);
-
-    expect(root).dom.to.be.equal(`
-      <sbb-toast position="bottom-center" icon-name="circle-tick-small" dismissible="" data-state="closed" 
-        data-slot-names="unnamed"
-      >
-        <span>'Lorem ipsum dolor'</span>
-      </sbb-toast>
-    `);
-    expect(root).shadowDom.to.be.equal(`
-      <div class="sbb-toast__overlay-container">
-        <div class="sbb-toast" ${isFirefox() ? 'role="status"' : ''}>
-          <div class="sbb-toast__icon">
-            <slot name="icon">
-              <sbb-icon name="circle-tick-small" role="img" aria-hidden="true" data-namespace="default">
-              </sbb-icon>
-            </slot>
-          </div>
-          <div class="sbb-toast__content" aria-live="polite">
-            <slot></slot>
-          </div>
-          <div class="sbb-toast__action">
-            <slot name="action">
-              <sbb-button class="sbb-toast__action-button" aria-label="Close message"
-                variant="transparent" negative size="m" icon-name="cross-small"
-                dir="ltr" role="button" tabindex="0" sbb-toast-close
-              >
-              </sbb-button>
-            </slot>
-          </div>
-        </div>
-      </div>
-    `);
+  describe('renders', () => {
+    let elem: SbbToastElement;
+
+    beforeEach(async () => {
+      elem = await fixture(html`
+        <sbb-toast icon-name="circle-tick-small" dismissible> 'Lorem ipsum dolor' </sbb-toast>
+      `);
+      await waitForLitRender(elem);
+    });
+
+    (!isFirefox() ? describe : describe.skip)('Chrome-Safari', async () => {
+      it('Dom', async () => {
+        await expect(elem).dom.to.be.equalSnapshot();
+      });
+
+      it('ShadowDom', async () => {
+        await expect(elem).shadowDom.to.be.equalSnapshot();
+      });
+    });
+
+    (isFirefox() ? describe : describe.skip)('Firefox', async () => {
+      it('Dom', async () => {
+        await expect(elem).dom.to.be.equalSnapshot();
+      });
+
+      it('ShadowDom', async () => {
+        await expect(elem).shadowDom.to.be.equalSnapshot();
+      });
+    });
+
+    testA11yTreeSnapshot();
   });
 });
diff --git a/src/components/toggle-check/__snapshots__/toggle-check.spec.snap.js b/src/components/toggle-check/__snapshots__/toggle-check.spec.snap.js
new file mode 100644
index 00000000000..df5e6ffdb9a
--- /dev/null
+++ b/src/components/toggle-check/__snapshots__/toggle-check.spec.snap.js
@@ -0,0 +1,229 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-toggle-check renders sbb-toggle-check"] = 
+`<label class="sbb-toggle-check">
+  <input
+    aria-hidden="true"
+    tabindex="-1"
+    type="checkbox"
+  >
+  <span class="sbb-toggle-check__container">
+    <span
+      class="sbb-toggle-check__label"
+      hidden=""
+    >
+      <slot>
+      </slot>
+    </span>
+    <span class="sbb-toggle-check__track">
+      <span class="sbb-toggle-check__circle">
+        <span class="sbb-toggle-check__icon">
+          <slot name="icon">
+            <sbb-icon
+              aria-hidden="true"
+              data-namespace="default"
+              name="tick-small"
+              role="img"
+            >
+            </sbb-icon>
+          </slot>
+        </span>
+      </span>
+    </span>
+  </span>
+</label>
+`;
+/* end snapshot sbb-toggle-check renders sbb-toggle-check */
+
+snapshots["sbb-toggle-check label position renders label before toggle"] = 
+`<label class="sbb-toggle-check">
+  <input
+    aria-hidden="true"
+    tabindex="-1"
+    type="checkbox"
+  >
+  <span class="sbb-toggle-check__container">
+    <span class="sbb-toggle-check__label">
+      <slot>
+      </slot>
+    </span>
+    <span class="sbb-toggle-check__track">
+      <span class="sbb-toggle-check__circle">
+        <span class="sbb-toggle-check__icon">
+          <slot name="icon">
+            <sbb-icon
+              aria-hidden="true"
+              data-namespace="default"
+              name="tick-small"
+              role="img"
+            >
+            </sbb-icon>
+          </slot>
+        </span>
+      </span>
+    </span>
+  </span>
+</label>
+`;
+/* end snapshot sbb-toggle-check label position renders label before toggle */
+
+snapshots["sbb-toggle-check states checked state renders toggle in checked state"] = 
+`<label class="sbb-toggle-check">
+  <input
+    aria-hidden="true"
+    checked=""
+    tabindex="-1"
+    type="checkbox"
+  >
+  <span class="sbb-toggle-check__container">
+    <span
+      class="sbb-toggle-check__label"
+      hidden=""
+    >
+      <slot>
+      </slot>
+    </span>
+    <span class="sbb-toggle-check__track">
+      <span class="sbb-toggle-check__circle">
+        <span class="sbb-toggle-check__icon">
+          <slot name="icon">
+            <sbb-icon
+              aria-hidden="true"
+              data-namespace="default"
+              name="tick-small"
+              role="img"
+            >
+            </sbb-icon>
+          </slot>
+        </span>
+      </span>
+    </span>
+  </span>
+</label>
+`;
+/* end snapshot sbb-toggle-check states checked state renders toggle in checked state */
+
+snapshots["sbb-toggle-check states disabled state renders toggle in disabled state"] = 
+`<label class="sbb-toggle-check">
+  <input
+    aria-hidden="true"
+    disabled=""
+    tabindex="-1"
+    type="checkbox"
+  >
+  <span class="sbb-toggle-check__container">
+    <span
+      class="sbb-toggle-check__label"
+      hidden=""
+    >
+      <slot>
+      </slot>
+    </span>
+    <span class="sbb-toggle-check__track">
+      <span class="sbb-toggle-check__circle">
+        <span class="sbb-toggle-check__icon">
+          <slot name="icon">
+            <sbb-icon
+              aria-hidden="true"
+              data-namespace="default"
+              name="tick-small"
+              role="img"
+            >
+            </sbb-icon>
+          </slot>
+        </span>
+      </span>
+    </span>
+  </span>
+</label>
+`;
+/* end snapshot sbb-toggle-check states disabled state renders toggle in disabled state */
+
+snapshots["sbb-toggle-check states disabled and checked state renders toggle in disabled and checked state"] = 
+`<label class="sbb-toggle-check">
+  <input
+    aria-hidden="true"
+    checked=""
+    disabled=""
+    tabindex="-1"
+    type="checkbox"
+  >
+  <span class="sbb-toggle-check__container">
+    <span
+      class="sbb-toggle-check__label"
+      hidden=""
+    >
+      <slot>
+      </slot>
+    </span>
+    <span class="sbb-toggle-check__track">
+      <span class="sbb-toggle-check__circle">
+        <span class="sbb-toggle-check__icon">
+          <slot name="icon">
+            <sbb-icon
+              aria-hidden="true"
+              data-namespace="default"
+              name="tick-small"
+              role="img"
+            >
+            </sbb-icon>
+          </slot>
+        </span>
+      </span>
+    </span>
+  </span>
+</label>
+`;
+/* end snapshot sbb-toggle-check states disabled and checked state renders toggle in disabled and checked state */
+
+snapshots["sbb-toggle-check A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "checkbox",
+      "name": "​",
+      "checked": false
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle-check A11y tree Chrome */
+
+snapshots["sbb-toggle-check A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "checkbox",
+      "name": "​"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle-check A11y tree Firefox */
+
+snapshots["sbb-toggle-check A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "checkbox",
+      "name": "​",
+      "checked": false
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle-check A11y tree Safari */
+
diff --git a/src/components/toggle-check/toggle-check.spec.ts b/src/components/toggle-check/toggle-check.spec.ts
index 63089e44b4d..07ee172fe6b 100644
--- a/src/components/toggle-check/toggle-check.spec.ts
+++ b/src/components/toggle-check/toggle-check.spec.ts
@@ -2,44 +2,21 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../core/testing';
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
 
 import './toggle-check';
 
 describe('sbb-toggle-check', () => {
   it('renders sbb-toggle-check', async () => {
     const root = await fixture(html`<sbb-toggle-check></sbb-toggle-check>`);
+    await waitForLitRender(root);
 
     expect(root).dom.to.be.equal(`
         <sbb-toggle-check size="s" aria-checked="false" aria-disabled="false" aria-required="false" label-position="after" role="checkbox" tabindex="0">
         </sbb-toggle-check>
     `);
 
-    await waitForLitRender(root);
-
-    expect(root).shadowDom.to.be.equal(`
-      <label class="sbb-toggle-check">
-        <input aria-hidden="true" tabindex="-1" type="checkbox"/>
-        <span class="sbb-toggle-check__container">
-          <span class="sbb-toggle-check__label" hidden="">
-            <slot></slot>
-          </span>
-          <span class="sbb-toggle-check__track">
-            <span class="sbb-toggle-check__circle">
-              <span class="sbb-toggle-check__icon">
-                <slot name="icon">
-                  <sbb-icon
-                    aria-hidden="true"
-                    data-namespace="default"
-                    name="tick-small"
-                    role="img"
-                  ></sbb-icon>
-                </slot>
-              </span>
-            </span>
-          </span>
-        </span>
-      </label>
-    `);
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   describe('label position', () => {
@@ -55,29 +32,7 @@ describe('sbb-toggle-check', () => {
           Check it
         </sbb-toggle-check>
       `);
-      expect(root).shadowDom.to.be.equal(`
-        <label class="sbb-toggle-check">
-          <input aria-hidden="true" tabindex="-1" type="checkbox"/>
-          <span class="sbb-toggle-check__container">
-            <span class="sbb-toggle-check__label">
-              <slot></slot>
-            </span>
-            <span class="sbb-toggle-check__track">
-            <span class="sbb-toggle-check__circle">
-              <span class="sbb-toggle-check__icon">
-                <slot name="icon">
-                  <sbb-icon
-                    aria-hidden="true"
-                    data-namespace="default"
-                    name="tick-small"
-                    role="img"
-                  ></sbb-icon>
-                </slot>
-              </span>
-            </span>
-          </span>
-        </label>
-      `);
+      await expect(root).shadowDom.to.be.equalSnapshot();
     });
   });
 
@@ -94,30 +49,7 @@ describe('sbb-toggle-check', () => {
           </sbb-toggle-check>
         `,
         );
-        expect(root).shadowDom.to.be.equal(`
-          <label class="sbb-toggle-check">
-            <input aria-hidden="true" checked="" tabindex="-1" checked="" type="checkbox"/>
-            <span class="sbb-toggle-check__container">
-              <span class="sbb-toggle-check__label" hidden="">
-                <slot></slot>
-              </span>
-              <span class="sbb-toggle-check__track">
-                <span class="sbb-toggle-check__circle">
-                  <span class="sbb-toggle-check__icon">
-                    <slot name="icon">
-                      <sbb-icon
-                        aria-hidden="true"
-                        data-namespace="default"
-                        name="tick-small"
-                        role="img"
-                      ></sbb-icon>
-                    </slot>
-                  </span>
-                </span>
-              </span>
-            </span>
-          </label>
-        `);
+        await expect(root).shadowDom.to.be.equalSnapshot();
       });
     });
 
@@ -131,30 +63,7 @@ describe('sbb-toggle-check', () => {
           <sbb-toggle-check size="s" aria-checked="false" aria-disabled="true" aria-required="false" disabled label-position="after" role="checkbox">
           </sbb-toggle-check>
         `);
-        expect(root).shadowDom.to.be.equal(`
-          <label class="sbb-toggle-check">
-            <input disabled aria-hidden="true" tabindex="-1" type="checkbox">
-            <span class="sbb-toggle-check__container">
-              <span class="sbb-toggle-check__label" hidden="">
-                <slot></slot>
-              </span>
-              <span class="sbb-toggle-check__track">
-                <span class="sbb-toggle-check__circle">
-                  <span class="sbb-toggle-check__icon">
-                    <slot name="icon">
-                      <sbb-icon
-                        aria-hidden="true"
-                        data-namespace="default"
-                        name="tick-small"
-                        role="img"
-                      ></sbb-icon>
-                    </slot>
-                  </span>
-                </span>
-              </span>
-            </span>
-          </label>
-        `);
+        await expect(root).shadowDom.to.be.equalSnapshot();
       });
     });
 
@@ -164,38 +73,14 @@ describe('sbb-toggle-check', () => {
 
         await waitForLitRender(root);
 
-        expect(root).dom.to.be.equal(
-          `
+        expect(root).dom.to.be.equal(`
           <sbb-toggle-check checked disabled size="s" label-position="after" aria-checked="true" aria-disabled="true" aria-required="false" role="checkbox">
-
           </sbb-toggle-check>
-        `,
-        );
-        expect(root).shadowDom.to.be.equal(`
-          <label class="sbb-toggle-check">
-            <input checked="" type="checkbox" disabled aria-hidden="true" tabindex="-1" />
-            <span class="sbb-toggle-check__container">
-              <span class="sbb-toggle-check__label" hidden="">
-                <slot></slot>
-              </span>
-              <span class="sbb-toggle-check__track">
-                <span class="sbb-toggle-check__circle">
-                  <span class="sbb-toggle-check__icon">
-                    <slot name="icon">
-                      <sbb-icon
-                        aria-hidden="true"
-                        data-namespace="default"
-                        name="tick-small"
-                        role="img"
-                      ></sbb-icon>
-                    </slot>
-                  </span>
-                </span>
-              </span>
-            </span>
-          </label>
         `);
+        await expect(root).shadowDom.to.be.equalSnapshot();
       });
     });
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-toggle-check></sbb-toggle-check>`);
 });
diff --git a/src/components/toggle/toggle-option/__snapshots__/toggle-option.spec.snap.js b/src/components/toggle/toggle-option/__snapshots__/toggle-option.spec.snap.js
index 0b2631553e0..e72f44996b0 100644
--- a/src/components/toggle/toggle-option/__snapshots__/toggle-option.spec.snap.js
+++ b/src/components/toggle/toggle-option/__snapshots__/toggle-option.spec.snap.js
@@ -72,3 +72,54 @@ snapshots["sbb-toggle-option renders with slotted sbb-icon"] =
 `;
 /* end snapshot sbb-toggle-option renders with slotted sbb-icon */
 
+snapshots["sbb-toggle-option A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": "",
+      "checked": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle-option A11y tree Chrome */
+
+snapshots["sbb-toggle-option A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": "",
+      "checked": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle-option A11y tree Firefox */
+
+snapshots["sbb-toggle-option A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": "",
+      "checked": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle-option A11y tree Safari */
+
diff --git a/src/components/toggle/toggle-option/toggle-option.spec.ts b/src/components/toggle/toggle-option/toggle-option.spec.ts
index 0713be83c10..f70c11a51c5 100644
--- a/src/components/toggle/toggle-option/toggle-option.spec.ts
+++ b/src/components/toggle/toggle-option/toggle-option.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 
 import './toggle-option';
 import '../../icon';
@@ -67,4 +68,9 @@ describe('sbb-toggle-option', () => {
     `);
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(
+    undefined,
+    html`<sbb-toggle-option checked value="Option 1"></sbb-toggle-option>`,
+  );
 });
diff --git a/src/components/toggle/toggle/__snapshots__/toggle.spec.snap.js b/src/components/toggle/toggle/__snapshots__/toggle.spec.snap.js
new file mode 100644
index 00000000000..1065dbcea9f
--- /dev/null
+++ b/src/components/toggle/toggle/__snapshots__/toggle.spec.snap.js
@@ -0,0 +1,68 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-toggle A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": "Value one",
+      "checked": true
+    },
+    {
+      "role": "radio",
+      "name": "Value two",
+      "checked": false
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle A11y tree Chrome */
+
+snapshots["sbb-toggle A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": "Value one",
+      "checked": true
+    },
+    {
+      "role": "radio",
+      "name": "Value two"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle A11y tree Firefox */
+
+snapshots["sbb-toggle A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": "Value one",
+      "checked": true
+    },
+    {
+      "role": "radio",
+      "name": "Value two",
+      "checked": false
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle A11y tree Safari */
+
diff --git a/src/components/toggle/toggle/toggle.spec.ts b/src/components/toggle/toggle/toggle.spec.ts
index 4dda9767601..b0ef31e41f5 100644
--- a/src/components/toggle/toggle/toggle.spec.ts
+++ b/src/components/toggle/toggle/toggle.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 import type { SbbToggleOptionElement } from '../toggle-option';
 
 import type { SbbToggleElement } from './toggle';
@@ -164,4 +165,6 @@ describe('sbb-toggle', () => {
       expect(option).not.to.have.attribute('disabled');
     });
   });
+
+  testA11yTreeSnapshot(undefined, simpleToggleTemplate);
 });
diff --git a/src/components/tooltip/tooltip-trigger/__snapshots__/tooltip-trigger.spec.snap.js b/src/components/tooltip/tooltip-trigger/__snapshots__/tooltip-trigger.spec.snap.js
new file mode 100644
index 00000000000..a909546e3ed
--- /dev/null
+++ b/src/components/tooltip/tooltip-trigger/__snapshots__/tooltip-trigger.spec.snap.js
@@ -0,0 +1,81 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-tooltip-trigger renders"] = 
+`<span class="sbb-tooltip-trigger">
+  <slot>
+    <sbb-icon
+      aria-hidden="true"
+      data-namespace="default"
+      name="circle-information-small"
+      role="img"
+    >
+    </sbb-icon>
+  </slot>
+</span>
+`;
+/* end snapshot sbb-tooltip-trigger renders */
+
+snapshots["sbb-tooltip-trigger renders with custom content"] = 
+`<span class="sbb-tooltip-trigger">
+  <slot>
+    <sbb-icon
+      aria-hidden="true"
+      data-namespace="default"
+      name="circle-information-small"
+      role="img"
+    >
+    </sbb-icon>
+  </slot>
+</span>
+`;
+/* end snapshot sbb-tooltip-trigger renders with custom content */
+
+snapshots["sbb-tooltip-trigger A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tooltip-trigger A11y tree Chrome */
+
+snapshots["sbb-tooltip-trigger A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tooltip-trigger A11y tree Firefox */
+
+snapshots["sbb-tooltip-trigger A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tooltip-trigger A11y tree Safari */
+
diff --git a/src/components/tooltip/tooltip-trigger/tooltip-trigger.spec.ts b/src/components/tooltip/tooltip-trigger/tooltip-trigger.spec.ts
index 4280a35430a..e4b3c5fd536 100644
--- a/src/components/tooltip/tooltip-trigger/tooltip-trigger.spec.ts
+++ b/src/components/tooltip/tooltip-trigger/tooltip-trigger.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 
 import '../../icon';
 import './tooltip-trigger';
@@ -15,19 +16,7 @@ describe('sbb-tooltip-trigger', () => {
     expect(root).dom.to.be.equal(
       `<sbb-tooltip-trigger role="button" tabindex="0" dir="ltr"></sbb-tooltip-trigger>`,
     );
-    expect(root).shadowDom.to.be.equal(
-      `<span class="sbb-tooltip-trigger">
-        <slot>
-          <sbb-icon
-            aria-hidden="true"
-            data-namespace="default"
-            name="circle-information-small"
-            role="img">
-          </sbb-icon>
-        </slot>
-      </span>
-    `,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders with custom content', async () => {
@@ -40,17 +29,8 @@ describe('sbb-tooltip-trigger', () => {
         Custom Content
       </sbb-tooltip-trigger>`,
     );
-    expect(root).shadowDom.to.be.equal(
-      `<span class="sbb-tooltip-trigger">
-        <slot>
-          <sbb-icon
-            aria-hidden="true"
-            data-namespace="default"
-            name="circle-information-small"
-            role="img">
-          </sbb-icon>
-        </slot>
-      </span>`,
-    );
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-tooltip-trigger></sbb-tooltip-trigger>`);
 });
diff --git a/src/components/tooltip/tooltip/__snapshots__/tooltip.spec.snap.js b/src/components/tooltip/tooltip/__snapshots__/tooltip.spec.snap.js
new file mode 100644
index 00000000000..807546de0bf
--- /dev/null
+++ b/src/components/tooltip/tooltip/__snapshots__/tooltip.spec.snap.js
@@ -0,0 +1,62 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-tooltip renders"] = 
+`<div class="sbb-tooltip__container">
+  <div class="sbb-tooltip">
+    <div class="sbb-tooltip__content">
+      <span>
+        <slot>
+          No content
+        </slot>
+      </span>
+      <span class="sbb-tooltip__close">
+        <sbb-button
+          aria-label="Close note"
+          dir="ltr"
+          icon-name="cross-small"
+          role="button"
+          sbb-tooltip-close=""
+          size="m"
+          tabindex="0"
+          type="button"
+          variant="secondary"
+        >
+        </sbb-button>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot sbb-tooltip renders */
+
+snapshots["sbb-tooltip A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-tooltip A11y tree Chrome */
+
+snapshots["sbb-tooltip A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-tooltip A11y tree Firefox */
+
+snapshots["sbb-tooltip A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-tooltip A11y tree Safari */
+
diff --git a/src/components/tooltip/tooltip/tooltip.spec.ts b/src/components/tooltip/tooltip/tooltip.spec.ts
index b740dcf11f8..2ef8b918520 100644
--- a/src/components/tooltip/tooltip/tooltip.spec.ts
+++ b/src/components/tooltip/tooltip/tooltip.spec.ts
@@ -1,47 +1,20 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { i18nCloseTooltip } from '../../core/i18n';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
 import './tooltip';
 
 describe('sbb-tooltip', () => {
   it('renders', async () => {
     const root = await fixture(html`<sbb-tooltip></sbb-tooltip>`);
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-tooltip data-state="closed" id="sbb-tooltip-1" role="tooltip">
-
-        </sbb-tooltip>
-      `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <div class="sbb-tooltip__container">
-          <div class="sbb-tooltip">
-            <div class="sbb-tooltip__content">
-              <span>
-                <slot>
-                  No content
-                </slot>
-              </span>
-              <span class="sbb-tooltip__close">
-                <sbb-button
-                  dir="ltr"
-                  aria-label="${i18nCloseTooltip.en}"
-                  icon-name="cross-small"
-                  role="button"
-                  sbb-tooltip-close=""
-                  size="m"
-                  type="button"
-                  tabindex="0"
-                  variant="secondary"
-                ></sbb-button>
-              </span>
-            </div>
-          </div>
-        </div>
-      `,
-    );
+    expect(root).dom.to.be.equal(`
+      <sbb-tooltip data-state="closed" id="sbb-tooltip-1" role="tooltip">
+      </sbb-tooltip>
+    `);
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-tooltip></sbb-tooltip>`);
 });
diff --git a/src/components/visual-checkbox/__snapshots__/visual-checkbox.spec.snap.js b/src/components/visual-checkbox/__snapshots__/visual-checkbox.spec.snap.js
new file mode 100644
index 00000000000..5c1cc9765af
--- /dev/null
+++ b/src/components/visual-checkbox/__snapshots__/visual-checkbox.spec.snap.js
@@ -0,0 +1,57 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-visual-checkbox renders unchecked"] = 
+`<span class="sbb-visual-checkbox">
+  <span class="sbb-visual-checkbox__icon">
+  </span>
+</span>
+`;
+/* end snapshot sbb-visual-checkbox renders unchecked */
+
+snapshots["sbb-visual-checkbox renders checked"] = 
+`<span class="sbb-visual-checkbox">
+  <span class="sbb-visual-checkbox__icon">
+  </span>
+</span>
+`;
+/* end snapshot sbb-visual-checkbox renders checked */
+
+snapshots["sbb-visual-checkbox renders indeterminate"] = 
+`<span class="sbb-visual-checkbox">
+  <span class="sbb-visual-checkbox__icon">
+  </span>
+</span>
+`;
+/* end snapshot sbb-visual-checkbox renders indeterminate */
+
+snapshots["sbb-visual-checkbox A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-visual-checkbox A11y tree Chrome */
+
+snapshots["sbb-visual-checkbox A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-visual-checkbox A11y tree Firefox */
+
+snapshots["sbb-visual-checkbox A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-visual-checkbox A11y tree Safari */
+
diff --git a/src/components/visual-checkbox/visual-checkbox.spec.ts b/src/components/visual-checkbox/visual-checkbox.spec.ts
index aebb269473c..55485b6b691 100644
--- a/src/components/visual-checkbox/visual-checkbox.spec.ts
+++ b/src/components/visual-checkbox/visual-checkbox.spec.ts
@@ -1,63 +1,25 @@
-import './visual-checkbox';
-
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
+
+import './visual-checkbox';
+
 describe('sbb-visual-checkbox', () => {
   it('renders unchecked', async () => {
-    expect(await fixture(html`<sbb-visual-checkbox></sbb-visual-checkbox>`)).shadowDom.to.be.equal(`
-        <span class="sbb-visual-checkbox">
-          <span class="sbb-visual-checkbox__icon">
-          </span>
-        </span>
-    `);
+    const elem = await fixture(html`<sbb-visual-checkbox></sbb-visual-checkbox>`);
+    await expect(elem).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders checked', async () => {
-    expect(await fixture(html`<sbb-visual-checkbox checked=""></sbb-visual-checkbox>`)).shadowDom.to
-      .be.equal(`
-        <span class="sbb-visual-checkbox">
-          <span class="sbb-visual-checkbox__icon">
-            <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d='M8 12.3304L10.4615 15L16 9'
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-          </span>
-        </span>
-    `);
+    const elem = await fixture(html`<sbb-visual-checkbox checked=""></sbb-visual-checkbox>`);
+    await expect(elem).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders indeterminate', async () => {
-    expect(await fixture(html`<sbb-visual-checkbox indeterminate=""></sbb-visual-checkbox>`))
-      .shadowDom.to.be.equal(`
-        <span class="sbb-visual-checkbox">
-          <span class="sbb-visual-checkbox__icon">
-            <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d='M9 12H15'
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-          </span>
-        </span>
-      `);
+    const elem = await fixture(html`<sbb-visual-checkbox indeterminate=""></sbb-visual-checkbox>`);
+    await expect(elem).shadowDom.to.be.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(undefined, html`<sbb-visual-checkbox></sbb-visual-checkbox>`);
 });