Skip to content
This repository has been archived by the owner on May 22, 2024. It is now read-only.

Commit

Permalink
Address PR comments
Browse files Browse the repository at this point in the history
  • Loading branch information
vinaybhargavar committed Jul 5, 2023
1 parent 53d6b48 commit 64c1b6a
Showing 1 changed file with 9 additions and 8 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Notice } from "@cerner/terra-docs";
import { Badge } from 'terra-image/package.json?dev-site-package';
import { Badge } from 'terra-clinical-detail-view/package.json?dev-site-package';
import DetailViewDivided from '../example/DetailViewDivided?dev-site-example';

<Badge />
Expand All @@ -8,7 +8,7 @@ import DetailViewDivided from '../example/DetailViewDivided?dev-site-example';

## Why is this important?

The Terra Clinical Detail Views allows you to create a view with text at different levels of importance. Using the terra-clinical-detail-view improperly may prevent some of your users from understanding content and necessary context to interact with the page.
Terra Clinical Detail View allows you to create a view with text at different levels of importance. Using this component improperly may prevent some of your users from understanding content and necessary context to interact with the page.
>
> Pages with well-structured content are essential for many web users, for example:
> - **People with cognitive and learning disabilities** can more easily find and prioritize content on the page.
Expand All @@ -27,6 +27,7 @@ The Terra Clinical Detail Views allows you to create a view with text at differe
### Code Considerations

#### Maintaining a hierarchical content structure on the page:

> Sighted users perceive structure and relationships through various visual cues — headings are often in a larger, bold font separated from the content they represent.
>
> _&nbsp;&nbsp;&mdash; excerpt from [W3C: Info and Relationships (Level A)](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)_
Expand All @@ -35,14 +36,12 @@ The Terra Clinical Detail Views allows you to create a view with text at differe
>
> _&nbsp;&nbsp;&mdash; excerpt from [Accessibility and Usability at Penn State: Heading tags](https://accessibility.psu.edu/headingshtml/)_
The DetailView component creates a view with text at different levels of importance. The HTML heading tag is used to create the structure of the page. It is critical to screen reader users that the `level` [prop](https://engineering.cerner.com/terra-ui/components/terra-clinical-detail-view/clinical-detail-view/clinical-detail-view#detail-view-props-table) be appropriately set to a value that best represents the placement of the main Clinical Detail View heading in the existing structure of the page. Think about headings as creating the outline of a page. Each heading level should be set to represent that outline structure. Screen reader users rely on the heading levels to understand the structure of information on the page.
The Clinical Detail View component creates a view with text at different levels of importance. The HTML heading tag is used to create the structure of the page. It is critical to screen reader users that the `level` [prop](https://engineering.cerner.com/terra-ui/components/terra-clinical-detail-view/clinical-detail-view/clinical-detail-view#detail-view-props-table) be appropriately set to a value that best represents the placement of the main Clinical Detail View heading in the existing structure of the page. Think about headings as creating the outline of a page. Each heading level should be set to represent that outline structure. Screen reader users rely on the heading levels to understand the structure of information on the page.

<Notice variant="important" ariaLevel="5">

It is highly recommended to utilize the `level` [prop](https://engineering.cerner.com/terra-ui/components/terra-clinical-detail-view/clinical-detail-view/clinical-detail-view#detail-view-props-table) to set the appropriate heading level of the Title to match the hierarchical structure of the page. The `level` [prop](https://engineering.cerner.com/terra-ui/components/terra-clinical-detail-view/clinical-detail-view/clinical-detail-view#detail-view-props-table) will also set the SecondaryTitles and the `title` of the Detail List structures to the appropriate heading level to ensure a hierarchical content structure.

</Notice>

Code Example:
```jsx
const item1 = (<LabelValueView label="Start Date" textValue="12/12/12 00:00AM" isChildOfDescriptionList />);
Expand All @@ -61,9 +60,11 @@ const item1 = (<LabelValueView label="Start Date" textValue="12/12/12 00:00AM" i
/>
```

</Notice>

#### Named Section Behavior:

All of the content related to the Detail View should be understood as a section and the `title` prop is used to programmatically create a label for the region. It is critical to screen reader users that the title [prop](https://engineering.cerner.com/terra-ui/components/terra-clinical-detail-view/clinical-detail-view/clinical-detail-view#detail-view-props-table) be set to a value that best represents the region that groups the details in the section within the page. Screen reader users rely on the title to know the beginning and end of a region, and to navigate to the specific region on the page. Leaving the title off of the section hurts the accessibility of the component by removing the programmatic indication of the region on the page. The region/section won't be announced by Assistive Technology (AT) if there is no programmatically associated label.
All of the content related to the Clinical Detail View should be understood as a section and the `title` prop is used to programmatically create a label for the region. It is critical to screen reader users that the title [prop](https://engineering.cerner.com/terra-ui/components/terra-clinical-detail-view/clinical-detail-view/clinical-detail-view#detail-view-props-table) be set to a value that best represents the region that groups the details in the section within the page. Screen reader users rely on the title to know the beginning and end of a region, and to navigate to the specific region on the page. Leaving the title off of the section hurts the accessibility of the component by removing the programmatic indication of the region on the page. The region/section won't be announced by Assistive Technology (AT) if there is no programmatically associated label.

#### Caption for graphs:

Expand All @@ -89,8 +90,6 @@ The DetailList sub-component is often used to create a list of items associated

It is highly recommended that the `isLabelValuePairList` [prop](https://engineering.cerner.com/terra-ui/components/terra-clinical-detail-view/clinical-detail-view/clinical-detail-view#detail-view-props-table) is set to true when the list contains label-value pairs. By setting this prop to true, we use the HTML description list to create the programmatic structure of the label (a term) to a value (a definition). This semantic structure is critical to support users of assistive technology so that they can properly relate information in the list together. The DetailList should be understood as a description list when it contains label-value pairs and the DetailList should be understood as an unordered list when it contains other HTML elements passed in by the consumer.

</Notice>

Code Example:
```jsx
const detail1item1 = (<LabelValueView label="Age of onset" textValue="38 years" isChildOfDescriptionList />);
Expand Down Expand Up @@ -147,6 +146,8 @@ const detail3item2 = (
/>
```

</Notice>

## Support Compliance

Terra is committed to ensuring its components provide maximum possible accessibility. However, using Terra components will not automatically make a product accessible.
Expand Down

0 comments on commit 64c1b6a

Please sign in to comment.