diff --git a/packages/components/src/components/notification/notification.css b/packages/components/src/components/notification/notification.css
index 3dd3eba13c..3a33e2e36f 100644
--- 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
index 29d37103a7..f6c19808a7 100644
--- 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,7 +188,10 @@ export class Notification {