+ Heart Rate:
+ Blood Pressure:
+```
+
+- **Add Additional Context**: The visible presentation provides visible context but we want to ensure more meaningful text for a screen reader user.
+ - For example, a mailbox icon with a Badge count of 20 can easily be interpreted by sighted users a 20 unread messages. It would best to provide more context for AT users. In this instance we could have the Badge include the count and visually hidden text “unread messages” so a screen reader would read “20 unread messages” instead of just “20.”
+
+Other helpful hints in using visually-hidden-text:
+
+- Avoid using visually-hidden-text in a way that creates redundancy of words. For example, a badge titled “High” with visually hidden text “High Risk Factor” – in this example the word High would be read twice. It is unnecessary and the redundancy could cause confusion.
+- Keep visually-hidden-text to a minimum in length. It should be short, simple, and to the point.
+- Do not use visually-hidden-text when the text is sufficient to convey information of badge.
+
+**Remember the point of accessibility is to provide an equitable experience to all.** We do not want to give any user more information than another regardless of abilities.
+
+### Accessibility Guidance: Icons
+
+For icons to be effective within user interfaces, the icon used must make sense, be consistent and predictable, have an accessible name, and users must understand their purpose. If not implemented correctly, icons may prevent some of your users from understanding the UI. Refer to the [Terra Icon Accessibility Guide](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/icon/accessibility-guide) for proper guidance when using icons.
+
++ Blood Pressure:
-
-
+
+
);
export default BadgeIcon;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeInDoc.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeInDoc.jsx
new file mode 100644
index 00000000000..bc17cc73ed3
--- /dev/null
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeInDoc.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Badge from 'terra-badge';
+
+const propTypes = { text: PropTypes.string, intent: PropTypes.string, visuallyHiddenText: PropTypes.string };
+
+const BadgeInDoc = ({
+ ...props
+}) => (
+ + Icon Usage Inside Badges: The following Badge example only illustrates icons inside of Badges. When Icons are used inside of Badges, be sure to follow the guidance prescribed in the + Icon Accessibility Guide + to ensure proper use of icons. Icons within icon-only Badges must be meaningful and have a meaningful label applied via the a11yLabel prop. +
+
+
-
+
+
+
+
+
-
-
-
-
@@ -31,7 +29,7 @@ const BadgeInTable = () => (
|
|
@@ -42,10 +40,7 @@ const BadgeInTable = () => (
|
@@ -56,10 +51,7 @@ const BadgeInTable = () => (
|
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
index 4537a7a5290..797992ec203 100644
--- 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
@@ -1,34 +1,54 @@
import React from 'react';
import Badge from 'terra-badge';
+import Avatar from 'terra-avatar';
import classNames from 'classnames/bind';
import styles from './Badge.module.scss';
const cx = classNames.bind(styles);
const BadgeIntent = () => (
-
-
-
-
-
-
-
-
-
-
+
);
export default BadgeIntent;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeSize.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeSize.jsx
index 1dad6b0159a..62c0e5149fe 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeSize.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeSize.jsx
@@ -6,23 +6,28 @@ import styles from './Badge.module.scss';
const cx = classNames.bind(styles);
const BadgeSize = () => (
-
+ The Intent prop can be used to apply colors to badges. Please refer to the + VisuallyHiddenText prop examples further below + to ensure proper + context is provided for assistive technology users to understand the purpose of the badge. +
++ Intent Badge Colors: The following Badge example only illustrates badge colors. This example is not intended to illustrate how Badges should be used. As noted above, multiple badges should not be used together. Instead, see Pills or Tag. +
+
+
-
+
+
+
+
+
+
+
+
+
-
+ + Example usage of the Intent Badge. Please note that this use case does not require the VisuallyHiddenText prop because the badge is visually and programmatically grouped in a semantic container. Other use cases will require the VisuallyHiddenText prop. To effectively communicate context to assistive technology users. +
+
+
-
+ Segun Adebayo
+
+ UI Engineer +
+ + UI Engineer +
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
);
export default BadgeSize;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeVisuallyHiddenText.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeVisuallyHiddenText.jsx
index dcf2e01b4a5..bcf47a505c5 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeVisuallyHiddenText.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeVisuallyHiddenText.jsx
@@ -1,25 +1,41 @@
import React from 'react';
import Badge from 'terra-badge';
+import Button from 'terra-button';
import classNames from 'classnames/bind';
import styles from './Badge.module.scss';
const cx = classNames.bind(styles);
const BadgeVisuallyHiddenText = () => (
- + The size prop can be used to change the size of Badges. The following is not an example of how to use Badges. It is only intended to illustrate the sizes that can be set. Never use size as a method to communicate meaning. +
+
+
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+ Ensuring Programmatic Context Badge Example: + When a Badge is paired with a word or item but not semantically understood as grouped with that word, add use the word or words as the visually hidden text string as illustrated in the following example. +
+
+
+ Heart Rate
+
+
-
+
-
+
+ Blood Pressure
+
+
-
+
-
+
);
export default BadgeVisuallyHiddenText;
+ Add Additional Context to a Badge Example: + Use the VisuallyHiddenText prop to provide additional context that sighted users can see but may make the content more meaningful and better understood by screen reader users. +
+
+
-
-
-