[notice] removed critical notification label from notice with warning…

… theme (#1471) Co-authored-by: faisne <166654065+sheila-semrush@users.noreply.github.com>
semrush · Jul 8, 2024 · 0b57abb · 0b57abb
1 parent 56ca4ff
commit 0b57abb
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 116 deletions.
diff --git a/semcore/notice-global/CHANGELOG.md b/semcore/notice-global/CHANGELOG.md
diff --git a/semcore/notice-global/src/NoticeGlobal.jsx b/semcore/notice-global/src/NoticeGlobal.jsx
@@ -69,7 +69,7 @@ class NoticeGlobalRoot extends Component {
         backgroundColor={color}
         role='region'
         aria-live={isAssertive ? 'assertive' : 'polite'}
-        aria-label={getI18nText(isAssertive ? 'criticalNotification' : 'notification')}
+        aria-label={getI18nText(theme === 'danger' ? 'criticalNotification' : 'notification')}
       >
         {advancedMode ? (
           <Children />

diff --git a/semcore/notice/CHANGELOG.md b/semcore/notice/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [5.36.1] - 2024-06-27
+
+### Fixed
+
+- Notice only with `danger` theme has aria-label "Critical Notification" (`warning` theme gets "Notification" as all other themes).
+
 ## [5.36.0] - 2024-07-05
 
 ### Changed

diff --git a/semcore/notice/src/Notice.jsx b/semcore/notice/src/Notice.jsx
@@ -76,7 +76,7 @@ class RootNotice extends Component {
         backgroundColor={color}
         role='region'
         aria-live={ariaLive}
-        aria-label={getI18nText(isAssertive ? 'criticalNotification' : 'notification')}
+        aria-label={getI18nText(theme === 'danger' ? 'criticalNotification' : 'notification')}
       >
         <Children />
       </SNotice>,

diff --git a/website/docs/components/notice-global/notice-global-a11y.md b/website/docs/components/notice-global/notice-global-a11y.md
@@ -19,9 +19,10 @@ Table: Roles & attributes
 | Component                 | Attribute                                                        | Usage                                                                                                                                                                                                                               |
 | ------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `NoticeGlobal`            | `role="region"`                                                  | Defines an ARIA landmark and allows users to navigate to the component easily and to have it listed in a summary of the page. |
+| `NoticeGlobal`            | `aria-label`                                                     | Defines a default accessible name for the region: `"Notification"` for **info**, **success** and **warning** themes, and `"Critical notification"` for **danger** theme. |
 | `NoticeGlobal`            | `aria-live="polite"`                                             | Defines a region which receives updates that are important for the user to receive, but not so rapid as to be annoying. The screen reader will speak changes whenever the user is idle. |
 | `NoticeGlobal`            | `aria-live="assertive"` (only for `warning` and `danger` themes) | Tells assistive technologies to interrupt other processes to provide users with immediate notification of container changes. |
-| `NoticeGlobal.CloseIcon`  | `aria-label="Close"`                                             | Defines the default accessible name for the **Close** button. |
+| `NoticeGlobal.CloseIcon`  | `aria-label="Close notification"`                                             | Defines the default accessible name for the **Close** button. |
 
 ## Considerations for developers
 

diff --git a/website/docs/components/notice/notice-a11y.md b/website/docs/components/notice/notice-a11y.md
@@ -19,7 +19,7 @@ Table: Roles & attributes
 | Component          | Attribute                          | Usage                                                                                                                                                                                                                               |
 | ------------------ | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `Notice`           | `role="region"`                    | Defines an ARIA landmark and allows users to navigate to the component easily and to have it listed in a summary of the page. |
-| `Notice`           | `aria-label="Notification"`        | Defines a default accessible name for the region. |
+| `Notice`           | `aria-label`                       | Defines a default accessible name for the region: `"Notification"` for **info**, **success** and **warning** themes, and `"Critical notification"` for **danger** theme. |
 | `Notice`           | `aria-live="polite"`               | Defines a region which receives updates that are important for the user to receive, but not so rapid as to be annoying. The screen reader will speak changes whenever the user is idle.                    |
 | `Notice`           | `aria-live="assertive"` (only for `warning` and `danger` themes) | Tells assistive technologies to interrupt other processes to provide users with immediate notification of container changes. |
 | `Notice.CloseIcon` | `aria-label="Close notification"`  | Defines the default accessible name for the **Close** button. |