Skip to content

Commit

Permalink
fix: aria role behavior (#2171)
Browse files Browse the repository at this point in the history
  • Loading branch information
@felix-ico
felix-ico authored Nov 30, 2023
1 parent ed10e49 commit 59c57bc
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 27 deletions.
4 changes: 3 additions & 1 deletion packages/components/src/components/notification/notification.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'] {
Expand Down
22 changes: 11 additions & 11 deletions packages/components/src/components/notification/notification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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

Expand All @@ -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) {
Expand All @@ -115,7 +118,6 @@ export class Notification {

open = () => {
this.isOpen = true;
this.role = 'alert';
this.animationState = 'in';
requestAnimationFrame(async () => {
await animationsFinished(this.hostElement.shadowRoot);
Expand Down Expand Up @@ -164,24 +166,22 @@ export class Notification {
`variant-${this.variant}`,
this.isOpen && 'open'
)}
role={this.role}
role={this.innerRole}
>
<div part="icon" aria-hidden="true">
<slot name="icon">
<IconTag size={ICON_SIZE} selected={this.type === 'toast'} />
</slot>
</div>
<div
part="body"
aria-live={this.role === undefined ? undefined : this.innerAriaLive}
>
<div part="body">
<div
part="heading"
role="heading"
aria-level={this.headingLevel}
aria-label={`${this.ariaHeading} ${this.heading}`}
>
<span>{this.heading}</span>
{this.heading ? <span>{this.heading}</span> : null}
<slot name="heading"></slot>
</div>
{this.hasTextSlot && (
<div part="text">
Expand Down
29 changes: 15 additions & 14 deletions packages/components/src/components/notification/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` | <span style="color:red">**[DEPRECATED]**</span> - ariaRole should replace innerAriaLive<br/><br/> | `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
Expand Down
3 changes: 2 additions & 1 deletion packages/storybook-vue/stories/components/notification/Notification.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ import ScaleNotification from './ScaleNotification.vue';
innerAriaLive: {
control: {
type: 'text'
}
},
description: 'Deprecated! innerAriaLive has been replaced by innerRole'
},
headingLevel: {
control: {
Expand Down
1 change: 1 addition & 0 deletions packages/storybook-vue/stories/components/notification/ScaleNotification.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down

0 comments on commit 59c57bc

Please sign in to comment.