[Terra-Action-Header]Added Accessibility Guide

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

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`.
 
 ## 1.14.1 - (July 14, 2022)
 

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';
+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} iconType={IconTypes.INFORMATIVE} text="Print" />
+              </ActionHeader>
+)}
+          >
+            <p>{Medications}</p>
+          </ContentContainer>
+          <ContentContainer
+            header={(
+              <ActionHeader text="Patient Results" level={2}>
+                <IconButton icon={ResIcon} iconType={IconTypes.INFORMATIVE} text="Print" />
+              </ActionHeader>
+)}
+          >
+            <p>{Results}</p>
+          </ContentContainer>
+        </Card.Body>
+      </Card>
+    </div>
+  );
+};
+export default ActionHeaderNonUniqueIcon;

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;

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="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;

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>&mdash; 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;

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%;
+    }
+  }
+}