diff --git a/__snapshots__/notification/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml b/__snapshots__/notification/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml index 5dc551d555f5..9311e42f39b2 100644 --- a/__snapshots__/notification/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/notification/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml @@ -27,16 +27,16 @@ - article: - text: Headline - paragraph: Neutral - - article: + - alert: - text: Headline - paragraph: Critical - - article: + - status: - text: Headline - paragraph: Informational - - article: + - status: - text: Headline - paragraph: Successful - - article: + - alert: - text: Headline - paragraph: Warning - link "Closeable" diff --git a/__snapshots__/notification/showcase/chromium/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml b/__snapshots__/notification/showcase/chromium/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml index 5dc551d555f5..9311e42f39b2 100644 --- a/__snapshots__/notification/showcase/chromium/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/notification/showcase/chromium/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml @@ -27,16 +27,16 @@ - article: - text: Headline - paragraph: Neutral - - article: + - alert: - text: Headline - paragraph: Critical - - article: + - status: - text: Headline - paragraph: Informational - - article: + - status: - text: Headline - paragraph: Successful - - article: + - alert: - text: Headline - paragraph: Warning - link "Closeable" diff --git a/__snapshots__/notification/showcase/firefox/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml b/__snapshots__/notification/showcase/firefox/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml index 5dc551d555f5..9311e42f39b2 100644 --- a/__snapshots__/notification/showcase/firefox/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/notification/showcase/firefox/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml @@ -27,16 +27,16 @@ - article: - text: Headline - paragraph: Neutral - - article: + - alert: - text: Headline - paragraph: Critical - - article: + - status: - text: Headline - paragraph: Informational - - article: + - status: - text: Headline - paragraph: Successful - - article: + - alert: - text: Headline - paragraph: Warning - link "Closeable" diff --git a/__snapshots__/notification/showcase/mobile-chrome/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml b/__snapshots__/notification/showcase/mobile-chrome/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml index 5dc551d555f5..9311e42f39b2 100644 --- a/__snapshots__/notification/showcase/mobile-chrome/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/notification/showcase/mobile-chrome/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml @@ -27,16 +27,16 @@ - article: - text: Headline - paragraph: Neutral - - article: + - alert: - text: Headline - paragraph: Critical - - article: + - status: - text: Headline - paragraph: Informational - - article: + - status: - text: Headline - paragraph: Successful - - article: + - alert: - text: Headline - paragraph: Warning - link "Closeable" diff --git a/__snapshots__/notification/showcase/mobile-safari/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml b/__snapshots__/notification/showcase/mobile-safari/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml index 5dc551d555f5..9311e42f39b2 100644 --- a/__snapshots__/notification/showcase/mobile-safari/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/notification/showcase/mobile-safari/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml @@ -27,16 +27,16 @@ - article: - text: Headline - paragraph: Neutral - - article: + - alert: - text: Headline - paragraph: Critical - - article: + - status: - text: Headline - paragraph: Informational - - article: + - status: - text: Headline - paragraph: Successful - - article: + - alert: - text: Headline - paragraph: Warning - link "Closeable" diff --git a/__snapshots__/notification/showcase/webkit/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml b/__snapshots__/notification/showcase/webkit/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml index 5dc551d555f5..9311e42f39b2 100644 --- a/__snapshots__/notification/showcase/webkit/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/notification/showcase/webkit/should-have-same-aria-snapshot/DBNotification-should-have-same-aria-snapshot.yaml @@ -27,16 +27,16 @@ - article: - text: Headline - paragraph: Neutral - - article: + - alert: - text: Headline - paragraph: Critical - - article: + - status: - text: Headline - paragraph: Informational - - article: + - status: - text: Headline - paragraph: Successful - - article: + - alert: - text: Headline - paragraph: Warning - link "Closeable" diff --git a/packages/components/src/components/notification/notification.lite.tsx b/packages/components/src/components/notification/notification.lite.tsx index 5fe10cce89c9..8fa4714a0a2e 100644 --- a/packages/components/src/components/notification/notification.lite.tsx +++ b/packages/components/src/components/notification/notification.lite.tsx @@ -12,6 +12,7 @@ import { cls, getBoolean, getBooleanAsString, + getNotificationRole, stringPropVisible } from '../../utils'; import DBButton from '../button/button.lite'; @@ -41,6 +42,7 @@ export default function DBNotification(props: DBNotificationProps) { ref={_ref} id={props.id} class={cls('db-notification', props.className)} + role={getNotificationRole(props.semantic)} aria-live={props.ariaLive} data-semantic={props.semantic} data-variant={props.variant} diff --git a/packages/components/src/utils/index.ts b/packages/components/src/utils/index.ts index e7d32fa96d26..9a7db9119967 100644 --- a/packages/components/src/utils/index.ts +++ b/packages/components/src/utils/index.ts @@ -178,3 +178,21 @@ export const isKeyboardEvent = ( event?: ClickEvent | GeneralKeyboardEvent ): event is GeneralKeyboardEvent => (event as GeneralKeyboardEvent).key !== undefined; + +/** + * Maps semantic values to appropriate ARIA roles for notifications + * @param semantic - The semantic type of the notification + * @returns The appropriate ARIA role or undefined for default behavior + */ +export const getNotificationRole = (semantic?: string): string | undefined => { + switch (semantic) { + case 'critical': + case 'warning': + return 'alert'; + case 'informational': + case 'successful': + return 'status'; + default: + return undefined; + } +};