diff --git a/src/components/notification/notification.stories.ts b/src/components/notification/notification.stories.ts index 00f43b922c1..7a89df8a8c5 100644 --- a/src/components/notification/notification.stories.ts +++ b/src/components/notification/notification.stories.ts @@ -243,7 +243,7 @@ const meta: Meta = {
${story()}
diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts index a60413ae646..08b73dd1d92 100644 --- a/src/components/notification/notification.ts +++ b/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('.sbb-notification')! - .setAttribute('role', this.getAttribute('role') ?? 'status'); } public override disconnectedCallback(): void { diff --git a/src/components/notification/readme.md b/src/components/notification/readme.md index 0f6136da4c2..33927a216ce 100644 --- a/src/components/notification/readme.md +++ b/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 -
+
Task successfully completed.
```