fix(sbb-notification): fix accessibility (#2325)

Co-authored-by: Davide Mininni <davide.mininni@finconsgroup.com>

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;
@@ -31,7 +30,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
@@ -40,7 +38,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)
@@ -93,7 +90,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);
@@ -208,15 +204,13 @@
 
 @keyframes open {
   from {
-    visibility: hidden;
     opacity: 0;
     max-height: 0;
     border-block: none;
     margin: 0;
   }
 
   to {
-    visibility: visible;
     opacity: 1;
     max-height: var(--sbb-notification-max-height);
     border-block: var(--sbb-notification-border);

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/readme.md

@@ -58,6 +58,19 @@ 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
+
+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="polite">
+  <sbb-notification type="success">Task successfully completed.</sbb-notification>
+</div>
+```
+
 <!-- Auto Generated Below -->
 
 ## Properties