fix: accessibility

sbb-design-systems · Jan 11, 2024 · 8d9c014 · 8d9c014
1 parent 37061ad
commit 8d9c014
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 10 deletions.
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
@@ -7,7 +7,6 @@
 @include sbb.host-component-properties;
 
 :host {
-  --sbb-notification-visibility: hidden;
   --sbb-notification-opacity: 0;
   --sbb-notification-max-height: 0;
   --sbb-notification-margin: 0;
@@ -30,7 +29,6 @@
       var(--sbb-notification-timing-function),
     border var(--sbb-notification-animation-duration) var(--sbb-animation-duration-2x)
       var(--sbb-notification-timing-function),
-    visibility var(--sbb-notification-animation-duration) var(--sbb-notification-timing-function),
     opacity var(--sbb-notification-animation-duration) var(--sbb-notification-timing-function);
 
   // As the notification has always a light background, we have to fix the focus outline color
@@ -43,7 +41,6 @@
 }
 
 :host(:is([data-state='opened'], [data-state='opening'])) {
-  --sbb-notification-visibility: visible;
   --sbb-notification-opacity: 1;
   --sbb-notification-max-height: calc(
     var(--sbb-notification-height) + (var(--sbb-notification-border-width) * 2)
@@ -94,7 +91,6 @@
   width: calc(
     100% - calc(var(--sbb-notification-base-radius) - var(--sbb-notification-border-width))
   );
-  visibility: var(--sbb-notification-visibility);
   opacity: var(--sbb-notification-opacity);
   max-height: var(--sbb-notification-max-height);
   transition: var(--sbb-notification-transition);
@@ -205,13 +201,11 @@
 
 @keyframes open {
   from {
-    visibility: hidden;
     opacity: 0;
     max-height: 0;
   }
 
   to {
-    visibility: visible;
     opacity: 1;
     max-height: var(--sbb-notification-max-height);
   }

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" type="info" style="--sbb-notification-height: auto;">
+      <sbb-notification role="status" disable-animation data-state="opened" type="info" style="--sbb-notification-height: auto;">
         The quick brown fox jumps over the lazy dog.
       </sbb-notification>`,
     );
@@ -54,7 +54,7 @@ describe('sbb-notification', () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation data-has-title data-state="opened" title-content="Title" type="info" style="--sbb-notification-height: auto;">
+      <sbb-notification role="status" disable-animation data-has-title data-state="opened" title-content="Title" type="info" style="--sbb-notification-height: auto;">
         The quick brown fox jumps over the lazy dog.
       </sbb-notification>`,
     );
@@ -93,7 +93,7 @@ describe('sbb-notification', () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation data-has-title data-state="opened" type="info" style="--sbb-notification-height: auto;">
+      <sbb-notification role="status" disable-animation data-has-title data-state="opened" type="info" style="--sbb-notification-height: auto;">
         <span slot="title">
           Slotted title
         </span>
@@ -132,7 +132,7 @@ describe('sbb-notification', () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation data-has-title readonly data-state="opened" title-content="Title" type="info" style="--sbb-notification-height: auto;">
+      <sbb-notification role="status" disable-animation data-has-title readonly data-state="opened" title-content="Title" type="info" 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
@@ -202,6 +202,7 @@ export class SbbNotificationElement extends LitElement {
   protected override render(): TemplateResult {
     const hasTitle = !!this.titleContent || this._namedSlots['title'];
 
+    setAttribute(this, 'role', 'status');
     setAttribute(this, 'data-state', this._state);
     setAttribute(this, 'data-has-title', hasTitle);
 

diff --git a/src/components/notification/readme.md b/src/components/notification/readme.md
@@ -58,6 +58,10 @@ If the `sbb-notification` host needs a margin, in order to properly animate it o
 we suggest using the `--sbb-notification-margin` variable to set it.
 For example, use `--sbb-notification-margin: 0 0 var(--sbb-spacing-fixed-4x) 0` to apply a bottom margin.
 
+## 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.
+
 <!-- Auto Generated Below -->
 
 ## Properties