diff --git a/__snapshots__/notification/component/chromium/DBNotification-should-have-same-aria-snapshot.yaml b/__snapshots__/notification/component/chromium/DBNotification-should-have-same-aria-snapshot.yaml index 8247277d6e80..984a82eea26b 100644 --- a/__snapshots__/notification/component/chromium/DBNotification-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/notification/component/chromium/DBNotification-should-have-same-aria-snapshot.yaml @@ -1,2 +1 @@ -- article: - - paragraph: Test \ No newline at end of file +- paragraph: Test \ No newline at end of file diff --git a/__snapshots__/notification/component/firefox/DBNotification-should-have-same-aria-snapshot.yaml b/__snapshots__/notification/component/firefox/DBNotification-should-have-same-aria-snapshot.yaml index 8247277d6e80..984a82eea26b 100644 --- a/__snapshots__/notification/component/firefox/DBNotification-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/notification/component/firefox/DBNotification-should-have-same-aria-snapshot.yaml @@ -1,2 +1 @@ -- article: - - paragraph: Test \ No newline at end of file +- paragraph: Test \ No newline at end of file diff --git a/__snapshots__/notification/component/mobile-chrome/DBNotification-should-have-same-aria-snapshot.yaml b/__snapshots__/notification/component/mobile-chrome/DBNotification-should-have-same-aria-snapshot.yaml index 8247277d6e80..984a82eea26b 100644 --- a/__snapshots__/notification/component/mobile-chrome/DBNotification-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/notification/component/mobile-chrome/DBNotification-should-have-same-aria-snapshot.yaml @@ -1,2 +1 @@ -- article: - - paragraph: Test \ No newline at end of file +- paragraph: Test \ No newline at end of file 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..c90a5aab869f 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 @@ -1,179 +1,130 @@ - main: - heading "DBNotification" [level=1] - link "Density" - - article: - - text: Headline - - paragraph: functional - - article: - - text: Headline - - paragraph: regular (Default) - - article: - - text: Headline - - paragraph: expressive + - text: Headline + - paragraph: functional + - text: Headline + - paragraph: regular (Default) + - text: Headline + - paragraph: expressive - link "Variant" - - article: - - text: Headline - - paragraph: (Default) Docked - - article: - - text: Headline - - paragraph: Standalone - - article: - - text: Headline - - paragraph: Overlay + - text: Headline + - paragraph: (Default) Docked + - text: Headline + - paragraph: Standalone + - text: Headline + - paragraph: Overlay - link "Semantic" - - article: - - text: Headline - - paragraph: (Default) Adaptive - - article: - - text: Headline - - paragraph: Neutral - - article: + - text: Headline + - paragraph: (Default) Adaptive + - text: Headline + - paragraph: Neutral + - 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" - - article: - - paragraph: (Default) False - - article: - - paragraph: "True" - - button "Close" + - paragraph: (Default) False + - paragraph: "True" + - button "Close" - link "Visual" - - article: - - paragraph: (Default) Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Image + - paragraph: (Default) Icon + - img "this is a fancy placeholder" + - paragraph: Image - link "Show Icon" - - article: - - paragraph: (Default) True - - article: - - paragraph: "False" + - paragraph: (Default) True + - paragraph: "False" - link "Link Variant" - - article: - - paragraph: (Default) Block - - link "Textlink" - - article: - - paragraph: Inline - - link "Textlink" + - paragraph: (Default) Block + - link "Textlink" + - paragraph: Inline + - link "Textlink" - link "Show Headline" - - article: - - text: Headline - - paragraph: (Default) True - - article: - - paragraph: "False" + - text: Headline + - paragraph: (Default) True + - paragraph: "False" - link "Show Timestamp" - - article: - - paragraph: (Default) False - - article: - - paragraph: "True" - - text: 10 min ago + - paragraph: (Default) False + - paragraph: "True" + - text: 10 min ago - link "Examples - VariantDocked": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Inline + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" - link "Examples - VariantStandalone": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Inline + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" - link "Examples - VariantOverlay": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Block & Timed - - text: 10 min ago - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - paragraph: Text & Timed - - text: 10 min ago - - article: - - paragraph: Text & Timed & Closeable - - text: 10 min ago - - button "Close" - - article: - - text: Headline - - paragraph: Text & Headline & Timed & Closeable - - text: 10 min ago - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Timed & Closeable - - text: 10 min ago - - button "Close" \ No newline at end of file + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Inline + - link "Textlink" + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Block & Timed + - text: 10 min ago + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - paragraph: Text & Timed + - text: 10 min ago + - paragraph: Text & Timed & Closeable + - text: 10 min ago + - button "Close" + - text: Headline + - paragraph: Text & Headline & Timed & Closeable + - text: 10 min ago + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Timed & Closeable + - text: 10 min ago + - button "Close" \ No newline at end of file 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..c90a5aab869f 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 @@ -1,179 +1,130 @@ - main: - heading "DBNotification" [level=1] - link "Density" - - article: - - text: Headline - - paragraph: functional - - article: - - text: Headline - - paragraph: regular (Default) - - article: - - text: Headline - - paragraph: expressive + - text: Headline + - paragraph: functional + - text: Headline + - paragraph: regular (Default) + - text: Headline + - paragraph: expressive - link "Variant" - - article: - - text: Headline - - paragraph: (Default) Docked - - article: - - text: Headline - - paragraph: Standalone - - article: - - text: Headline - - paragraph: Overlay + - text: Headline + - paragraph: (Default) Docked + - text: Headline + - paragraph: Standalone + - text: Headline + - paragraph: Overlay - link "Semantic" - - article: - - text: Headline - - paragraph: (Default) Adaptive - - article: - - text: Headline - - paragraph: Neutral - - article: + - text: Headline + - paragraph: (Default) Adaptive + - text: Headline + - paragraph: Neutral + - 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" - - article: - - paragraph: (Default) False - - article: - - paragraph: "True" - - button "Close" + - paragraph: (Default) False + - paragraph: "True" + - button "Close" - link "Visual" - - article: - - paragraph: (Default) Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Image + - paragraph: (Default) Icon + - img "this is a fancy placeholder" + - paragraph: Image - link "Show Icon" - - article: - - paragraph: (Default) True - - article: - - paragraph: "False" + - paragraph: (Default) True + - paragraph: "False" - link "Link Variant" - - article: - - paragraph: (Default) Block - - link "Textlink" - - article: - - paragraph: Inline - - link "Textlink" + - paragraph: (Default) Block + - link "Textlink" + - paragraph: Inline + - link "Textlink" - link "Show Headline" - - article: - - text: Headline - - paragraph: (Default) True - - article: - - paragraph: "False" + - text: Headline + - paragraph: (Default) True + - paragraph: "False" - link "Show Timestamp" - - article: - - paragraph: (Default) False - - article: - - paragraph: "True" - - text: 10 min ago + - paragraph: (Default) False + - paragraph: "True" + - text: 10 min ago - link "Examples - VariantDocked": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Inline + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" - link "Examples - VariantStandalone": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Inline + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" - link "Examples - VariantOverlay": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Block & Timed - - text: 10 min ago - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - paragraph: Text & Timed - - text: 10 min ago - - article: - - paragraph: Text & Timed & Closeable - - text: 10 min ago - - button "Close" - - article: - - text: Headline - - paragraph: Text & Headline & Timed & Closeable - - text: 10 min ago - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Timed & Closeable - - text: 10 min ago - - button "Close" \ No newline at end of file + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Inline + - link "Textlink" + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Block & Timed + - text: 10 min ago + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - paragraph: Text & Timed + - text: 10 min ago + - paragraph: Text & Timed & Closeable + - text: 10 min ago + - button "Close" + - text: Headline + - paragraph: Text & Headline & Timed & Closeable + - text: 10 min ago + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Timed & Closeable + - text: 10 min ago + - button "Close" \ No newline at end of file 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..c90a5aab869f 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 @@ -1,179 +1,130 @@ - main: - heading "DBNotification" [level=1] - link "Density" - - article: - - text: Headline - - paragraph: functional - - article: - - text: Headline - - paragraph: regular (Default) - - article: - - text: Headline - - paragraph: expressive + - text: Headline + - paragraph: functional + - text: Headline + - paragraph: regular (Default) + - text: Headline + - paragraph: expressive - link "Variant" - - article: - - text: Headline - - paragraph: (Default) Docked - - article: - - text: Headline - - paragraph: Standalone - - article: - - text: Headline - - paragraph: Overlay + - text: Headline + - paragraph: (Default) Docked + - text: Headline + - paragraph: Standalone + - text: Headline + - paragraph: Overlay - link "Semantic" - - article: - - text: Headline - - paragraph: (Default) Adaptive - - article: - - text: Headline - - paragraph: Neutral - - article: + - text: Headline + - paragraph: (Default) Adaptive + - text: Headline + - paragraph: Neutral + - 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" - - article: - - paragraph: (Default) False - - article: - - paragraph: "True" - - button "Close" + - paragraph: (Default) False + - paragraph: "True" + - button "Close" - link "Visual" - - article: - - paragraph: (Default) Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Image + - paragraph: (Default) Icon + - img "this is a fancy placeholder" + - paragraph: Image - link "Show Icon" - - article: - - paragraph: (Default) True - - article: - - paragraph: "False" + - paragraph: (Default) True + - paragraph: "False" - link "Link Variant" - - article: - - paragraph: (Default) Block - - link "Textlink" - - article: - - paragraph: Inline - - link "Textlink" + - paragraph: (Default) Block + - link "Textlink" + - paragraph: Inline + - link "Textlink" - link "Show Headline" - - article: - - text: Headline - - paragraph: (Default) True - - article: - - paragraph: "False" + - text: Headline + - paragraph: (Default) True + - paragraph: "False" - link "Show Timestamp" - - article: - - paragraph: (Default) False - - article: - - paragraph: "True" - - text: 10 min ago + - paragraph: (Default) False + - paragraph: "True" + - text: 10 min ago - link "Examples - VariantDocked": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Inline + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" - link "Examples - VariantStandalone": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Inline + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" - link "Examples - VariantOverlay": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Block & Timed - - text: 10 min ago - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - paragraph: Text & Timed - - text: 10 min ago - - article: - - paragraph: Text & Timed & Closeable - - text: 10 min ago - - button "Close" - - article: - - text: Headline - - paragraph: Text & Headline & Timed & Closeable - - text: 10 min ago - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Timed & Closeable - - text: 10 min ago - - button "Close" \ No newline at end of file + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Inline + - link "Textlink" + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Block & Timed + - text: 10 min ago + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - paragraph: Text & Timed + - text: 10 min ago + - paragraph: Text & Timed & Closeable + - text: 10 min ago + - button "Close" + - text: Headline + - paragraph: Text & Headline & Timed & Closeable + - text: 10 min ago + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Timed & Closeable + - text: 10 min ago + - button "Close" \ No newline at end of file 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..c90a5aab869f 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 @@ -1,179 +1,130 @@ - main: - heading "DBNotification" [level=1] - link "Density" - - article: - - text: Headline - - paragraph: functional - - article: - - text: Headline - - paragraph: regular (Default) - - article: - - text: Headline - - paragraph: expressive + - text: Headline + - paragraph: functional + - text: Headline + - paragraph: regular (Default) + - text: Headline + - paragraph: expressive - link "Variant" - - article: - - text: Headline - - paragraph: (Default) Docked - - article: - - text: Headline - - paragraph: Standalone - - article: - - text: Headline - - paragraph: Overlay + - text: Headline + - paragraph: (Default) Docked + - text: Headline + - paragraph: Standalone + - text: Headline + - paragraph: Overlay - link "Semantic" - - article: - - text: Headline - - paragraph: (Default) Adaptive - - article: - - text: Headline - - paragraph: Neutral - - article: + - text: Headline + - paragraph: (Default) Adaptive + - text: Headline + - paragraph: Neutral + - 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" - - article: - - paragraph: (Default) False - - article: - - paragraph: "True" - - button "Close" + - paragraph: (Default) False + - paragraph: "True" + - button "Close" - link "Visual" - - article: - - paragraph: (Default) Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Image + - paragraph: (Default) Icon + - img "this is a fancy placeholder" + - paragraph: Image - link "Show Icon" - - article: - - paragraph: (Default) True - - article: - - paragraph: "False" + - paragraph: (Default) True + - paragraph: "False" - link "Link Variant" - - article: - - paragraph: (Default) Block - - link "Textlink" - - article: - - paragraph: Inline - - link "Textlink" + - paragraph: (Default) Block + - link "Textlink" + - paragraph: Inline + - link "Textlink" - link "Show Headline" - - article: - - text: Headline - - paragraph: (Default) True - - article: - - paragraph: "False" + - text: Headline + - paragraph: (Default) True + - paragraph: "False" - link "Show Timestamp" - - article: - - paragraph: (Default) False - - article: - - paragraph: "True" - - text: 10 min ago + - paragraph: (Default) False + - paragraph: "True" + - text: 10 min ago - link "Examples - VariantDocked": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Inline + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" - link "Examples - VariantStandalone": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Inline + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" - link "Examples - VariantOverlay": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Block & Timed - - text: 10 min ago - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - paragraph: Text & Timed - - text: 10 min ago - - article: - - paragraph: Text & Timed & Closeable - - text: 10 min ago - - button "Close" - - article: - - text: Headline - - paragraph: Text & Headline & Timed & Closeable - - text: 10 min ago - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Timed & Closeable - - text: 10 min ago - - button "Close" \ No newline at end of file + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Inline + - link "Textlink" + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Block & Timed + - text: 10 min ago + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - paragraph: Text & Timed + - text: 10 min ago + - paragraph: Text & Timed & Closeable + - text: 10 min ago + - button "Close" + - text: Headline + - paragraph: Text & Headline & Timed & Closeable + - text: 10 min ago + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Timed & Closeable + - text: 10 min ago + - button "Close" \ No newline at end of file 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..c90a5aab869f 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 @@ -1,179 +1,130 @@ - main: - heading "DBNotification" [level=1] - link "Density" - - article: - - text: Headline - - paragraph: functional - - article: - - text: Headline - - paragraph: regular (Default) - - article: - - text: Headline - - paragraph: expressive + - text: Headline + - paragraph: functional + - text: Headline + - paragraph: regular (Default) + - text: Headline + - paragraph: expressive - link "Variant" - - article: - - text: Headline - - paragraph: (Default) Docked - - article: - - text: Headline - - paragraph: Standalone - - article: - - text: Headline - - paragraph: Overlay + - text: Headline + - paragraph: (Default) Docked + - text: Headline + - paragraph: Standalone + - text: Headline + - paragraph: Overlay - link "Semantic" - - article: - - text: Headline - - paragraph: (Default) Adaptive - - article: - - text: Headline - - paragraph: Neutral - - article: + - text: Headline + - paragraph: (Default) Adaptive + - text: Headline + - paragraph: Neutral + - 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" - - article: - - paragraph: (Default) False - - article: - - paragraph: "True" - - button "Close" + - paragraph: (Default) False + - paragraph: "True" + - button "Close" - link "Visual" - - article: - - paragraph: (Default) Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Image + - paragraph: (Default) Icon + - img "this is a fancy placeholder" + - paragraph: Image - link "Show Icon" - - article: - - paragraph: (Default) True - - article: - - paragraph: "False" + - paragraph: (Default) True + - paragraph: "False" - link "Link Variant" - - article: - - paragraph: (Default) Block - - link "Textlink" - - article: - - paragraph: Inline - - link "Textlink" + - paragraph: (Default) Block + - link "Textlink" + - paragraph: Inline + - link "Textlink" - link "Show Headline" - - article: - - text: Headline - - paragraph: (Default) True - - article: - - paragraph: "False" + - text: Headline + - paragraph: (Default) True + - paragraph: "False" - link "Show Timestamp" - - article: - - paragraph: (Default) False - - article: - - paragraph: "True" - - text: 10 min ago + - paragraph: (Default) False + - paragraph: "True" + - text: 10 min ago - link "Examples - VariantDocked": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Inline + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" - link "Examples - VariantStandalone": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Inline + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" - link "Examples - VariantOverlay": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Block & Timed - - text: 10 min ago - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - paragraph: Text & Timed - - text: 10 min ago - - article: - - paragraph: Text & Timed & Closeable - - text: 10 min ago - - button "Close" - - article: - - text: Headline - - paragraph: Text & Headline & Timed & Closeable - - text: 10 min ago - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Timed & Closeable - - text: 10 min ago - - button "Close" \ No newline at end of file + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Inline + - link "Textlink" + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Block & Timed + - text: 10 min ago + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - paragraph: Text & Timed + - text: 10 min ago + - paragraph: Text & Timed & Closeable + - text: 10 min ago + - button "Close" + - text: Headline + - paragraph: Text & Headline & Timed & Closeable + - text: 10 min ago + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Timed & Closeable + - text: 10 min ago + - button "Close" \ No newline at end of file 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..c90a5aab869f 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 @@ -1,179 +1,130 @@ - main: - heading "DBNotification" [level=1] - link "Density" - - article: - - text: Headline - - paragraph: functional - - article: - - text: Headline - - paragraph: regular (Default) - - article: - - text: Headline - - paragraph: expressive + - text: Headline + - paragraph: functional + - text: Headline + - paragraph: regular (Default) + - text: Headline + - paragraph: expressive - link "Variant" - - article: - - text: Headline - - paragraph: (Default) Docked - - article: - - text: Headline - - paragraph: Standalone - - article: - - text: Headline - - paragraph: Overlay + - text: Headline + - paragraph: (Default) Docked + - text: Headline + - paragraph: Standalone + - text: Headline + - paragraph: Overlay - link "Semantic" - - article: - - text: Headline - - paragraph: (Default) Adaptive - - article: - - text: Headline - - paragraph: Neutral - - article: + - text: Headline + - paragraph: (Default) Adaptive + - text: Headline + - paragraph: Neutral + - 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" - - article: - - paragraph: (Default) False - - article: - - paragraph: "True" - - button "Close" + - paragraph: (Default) False + - paragraph: "True" + - button "Close" - link "Visual" - - article: - - paragraph: (Default) Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Image + - paragraph: (Default) Icon + - img "this is a fancy placeholder" + - paragraph: Image - link "Show Icon" - - article: - - paragraph: (Default) True - - article: - - paragraph: "False" + - paragraph: (Default) True + - paragraph: "False" - link "Link Variant" - - article: - - paragraph: (Default) Block - - link "Textlink" - - article: - - paragraph: Inline - - link "Textlink" + - paragraph: (Default) Block + - link "Textlink" + - paragraph: Inline + - link "Textlink" - link "Show Headline" - - article: - - text: Headline - - paragraph: (Default) True - - article: - - paragraph: "False" + - text: Headline + - paragraph: (Default) True + - paragraph: "False" - link "Show Timestamp" - - article: - - paragraph: (Default) False - - article: - - paragraph: "True" - - text: 10 min ago + - paragraph: (Default) False + - paragraph: "True" + - text: 10 min ago - link "Examples - VariantDocked": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Inline + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" - link "Examples - VariantStandalone": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Inline + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" - link "Examples - VariantOverlay": - - article: - - paragraph: Text - - article: - - paragraph: Text & Icon - - article: - - img "this is a fancy placeholder" - - paragraph: Text & Preview Image - - article: - - text: Headline - - paragraph: Text & Headline - - article: - - paragraph: Text & Textlink Inline - - link "Textlink" - - article: - - paragraph: Text & Textlink Block - - link "Textlink" - - article: - - paragraph: Text & Textlink Block & Timed - - text: 10 min ago - - link "Textlink" - - article: - - text: Headline - - paragraph: Text & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Textlink Inline & Closeable - - link "Textlink" - - button "Close" - - article: - - paragraph: Text & Timed - - text: 10 min ago - - article: - - paragraph: Text & Timed & Closeable - - text: 10 min ago - - button "Close" - - article: - - text: Headline - - paragraph: Text & Headline & Timed & Closeable - - text: 10 min ago - - button "Close" - - article: - - text: Headline - - paragraph: Text & Icon & Headline & Timed & Closeable - - text: 10 min ago - - button "Close" \ No newline at end of file + - paragraph: Text + - paragraph: Text & Icon + - img "this is a fancy placeholder" + - paragraph: Text & Preview Image + - text: Headline + - paragraph: Text & Headline + - paragraph: Text & Textlink Inline + - link "Textlink" + - paragraph: Text & Textlink Block + - link "Textlink" + - paragraph: Text & Textlink Block & Timed + - text: 10 min ago + - link "Textlink" + - text: Headline + - paragraph: Text & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Textlink Inline & Closeable + - link "Textlink" + - button "Close" + - paragraph: Text & Timed + - text: 10 min ago + - paragraph: Text & Timed & Closeable + - text: 10 min ago + - button "Close" + - text: Headline + - paragraph: Text & Headline & Timed & Closeable + - text: 10 min ago + - button "Close" + - text: Headline + - paragraph: Text & Icon & Headline & Timed & Closeable + - text: 10 min ago + - button "Close" \ No newline at end of file diff --git a/packages/components/src/components/notification/notification.lite.tsx b/packages/components/src/components/notification/notification.lite.tsx index 5fe10cce89c9..70a2f0419cd7 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'; @@ -37,10 +38,11 @@ export default function DBNotification(props: DBNotificationProps) { // jscpd:ignore-end return ( -
-
+ ); } 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; + } +};