fix: set role on host and use 'off' value for aria-live

src/components/notification/notification.stories.ts

@@ -243,7 +243,7 @@ const meta: Meta = {
         <div
           class="notification-container"
           style="display: flex; flex-direction: column;"
-          aria-live="polite"
+          aria-live="off"
         >
           ${story()}
         </div>

src/components/notification/notification.ts

@@ -129,6 +129,7 @@ export class SbbNotificationElement extends LitElement {
 
   public override connectedCallback(): void {
     super.connectedCallback();
+    this.setAttribute('role', this.getAttribute('role') ?? 'status');
     this._setInlineLinks();
   }
 
@@ -141,9 +142,6 @@ export class SbbNotificationElement extends LitElement {
     await this.updateComplete;
     this._setNotificationHeight();
     this._open();
-    this.shadowRoot
-      ?.querySelector<SbbNotificationElement>('.sbb-notification')!
-      .setAttribute('role', this.getAttribute('role') ?? 'status');
   }
 
   public override disconnectedCallback(): void {

src/components/notification/readme.md

@@ -65,12 +65,12 @@ This role signifies that the notification provides information about the current
 
 Consumers can override the role's default value by setting it on the component;
 moreover, to announce the notification's content to screen readers as it becomes visible,
-consumers **must** use the `aria-live` attribute with at least `polite` value on the component's container.
+consumers **must** use the `aria-live` attribute with the `off` value on the component's container.
 This ensures that users who rely on screen readers are promptly informed of any relevant updates or changes.
 
 ```html
 <!-- Add here any incoming notification by adding a sbb-notification component. -->
-<div id="notification-container" aria-live="polite">
+<div id="notification-container" aria-live="off">
   <sbb-notification type="success">Task successfully completed.</sbb-notification>
 </div>
 ```