Changed note to inline notification

grommet · Jan 13, 2025 · e290cdc · e290cdc
1 parent fc50354
commit e290cdc
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/aries-site/src/layouts/content/AccessibilitySection.js b/aries-site/src/layouts/content/AccessibilitySection.js
@@ -1,5 +1,6 @@
 /* eslint-disable react/prop-types */
 import React, { useState, useMemo, useEffect } from 'react';
+import { Notification } from 'grommet';
 import { WCAGRuleDetail, WCAGRuleSummary } from '.';
 import componentData from '../../data/wcag/components.json';
 
@@ -87,6 +88,13 @@ export const AccessibilitySection = ({ title, version }) => {
 
   return (
     <>
+      <Notification
+        status="info"
+        margin={{ bottom: 'medium' }}
+        width="large"
+        // eslint-disable-next-line max-len
+        message="WCAG rules marked as conditional indicate that the implementer must take additional actions to ensure full compliance."
+      />
       <WCAGRuleSummary statuses={statusData} />
       <WCAGRuleDetail version={version || '2.2'} rules={comparisons} />
     </>

diff --git a/aries-site/src/pages/components/anchor.mdx b/aries-site/src/pages/components/anchor.mdx
@@ -131,8 +131,6 @@ Used to indicate that an anchor cannot be interacted with.
 ### A11y guidance
 The following guidance should be considered for each instance of the component and is the responsibility of the implementer. WCAG criteria provided directly by the Grommet component are summarized under [WCAG compliance](#wcag-compliance).
 
-**Note**: WCAG rules marked as conditional indicate that the implementer must take additional actions to ensure full compliance.
-
 **Use 'target' and 'rel' props when linking externally:**
 
 If clicking an Anchor leads to an external URL, apply these props to the anchor:

diff --git a/aries-site/src/pages/components/button.mdx b/aries-site/src/pages/components/button.mdx
@@ -384,13 +384,11 @@ For button groups on screen widths less than or equal to 576px (Grommet "small")
 ### A11y guidance
 The following guidance should be considered for each instance of the component and is the responsibility of the implementer. WCAG criteria provided directly by the Grommet component are summarized under [WCAG compliance](#wcag-compliance).
 
-**Note**: WCAG rules marked as conditional indicate that the implementer must take additional actions to ensure full compliance.
-
 If pressing a Button results in a new URL, or the resultant UI makes sense as "a new browser tab," that is a link `<a>`. Everything else is a `<button>`.
 
 The distinction is important to screen reader users to know what's going to happen next. Will I navigate somewhere or will something happen on the page? So it's important to choose the right HTML element for the job.
 
-If using an `<a>` tag, see the [WCAG rules for the Anchor component](https://design-system.hpe.design/components/anchor#wcag-compliance).
+If using an `<a>` tag, see the [WCAG rules for the Anchor component](/components/anchor#wcag-compliance).
 
 ### WCAG compliance