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 15ed7af6b4..3cc19abe30 100644 --- a/packages/components/src/components/notification/notification.tsx +++ b/packages/components/src/components/notification/notification.tsx @@ -59,8 +59,10 @@ export class Notification { @Prop() dismissible?: boolean = false; /** (optional) Time in milliseconds until it closes by itself */ @Prop() delay?: number; - /** (optional) `aria-live` of element */ + /** @deprecated - ariaRole should replace innerAriaLive */ @Prop() innerAriaLive?: string = 'assertive'; + /** (optional) string prepended to the heading */ + @Prop() innerRole?: 'alert' | 'status' = 'alert'; /** (optional) Label for close button */ @Prop() closeButtonLabel?: string = 'Close'; /** (optional) `title` for close button */ @@ -69,13 +71,13 @@ export class Notification { @Prop() headingLevel: number = 2; /** (optional) string prepended to the heading */ @Prop() ariaHeading?: string = 'Information'; + /** (optional) Injected styles */ @Prop() styles?: string; /** What actually triggers opening/closing the notification */ @State() isOpen: boolean = this.opened || false; @State() animationState: 'in' | 'out' | undefined; - @State() role: string = 'alert'; @State() hasTextSlot: boolean = false; // @State() hasActionSlot: boolean = false; // unused for now @@ -91,8 +93,9 @@ export class Notification { connectedCallback() { if (this.hostElement.hasAttribute('opened')) { - // Do not use `role="alert"` if opened/visible on page load - this.role = undefined; + if (this.innerAriaLive === 'polite' || this.innerRole === 'status') { + this.innerRole = 'status'; + } this.isOpen = true; } if (this.delay !== undefined) { @@ -115,7 +118,6 @@ export class Notification { open = () => { this.isOpen = true; - this.role = 'alert'; this.animationState = 'in'; requestAnimationFrame(async () => { await animationsFinished(this.hostElement.shadowRoot); @@ -164,24 +166,22 @@ export class Notification { `variant-${this.variant}`, this.isOpen && 'open' )} - role={this.role} + role={this.innerRole} > -
+
- {this.heading} + {this.heading ? {this.heading} : null} +
{this.hasTextSlot && (
diff --git a/packages/components/src/components/notification/readme.md b/packages/components/src/components/notification/readme.md index c887f7a336..c3fe2f6412 100644 --- a/packages/components/src/components/notification/readme.md +++ b/packages/components/src/components/notification/readme.md @@ -7,20 +7,21 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | -------------------- | --------------------------------------------------------- | ------------------------------------------------------- | ----------------- | -| `ariaHeading` | `aria-heading` | (optional) string prepended to the heading | `string` | `'Information'` | -| `closeButtonLabel` | `close-button-label` | (optional) Label for close button | `string` | `'Close'` | -| `closeButtonTitle` | `close-button-title` | (optional) `title` for close button | `string` | `'Close'` | -| `delay` | `delay` | (optional) Time in milliseconds until it closes by itself | `number` | `undefined` | -| `dismissible` | `dismissible` | (optional) Show the close button | `boolean` | `false` | -| `heading` | `heading` | Heading | `string` | `undefined` | -| `headingLevel` | `heading-level` | Default aria-level for heading | `number` | `2` | -| `innerAriaLive` | `inner-aria-live` | (optional) `aria-live` of element | `string` | `'assertive'` | -| `opened` | `opened` | (optional) Visible | `boolean` | `undefined` | -| `styles` | `styles` | (optional) Injected styles | `string` | `undefined` | -| `type` | `type` | (optional) Type | `"banner" \| "inline" \| "toast"` | `'inline'` | -| `variant` | `variant` | (optional) Variant | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` | +| Property | Attribute | Description | Type | Default | +| ------------------ | -------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- | +| `ariaHeading` | `aria-heading` | (optional) string prepended to the heading | `string` | `'Information'` | +| `closeButtonLabel` | `close-button-label` | (optional) Label for close button | `string` | `'Close'` | +| `closeButtonTitle` | `close-button-title` | (optional) `title` for close button | `string` | `'Close'` | +| `delay` | `delay` | (optional) Time in milliseconds until it closes by itself | `number` | `undefined` | +| `dismissible` | `dismissible` | (optional) Show the close button | `boolean` | `false` | +| `heading` | `heading` | Heading | `string` | `undefined` | +| `headingLevel` | `heading-level` | Default aria-level for heading | `number` | `2` | +| `innerAriaLive` | `inner-aria-live` | **[DEPRECATED]** - ariaRole should replace innerAriaLive

| `string` | `'assertive'` | +| `innerRole` | `inner-role` | (optional) string prepended to the heading | `"alert" \| "status"` | `'alert'` | +| `opened` | `opened` | (optional) Visible | `boolean` | `undefined` | +| `styles` | `styles` | (optional) Injected styles | `string` | `undefined` | +| `type` | `type` | (optional) Type | `"banner" \| "inline" \| "toast"` | `'inline'` | +| `variant` | `variant` | (optional) Variant | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` | ## Events diff --git a/packages/storybook-vue/stories/components/notification/Notification.stories.mdx b/packages/storybook-vue/stories/components/notification/Notification.stories.mdx index fe61a250fc..dc242dde7c 100644 --- a/packages/storybook-vue/stories/components/notification/Notification.stories.mdx +++ b/packages/storybook-vue/stories/components/notification/Notification.stories.mdx @@ -49,7 +49,8 @@ import ScaleNotification from './ScaleNotification.vue'; innerAriaLive: { control: { type: 'text' - } + }, + description: 'Deprecated! innerAriaLive has been replaced by innerRole' }, headingLevel: { control: { diff --git a/packages/storybook-vue/stories/components/notification/ScaleNotification.vue b/packages/storybook-vue/stories/components/notification/ScaleNotification.vue index 40b36ba336..1adb3b6d4b 100644 --- a/packages/storybook-vue/stories/components/notification/ScaleNotification.vue +++ b/packages/storybook-vue/stories/components/notification/ScaleNotification.vue @@ -14,6 +14,7 @@ export default { dismissible: { type: Boolean }, delay: { type: Number }, innerAriaLive: { type: String }, + innerRole: { type: String, default: 'alert' }, closeButtonLabel: { type: String }, closeButtonTitle: { type: String }, styles: { type: String },