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 caa3071158aa..e086e16690ef 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 @@ -36,19 +36,19 @@ - text: Headline - paragraph: Neutral - button "Close" - - article: + - alert: - text: Headline - paragraph: Critical - button "Close" - - article: + - status: - text: Headline - paragraph: Informational - button "Close" - - article: + - status: - text: Headline - paragraph: Successful - button "Close" - - article: + - alert: - text: Headline - paragraph: Warning - button "Close" 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 caa3071158aa..e086e16690ef 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 @@ -36,19 +36,19 @@ - text: Headline - paragraph: Neutral - button "Close" - - article: + - alert: - text: Headline - paragraph: Critical - button "Close" - - article: + - status: - text: Headline - paragraph: Informational - button "Close" - - article: + - status: - text: Headline - paragraph: Successful - button "Close" - - article: + - alert: - text: Headline - paragraph: Warning - button "Close" 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 caa3071158aa..e086e16690ef 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 @@ -36,19 +36,19 @@ - text: Headline - paragraph: Neutral - button "Close" - - article: + - alert: - text: Headline - paragraph: Critical - button "Close" - - article: + - status: - text: Headline - paragraph: Informational - button "Close" - - article: + - status: - text: Headline - paragraph: Successful - button "Close" - - article: + - alert: - text: Headline - paragraph: Warning - button "Close" 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 caa3071158aa..e086e16690ef 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 @@ -36,19 +36,19 @@ - text: Headline - paragraph: Neutral - button "Close" - - article: + - alert: - text: Headline - paragraph: Critical - button "Close" - - article: + - status: - text: Headline - paragraph: Informational - button "Close" - - article: + - status: - text: Headline - paragraph: Successful - button "Close" - - article: + - alert: - text: Headline - paragraph: Warning - button "Close" 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 caa3071158aa..e086e16690ef 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 @@ -36,19 +36,19 @@ - text: Headline - paragraph: Neutral - button "Close" - - article: + - alert: - text: Headline - paragraph: Critical - button "Close" - - article: + - status: - text: Headline - paragraph: Informational - button "Close" - - article: + - status: - text: Headline - paragraph: Successful - button "Close" - - article: + - alert: - text: Headline - paragraph: Warning - button "Close" 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 caa3071158aa..e086e16690ef 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 @@ -36,19 +36,19 @@ - text: Headline - paragraph: Neutral - button "Close" - - article: + - alert: - text: Headline - paragraph: Critical - button "Close" - - article: + - status: - text: Headline - paragraph: Informational - button "Close" - - article: + - status: - text: Headline - paragraph: Successful - button "Close" - - article: + - alert: - text: Headline - paragraph: Warning - button "Close" diff --git a/packages/components/src/components/notification/notification.lite.tsx b/packages/components/src/components/notification/notification.lite.tsx index 88230387b838..749d883e7708 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; + } +};