diff --git a/packages/terra-clinical-item-view/CHANGELOG.md b/packages/terra-clinical-item-view/CHANGELOG.md index faa34d963..a68ca95bc 100644 --- a/packages/terra-clinical-item-view/CHANGELOG.md +++ b/packages/terra-clinical-item-view/CHANGELOG.md @@ -6,6 +6,7 @@ * Added * Added `trueColumn` prop to toggle between displaying in a two column layout by row or by column. + * Added accessibility guide. ## 4.11.0 - (September 21, 2023) diff --git a/packages/terra-clinical-item-view/package.json b/packages/terra-clinical-item-view/package.json index 1e11f27ef..5d2f9d66f 100644 --- a/packages/terra-clinical-item-view/package.json +++ b/packages/terra-clinical-item-view/package.json @@ -30,6 +30,7 @@ "classnames": "^2.2.5", "prop-types": "^15.5.8", "terra-clinical-item-display": "^4.10.0", + "terra-heading": "^4.52.0", "terra-icon": "^3.0.0", "terra-mixins": "^1.0.0", "terra-theme-context": "^1.0.0" diff --git a/packages/terra-clinical-item-view/src/ItemView.jsx b/packages/terra-clinical-item-view/src/ItemView.jsx index a4fd58037..8a3cff442 100644 --- a/packages/terra-clinical-item-view/src/ItemView.jsx +++ b/packages/terra-clinical-item-view/src/ItemView.jsx @@ -27,6 +27,7 @@ const AccessoryAlignments = { const propTypes = { /** * The visual column layout in which to present the displays. One of `oneColumn`, `twoColumn`. + * When using the `twoColumn` layout, the displays are split between the columns by placing every other display into the second column. */ layout: PropTypes.oneOf(['oneColumn', 'twoColumns']), /** @@ -65,7 +66,8 @@ const propTypes = { */ endAccessory: PropTypes.node, /** - * An array of terra-clinical-item-display's to be presented. + * An array of terra-clinical-item-displays to be presented. + * The Item View can only have 8 displays at a time, any additional displays passed in will be ignored. */ displays: PropTypes.arrayOf(PropTypes.element), /** diff --git a/packages/terra-clinical-item-view/src/terra-dev-site/doc/clinical-item-view/AccessibilityGuide.4.doc.mdx b/packages/terra-clinical-item-view/src/terra-dev-site/doc/clinical-item-view/AccessibilityGuide.4.doc.mdx new file mode 100644 index 000000000..73d5a30d7 --- /dev/null +++ b/packages/terra-clinical-item-view/src/terra-dev-site/doc/clinical-item-view/AccessibilityGuide.4.doc.mdx @@ -0,0 +1,205 @@ +import { Badge } from 'terra-clinical-item-view/package.json?dev-site-package'; +import { Notice } from "@cerner/terra-docs"; +import ItemViewWithHeader from '../example/ItemViewWithHeader?dev-site-example'; +import ItemViewTwoColumnWithHeader from '../example/ItemViewTwoColumnWithHeader?dev-site-example'; + + + +# Accessibility Guide for Terra Clinical Item View + +## Why is this important? + +Terra Clinical Item View allows you to create a view filled with information in the form of Clinical Item Displays. Improper usage of this component may prevent end users from understanding content and necessary context to interact with the page. + +## Accessibility Considerations + +#### General notes +- **Related information should be presented as close to each other as possible.** It is best practice to keep related information above or below its related counterparts. + - For example - presenting related information across from each other in the two column view can make it more difficult for users to understand that the information is related. +Reading by column from top to bottom is the more common way information is consumed visually, so when presenting this information by row between the two columns it might be confusing for assistive technology users and users in general. +- When passing in Clinical Item Displays, keep in mind that only 8 can be used within a view at a time. Any additional displays passed in will be ignored. +- When using the two column layout, the displays are split between the columns with every other display being moved to the right hand column. + +---- + +### Code Considerations + +#### Headings + + + +It is **strongly** recommended to add a heading element above the implementation of the Clinical Item View component. +**A header not only acts as a label for the information being communicated to the end users, but also helps with visual and screenreader navigation throughout a page.** +The recommended way to implement this header is to utilize [Terra Heading](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/heading/about) +or the [Terra Clincial Header](https://engineering.cerner.com/terra-clinical/components/terra-clinical-header/clinical-header/clinical-header). + + + +The Clinical Item View structure consists of an unordered list `