fix: use slot for heading, implement a11y workaround for role=status

telekom · Oct 23, 2023 · ee7bf06 · ee7bf06
1 parent a848629
commit ee7bf06
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/packages/components/src/components/notification/notification.css b/packages/components/src/components/notification/notification.css
@@ -127,9 +127,11 @@
   padding-left: var(--spacing-y);
 }
 
-[part='heading'] {
+[part='heading'],
+[part='heading'] ::slotted(*) {
   font: var(--telekom-text-style-heading-6);
   line-height: var(--telekom-typography-line-spacing-tight);
+  margin: 0;
 }
 
 [part='text'] {

diff --git a/packages/components/src/components/notification/notification.tsx b/packages/components/src/components/notification/notification.tsx
@@ -115,6 +115,8 @@ export class Notification {
     if (newValue === true) {
       this.open();
       this.lastCloseEventTrigger = 'ATTRIBUTE';
+
+
     } else if (this.isOpen) {
       this.close();
     }
@@ -131,6 +133,15 @@ export class Notification {
         setTimeout(this.timeout, this.delay);
       }
     });
+    // workaround: when role is status, the inner text needs to be changed in order to be announced by the screen reader correctly
+    if (this.innerRole === "status") {
+      const text = this.hostElement.querySelector('[slot="text"]').innerHTML;
+      const heading = this.hostElement.querySelector('[slot="heading"]').innerHTML;
+      setTimeout( () => {
+        this.hostElement.querySelector('[slot="text"]').innerHTML = text;
+        this.hostElement.querySelector('[slot="heading"]').innerHTML = heading;
+      }, 10)
+    }
   };
 
   close = () => {
@@ -177,14 +188,18 @@ export class Notification {
               <IconTag size={ICON_SIZE} selected={this.type === 'toast'} />
             </slot>
           </div>
-          <div part="body">
+          <div part="body"
+            role={this.innerRole}
+            aria-live="polite"
+          >
             <div
               part="heading"
               role="heading"
               aria-level={this.headingLevel}
               aria-label={`${this.ariaHeading} ${this.heading}`}
             >
               <span>{this.heading}</span>
+              <slot name="heading"></slot>
             </div>
             {this.hasTextSlot && (
               <div part="text">