fix: remove role="status"

sbb-design-systems · Feb 8, 2024 · ac672d4 · ac672d4
1 parent bbb12e9
commit ac672d4
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 12 deletions.
diff --git a/src/components/notification/notification.spec.ts b/src/components/notification/notification.spec.ts
@@ -21,7 +21,7 @@ describe('sbb-notification', () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation data-state="opened" role="status" type="info" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
+      <sbb-notification disable-animation data-state="opened" type="info" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
         The quick brown fox jumps over the lazy dog.
       </sbb-notification>`,
     );
@@ -39,7 +39,7 @@ describe('sbb-notification', () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation data-state="opened" title-content="Title" role="status" type="info" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
+      <sbb-notification disable-animation data-state="opened" title-content="Title" type="info" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
         The quick brown fox jumps over the lazy dog.
       </sbb-notification>`,
     );
@@ -58,7 +58,7 @@ describe('sbb-notification', () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation data-state="opened" role="status" type="info" data-slot-names="title unnamed" style="--sbb-notification-height: auto;">
+      <sbb-notification disable-animation data-state="opened" type="info" data-slot-names="title unnamed" style="--sbb-notification-height: auto;">
         <span slot="title">
           Slotted title
         </span>
@@ -79,7 +79,7 @@ describe('sbb-notification', () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation readonly data-state="opened" title-content="Title" role="status" type="info" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
+      <sbb-notification disable-animation readonly data-state="opened" title-content="Title" type="info" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
         The quick brown fox jumps over the lazy dog.
       </sbb-notification>`,
     );

diff --git a/src/components/notification/notification.ts b/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();
   }
 

diff --git a/src/components/notification/readme.md b/src/components/notification/readme.md
@@ -60,17 +60,13 @@ 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.
-
-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 the `off` value on the component's container.
+In order to announce the notification's content to screen readers as it becomes visible,
+consumers **must** use the `aria-live` attribute with the `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="off">
+<div id="notification-container" aria-live="polite">
   <sbb-notification type="success">Task successfully completed.</sbb-notification>
 </div>
 ```