docs: add example in docs

src/components/notification/notification.stories.ts

@@ -240,7 +240,11 @@ const meta: Meta = {
         style="padding: 2rem;display: flex;gap: var(--sbb-spacing-fixed-4x);flex-direction: column;"
       >
         ${trigger(context.args)}
-        <div class="notification-container" style="display: flex; flex-direction: column;">
+        <div
+          class="notification-container"
+          style="display: flex; flex-direction: column;"
+          aria-live="polite"
+        >
           ${story()}
         </div>
         ${pageContent()}

src/components/notification/notification.ts

@@ -129,7 +129,6 @@ export class SbbNotificationElement extends LitElement {
 
   public override connectedCallback(): void {
     super.connectedCallback();
-    // this.setAttribute('role', this.getAttribute('role') ?? 'status');
     this._setInlineLinks();
   }
 

src/components/notification/readme.md

@@ -60,7 +60,20 @@ For example, use `--sbb-notification-margin: 0 0 var(--sbb-spacing-fixed-4x) 0`
 
 ## Accessibility
 
-The `sbb-notification` component uses the accessibility `role="status"` to indicate its purpose to assistive technology users. This role signifies that the notification provides information about the current state of a task or system. Additionally, the notification component leverages the implicit `aria-live` attribute with the `polite` value to announce the notification's content to screen readers as it becomes visible. This ensures that users who rely on screen readers are promptly informed of any relevant updates or changes.
+The `sbb-notification` component uses the accessibility `role="status"` to indicate its purpose to assistive technology users.
+This role signifies that the notification provides information about the current state of a task or system.
+
+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.
+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">
+  <sbb-notification type="success">Task successfully completed.</sbb-notification>
+</div>
+```
 
 <!-- Auto Generated Below -->