From e6b0a311e30774775b896b2b1d1f60df8aa58564 Mon Sep 17 00:00:00 2001 From: udaymattam Date: Fri, 22 Jul 2022 17:19:52 +0530 Subject: [PATCH 01/10] first initial commit --- .../AccessibilityGuide.4.doc.mdx | 252 ++++++++++++++++++ .../example/BackActionHeaderContent.jsx | 54 ++++ 2 files changed, 306 insertions(+) create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackActionHeaderContent.jsx diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx new file mode 100644 index 00000000000..4dbf8ef9e3d --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx @@ -0,0 +1,252 @@ +import { Badge } from 'terra-image/package.json?dev-site-package'; +import { Notice } from '@cerner/terra-docs'; +import Whitespace from "../../common/layout-helpers/Whitespace"; +import ActionHeaderExample from "./example/BackActionHeader" +import BackActionHeader from "./example/BackPreviousNextCloseActionHeader" +import MaximizeActionHeader from "./example/MaximizeCloseActionHeader" +import ActionHeadercontainer from "./example/BackActionHeaderContent" + + + +# Accessibility Guide for Terra Action Header + + +### Why is this important? + +> Terra Action Header is an essential component used to identify a section of content and provide controls to manage the respective content. If Terra Action Header is not made accessible, it can prevent users from understanding content and necessary context to interact with the page. +> +>Action Headers provide a visual and programmatic presentation of content structure and convey a meaningful purpose to the section. Action headers also commonly use icon-only buttons that must visually communicate an action. In addition, the buttons must be intuitive and have a programmatic association to other words on the page to ensure a unique and descriptive accessible control name to allow speech input device users can use them. Screen reader users also rely on the added programmatic context to understand what precisely a control may do. + + + +## Accessibility Considerations: + +### Code Considerations +>Headings and the various heading levels separate page content and organize it in a meaningful fashion both visually and programmatically to ensure all users can understand the structure of the page. Previous patterns combined size and styling details to create visual headings of the page without the appropriate programmatic context to properly convey the page’s structure. Missing or inappropriate ordered heading levels combined with the visual styling often resulted in accessibility barriers to people using assistive technologies. +> +> +>  For proper accessibility to assistive technologies, developers must ensure that all headings on the page follow these two imperatives:  +- Terra Action Headers **must always** follow the correct **heading level order and arrangement** for where it is placed within other content on the page. +- Terra Action Headers may sometimes be used to **label page regions** and should have the appropriate landmark role to ensure the programmatic context. + +#### Heading Level Order and Arrangement +The primary objective of using Action Headers is to provide information on the structural hierarchy of a document. Therefore, headings must look like a heading and be programmatically coded to ensure users can understand the page structure. Additionally, the programmatic heading context can help some users navigate the page using assistive technologies like screen readers. The following are accessibility best practices that developers must follow to create accessible headers: +- Developers must use the appropriate heading levels (1 to 6) by always providing a value to the '**level**' prop. The heading level should match the hierarchical structure of the page. +- If a value to the '**level**' prop is not provided, the heading '**text**' will not be rendered. +- For accessibility best practices, it is recommended that consumers should always use **only one** `

` per page or view. The one `

` should be the page title. +- Nest headings by their level. Headings with an equal or higher level start a new section, headings with a lower level start new subsections that are part of the higher ranked section. +- Avoid skipping heading levels to be more specific (for example, do not skip from `

 to 

`). However, it is permissible to skip headings in the other direction if it indicates closing a subsection (for example, from `
 to 

`). +> | _Bad_ [[1]](/components/cerner-terra-core-docs/action-header/accessibility-guide#linked-references) | _Good_ | +> |---|---| +> | `

Heading level 1

`
`

Heading level 3

`
`

Heading level 4

` | `

Heading level 1

`
`

Heading level 2

`
`

Heading level 3

` | + + + +Headings create an outline for the content on the page, similar to a term paper outline or table of contents. The `

` describes the page as a whole (and should be similar to the page ``). A page should typically have only one `<h1>`. Headings `<h2>`through `<h6>` represent increasing degrees of "indentation" in our conceptual "outline". As such, it does not make sense to skip heading levels, such as from `<h2>` to `<h4>`, going down the page. Here is an example of content hierarchy with corresponding heading levels: [<sub>[2]</sub>](/components/cerner-terra-core-docs/action-header/accessibility-guide#linked-references) + + + +#### Labeling Page Regions (as needed) +Action Header can also be used to provide labels to distinguish multiple page regions of the same type. Most content on web pages should be organized into sections. When pages are organized into sections, a heading should be present. Developers may choose to use sectioning elements to indicate these sections. When using a sectioning element, a clinical header should generally be the first content within the section to act as a label. The objective of this technique is to use section headings to convey the structure of the content. Action Headers can be used to: +- Indicate start of main content +- Mark up section headings within the main content area +- Demarcate different navigational sections like top or main navigation, left or secondary navigation and footer navigation +- Allow users the ability to navigate a page by sections or skip repeated blocks of information + +<Whitespace /> + +<Notice variant="important" ariaLevel="5"> + +**Accessibility Guidance: Label Page Regions** + +Sectioning content can be labeled using a combination of the [aria-labelledby](https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby) property and <spam>id</spam> attribute, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page. + + +#### Actionable elements within Action Header +- Engineers must ensure the code order reflects the user’s logical reading order so actionable elements will receive focus in the expected order. +- All actionable elements must be able to receive keyboard focus. Though a TABINDEX attribute should not be required to ensure keyboard use, if used, never use a TABINDEX higher than 0. +- Terra provides the ability to use the up action to initiate actions. Do not initiate actions on the down event to ensure users can cancel their actions by moving off the interactable element. +- Do not initiate any change of context or anything unexpected on focus or input of actionable elements. +- Never override the visible keyboard focus state. Keyboard-only users rely on the focus state to see where they are on the page. +- All actionable elements within Action Header must have an accessible name: + - Ensure the programmatic name of actionable elements matches the visual label of the element. Often, they are the same, but when an aria-label is used to create an accessible name, the aria-label value should be the same or similar to the visible name to ensure all users can access and activate it. + - For example, a button with an aria-label of “Submit” and the text label of “Send” would be problematic and create accessibility barriers for speech input device users. + - For buttons that use icons to convey meaning, it is critical to include alternate content to represent the icon's meaning. +<div > + <ActionHeadercontainer/> +</div> +```jsx +import ActionHeader from 'terra-action-header'; + +const ActionHeaderExample = () => ( + <div> + <br /> + <ActionHeader + text="Back Action Header" + onBack={() => alert('You clicked back!')} + level={3} + /> + <br /> + </div> +); + +``` + - For buttons that use icons that do not convey a meaning, ensure they are marked as purely decorative. +<div aria-label="Example demo"> + <BackActionHeader/> +</div> +```jsx +import ActionHeader from 'terra-action-header'; + +const ActionHeaderExample = () => ( + <div> + <br /> + <ActionHeader + text="Back Close Previous Next Action Header" + onClose={() => alert('You clicked close!')} + onBack={() => alert('You clicked back!')} + onPrevious={() => alert('You clicked previous!')} + onNext={() => alert('You clicked next!')} + level={3} + /> + <br /> + </div> +); + +``` + - Ensure any non-unique button label that is visually related to content on the page must be programmatically associated with its content. For example, a “learn more” button next to the word “allergies” must be appropriately associated with the word allergies. +<div aria-label="Example demo"> + <MaximizeActionHeader/> +</div> +```jsx +import ActionHeader from 'terra-action-header'; + +const ActionHeaderExample = () => ( + <div> + <br /> + <ActionHeader + text="Maximize Close Action Header" + onClose={() => alert('You clicked close!')} + onMaximize={() => alert('You clicked maximize!')} + level={3} + /> + <br /> + </div> +); + +``` + + + + +</Notice> + +---- + +<Whitespace /> + +### Content Creator Considerations +- Work with engineers to convey the page's structure to ensure proper heading levels are assigned. +- When creating the text for the action header or any labels of interactable elements within it, ensure the words used are purposeful and help the user understand the context or purpose of the content. + - Heading labels must accurately describe the content they represent. + - Button labels must be unique and descriptive of the actions they will initiate. The best practice is to use verbs that describe the action. Never use “OK," "Yes," or "No” for buttons. They are vague and can be confusing to the user. + - For any actionable element, avoid non-unique labels unless the element perform the exact same function. For example, two print buttons that print the exact same document are fine. However, if the buttons print different documents, this would be an accessibility failure. + - If non-unique names cannot be avoided, inform the engineer of other text on the page that can be programmatically associated with other content on the page that may help describe a visual relationship. For example, multiple “Learn more” buttons on the page are placed in visual proximity to the item the user can learn more about. Ensure the first word(s) of the programmatic label match the visual label. + - When using icons, inform engineers when an icon is purely decorative. Otherwise, provide the engineer with meaningful alternate text which will serve as the accessible name. + - Ensure any icon used within Action Header is used to consistently represent the same functionality. Additionally, any alternate content used with an icon must be consistent for a predictable user experience. The alternate text should be consistent in wording based on the icon usage +- Ensure the engineers understand the logical reading order of the page. +- Never add unexpected behaviors to buttons that could cause a change of context on focus or activation of the button. Ensure buttons always meet the user’s expectations. +- After coded, ensure all interactable elements receive keyboard focus in the user’s reading order and display a visible keyboard focus. Ensure the keyboard user does not get “trapped” somewhere on the page preventing them from the entire workflow. + +## Usability Expectations: +Users do not expect Action Header to be actionable. They would, however, expect any actionable elements within Action Header to perform the expected action based on the label of the element. + +### Interaction Details +Users do not expect Action Header to receive keyboard focus or be actionable. However, they would expect any actionable element within it to receive keyboard focus and behave in an expected and predictable manner. +<Whitespace /> +Mouse users expect the cursor to change to a hand with pointing finger when a Button or Link is hovered. Keyboard only users expect to see a visible keyboard focus indicator when an actionable element is in focus. + +### Keyboard Navigation + +The basic keyboard navigation expectations: + +| Key/Sequence | Description | +|---|---| +|*Tab*| Moves focus on and off interactable elements. User expects elements to receive focus in the logical reading order of the page. | +|*Enter*| Executes Button action. | + +<Whitespace newline={4} /> + +## Support Compliance: + +### Primary criteria related to Terra Action Headers +- [1.3.1 Info and Relationships](https://wiki.cerner.com/display/UserExperience/1.3.1+Info+and+Relationships) — Supports + - Terra provides the ability for information, structure, and relationships to be programmatically determined. + - Engineers must ensure that the appropriate heading level is applied to convey the proper content structure of the action header on the page. Engineers must also programmatically associate non-unique controls with other words on the page to ensure visual relationships can be communicated via assistive technologies. + - Content creators must work with engineering to determine the appropriate heading level to match the structure within the page. Should also work with engineers to identify non-unique control labels (e.g., multiple "Close" buttons on the page" to ensure a programmatic association to other words in the interface to create more descriptive and unique accessible names for the controls. +- [2.1.1 Keyboard](https://wiki.cerner.com/display/UserExperience/2.1.1+Keyboard) — Supports + - Terra provides the ability for all interactable elements to receive focus, be interacted with, and be acted upon via keyboard. + - Engineers must ensure that all interactable elements can receive focus, be interacted with, and can be acted upon. +- [2.4.1 Bypass Blocks](https://wiki.cerner.com/display/UserExperience/2.4.1+Bypass+Blocks) — Supports + - Terra provides the ability to create headings and labels that break content up into sections and provide meaningful structure that can be used by assistive technologies. + - Consuming teams must implement headings in a way that conveys the organizational structure of the page. + - Engineers, where appropriate, should include [landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#3._landmark_roles) (e.g.; role=”main”) to define regions of the page. +- [2.4.6 Headings and Labels](https://wiki.cerner.com/display/UserExperience/2.4.6+Headings+and+Labels) — Supports + - Terra provides the ability to create headings and labels that are descriptive of their purpose. + - Engineers must implement meaningful text for headings and labels to accurately describe their purpose. + - Content creators must ensure the headings and labels provided to engineers accurately describe the purpose of the content they represent. +- [2.4.7 Focus Visible](https://wiki.cerner.com/display/UserExperience/2.4.7+Focus+Visible) — Supports + - Terra provides the ability for actionable elements to receive visual focus. + - Engineers must ensure a visible keyboard focus is maintained on all interactive elements. + - Content creators must never remove the default keyboard focus on interactable controls. +### Other accessibility criteria consuming teams are responsible for +- [1.1.1 Non-text Content](https://wiki.cerner.com/display/UserExperience/1.1.1+Non-text+Content) — Supports + - Terra provides the ability to include alternate content on images and icons. + - Engineers must ensure appropriate alternate content is added to icons and non-text elements to convey any meaning or mark the icon as decorative if necessary. + - Content creators must provide Engineers with alternate content that conveys meaning to the user. See also 3.2.4 Consistent Identification. Content creators must also note any icons that are purely decorative so engineers can correctly codify decorative icons. +- [1.4.10 Reflow](https://wiki.cerner.com/display/UserExperience/1.4.10+Reflow) — Supports + - Terra provides the ability for components to reflow when the viewport is resized to 320x256 px without loss of information or function. + - Engineers must ensure content within Terra Action Header can reflow when the viewport is resized to 320 x 256 px without scrolling in two directions or loss of information or functionality. + - Content creators must consider the responsive nature of Terra Action Header and provide engineers guidance on how it should content should reflow when the viewport is resized to 320 x 256 px +- [1.4.11 Non-Text Contrast](https://wiki.cerner.com/display/UserExperience/1.4.11+Non-Text+Contrast) — Supports + - Terra provides components that, by default, meet color contrast requirements. + - Content creators must ensure any graphical elements used within Action Header that convey information meets a 3:1 color contrast ratio. +- [1.4.3 Contrast (Minimum)](https://wiki.cerner.com/display/UserExperience/1.4.3+Contrast) — Supports + - Terra provides components that, by default, meet color contrast requirements. + - Content creators must ensure any content used within Action Header meets the proper color contrast ratios for text. +- [2.4.3 Focus Order](https://wiki.cerner.com/display/UserExperience/2.4.3+Focus+Order) — Supports + - Terra provides the ability for actionable components to receive focus in the order they are coded. + - Engineers must ensure that the focus order is expected and preserves page meaning. Code order should follow the logical reading order of the user. Though a TABINDEX attribute should not be required to ensure keyboard use, if used, never use TABINDEX higher than 0. + - Content creators should convey to the engineers the logical reading order of the page. +- [2.5.2 Pointer Cancellation](https://wiki.cerner.com/display/UserExperience/2.5.2+Pointer+Cancellation) — Supports + - Terra components use the up event to perform actions. + - Engineers must ensure actionable controls always take on the up event. +- [2.5.3 Label in Name](https://wiki.cerner.com/display/UserExperience/2.5.3+Label+in+Name) — Supports + - Terra provides the ability for programmatic labels to match visual labels. + - Engineers must ensure the programmatic label matches the visual label when interactable controls are included within Action Header. Ensure the visible control label is the first word of the programmatic label when associating the control to other words in visual proximity that further describe the control. + - Content creators must provide engineers guidance to ensure unique names for all interactive controls within Terra Action Header. +- [3.2.1 On Focus](https://wiki.cerner.com/display/UserExperience/3.2.1+On+Focus) — Supports + - Terra components do not cause a change of context on focus by default. + - Engineers must ensure that no unexpected change of context happens when interactive elements receive focus. + - Content creators must use standard, predictable design patterns that support user expectations. +- [3.2.4 Consistent Identification](https://wiki.cerner.com/display/UserExperience/3.2.4+Consistent+Identification) — Supports + - Terra provides the ability for elements to be consistently identified. + - Engineers must ensure that elements used for the same function are identified consistently, both visually (same icon for the same functionality) and programmatically (the alternate content behind each image consistently represents the same functionality). + - Content creators must ensure any icons used are used to represent the same function consistently. Additionally, the alternate content used to describe icons must be consistent for users to understand their function predictably. +- [4.1.1 Parsing](https://wiki.cerner.com/display/UserExperience/4.1.1+Parsing) — Supports + - Terra components are tested and validated before release to ensure proper code parsing. + - Engineers must ensure their code is valid HTML. +- [4.1.2 Name, Role, Value](https://wiki.cerner.com/display/UserExperience/4.1.2+Name%2C+Role%2C+Value) — Supports + - Terra provides the ability for Name, Role, and Value attributes to be programmatically determined so as to be read by screen readers. + - Engineers must ensure child elements added into Action Header have an accessible name, proper role, and value for the intended use. + - Content creators must provide engineers with names to appropriately identify controls added within Action Header. + +## Linked References: + +1. MDN contributors (02 February 2022). ["Accessibility Concerns | <h1>-<h6>: The HTML Section Heading elements"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns). Mozilla. First published 15 September 2020. Retrieved 24 February 2022. +2. WebAIM staff (01 May 2020). ["Semantic Structure: Regions, Headings, and Lists"](https://webaim.org/techniques/semanticstructure/#headings). WebAIM (Accessibility In Mind). Institute for Disability Research, Policy, and Practice. Utah State University. Last updated 01 May 2020. Retrieved 24 February 2022. +3. Accessibility Guidelines Working Group (22 February 2022). ["Technique G130: Providing descriptive headings"](https://www.w3.org/WAI/WCAG21/Techniques/general/G130). World Wide Web Consortium. Last updated 22 February 2022. Retrieved 24 February 2022. + + + + diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackActionHeaderContent.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackActionHeaderContent.jsx new file mode 100644 index 00000000000..75ea1b418e7 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackActionHeaderContent.jsx @@ -0,0 +1,54 @@ +import React, { useContext, useState } from 'react'; + +import Button from 'terra-button'; +import { DisclosureManagerContext } from 'terra-disclosure-manager'; +import ModalManager from 'terra-modal-manager'; + + + +/** + * This example file contains three React Components: + * - ModalManagerExample - renders a ModalManager and the ModalContainer. + * - ModalContainer - provide a button to disclose the ModalContent. + * - ModalContent - provides the example showing the Notification Dialog renders over modal content. + * Typically Terra would recommend breaking these into three files, but we condense them to one for documentation purposes. + */ + +const ModalContent = () => { + + + return (<> + <p>text</p> + </> + ); +}; + +const ModalContainer = () => { + const disclosureManager = useContext(DisclosureManagerContext); + + const disclose = () => { + disclosureManager.disclose({ + preferredType: 'modal', + size: 'small', + content: { + key: 'ModalContent', + title: 'Example Modal Content', + component: <ModalContent />, + }, + }); + }; + + return ( + <Button text="Trigger Modal" onClick={disclose} /> + ); +}; + +const ModalManagerExample = () => ( + <div> + <ModalManager> + <ModalContainer /> + </ModalManager> + </div> +); + +export default ModalManagerExample; From 14524b6d5622ffdfd1ab6d4223a5d6806f757671 Mon Sep 17 00:00:00 2001 From: udaymattam <udaym2942@gmail.com> Date: Tue, 26 Jul 2022 15:08:41 +0530 Subject: [PATCH 02/10] Added accessibility guide for action header --- CONTRIBUTORS.md | 2 + packages/terra-core-docs/CHANGELOG.md | 1 + packages/terra-core-docs/package.json | 1 + .../AccessibilityGuide.4.doc.mdx | 41 ++++--- .../example/BackActionHeaderContent.jsx | 103 +++++++++--------- 5 files changed, 74 insertions(+), 74 deletions(-) diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 8d5f58593cd..539b50bba64 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -89,6 +89,7 @@ Cerner Corporation - Jackson Nowotny [@JacksonJN] - Manjuraghavendra Sathrasala [@manjusr] - Saurabh Khare [@saurabhkhare86] +- Uday Kiran Mattam [@udaymattam] Community @@ -204,3 +205,4 @@ Community [@JacksonJN]: https://github.com/JacksonJN [@manjusr]: https://github.com/manjusr [@saurabhkhare86]: https://github.com/SaurabhKhare86 +[@udaymattam]: https://github.com/udaymattam \ No newline at end of file diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index 44a2b5d5bd6..73a83f88366 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -21,6 +21,7 @@ * Added upgrade guide for `terra-action-header`. * Added Accessibility guide for `terra-button`. * Changes to Accessibility guide for `terra-button`. + * Added Accessibility guide for `terra-action-header`. * Fixed * Updated broken links in terra-form-select and action-footer. diff --git a/packages/terra-core-docs/package.json b/packages/terra-core-docs/package.json index d2b038d8cbb..2d9ab058b98 100644 --- a/packages/terra-core-docs/package.json +++ b/packages/terra-core-docs/package.json @@ -51,6 +51,7 @@ "terra-content-container": "^3.36.1", "terra-demographics-banner": "^3.58.1", "terra-dialog": "^2.63.5", + "terra-dialog-modal":"^3.74.5", "terra-divider": "^3.36.1", "terra-dropdown-button": "^1.29.1", "terra-dynamic-grid": "^3.33.1", diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx index 4dbf8ef9e3d..765a27d0af1 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx @@ -73,12 +73,11 @@ Sectioning content can be labeled using a combination of the [aria-labelledby] - For example, a button with an aria-label of “Submit” and the text label of “Send” would be problematic and create accessibility barriers for speech input device users. - For buttons that use icons to convey meaning, it is critical to include alternate content to represent the icon's meaning. <div > - <ActionHeadercontainer/> + <ActionHeaderExample/> </div> ```jsx import ActionHeader from 'terra-action-header'; -const ActionHeaderExample = () => ( <div> <br /> <ActionHeader @@ -88,7 +87,6 @@ const ActionHeaderExample = () => ( /> <br /> </div> -); ``` - For buttons that use icons that do not convey a meaning, ensure they are marked as purely decorative. @@ -98,7 +96,6 @@ const ActionHeaderExample = () => ( ```jsx import ActionHeader from 'terra-action-header'; -const ActionHeaderExample = () => ( <div> <br /> <ActionHeader @@ -111,37 +108,39 @@ const ActionHeaderExample = () => ( /> <br /> </div> -); ``` - Ensure any non-unique button label that is visually related to content on the page must be programmatically associated with its content. For example, a “learn more” button next to the word “allergies” must be appropriately associated with the word allergies. <div aria-label="Example demo"> - <MaximizeActionHeader/> + <ActionHeadercontainer/> </div> + ```jsx +import Button from 'terra-button'; import ActionHeader from 'terra-action-header'; - -const ActionHeaderExample = () => ( - <div> - <br /> - <ActionHeader - text="Maximize Close Action Header" - onClose={() => alert('You clicked close!')} - onMaximize={() => alert('You clicked maximize!')} - level={3} - /> - <br /> +import DialogModal from 'terra-dialog-modal'; + + +<div> + <DialogModal + ariaLabel="Dialog Modal" + isOpen={this.state.isOpen} + onRequestClose={this.handleCloseModal} + header={<ActionHeader text="Allergies" level={2} onBack={this.handleCloseModal} onClose={this.handleCloseModal} />} + > + <p>{text}</p> + </DialogModal> + <Button id="trigger-dialog-modal" text="Show Allergies" onClick={this.handleOpenModal} /> </div> -); +``` -``` + -</Notice> ----- +</Notice> <Whitespace /> diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackActionHeaderContent.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackActionHeaderContent.jsx index 75ea1b418e7..e473e4131ca 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackActionHeaderContent.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackActionHeaderContent.jsx @@ -1,54 +1,51 @@ -import React, { useContext, useState } from 'react'; - +import React from 'react'; import Button from 'terra-button'; -import { DisclosureManagerContext } from 'terra-disclosure-manager'; -import ModalManager from 'terra-modal-manager'; - - - -/** - * This example file contains three React Components: - * - ModalManagerExample - renders a ModalManager and the ModalContainer. - * - ModalContainer - provide a button to disclose the ModalContent. - * - ModalContent - provides the example showing the Notification Dialog renders over modal content. - * Typically Terra would recommend breaking these into three files, but we condense them to one for documentation purposes. - */ - -const ModalContent = () => { - - - return (<> - <p>text</p> - </> - ); -}; - -const ModalContainer = () => { - const disclosureManager = useContext(DisclosureManagerContext); - - const disclose = () => { - disclosureManager.disclose({ - preferredType: 'modal', - size: 'small', - content: { - key: 'ModalContent', - title: 'Example Modal Content', - component: <ModalContent />, - }, - }); - }; - - return ( - <Button text="Trigger Modal" onClick={disclose} /> - ); -}; - -const ModalManagerExample = () => ( - <div> - <ModalManager> - <ModalContainer /> - </ModalManager> - </div> -); - -export default ModalManagerExample; +import ActionHeader from 'terra-action-header'; +import DialogModal from 'terra-dialog-modal'; +import Card from 'terra-card'; + +class DefaultDialogModal extends React.Component { + constructor() { + super(); + + this.state = { + isOpen: false, + }; + + this.handleOpenModal = this.handleOpenModal.bind(this); + this.handleCloseModal = this.handleCloseModal.bind(this); + } + + handleOpenModal() { + this.setState({ isOpen: true }); + } + + handleCloseModal() { + this.setState({ isOpen: false }); + } + + render() { + const text = ['Current Allergies: Cats, Dogs, Dust, Moulds']; + return ( + <Card> + <div> + <Card.Body> + <h3>Allergies</h3> + <p>Current Patient names: Alex, Stokes, Joe root</p> + <DialogModal + ariaLabel="Dialog Modal" + isOpen={this.state.isOpen} + onRequestClose={this.handleCloseModal} + header={<ActionHeader text="Allergies" level={2} onBack={this.handleCloseModal} onClose={this.handleCloseModal} />} + > + <p>{text}</p> + </DialogModal> + <Button id="trigger-dialog-modal" text="Show Allergies" onClick={this.handleOpenModal} /> + </Card.Body> + </div> + </Card> + ); + } +} + +export default DefaultDialogModal; From 297986c1be50390efdac5072c6728e92fef3bde2 Mon Sep 17 00:00:00 2001 From: udaymattam <udaym2942@gmail.com> Date: Wed, 27 Jul 2022 14:25:44 +0530 Subject: [PATCH 03/10] Added ActionHeaderAllergies --- .../AccessibilityGuide.4.doc.mdx | 76 +++++++------------ .../example/ActionHeaderAllergies.jsx | 47 ++++++++++++ .../example/BackActionHeaderContent.jsx | 51 ------------- 3 files changed, 76 insertions(+), 98 deletions(-) create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderAllergies.jsx delete mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackActionHeaderContent.jsx diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx index 765a27d0af1..8f352be0bda 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx @@ -1,17 +1,17 @@ -import { Badge } from 'terra-image/package.json?dev-site-package'; +import { Badge } from 'terra-action-header/package.json?dev-site-package'; import { Notice } from '@cerner/terra-docs'; import Whitespace from "../../common/layout-helpers/Whitespace"; import ActionHeaderExample from "./example/BackActionHeader" import BackActionHeader from "./example/BackPreviousNextCloseActionHeader" import MaximizeActionHeader from "./example/MaximizeCloseActionHeader" -import ActionHeadercontainer from "./example/BackActionHeaderContent" +import ActionHeaderAllergies from "./example/ActionHeaderAllergies" <Badge /> # Accessibility Guide for Terra Action Header -### Why is this important? +## Why is this important? > Terra Action Header is an essential component used to identify a section of content and provide controls to manage the respective content. If Terra Action Header is not made accessible, it can prevent users from understanding content and necessary context to interact with the page. > @@ -44,9 +44,7 @@ The primary objective of using Action Headers is to provide information on the s Headings create an outline for the content on the page, similar to a term paper outline or table of contents. The `<h1>` describes the page as a whole (and should be similar to the page `<title>`). A page should typically have only one `<h1>`. Headings `<h2>`through `<h6>` represent increasing degrees of "indentation" in our conceptual "outline". As such, it does not make sense to skip heading levels, such as from `<h2>` to `<h4>`, going down the page. Here is an example of content hierarchy with corresponding heading levels: [<sub>[2]</sub>](/components/cerner-terra-core-docs/action-header/accessibility-guide#linked-references) - - -#### Labeling Page Regions (as needed) +#### Labeling Page Regions _(as needed)_ Action Header can also be used to provide labels to distinguish multiple page regions of the same type. Most content on web pages should be organized into sections. When pages are organized into sections, a heading should be present. Developers may choose to use sectioning elements to indicate these sections. When using a sectioning element, a clinical header should generally be the first content within the section to act as a label. The objective of this technique is to use section headings to convey the structure of the content. Action Headers can be used to: - Indicate start of main content - Mark up section headings within the main content area @@ -72,7 +70,7 @@ Sectioning content can be labeled using a combination of the [aria-labelledby] - Ensure the programmatic name of actionable elements matches the visual label of the element. Often, they are the same, but when an aria-label is used to create an accessible name, the aria-label value should be the same or similar to the visible name to ensure all users can access and activate it. - For example, a button with an aria-label of “Submit” and the text label of “Send” would be problematic and create accessibility barriers for speech input device users. - For buttons that use icons to convey meaning, it is critical to include alternate content to represent the icon's meaning. -<div > +<div aria-label="Example demo"> <ActionHeaderExample/> </div> ```jsx @@ -112,36 +110,24 @@ import ActionHeader from 'terra-action-header'; ``` - Ensure any non-unique button label that is visually related to content on the page must be programmatically associated with its content. For example, a “learn more” button next to the word “allergies” must be appropriately associated with the word allergies. <div aria-label="Example demo"> - <ActionHeadercontainer/> + <ActionHeaderAllergies/> </div> ```jsx import Button from 'terra-button'; import ActionHeader from 'terra-action-header'; import DialogModal from 'terra-dialog-modal'; - +import ContentContainer from 'terra-content-container/lib/ContentContainer'; <div> - <DialogModal - ariaLabel="Dialog Modal" - isOpen={this.state.isOpen} - onRequestClose={this.handleCloseModal} - header={<ActionHeader text="Allergies" level={2} onBack={this.handleCloseModal} onClose={this.handleCloseModal} />} - > - <p>{text}</p> - </DialogModal> - <Button id="trigger-dialog-modal" text="Show Allergies" onClick={this.handleOpenModal} /> + <ContentContainer + header={<ActionHeader text="Allergies" level={2} onBack={handleCloseModal} onClose={handleCloseModal} />} + > + <p>{text}</p> + </ContentContainer> </div> ``` - - - - - - - </Notice> - <Whitespace /> ### Content Creator Considerations @@ -179,63 +165,63 @@ The basic keyboard navigation expectations: ## Support Compliance: ### Primary criteria related to Terra Action Headers -- [1.3.1 Info and Relationships](https://wiki.cerner.com/display/UserExperience/1.3.1+Info+and+Relationships) — Supports +- [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) — Supports - Terra provides the ability for information, structure, and relationships to be programmatically determined. - Engineers must ensure that the appropriate heading level is applied to convey the proper content structure of the action header on the page. Engineers must also programmatically associate non-unique controls with other words on the page to ensure visual relationships can be communicated via assistive technologies. - Content creators must work with engineering to determine the appropriate heading level to match the structure within the page. Should also work with engineers to identify non-unique control labels (e.g., multiple "Close" buttons on the page" to ensure a programmatic association to other words in the interface to create more descriptive and unique accessible names for the controls. -- [2.1.1 Keyboard](https://wiki.cerner.com/display/UserExperience/2.1.1+Keyboard) — Supports +- [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html) — Supports - Terra provides the ability for all interactable elements to receive focus, be interacted with, and be acted upon via keyboard. - Engineers must ensure that all interactable elements can receive focus, be interacted with, and can be acted upon. -- [2.4.1 Bypass Blocks](https://wiki.cerner.com/display/UserExperience/2.4.1+Bypass+Blocks) — Supports +- [2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html) — Supports - Terra provides the ability to create headings and labels that break content up into sections and provide meaningful structure that can be used by assistive technologies. - Consuming teams must implement headings in a way that conveys the organizational structure of the page. - Engineers, where appropriate, should include [landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#3._landmark_roles) (e.g.; role=”main”) to define regions of the page. -- [2.4.6 Headings and Labels](https://wiki.cerner.com/display/UserExperience/2.4.6+Headings+and+Labels) — Supports +- [2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html) — Supports - Terra provides the ability to create headings and labels that are descriptive of their purpose. - Engineers must implement meaningful text for headings and labels to accurately describe their purpose. - Content creators must ensure the headings and labels provided to engineers accurately describe the purpose of the content they represent. -- [2.4.7 Focus Visible](https://wiki.cerner.com/display/UserExperience/2.4.7+Focus+Visible) — Supports +- [2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html) — Supports - Terra provides the ability for actionable elements to receive visual focus. - Engineers must ensure a visible keyboard focus is maintained on all interactive elements. - Content creators must never remove the default keyboard focus on interactable controls. ### Other accessibility criteria consuming teams are responsible for -- [1.1.1 Non-text Content](https://wiki.cerner.com/display/UserExperience/1.1.1+Non-text+Content) — Supports +- [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) — Supports - Terra provides the ability to include alternate content on images and icons. - Engineers must ensure appropriate alternate content is added to icons and non-text elements to convey any meaning or mark the icon as decorative if necessary. - Content creators must provide Engineers with alternate content that conveys meaning to the user. See also 3.2.4 Consistent Identification. Content creators must also note any icons that are purely decorative so engineers can correctly codify decorative icons. -- [1.4.10 Reflow](https://wiki.cerner.com/display/UserExperience/1.4.10+Reflow) — Supports +- [1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html) — Supports - Terra provides the ability for components to reflow when the viewport is resized to 320x256 px without loss of information or function. - Engineers must ensure content within Terra Action Header can reflow when the viewport is resized to 320 x 256 px without scrolling in two directions or loss of information or functionality. - Content creators must consider the responsive nature of Terra Action Header and provide engineers guidance on how it should content should reflow when the viewport is resized to 320 x 256 px -- [1.4.11 Non-Text Contrast](https://wiki.cerner.com/display/UserExperience/1.4.11+Non-Text+Contrast) — Supports +- [1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) — Supports - Terra provides components that, by default, meet color contrast requirements. - Content creators must ensure any graphical elements used within Action Header that convey information meets a 3:1 color contrast ratio. -- [1.4.3 Contrast (Minimum)](https://wiki.cerner.com/display/UserExperience/1.4.3+Contrast) — Supports +- [1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) — Supports - Terra provides components that, by default, meet color contrast requirements. - Content creators must ensure any content used within Action Header meets the proper color contrast ratios for text. -- [2.4.3 Focus Order](https://wiki.cerner.com/display/UserExperience/2.4.3+Focus+Order) — Supports +- [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html) — Supports - Terra provides the ability for actionable components to receive focus in the order they are coded. - Engineers must ensure that the focus order is expected and preserves page meaning. Code order should follow the logical reading order of the user. Though a TABINDEX attribute should not be required to ensure keyboard use, if used, never use TABINDEX higher than 0. - Content creators should convey to the engineers the logical reading order of the page. -- [2.5.2 Pointer Cancellation](https://wiki.cerner.com/display/UserExperience/2.5.2+Pointer+Cancellation) — Supports +- [2.5.2 Pointer Cancellation](https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation.html) — Supports - Terra components use the up event to perform actions. - Engineers must ensure actionable controls always take on the up event. -- [2.5.3 Label in Name](https://wiki.cerner.com/display/UserExperience/2.5.3+Label+in+Name) — Supports +- [2.5.3 Label in Name](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html) — Supports - Terra provides the ability for programmatic labels to match visual labels. - Engineers must ensure the programmatic label matches the visual label when interactable controls are included within Action Header. Ensure the visible control label is the first word of the programmatic label when associating the control to other words in visual proximity that further describe the control. - Content creators must provide engineers guidance to ensure unique names for all interactive controls within Terra Action Header. -- [3.2.1 On Focus](https://wiki.cerner.com/display/UserExperience/3.2.1+On+Focus) — Supports +- [3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/Understanding/on-focus.html) — Supports - Terra components do not cause a change of context on focus by default. - Engineers must ensure that no unexpected change of context happens when interactive elements receive focus. - Content creators must use standard, predictable design patterns that support user expectations. -- [3.2.4 Consistent Identification](https://wiki.cerner.com/display/UserExperience/3.2.4+Consistent+Identification) — Supports +- [3.2.4 Consistent Identification](https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification.html) — Supports - Terra provides the ability for elements to be consistently identified. - Engineers must ensure that elements used for the same function are identified consistently, both visually (same icon for the same functionality) and programmatically (the alternate content behind each image consistently represents the same functionality). - Content creators must ensure any icons used are used to represent the same function consistently. Additionally, the alternate content used to describe icons must be consistent for users to understand their function predictably. -- [4.1.1 Parsing](https://wiki.cerner.com/display/UserExperience/4.1.1+Parsing) — Supports +- [4.1.1 Parsing](https://www.w3.org/WAI/WCAG21/Understanding/parsing.html) — Supports - Terra components are tested and validated before release to ensure proper code parsing. - Engineers must ensure their code is valid HTML. -- [4.1.2 Name, Role, Value](https://wiki.cerner.com/display/UserExperience/4.1.2+Name%2C+Role%2C+Value) — Supports +- [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) — Supports - Terra provides the ability for Name, Role, and Value attributes to be programmatically determined so as to be read by screen readers. - Engineers must ensure child elements added into Action Header have an accessible name, proper role, and value for the intended use. - Content creators must provide engineers with names to appropriately identify controls added within Action Header. @@ -244,8 +230,4 @@ The basic keyboard navigation expectations: 1. MDN contributors (02 February 2022). ["Accessibility Concerns | <h1>-<h6>: The HTML Section Heading elements"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns). Mozilla. First published 15 September 2020. Retrieved 24 February 2022. 2. WebAIM staff (01 May 2020). ["Semantic Structure: Regions, Headings, and Lists"](https://webaim.org/techniques/semanticstructure/#headings). WebAIM (Accessibility In Mind). Institute for Disability Research, Policy, and Practice. Utah State University. Last updated 01 May 2020. Retrieved 24 February 2022. -3. Accessibility Guidelines Working Group (22 February 2022). ["Technique G130: Providing descriptive headings"](https://www.w3.org/WAI/WCAG21/Techniques/general/G130). World Wide Web Consortium. Last updated 22 February 2022. Retrieved 24 February 2022. - - - - +3. Accessibility Guidelines Working Group (22 February 2022). ["Technique G130: Providing descriptive headings"](https://www.w3.org/WAI/WCAG21/Techniques/general/G130). World Wide Web Consortium. Last updated 22 February 2022. Retrieved 24 February 2022. \ No newline at end of file diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderAllergies.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderAllergies.jsx new file mode 100644 index 00000000000..13561eb1f99 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderAllergies.jsx @@ -0,0 +1,47 @@ +import React, { useState } from 'react'; +import Button from 'terra-button'; +import ActionHeader from 'terra-action-header'; +import ContentContainer from 'terra-content-container/lib/ContentContainer'; +import Card from 'terra-card'; + +const ActionHeaderAllergies = () => { + const text = ['Current Allergies: Cats, Dogs, Dust, Moulds']; + const [isOpen, setOpen] = useState(false); + + const handleOpenModal = () => { + setOpen(true); + }; + + const handleCloseModal = () => { + setOpen(false); + }; + + if (isOpen) { + return ( + <div> + <Card> + <Card.Body> + <ContentContainer + header={<ActionHeader text="Allergies" level={2} onBack={handleCloseModal} onClose={handleCloseModal} />} + > + <p>{text}</p> + </ContentContainer> + </Card.Body> + </Card> + </div> + ); + } + + return ( + <Card> + <div> + <Card.Body> + <h3>Allergies</h3> + <p>Patient name: Alex</p> + <Button id="trigger-dialog-modal" text="Show Allergies" onClick={handleOpenModal} /> + </Card.Body> + </div> + </Card> + ); +}; +export default ActionHeaderAllergies; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackActionHeaderContent.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackActionHeaderContent.jsx deleted file mode 100644 index e473e4131ca..00000000000 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackActionHeaderContent.jsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import Button from 'terra-button'; -import ActionHeader from 'terra-action-header'; -import DialogModal from 'terra-dialog-modal'; -import Card from 'terra-card'; - -class DefaultDialogModal extends React.Component { - constructor() { - super(); - - this.state = { - isOpen: false, - }; - - this.handleOpenModal = this.handleOpenModal.bind(this); - this.handleCloseModal = this.handleCloseModal.bind(this); - } - - handleOpenModal() { - this.setState({ isOpen: true }); - } - - handleCloseModal() { - this.setState({ isOpen: false }); - } - - render() { - const text = ['Current Allergies: Cats, Dogs, Dust, Moulds']; - return ( - <Card> - <div> - <Card.Body> - <h3>Allergies</h3> - <p>Current Patient names: Alex, Stokes, Joe root</p> - <DialogModal - ariaLabel="Dialog Modal" - isOpen={this.state.isOpen} - onRequestClose={this.handleCloseModal} - header={<ActionHeader text="Allergies" level={2} onBack={this.handleCloseModal} onClose={this.handleCloseModal} />} - > - <p>{text}</p> - </DialogModal> - <Button id="trigger-dialog-modal" text="Show Allergies" onClick={this.handleOpenModal} /> - </Card.Body> - </div> - </Card> - ); - } -} - -export default DefaultDialogModal; From 4ca6222ba93b0a2a0ef76de2f74304faeb6b32da Mon Sep 17 00:00:00 2001 From: udaymattam <udaym2942@gmail.com> Date: Thu, 28 Jul 2022 12:27:25 +0530 Subject: [PATCH 04/10] Meaningful Accussibility Considerations --- .../doc/action-header/AccessibilityGuide.4.doc.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx index 8f352be0bda..4e3b2837273 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx @@ -13,20 +13,20 @@ import ActionHeaderAllergies from "./example/ActionHeaderAllergies" ## Why is this important? -> Terra Action Header is an essential component used to identify a section of content and provide controls to manage the respective content. If Terra Action Header is not made accessible, it can prevent users from understanding content and necessary context to interact with the page. +> Terra Action Header is an essential component used to identify a section of content and provide controls to manage the respective content. If Terra Action Header lacks accessibility, it can prevent users from understanding content and necessary context to interact with the page. > ->Action Headers provide a visual and programmatic presentation of content structure and convey a meaningful purpose to the section. Action headers also commonly use icon-only buttons that must visually communicate an action. In addition, the buttons must be intuitive and have a programmatic association to other words on the page to ensure a unique and descriptive accessible control name to allow speech input device users can use them. Screen reader users also rely on the added programmatic context to understand what precisely a control may do. +>Action Headers provide a visual and programmatic presentation of content structure and convey a meaningful purpose to the section. Icon-only buttons are commonly use to visually communicate an action. Therefore, the buttons must be intuitive and have a programmatic association with other words on the page to ensure a unique and descriptive accessible control name.This will allow speech input devices to utilize them. Screen reader users will also rely on the added programmatic context to understand what precisely a control may do. <Whitespace newline={2} /> ## Accessibility Considerations: ### Code Considerations ->Headings and the various heading levels separate page content and organize it in a meaningful fashion both visually and programmatically to ensure all users can understand the structure of the page. Previous patterns combined size and styling details to create visual headings of the page without the appropriate programmatic context to properly convey the page’s structure. Missing or inappropriate ordered heading levels combined with the visual styling often resulted in accessibility barriers to people using assistive technologies. +>Headings and their various sub-levels ensure all users can understand the structure of the page by separating page content visually and programmatically to organize it in a meaningful way. Previous patterns combined size and styling details to create visual headings of the page without the appropriate programmatic context to properly convey the page’s structure. Missing or inappropriately ordered heading levels combined with the visual styling often resulted in accessibility barriers to people using assistive technologies. > > >  For proper accessibility to assistive technologies, developers must ensure that all headings on the page follow these two imperatives:  -- Terra Action Headers **must always** follow the correct **heading level order and arrangement** for where it is placed within other content on the page. +- Terra Action Headers **must always** follow the correct **heading level order** and **arrangement** for where it is placed within other content on the page. - Terra Action Headers may sometimes be used to **label page regions** and should have the appropriate landmark role to ensure the programmatic context. #### Heading Level Order and Arrangement From 033c04817d5254ba58f3fe38c6fc0e1ae6ff8c97 Mon Sep 17 00:00:00 2001 From: udaymattam <udaym2942@gmail.com> Date: Thu, 28 Jul 2022 17:03:29 +0530 Subject: [PATCH 05/10] Adding Acc.Back & acc.BackPreviousNext --- .../AccessibilityGuide.4.doc.mdx | 49 +++++++++------- .../example/AccessibilityBackActionHeader.jsx | 46 +++++++++++++++ .../AccessibilityBackPreviousActionHeader.jsx | 56 +++++++++++++++++++ 3 files changed, 131 insertions(+), 20 deletions(-) create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackActionHeader.jsx create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackPreviousActionHeader.jsx diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx index 4e3b2837273..5a0577e6e78 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx @@ -1,9 +1,8 @@ import { Badge } from 'terra-action-header/package.json?dev-site-package'; import { Notice } from '@cerner/terra-docs'; import Whitespace from "../../common/layout-helpers/Whitespace"; -import ActionHeaderExample from "./example/BackActionHeader" -import BackActionHeader from "./example/BackPreviousNextCloseActionHeader" -import MaximizeActionHeader from "./example/MaximizeCloseActionHeader" +import AccessibilityBackActionHeader from "./example/AccessibilityBackActionHeader" +import AccessibilityBackPreviousActionHeader from "./example/AccessibilityBackPreviousActionHeader" import ActionHeaderAllergies from "./example/ActionHeaderAllergies" <Badge /> @@ -29,7 +28,7 @@ import ActionHeaderAllergies from "./example/ActionHeaderAllergies" - Terra Action Headers **must always** follow the correct **heading level order** and **arrangement** for where it is placed within other content on the page. - Terra Action Headers may sometimes be used to **label page regions** and should have the appropriate landmark role to ensure the programmatic context. -#### Heading Level Order and Arrangement +#### Heading Level Order and Arrangement _(always)_ The primary objective of using Action Headers is to provide information on the structural hierarchy of a document. Therefore, headings must look like a heading and be programmatically coded to ensure users can understand the page structure. Additionally, the programmatic heading context can help some users navigate the page using assistive technologies like screen readers. The following are accessibility best practices that developers must follow to create accessible headers: - Developers must use the appropriate heading levels (1 to 6) by always providing a value to the '**level**' prop. The heading level should match the hierarchical structure of the page. - If a value to the '**level**' prop is not provided, the heading '**text**' will not be rendered. @@ -71,39 +70,49 @@ Sectioning content can be labeled using a combination of the [aria-labelledby] - For example, a button with an aria-label of “Submit” and the text label of “Send” would be problematic and create accessibility barriers for speech input device users. - For buttons that use icons to convey meaning, it is critical to include alternate content to represent the icon's meaning. <div aria-label="Example demo"> - <ActionHeaderExample/> + <AccessibilityBackActionHeader/> </div> ```jsx import ActionHeader from 'terra-action-header'; +import DialogModal from 'terra-dialog-modal'; +import ContentContainer from 'terra-content-container/lib/ContentContainer'; <div> <br /> - <ActionHeader - text="Back Action Header" - onBack={() => alert('You clicked back!')} - level={3} - /> + <ContentContainer + header={<ActionHeader text="Patient Details" level={2} onBack={handleCloseModal} />} + > + <p>{text}</p> + </ContentContainer> <br /> </div> ``` - For buttons that use icons that do not convey a meaning, ensure they are marked as purely decorative. <div aria-label="Example demo"> - <BackActionHeader/> + <AccessibilityBackPreviousActionHeader/> </div> ```jsx import ActionHeader from 'terra-action-header'; +import DialogModal from 'terra-dialog-modal'; +import ContentContainer from 'terra-content-container/lib/ContentContainer'; <div> <br /> - <ActionHeader - text="Back Close Previous Next Action Header" - onClose={() => alert('You clicked close!')} - onBack={() => alert('You clicked back!')} - onPrevious={() => alert('You clicked previous!')} - onNext={() => alert('You clicked next!')} - level={3} - /> + <ContentContainer + header={( + <ActionHeader + text="Patient Details" + level={2} + onBack={handleCloseModal} + onClose={handleCloseModal} + onPrevious={() => alert('Previous Patient Details')} + onNext={() => alert('Next Patient Details')} + /> + )} + > + <p>{text}</p> + </ContentContainer> <br /> </div> @@ -125,7 +134,7 @@ import ContentContainer from 'terra-content-container/lib/ContentContainer'; > <p>{text}</p> </ContentContainer> - </div> +</div> ``` </Notice> <Whitespace /> diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackActionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackActionHeader.jsx new file mode 100644 index 00000000000..d3199045fe1 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackActionHeader.jsx @@ -0,0 +1,46 @@ +import React, { useState } from 'react'; +import Button from 'terra-button'; +import ActionHeader from 'terra-action-header'; +import ContentContainer from 'terra-content-container/lib/ContentContainer'; +import Card from 'terra-card'; + +const AccessibilityBackActionHeader = () => { + const text = ['Current Patient: Alex']; + const [isOpen, setOpen] = useState(false); + + const handleOpenModal = () => { + setOpen(true); + }; + + const handleCloseModal = () => { + setOpen(false); + }; + + if (isOpen) { + return ( + <div> + <Card> + <Card.Body> + <ContentContainer + header={<ActionHeader text="Patient Details" level={2} onBack={handleCloseModal} />} + > + <p>{text}</p> + </ContentContainer> + </Card.Body> + </Card> + </div> + ); + } + + return ( + <Card> + <div> + <Card.Body> + <h3>Back ActionHeader</h3> + <Button id="trigger-dialog-modal" text="Show Patient" onClick={handleOpenModal} /> + </Card.Body> + </div> + </Card> + ); +}; +export default AccessibilityBackActionHeader; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackPreviousActionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackPreviousActionHeader.jsx new file mode 100644 index 00000000000..ed5b426f88f --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackPreviousActionHeader.jsx @@ -0,0 +1,56 @@ +/* eslint-disable no-alert */ +import React, { useState } from 'react'; +import Button from 'terra-button'; +import ActionHeader from 'terra-action-header'; +import ContentContainer from 'terra-content-container/lib/ContentContainer'; +import Card from 'terra-card'; + +const AccessibilityBackPreviousActionHeader = () => { + const text = ['Current patient: Alex']; + const [isOpen, setOpen] = useState(false); + + const handleOpenModal = () => { + setOpen(true); + }; + + const handleCloseModal = () => { + setOpen(false); + }; + + if (isOpen) { + return ( + <div> + <Card> + <Card.Body> + <ContentContainer + header={( + <ActionHeader + text="Patient Details" + level={2} + onBack={handleCloseModal} + onClose={handleCloseModal} + onPrevious={() => alert('Previous Patient Details')} + onNext={() => alert('Next Patient Details')} + /> +)} + > + <p>{text}</p> + </ContentContainer> + </Card.Body> + </Card> + </div> + ); + } + + return ( + <Card> + <div> + <Card.Body> + <h3>Back Previous Next ActionHeader</h3> + <Button id="trigger-dialog-modal" text="Show patients" onClick={handleOpenModal} /> + </Card.Body> + </div> + </Card> + ); +}; +export default AccessibilityBackPreviousActionHeader; From 58d97027c82b2dcef9e98f40be1bd2cd71955cf0 Mon Sep 17 00:00:00 2001 From: udaymattam <udaym2942@gmail.com> Date: Fri, 29 Jul 2022 17:06:25 +0530 Subject: [PATCH 06/10] Decorative & informative Icons added --- packages/terra-core-docs/package.json | 1 - .../AccessibilityGuide.4.doc.mdx | 88 +++++++++-------- .../example/AccessibilityBackActionHeader.jsx | 46 --------- .../AccessibilityBackPreviousActionHeader.jsx | 56 ----------- .../example/ActionHeaderAllergies.jsx | 4 +- .../ActionHeaderWithDecorativeIcon.jsx | 53 ++++++++++ .../ActionHeaderWithInformativeIcon.jsx | 55 +++++++++++ .../WebAIMSemanticHeadingContentStructure.jsx | 96 +++++++++++++++++++ ...WebAIMSemanticHeadingContentStructure.scss | 45 +++++++++ 9 files changed, 299 insertions(+), 145 deletions(-) delete mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackActionHeader.jsx delete mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackPreviousActionHeader.jsx create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderWithDecorativeIcon.jsx create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderWithInformativeIcon.jsx create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/action-header/references/WebAIMSemanticHeadingContentStructure.jsx create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/action-header/references/WebAIMSemanticHeadingContentStructure.scss diff --git a/packages/terra-core-docs/package.json b/packages/terra-core-docs/package.json index 9bc72b621ca..772693240c4 100644 --- a/packages/terra-core-docs/package.json +++ b/packages/terra-core-docs/package.json @@ -51,7 +51,6 @@ "terra-content-container": "^3.36.1", "terra-demographics-banner": "^3.58.2", "terra-dialog": "^2.63.6", - "terra-dialog-modal":"^3.74.5", "terra-divider": "^3.36.1", "terra-dropdown-button": "^1.29.1", "terra-dynamic-grid": "^3.33.1", diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx index 5a0577e6e78..c8e694055d6 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx @@ -1,9 +1,12 @@ import { Badge } from 'terra-action-header/package.json?dev-site-package'; import { Notice } from '@cerner/terra-docs'; import Whitespace from "../../common/layout-helpers/Whitespace"; -import AccessibilityBackActionHeader from "./example/AccessibilityBackActionHeader" -import AccessibilityBackPreviousActionHeader from "./example/AccessibilityBackPreviousActionHeader" -import ActionHeaderAllergies from "./example/ActionHeaderAllergies" +import ActionHeaderWithDecorativeIcon from "./example/ActionHeaderWithDecorativeIcon"; +import ActionHeaderWithInformativeIcon from "./example/ActionHeaderWithInformativeIcon"; +import ActionHeaderAllergies from "./example/ActionHeaderAllergies"; +import WebAIMSemanticHeadingContentStructure from './references/WebAIMSemanticHeadingContentStructure'; + + <Badge /> @@ -14,7 +17,7 @@ import ActionHeaderAllergies from "./example/ActionHeaderAllergies" > Terra Action Header is an essential component used to identify a section of content and provide controls to manage the respective content. If Terra Action Header lacks accessibility, it can prevent users from understanding content and necessary context to interact with the page. > ->Action Headers provide a visual and programmatic presentation of content structure and convey a meaningful purpose to the section. Icon-only buttons are commonly use to visually communicate an action. Therefore, the buttons must be intuitive and have a programmatic association with other words on the page to ensure a unique and descriptive accessible control name.This will allow speech input devices to utilize them. Screen reader users will also rely on the added programmatic context to understand what precisely a control may do. +>Action Headers provide a visual and programmatic presentation of content structure to convey a meaningful purpose to the section. Icon-only buttons are commonly use to visually communicate an action. Therefore, the buttons must be intuitive and have a programmatic association with other words on the page to ensure a unique and descriptive accessible control name.This will allow speech input devices to utilize them. Screen reader users will also rely on the added programmatic context to understand what precisely a control may do. <Whitespace newline={2} /> @@ -42,22 +45,22 @@ The primary objective of using Action Headers is to provide information on the s <Whitespace /> Headings create an outline for the content on the page, similar to a term paper outline or table of contents. The `<h1>` describes the page as a whole (and should be similar to the page `<title>`). A page should typically have only one `<h1>`. Headings `<h2>`through `<h6>` represent increasing degrees of "indentation" in our conceptual "outline". As such, it does not make sense to skip heading levels, such as from `<h2>` to `<h4>`, going down the page. Here is an example of content hierarchy with corresponding heading levels: [<sub>[2]</sub>](/components/cerner-terra-core-docs/action-header/accessibility-guide#linked-references) +> <WebAIMSemanticHeadingContentStructure /> -#### Labeling Page Regions _(as needed)_ +#### Labeling Page Regions _(as needed)_ Action Header can also be used to provide labels to distinguish multiple page regions of the same type. Most content on web pages should be organized into sections. When pages are organized into sections, a heading should be present. Developers may choose to use sectioning elements to indicate these sections. When using a sectioning element, a clinical header should generally be the first content within the section to act as a label. The objective of this technique is to use section headings to convey the structure of the content. Action Headers can be used to: - Indicate start of main content - Mark up section headings within the main content area - Demarcate different navigational sections like top or main navigation, left or secondary navigation and footer navigation -- Allow users the ability to navigate a page by sections or skip repeated blocks of information - -<Whitespace /> - -<Notice variant="important" ariaLevel="5"> +- Allow users the ability to navigate a page by sections or skip repeated blocks of -**Accessibility Guidance: Label Page Regions** +#### Accessibility Guidance: Label Page Regions Sectioning content can be labeled using a combination of the [aria-labelledby](https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby) property and <spam>id</spam> attribute, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page. +<Whitespace /> + +<Notice variant="important" ariaLevel="5"> #### Actionable elements within Action Header - Engineers must ensure the code order reflects the user’s logical reading order so actionable elements will receive focus in the expected order. @@ -69,72 +72,77 @@ Sectioning content can be labeled using a combination of the [aria-labelledby] - Ensure the programmatic name of actionable elements matches the visual label of the element. Often, they are the same, but when an aria-label is used to create an accessible name, the aria-label value should be the same or similar to the visible name to ensure all users can access and activate it. - For example, a button with an aria-label of “Submit” and the text label of “Send” would be problematic and create accessibility barriers for speech input device users. - For buttons that use icons to convey meaning, it is critical to include alternate content to represent the icon's meaning. -<div aria-label="Example demo"> - <AccessibilityBackActionHeader/> +<div aria-label="Example demo"> + <ActionHeaderWithInformativeIcon/> </div> ```jsx import ActionHeader from 'terra-action-header'; -import DialogModal from 'terra-dialog-modal'; -import ContentContainer from 'terra-content-container/lib/ContentContainer'; +import ContentContainer from 'terra-content-container'; +import IconPrinter from 'terra-icon/lib/icon/IconPrinter'; + const Icon = <IconPrinter a11yLabel="Print" />; <div> <br /> <ContentContainer - header={<ActionHeader text="Patient Details" level={2} onBack={handleCloseModal} />} - > - <p>{text}</p> + header={( + <ActionHeader text="Patients Details" level={2} onBack={handleCloseModal}> + <IconButton icon={Icon} iconType={IconTypes.INFORMATIVE} text="Print Patient Details" /> + </ActionHeader> +)} + > + <p>{text}</p> </ContentContainer> <br /> </div> ``` - For buttons that use icons that do not convey a meaning, ensure they are marked as purely decorative. -<div aria-label="Example demo"> - <AccessibilityBackPreviousActionHeader/> + <div aria-label="Example demo"> + <ActionHeaderWithDecorativeIcon/> </div> ```jsx import ActionHeader from 'terra-action-header'; -import DialogModal from 'terra-dialog-modal'; -import ContentContainer from 'terra-content-container/lib/ContentContainer'; +import ContentContainer from 'terra-content-container'; +import Button, { IconButton, IconTypes } from 'terra-button'; +import DecoIconPrinter from 'terra-icon/lib/icon/decorative/IconPrinter'; + + const DecorativeIcon = <DecoIconPrinter />; <div> <br /> <ContentContainer - header={( - <ActionHeader - text="Patient Details" - level={2} - onBack={handleCloseModal} - onClose={handleCloseModal} - onPrevious={() => alert('Previous Patient Details')} - onNext={() => alert('Next Patient Details')} - /> - )} - > + header={( + <ActionHeader text="Patient Details" level={2} onBack={handleCloseModal}> + <IconButton icon={DecorativeIcon} iconType={IconTypes.DECORATIVE} text="Print Patient Details" /> + </ActionHeader> +)} + > <p>{text}</p> </ContentContainer> <br /> </div> ``` + - Ensure any non-unique button label that is visually related to content on the page must be programmatically associated with its content. For example, a “learn more” button next to the word “allergies” must be appropriately associated with the word allergies. <div aria-label="Example demo"> <ActionHeaderAllergies/> </div> ```jsx -import Button from 'terra-button'; import ActionHeader from 'terra-action-header'; -import DialogModal from 'terra-dialog-modal'; -import ContentContainer from 'terra-content-container/lib/ContentContainer'; +import ContentContainer from 'terra-content-container'; +import Button from 'terra-button'; <div> <ContentContainer - header={<ActionHeader text="Allergies" level={2} onBack={handleCloseModal} onClose={handleCloseModal} />} + header={<ActionHeader text="Allergies" level={2} onBack={handleCloseModal} backButtonA11yLabel="Back To the Main View" onClose={handleCloseModal} />} > <p>{text}</p> </ContentContainer> </div> +<Button id="trigger-dialog-modal" aria-label="Click Here to View Allergies" text="Show Allergies" onClick={handleOpenModal} /> + ``` </Notice> <Whitespace /> @@ -142,9 +150,9 @@ import ContentContainer from 'terra-content-container/lib/ContentContainer'; ### Content Creator Considerations - Work with engineers to convey the page's structure to ensure proper heading levels are assigned. - When creating the text for the action header or any labels of interactable elements within it, ensure the words used are purposeful and help the user understand the context or purpose of the content. - - Heading labels must accurately describe the content they represent. + - Heading text must accurately describe the content they represent. - Button labels must be unique and descriptive of the actions they will initiate. The best practice is to use verbs that describe the action. Never use “OK," "Yes," or "No” for buttons. They are vague and can be confusing to the user. - - For any actionable element, avoid non-unique labels unless the element perform the exact same function. For example, two print buttons that print the exact same document are fine. However, if the buttons print different documents, this would be an accessibility failure. + - For any actionable element, avoid non-unique labels unless the elements perform the exact same function. For example, two print buttons that print the exact same document are fine. However, if the buttons print different documents, this would be an accessibility failure. - If non-unique names cannot be avoided, inform the engineer of other text on the page that can be programmatically associated with other content on the page that may help describe a visual relationship. For example, multiple “Learn more” buttons on the page are placed in visual proximity to the item the user can learn more about. Ensure the first word(s) of the programmatic label match the visual label. - When using icons, inform engineers when an icon is purely decorative. Otherwise, provide the engineer with meaningful alternate text which will serve as the accessible name. - Ensure any icon used within Action Header is used to consistently represent the same functionality. Additionally, any alternate content used with an icon must be consistent for a predictable user experience. The alternate text should be consistent in wording based on the icon usage @@ -231,7 +239,7 @@ The basic keyboard navigation expectations: - Terra components are tested and validated before release to ensure proper code parsing. - Engineers must ensure their code is valid HTML. - [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) — Supports - - Terra provides the ability for Name, Role, and Value attributes to be programmatically determined so as to be read by screen readers. + - Terra provides the ability for `Name` `Role`, and `Value` attributes to be programmatically determined so as to be read by screen readers. - Engineers must ensure child elements added into Action Header have an accessible name, proper role, and value for the intended use. - Content creators must provide engineers with names to appropriately identify controls added within Action Header. diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackActionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackActionHeader.jsx deleted file mode 100644 index d3199045fe1..00000000000 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackActionHeader.jsx +++ /dev/null @@ -1,46 +0,0 @@ -import React, { useState } from 'react'; -import Button from 'terra-button'; -import ActionHeader from 'terra-action-header'; -import ContentContainer from 'terra-content-container/lib/ContentContainer'; -import Card from 'terra-card'; - -const AccessibilityBackActionHeader = () => { - const text = ['Current Patient: Alex']; - const [isOpen, setOpen] = useState(false); - - const handleOpenModal = () => { - setOpen(true); - }; - - const handleCloseModal = () => { - setOpen(false); - }; - - if (isOpen) { - return ( - <div> - <Card> - <Card.Body> - <ContentContainer - header={<ActionHeader text="Patient Details" level={2} onBack={handleCloseModal} />} - > - <p>{text}</p> - </ContentContainer> - </Card.Body> - </Card> - </div> - ); - } - - return ( - <Card> - <div> - <Card.Body> - <h3>Back ActionHeader</h3> - <Button id="trigger-dialog-modal" text="Show Patient" onClick={handleOpenModal} /> - </Card.Body> - </div> - </Card> - ); -}; -export default AccessibilityBackActionHeader; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackPreviousActionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackPreviousActionHeader.jsx deleted file mode 100644 index ed5b426f88f..00000000000 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/AccessibilityBackPreviousActionHeader.jsx +++ /dev/null @@ -1,56 +0,0 @@ -/* eslint-disable no-alert */ -import React, { useState } from 'react'; -import Button from 'terra-button'; -import ActionHeader from 'terra-action-header'; -import ContentContainer from 'terra-content-container/lib/ContentContainer'; -import Card from 'terra-card'; - -const AccessibilityBackPreviousActionHeader = () => { - const text = ['Current patient: Alex']; - const [isOpen, setOpen] = useState(false); - - const handleOpenModal = () => { - setOpen(true); - }; - - const handleCloseModal = () => { - setOpen(false); - }; - - if (isOpen) { - return ( - <div> - <Card> - <Card.Body> - <ContentContainer - header={( - <ActionHeader - text="Patient Details" - level={2} - onBack={handleCloseModal} - onClose={handleCloseModal} - onPrevious={() => alert('Previous Patient Details')} - onNext={() => alert('Next Patient Details')} - /> -)} - > - <p>{text}</p> - </ContentContainer> - </Card.Body> - </Card> - </div> - ); - } - - return ( - <Card> - <div> - <Card.Body> - <h3>Back Previous Next ActionHeader</h3> - <Button id="trigger-dialog-modal" text="Show patients" onClick={handleOpenModal} /> - </Card.Body> - </div> - </Card> - ); -}; -export default AccessibilityBackPreviousActionHeader; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderAllergies.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderAllergies.jsx index 13561eb1f99..9e4c6a5949a 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderAllergies.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderAllergies.jsx @@ -22,7 +22,7 @@ const ActionHeaderAllergies = () => { <Card> <Card.Body> <ContentContainer - header={<ActionHeader text="Allergies" level={2} onBack={handleCloseModal} onClose={handleCloseModal} />} + header={<ActionHeader text="Allergies" level={2} onBack={handleCloseModal} backButtonA11yLabel="Back To the Main View" onClose={handleCloseModal} />} > <p>{text}</p> </ContentContainer> @@ -38,7 +38,7 @@ const ActionHeaderAllergies = () => { <Card.Body> <h3>Allergies</h3> <p>Patient name: Alex</p> - <Button id="trigger-dialog-modal" text="Show Allergies" onClick={handleOpenModal} /> + <Button id="trigger-dialog-modal" aria-label="Click Here to View Allergies" text="Show Allergies" onClick={handleOpenModal} /> </Card.Body> </div> </Card> diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderWithDecorativeIcon.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderWithDecorativeIcon.jsx new file mode 100644 index 00000000000..2eb3ea37364 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderWithDecorativeIcon.jsx @@ -0,0 +1,53 @@ +import React, { useState } from 'react'; +import Button, { IconButton, IconTypes } from 'terra-button'; +import ActionHeader from 'terra-action-header'; +import ContentContainer from 'terra-content-container'; +import Card from 'terra-card'; +import DecoIconPrinter from 'terra-icon/lib/icon/decorative/IconPrinter'; + +const ActionHeaderWithDecorativeIcon = () => { + const text = ['Current Patient: Alex', + ' Patient age: 25', ' Patient Id: 11403']; + const [isOpen, setOpen] = useState(false); + const DecorativeIcon = <DecoIconPrinter />; + + const handleOpenModal = () => { + setOpen(true); + }; + + const handleCloseModal = () => { + setOpen(false); + }; + + if (isOpen) { + return ( + <div> + <Card> + <Card.Body> + <ContentContainer + header={( + <ActionHeader text="Patient Details" level={2} onBack={handleCloseModal}> + <IconButton icon={DecorativeIcon} iconType={IconTypes.DECORATIVE} text="Print Patient Details" /> + </ActionHeader> +)} + > + <p>{text}</p> + </ContentContainer> + </Card.Body> + </Card> + </div> + ); + } + + return ( + <Card> + <div> + <Card.Body> + <h3>Patient Details</h3> + <Button id="trigger-dialog-modal" text="Show Patient Details" onClick={handleOpenModal} /> + </Card.Body> + </div> + </Card> + ); +}; +export default ActionHeaderWithDecorativeIcon; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderWithInformativeIcon.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderWithInformativeIcon.jsx new file mode 100644 index 00000000000..399079273b6 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderWithInformativeIcon.jsx @@ -0,0 +1,55 @@ +/* eslint-disable no-undef */ +/* eslint-disable no-alert */ +import React, { useState } from 'react'; +import Button, { IconButton, IconTypes } from 'terra-button'; +import ActionHeader from 'terra-action-header'; +import ContentContainer from 'terra-content-container'; +import Card from 'terra-card'; +import IconPrinter from 'terra-icon/lib/icon/IconPrinter'; + +const ActionHeaderWithInformativeIcon = () => { + const text = ['Current Patient: Alex', + ' Patient age: 25', ' Patient Id: 11404']; + const [isOpen, setOpen] = useState(false); + const Icon = <IconPrinter a11yLabel="Print" />; + + const handleOpenModal = () => { + setOpen(true); + }; + + const handleCloseModal = () => { + setOpen(false); + }; + + if (isOpen) { + return ( + <div> + <Card> + <Card.Body> + <ContentContainer + header={( + <ActionHeader text="Patients Details" level={2} onBack={handleCloseModal}> + <IconButton icon={Icon} iconType={IconTypes.INFORMATIVE} text="Print Patient Details" /> + </ActionHeader> +)} + > + <p>{text}</p> + </ContentContainer> + </Card.Body> + </Card> + </div> + ); + } + + return ( + <Card> + <div> + <Card.Body> + <h3>Patient Allergies</h3> + <Button id="trigger-dialog-modal" text="Show Patients Details" onClick={handleOpenModal} /> + </Card.Body> + </div> + </Card> + ); +}; +export default ActionHeaderWithInformativeIcon; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/references/WebAIMSemanticHeadingContentStructure.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/references/WebAIMSemanticHeadingContentStructure.jsx new file mode 100644 index 00000000000..1670481e0e8 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/references/WebAIMSemanticHeadingContentStructure.jsx @@ -0,0 +1,96 @@ +import React from 'react'; +import classNamesBind from 'classnames/bind'; +import styles from './WebAIMSemanticHeadingContentStructure.scss'; + +const cx = classNamesBind.bind(styles); + +const WebAIMSemanticHeadingContentStructure = () => ( + <blockquote className={cx('webaim-semantic-heading-blockquote')}> + <cite> + <span>— excerpt from</span> + <a href="https://webaim.org/techniques/semanticstructure/#headings">WebAIM: Semantic Structure: Regions, Headings, and Lists</a> + </cite> + <div className={cx('webaim-semantic-heading-content')}> + <ul> + <li> + <b>H1:</b> + My Favorite Recipes + <ul> + <li> + <b>H2:</b> + Quick and Easy + <ul> + <li> + <b>H3:</b> + Spaghetti + </li> + <li> + <b>H3:</b> + Hamburgers + </li> + <li> + <b>H3:</b> + Tacos + <ul> + <li> + <b>H4:</b> + Beef Tacos + </li> + <li> + <b>H4:</b> + Chicken Tacos + </li> + <li> + <b>H4:</b> + Fish Tacos + </li> + </ul> + </li> + </ul> + </li> + <li> + <b>H2:</b> + Some Assembly Required + <ul> + <li> + <b>H3:</b> + Tuna Casserole + </li> + <li> + <b>H3:</b> + Lasagna + <ul> + <li> + <b>H4:</b> + Vegetable Lasagna + </li> + <li> + <b>H4:</b> + Beef Lasagna + </li> + </ul> + </li> + </ul> + </li> + <li> + <b>H2:</b> + All-In + <ul> + <li> + <b>H3:</b> + Crab-Stuffed Filet Mignon with Whiskey Peppercorn Sauce + </li> + <li> + <b>H3:</b> + Sun Dried Tomato and Pine Nut Stuffed Beef Tenderloin + </li> + </ul> + </li> + </ul> + </li> + </ul> + </div> + </blockquote> +); + +export default WebAIMSemanticHeadingContentStructure; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/references/WebAIMSemanticHeadingContentStructure.scss b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/references/WebAIMSemanticHeadingContentStructure.scss new file mode 100644 index 00000000000..cd1c11cc2f4 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/references/WebAIMSemanticHeadingContentStructure.scss @@ -0,0 +1,45 @@ +:local { + .webaim-semantic-heading-blockquote { + margin-left: 0; + + cite { + font-style: italic; + } + + span { + margin-right: 0.7ch; + opacity: 0.7; + } + } + + .webaim-semantic-heading-content { + margin-top: 0.75rem; + max-width: 50rem; + padding: 0.5rem 2rem 0.5rem 0; + position: relative; + white-space: pre; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + + ul { + list-style-type: none; + } + + b { + margin-right: 0.9ch; + } + + &::after { + border: 1px solid currentColor; + border-radius: 5px; + content: ''; + height: 100%; + left: 0; + opacity: 0.15; + position: absolute; + top: 0; + width: 100%; + } + } +} From c1be039957650845ec95bc463f6d7814cf5cb64e Mon Sep 17 00:00:00 2001 From: udaymattam <udaym2942@gmail.com> Date: Mon, 1 Aug 2022 11:17:17 +0530 Subject: [PATCH 07/10] Added NonUniqueIcon --- .../AccessibilityGuide.4.doc.mdx | 7 +++- .../example/ActionHeaderNonUniqueIcon.jsx | 41 +++++++++++++++++++ .../ActionHeaderWithInformativeIcon.jsx | 2 +- 3 files changed, 47 insertions(+), 3 deletions(-) create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderNonUniqueIcon.jsx diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx index c8e694055d6..2d9bd05c3cf 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx @@ -5,6 +5,7 @@ import ActionHeaderWithDecorativeIcon from "./example/ActionHeaderWithDecorative import ActionHeaderWithInformativeIcon from "./example/ActionHeaderWithInformativeIcon"; import ActionHeaderAllergies from "./example/ActionHeaderAllergies"; import WebAIMSemanticHeadingContentStructure from './references/WebAIMSemanticHeadingContentStructure'; +import ActionHeaderNonUniqueIcon from './example/ActionHeaderNonUniqueIcon'; @@ -86,7 +87,7 @@ import IconPrinter from 'terra-icon/lib/icon/IconPrinter'; <ContentContainer header={( <ActionHeader text="Patients Details" level={2} onBack={handleCloseModal}> - <IconButton icon={Icon} iconType={IconTypes.INFORMATIVE} text="Print Patient Details" /> + <IconButton icon={Icon} iconType={IconTypes.INFORMATIVE} text="Print Details" /> </ActionHeader> )} > @@ -126,9 +127,11 @@ import DecoIconPrinter from 'terra-icon/lib/icon/decorative/IconPrinter'; - Ensure any non-unique button label that is visually related to content on the page must be programmatically associated with its content. For example, a “learn more” button next to the word “allergies” must be appropriately associated with the word allergies. <div aria-label="Example demo"> - <ActionHeaderAllergies/> + <ActionHeaderNonUniqueIcon/> </div> + + ```jsx import ActionHeader from 'terra-action-header'; import ContentContainer from 'terra-content-container'; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderNonUniqueIcon.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderNonUniqueIcon.jsx new file mode 100644 index 00000000000..6bb50e09206 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderNonUniqueIcon.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import ActionHeader from 'terra-action-header'; +import ContentContainer from 'terra-content-container/lib/ContentContainer'; +import Card from 'terra-card'; +import IconPrinter from 'terra-icon/lib/icon/IconPrinter'; +import { IconButton, IconTypes } from 'terra-button'; + +const ActionHeaderNonUniqueIcon = () => { + const Medications = 'Patient Medications here..'; + const Results = 'Patient Results here..'; + const MedIcon = <IconPrinter a11yLabel="Print Patient Medications" />; + const ResIcon = <IconPrinter a11yLabel="Print Patient Result" />; + + return ( + <div> + <Card> + <Card.Body> + <ContentContainer + header={( + <ActionHeader text="Patient Medications" level={2}> + <IconButton icon={MedIcon} isIconOnly iconType={IconTypes.INFORMATIVE} /> + </ActionHeader> +)} + > + <p>{Medications}</p> + </ContentContainer> + <ContentContainer + header={( + <ActionHeader text="Patient Results" level={2}> + <IconButton icon={ResIcon} isIconOnly iconType={IconTypes.INFORMATIVE} /> + </ActionHeader> +)} + > + <p>{Results}</p> + </ContentContainer> + </Card.Body> + </Card> + </div> + ); +}; +export default ActionHeaderNonUniqueIcon; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderWithInformativeIcon.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderWithInformativeIcon.jsx index 399079273b6..c3feb638f8c 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderWithInformativeIcon.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderWithInformativeIcon.jsx @@ -29,7 +29,7 @@ const ActionHeaderWithInformativeIcon = () => { <ContentContainer header={( <ActionHeader text="Patients Details" level={2} onBack={handleCloseModal}> - <IconButton icon={Icon} iconType={IconTypes.INFORMATIVE} text="Print Patient Details" /> + <IconButton icon={Icon} iconType={IconTypes.INFORMATIVE} text="Patient Details" /> </ActionHeader> )} > From 43b6dcce08902dd83a9bdc424a29b4836aa89312 Mon Sep 17 00:00:00 2001 From: udaymattam <udaym2942@gmail.com> Date: Mon, 1 Aug 2022 11:25:50 +0530 Subject: [PATCH 08/10] RemovedAllergies --- .../AccessibilityGuide.4.doc.mdx | 28 +++++++---- .../example/ActionHeaderAllergies.jsx | 47 ------------------- .../example/ActionHeaderNonUniqueIcon.jsx | 2 +- 3 files changed, 21 insertions(+), 56 deletions(-) delete mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderAllergies.jsx diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx index 2d9bd05c3cf..283b3232df3 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx @@ -3,7 +3,6 @@ import { Notice } from '@cerner/terra-docs'; import Whitespace from "../../common/layout-helpers/Whitespace"; import ActionHeaderWithDecorativeIcon from "./example/ActionHeaderWithDecorativeIcon"; import ActionHeaderWithInformativeIcon from "./example/ActionHeaderWithInformativeIcon"; -import ActionHeaderAllergies from "./example/ActionHeaderAllergies"; import WebAIMSemanticHeadingContentStructure from './references/WebAIMSemanticHeadingContentStructure'; import ActionHeaderNonUniqueIcon from './example/ActionHeaderNonUniqueIcon'; @@ -135,16 +134,29 @@ import DecoIconPrinter from 'terra-icon/lib/icon/decorative/IconPrinter'; ```jsx import ActionHeader from 'terra-action-header'; import ContentContainer from 'terra-content-container'; -import Button from 'terra-button'; +import IconPrinter from 'terra-icon/lib/icon/IconPrinter'; +import { IconButton, IconTypes } from 'terra-button'; <div> - <ContentContainer - header={<ActionHeader text="Allergies" level={2} onBack={handleCloseModal} backButtonA11yLabel="Back To the Main View" onClose={handleCloseModal} />} - > - <p>{text}</p> - </ContentContainer> + <ContentContainer + header={( + <ActionHeader text="Patient Medications" level={2}> + <IconButton icon={MedIcon} isIconOnly iconType={IconTypes.INFORMATIVE} /> + </ActionHeader> +)} + > + <p>{Medications}</p> + </ContentContainer> + <ContentContainer + header={( + <ActionHeader text="Patient Results" level={2}> + <IconButton icon={ResIcon} isIconOnly iconType={IconTypes.INFORMATIVE} /> + </ActionHeader> +)} + > + <p>{Results}</p> + </ContentContainer> </div> -<Button id="trigger-dialog-modal" aria-label="Click Here to View Allergies" text="Show Allergies" onClick={handleOpenModal} /> ``` </Notice> diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderAllergies.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderAllergies.jsx deleted file mode 100644 index 9e4c6a5949a..00000000000 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderAllergies.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import React, { useState } from 'react'; -import Button from 'terra-button'; -import ActionHeader from 'terra-action-header'; -import ContentContainer from 'terra-content-container/lib/ContentContainer'; -import Card from 'terra-card'; - -const ActionHeaderAllergies = () => { - const text = ['Current Allergies: Cats, Dogs, Dust, Moulds']; - const [isOpen, setOpen] = useState(false); - - const handleOpenModal = () => { - setOpen(true); - }; - - const handleCloseModal = () => { - setOpen(false); - }; - - if (isOpen) { - return ( - <div> - <Card> - <Card.Body> - <ContentContainer - header={<ActionHeader text="Allergies" level={2} onBack={handleCloseModal} backButtonA11yLabel="Back To the Main View" onClose={handleCloseModal} />} - > - <p>{text}</p> - </ContentContainer> - </Card.Body> - </Card> - </div> - ); - } - - return ( - <Card> - <div> - <Card.Body> - <h3>Allergies</h3> - <p>Patient name: Alex</p> - <Button id="trigger-dialog-modal" aria-label="Click Here to View Allergies" text="Show Allergies" onClick={handleOpenModal} /> - </Card.Body> - </div> - </Card> - ); -}; -export default ActionHeaderAllergies; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderNonUniqueIcon.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderNonUniqueIcon.jsx index 6bb50e09206..b8b5b6c2b10 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderNonUniqueIcon.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderNonUniqueIcon.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ActionHeader from 'terra-action-header'; -import ContentContainer from 'terra-content-container/lib/ContentContainer'; +import ContentContainer from 'terra-content-container'; import Card from 'terra-card'; import IconPrinter from 'terra-icon/lib/icon/IconPrinter'; import { IconButton, IconTypes } from 'terra-button'; From d0a0e90ecde19fd6acd61842ec0732109c199b82 Mon Sep 17 00:00:00 2001 From: udaymattam <udaym2942@gmail.com> Date: Mon, 1 Aug 2022 15:53:21 +0530 Subject: [PATCH 09/10] added format --- .../AccessibilityGuide.4.doc.mdx | 62 +++++++++---------- 1 file changed, 29 insertions(+), 33 deletions(-) diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx index 283b3232df3..6ae9d921681 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx @@ -17,7 +17,7 @@ import ActionHeaderNonUniqueIcon from './example/ActionHeaderNonUniqueIcon'; > Terra Action Header is an essential component used to identify a section of content and provide controls to manage the respective content. If Terra Action Header lacks accessibility, it can prevent users from understanding content and necessary context to interact with the page. > ->Action Headers provide a visual and programmatic presentation of content structure to convey a meaningful purpose to the section. Icon-only buttons are commonly use to visually communicate an action. Therefore, the buttons must be intuitive and have a programmatic association with other words on the page to ensure a unique and descriptive accessible control name.This will allow speech input devices to utilize them. Screen reader users will also rely on the added programmatic context to understand what precisely a control may do. +> Action Headers provide a visual and programmatic presentation of content structure to convey a meaningful purpose to the section. Icon-only buttons are commonly use to visually communicate an action. Therefore, the buttons must be intuitive and have a programmatic association with other words on the page to ensure a unique and descriptive accessible control name.This will allow speech input devices to utilize them. Screen reader users will also rely on the added programmatic context to understand what precisely a control may do. <Whitespace newline={2} /> @@ -82,17 +82,15 @@ import IconPrinter from 'terra-icon/lib/icon/IconPrinter'; const Icon = <IconPrinter a11yLabel="Print" />; <div> - <br /> <ContentContainer - header={( - <ActionHeader text="Patients Details" level={2} onBack={handleCloseModal}> - <IconButton icon={Icon} iconType={IconTypes.INFORMATIVE} text="Print Details" /> - </ActionHeader> -)} - > - <p>{text}</p> + header={( + <ActionHeader text="Patients Details" level={2} onBack={handleCloseModal}> + <IconButton icon={Icon} iconType={IconTypes.INFORMATIVE} text="Patient Details" /> + </ActionHeader> + )} + > + <p>{text}</p> </ContentContainer> - <br /> </div> ``` @@ -109,17 +107,15 @@ import DecoIconPrinter from 'terra-icon/lib/icon/decorative/IconPrinter'; const DecorativeIcon = <DecoIconPrinter />; <div> - <br /> <ContentContainer - header={( - <ActionHeader text="Patient Details" level={2} onBack={handleCloseModal}> - <IconButton icon={DecorativeIcon} iconType={IconTypes.DECORATIVE} text="Print Patient Details" /> - </ActionHeader> -)} - > - <p>{text}</p> + header={( + <ActionHeader text="Patient Details" level={2} onBack={handleCloseModal}> + <IconButton icon={DecorativeIcon} iconType={IconTypes.DECORATIVE} text="Print Patient Details" /> + </ActionHeader> + )} + > + <p>{text}</p> </ContentContainer> - <br /> </div> ``` @@ -139,22 +135,22 @@ import { IconButton, IconTypes } from 'terra-button'; <div> <ContentContainer - header={( - <ActionHeader text="Patient Medications" level={2}> - <IconButton icon={MedIcon} isIconOnly iconType={IconTypes.INFORMATIVE} /> - </ActionHeader> -)} - > - <p>{Medications}</p> + header={( + <ActionHeader text="Patient Medications" level={2}> + <IconButton icon={MedIcon} isIconOnly iconType={IconTypes.INFORMATIVE} /> + </ActionHeader> + )} + > + <p>{Medications}</p> </ContentContainer> <ContentContainer - header={( - <ActionHeader text="Patient Results" level={2}> - <IconButton icon={ResIcon} isIconOnly iconType={IconTypes.INFORMATIVE} /> - </ActionHeader> -)} - > - <p>{Results}</p> + header={( + <ActionHeader text="Patient Results" level={2}> + <IconButton icon={ResIcon} isIconOnly iconType={IconTypes.INFORMATIVE} /> + </ActionHeader> + )} + > + <p>{Results}</p> </ContentContainer> </div> From be570136b7387319cf23ae2cad6464821428d338 Mon Sep 17 00:00:00 2001 From: udaymattam <udaym2942@gmail.com> Date: Mon, 1 Aug 2022 16:31:25 +0530 Subject: [PATCH 10/10] Added iconText --- .../doc/action-header/AccessibilityGuide.4.doc.mdx | 6 ++++-- .../doc/action-header/example/ActionHeaderNonUniqueIcon.jsx | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx index 6ae9d921681..437ad70b8c5 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/AccessibilityGuide.4.doc.mdx @@ -133,11 +133,13 @@ import ContentContainer from 'terra-content-container'; import IconPrinter from 'terra-icon/lib/icon/IconPrinter'; import { IconButton, IconTypes } from 'terra-button'; +const MedIcon = <IconPrinter a11yLabel="Print Patient Medications" />; +const ResIcon = <IconPrinter a11yLabel="Print Patient Result" />; <div> <ContentContainer header={( <ActionHeader text="Patient Medications" level={2}> - <IconButton icon={MedIcon} isIconOnly iconType={IconTypes.INFORMATIVE} /> + <IconButton icon={MedIcon} iconType={IconTypes.INFORMATIVE} text="Print" /> </ActionHeader> )} > @@ -146,7 +148,7 @@ import { IconButton, IconTypes } from 'terra-button'; <ContentContainer header={( <ActionHeader text="Patient Results" level={2}> - <IconButton icon={ResIcon} isIconOnly iconType={IconTypes.INFORMATIVE} /> + <IconButton icon={ResIcon} iconType={IconTypes.INFORMATIVE} text="Print" /> </ActionHeader> )} > diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderNonUniqueIcon.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderNonUniqueIcon.jsx index b8b5b6c2b10..a6a20c7cd3a 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderNonUniqueIcon.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/ActionHeaderNonUniqueIcon.jsx @@ -18,7 +18,7 @@ const ActionHeaderNonUniqueIcon = () => { <ContentContainer header={( <ActionHeader text="Patient Medications" level={2}> - <IconButton icon={MedIcon} isIconOnly iconType={IconTypes.INFORMATIVE} /> + <IconButton icon={MedIcon} iconType={IconTypes.INFORMATIVE} text="Print" /> </ActionHeader> )} > @@ -27,7 +27,7 @@ const ActionHeaderNonUniqueIcon = () => { <ContentContainer header={( <ActionHeader text="Patient Results" level={2}> - <IconButton icon={ResIcon} isIconOnly iconType={IconTypes.INFORMATIVE} /> + <IconButton icon={ResIcon} iconType={IconTypes.INFORMATIVE} text="Print" /> </ActionHeader> )} >