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 { -
+
{this.heading} +
{this.hasTextSlot && (