diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
index ba61138f81a..5179c50c46f 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
@@ -54,7 +54,7 @@ snapshots["sbb-autocomplete-grid-button renders disabled Dom"] =
   dir="ltr"
   disabled=""
   icon-name="pie-small"
-  id="sbb-autocomplete-grid-item-4x1x0"
+  id="sbb-autocomplete-grid-item-3x1x0"
   role="button"
 >
 </sbb-autocomplete-grid-button>
@@ -115,7 +115,7 @@ snapshots["sbb-autocomplete-grid-button renders negative without icon Dom"] =
   data-action=""
   data-button=""
   dir="ltr"
-  id="sbb-autocomplete-grid-item-7x1x0"
+  id="sbb-autocomplete-grid-item-5x1x0"
   negative=""
   role="button"
 >
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
index 56377315c92..10cab25a3b8 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
@@ -135,7 +135,8 @@ const TemplateOptgroup = ({ label, disabled, ...args }: Args): TemplateResult =>
 
 const Template = (args: Args): TemplateResult => {
   return html`
-    <sbb-form-field label="Autocomplete" ?negative=${args.negative}>
+    <sbb-form-field ?negative=${args.negative}>
+      <label>Autocomplete</label>
       <input placeholder="Placeholder" />
       <sbb-autocomplete-grid>${TemplateOptgroup(args)}</sbb-autocomplete-grid>
     </sbb-form-field>
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
index a0ffbc5c80f..dd42fcc0ec3 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
@@ -54,7 +54,7 @@ snapshots["sbb-autocomplete-grid-option disabled Dom"] =
   aria-selected="false"
   data-slot-names="unnamed"
   disabled=""
-  id="sbb-autocomplete-grid-item-4x0"
+  id="sbb-autocomplete-grid-item-3x0"
   role="gridcell"
   value="1"
 >
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
index cd676968858..9f84a1f1ede 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
@@ -125,7 +125,8 @@ const createOptions = ({
 const StandaloneTemplate = (args: Args): TemplateResult => html`${createOptions(args)}`;
 
 const AutocompleteTemplate = (args: Args): TemplateResult => html`
-  <sbb-form-field label="sbb-autocomplete-grid" ?negative=${args.negative}>
+  <sbb-form-field ?negative=${args.negative}>
+    <label>sbb-autocomplete-grid</label>
     <input placeholder="Please select." />
     <sbb-autocomplete-grid> ${createOptions(args)} </sbb-autocomplete-grid>
   </sbb-form-field>
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
index 286ea9733d5..9518400e319 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
@@ -5,7 +5,7 @@ import { hostAttributes, SbbOptionBaseElement } from '../../core/common-behavior
 import { EventEmitter } from '../../core/eventing';
 
 import '../../icon';
-import '../../screenreader-only';
+import '../../screen-reader-only';
 import style from './autocomplete-grid-option.scss?lit&inline';
 
 /**
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
index b2956eb2520..179f1066d1b 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
@@ -314,12 +314,12 @@ const createRows2 = (buttonIconName: string, disableOption: boolean): TemplateRe
 const Template = (args: Args): TemplateResult => html`
   <div>
     <sbb-form-field
-      label="Label"
       ?negative=${args.negative}
       ?borderless=${args.borderless}
       ?floating-label=${args.floatingLabel}
       data-testid="form-field"
     >
+      <label>Label</label>
       <input
         placeholder="Placeholder"
         data-testid="autocomplete-input"
@@ -348,12 +348,12 @@ const Template = (args: Args): TemplateResult => html`
 const OptionGroupTemplate = (args: Args): TemplateResult => html`
   <div>
     <sbb-form-field
-      label="Label"
       ?negative=${args.negative}
       ?borderless=${args.borderless}
       ?floating-label=${args.floatingLabel}
       data-testid="form-field"
     >
+      <label>Label</label>
       <input
         placeholder="Placeholder"
         data-testid="autocomplete-input"
diff --git a/src/components/core/common-behaviors/option-base-element.ts b/src/components/core/common-behaviors/option-base-element.ts
index 534fabdbb4d..d73708c995d 100644
--- a/src/components/core/common-behaviors/option-base-element.ts
+++ b/src/components/core/common-behaviors/option-base-element.ts
@@ -195,8 +195,8 @@ export abstract class SbbOptionBaseElement extends SbbDisabledMixin(SbbIconNameM
             <slot @slotchange=${this.setupHighlightHandler}></slot>
             ${this.renderLabel()}
             ${this._inertAriaGroups && this.getAttribute('data-group-label')
-              ? html` <sbb-screenreader-only>
-                  (${this.getAttribute('data-group-label')})</sbb-screenreader-only
+              ? html` <sbb-screen-reader-only>
+                  (${this.getAttribute('data-group-label')})</sbb-screen-reader-only
                 >`
               : nothing}
           </span>
diff --git a/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js b/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js
deleted file mode 100644
index 97e8aaa3227..00000000000
--- a/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/* @web/test-runner snapshot v1 */
-export const snapshots = {};
-
-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 */
-