Update: Terra-Badge Doc update

cerner · Oct 27, 2023 · fb2fd89 · fb2fd89
1 parent 1aa2e87
commit fb2fd89
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 21 deletions.
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/badge/About.1.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/badge/About.1.doc.mdx
@@ -12,7 +12,7 @@ import BadgePropsTable from 'terra-badge/lib/Badge?dev-site-props-table';
 
 # Terra Badge
 
-The badge component displays content classification.
+Badges are used to represent items like number of filtered items, number of unread items, or to represent state. If you need a selectable annotation consider using a label instead.
 
 ## Getting Started
 
@@ -43,6 +43,22 @@ The Badge component must be composed inside the [Base][1] component with a local
 import Badge from 'terra-badge';
 ```
 
+To implement an accessible terra badge:
+
+- Ensure a meaningful text is provided as `text` prop for terra-badge and choose appropriate intent that matches the defination of Badge text. 
+
+- Ensure Information is not conveyed by only color added by different intent of terra-badge.
+
+- Ensure that the terra-badge is provided with visually hidden text to convey the purpose of the badge to users via screen reader or similar assistive technologies when required.
+
+- When multiple badges are used together, Consider following steps which will help users to perceive or understand the difference between the two badges.
+
+  - Add an icon to visually convey information.
+  - Add a visually-hidden-text to convey information for screen reader users.
+  - Avoid having badges with similar intent on group.
+
+- visually-hidden-text should be ignored when the badge color and text is sufficient to convey information of badge.
+
 ## Component Features
 * [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
 * [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)

diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeInTable.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeInTable.jsx
@@ -45,7 +45,7 @@ const BadgeInTable = () => (
                 <Badge intent="negative" size="large" text="Inactive" />
               </div>
               <div className={cx('badge')}>
-                <Badge intent="info" icon={Icon} text="Verification Pending" visuallyHiddenText="Please check back in 2-4 business days" />
+                <Badge intent="info" icon={Icon} text="Verification Pending" />
               </div>
             </div>
           </Cell>

diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeIntent.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeIntent.jsx
@@ -6,29 +6,71 @@ import styles from './Badge.module.scss';
 const cx = classNames.bind(styles);
 
 const BadgeIntent = () => (
-  <div className={cx('badge-container')}>
-    <div className={cx('badge')}>
-      <Badge text="Patient Arrival" />
+  <React.Fragment>
+    <p>
+      Intent with severity of issues.
+    </p>
+    <div className={cx('badge-container')}>
+      <div className={cx('badge')}>
+        <Badge text="No Risk" />
+      </div>
+      <div className={cx('badge')}>
+        <Badge intent="primary" text="Low" />
+      </div>
+      <div className={cx('badge')}>
+        <Badge intent="secondary" text="Moderate" />
+      </div>
+      <div className={cx('badge')}>
+        <Badge intent="warning" text="High" />
+      </div>
+      <div className={cx('badge')}>
+        <Badge intent="negative" text="Critical" />
+      </div>
     </div>
-    <div className={cx('badge')}>
-      <Badge intent="primary" text="Admitted" />
+    <p>
+      Secondary Intent can be used to label user name as NEW
+    </p>
+    <div className={cx('badge-container')}>
+      <div className={cx('badge')}>
+        <React.Fragment>Segun Adebayo </React.Fragment>
+        <Badge intent="secondary" text="NEW" />
+      </div>
     </div>
-    <div className={cx('badge')}>
-      <Badge intent="secondary" text="Discharged" />
+    <p>
+      Primary Intent with unread items
+    </p>
+    <div className={cx('badge-container')}>
+      <div className={cx('badge')}>
+        <Badge intent="primary" text="3" />
+      </div>
+      <div className={cx('badge')}>
+        <Badge intent="primary" text="7" />
+      </div>
+      <div className={cx('badge')}>
+        <Badge intent="primary" text="24" />
+      </div>
+      <div className={cx('badge')}>
+        <Badge intent="primary" text="240+" />
+      </div>
     </div>
-    <div className={cx('badge')}>
-      <Badge intent="positive" text="Recovery" />
+    <p>
+      Default Intent with read items
+    </p>
+    <div className={cx('badge-container')}>
+      <div className={cx('badge')}>
+        <Badge text="3" />
+      </div>
+      <div className={cx('badge')}>
+        <Badge text="7" />
+      </div>
+      <div className={cx('badge')}>
+        <Badge text="24" />
+      </div>
+      <div className={cx('badge')}>
+        <Badge text="240+" />
+      </div>
     </div>
-    <div className={cx('badge')}>
-      <Badge intent="negative" text="Complications" />
-    </div>
-    <div className={cx('badge')}>
-      <Badge intent="warning" text="Urgent" />
-    </div>
-    <div className={cx('badge')}>
-      <Badge intent="info" text="Medical Notes" />
-    </div>
-  </div>
+  </React.Fragment>
 );
 
 export default BadgeIntent;