[terra-toggle] added Accessibility Guide (cerner#3719)

* first commit * ChangeLog * Updated Examples * minor changes * minor change * jest snap updated * Revert "jest snap updated" This reverts commit 88c2291. * minor chnage --------- Co-authored-by: Supreeth <[email protected]>
saket2403 · Feb 14, 2023 · afe7260 · afe7260
1 parent ddcaa6b
commit afe7260
Show file tree

Hide file tree

Showing 7 changed files with 512 additions and 3 deletions.
diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added 
+  * Added Accessibility Guide for `terra-toggle`.
+
 * Updated
   * Updated jest & wdio tests.
 

diff --git a/...ages/terra-core-docs/src/terra-dev-site/doc/toggle/AccessibilityGuide.4.doc.mdx b/...ages/terra-core-docs/src/terra-dev-site/doc/toggle/AccessibilityGuide.4.doc.mdx
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/toggle/example/AnimatedToggle.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/toggle/example/AnimatedToggle.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Toggle from 'terra-toggle';
 import IconInformation from 'terra-icon/lib/icon/IconInformation';
-import { KEY_TAB } from 'keycode-js';
+import { KEY_TAB, KEY_SPACE, KEY_RETURN } from 'keycode-js';
 import './ToggleExample.module.scss';
 
 const AnimatedToggle = () => {
@@ -14,6 +14,10 @@ const AnimatedToggle = () => {
     if (event.nativeEvent.keyCode === KEY_TAB) {
       setFocus(true);
     }
+    if (event.nativeEvent.keyCode === KEY_SPACE || event.nativeEvent.keyCode === KEY_RETURN) {
+      setIsOpen(!isOpen);
+      event.preventDefault();
+    }
   };
 
   return (

diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/toggle/example/DefaultToggle.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/toggle/example/DefaultToggle.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Toggle from 'terra-toggle';
 import IconInformation from 'terra-icon/lib/icon/IconInformation';
-import { KEY_TAB } from 'keycode-js';
+import { KEY_TAB, KEY_SPACE, KEY_RETURN } from 'keycode-js';
 import './ToggleExample.module.scss';
 
 const ToggleDefault = () => {
@@ -14,6 +14,10 @@ const ToggleDefault = () => {
     if (event.nativeEvent.keyCode === KEY_TAB) {
       setFocus(true);
     }
+    if (event.nativeEvent.keyCode === KEY_SPACE || event.nativeEvent.keyCode === KEY_RETURN) {
+      setIsOpen(!isOpen);
+      event.preventDefault();
+    }
   };
   return (
     <div>

diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/toggle/example/ToggleLabResults.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/toggle/example/ToggleLabResults.jsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import Toggle from 'terra-toggle';
+import IconInformation from 'terra-icon/lib/icon/IconInformation';
+import { KEY_TAB, KEY_SPACE, KEY_RETURN } from 'keycode-js';
+import './ToggleExample.module.scss';
+import Table from 'terra-table';
+
+const ToggleLabResults = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [focused, setFocus] = useState(true);
+  const handleOnClick = () => {
+    setIsOpen(!isOpen);
+  };
+  const handleOnKeyDown = (event) => {
+    if (event.nativeEvent.keyCode === KEY_TAB) {
+      setFocus(true);
+    }
+    if (event.nativeEvent.keyCode === KEY_SPACE || event.nativeEvent.keyCode === KEY_RETURN) {
+      setIsOpen(!isOpen);
+      event.preventDefault();
+    }
+  };
+
+  return (
+    <div>
+      <label htmlFor="Icon-label">
+        <IconInformation data-show-focus-styles={focused} focusable onKeyDown={handleOnKeyDown} onMouseDown={() => { setFocus(false); }} onClick={handleOnClick} a11yLabel="Lab Results, Information Icon" tabIndex="0" role="button" aria-expanded={isOpen} aria-controls="toggle" id="Icon-label" />
+        <span> Lab Results</span>
+      </label>
+      <Toggle isOpen={isOpen} isAnimated>
+        <Table
+          numberOfColumns={3}
+          cellPaddingStyle="standard"
+          dividerStyle="horizontal"
+          headerData={{
+            cells: [
+              { id: 'header-Component', key: 'Component', children: 'BLOOD PRESSURE CATEGORY' },
+              { id: 'header-Normal range', key: 'Normal range', children: 'SYSTOLIC mm Hg (upper number)' },
+              { id: 'header-Results', key: 'Results', children: 'DIASTOLIC mm Hg (lower number)' },
+            ],
+          }}
+          bodyData={[
+            {
+              rows: [
+                {
+                  key: 'row-0',
+                  cells: [
+                    { key: 'cell-0', children: 'NORMAL' },
+                    { key: 'cell-1', children: 'LESS THAN 120' },
+                    { key: 'cell-2', children: 'LESS THAN 80' },
+                  ],
+                },
+                {
+                  key: 'row-1',
+                  cells: [
+                    { key: 'cell-0', children: 'ELEVATED' },
+                    { key: 'cell-1', children: '120 – 129' },
+                    { key: 'cell-2', children: 'LESS THAN 80' },
+                  ],
+                },
+                {
+                  key: 'row-2',
+                  cells: [
+                    { key: 'cell-0', children: 'HIGH BLOOD PRESSURE (HYPERTENSION) STAGE 1' },
+                    { key: 'cell-1', children: '130 – 139' },
+                    { key: 'cell-2', children: '80 – 89' },
+                  ],
+                },
+              ],
+            },
+          ]}
+        />
+      </Toggle>
+    </div>
+  );
+};
+
+export default ToggleLabResults;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/toggle/example/TogglePatient.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/toggle/example/TogglePatient.jsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import Toggle from 'terra-toggle';
+import IconInformation from 'terra-icon/lib/icon/IconInformation';
+import { KEY_TAB, KEY_SPACE, KEY_RETURN } from 'keycode-js';
+import './ToggleExample.module.scss';
+import Table from 'terra-table';
+
+const TogglePatient = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [focused, setFocus] = useState(true);
+  const handleOnClick = () => {
+    setIsOpen(!isOpen);
+  };
+  const handleOnKeyDown = (event) => {
+    if (event.nativeEvent.keyCode === KEY_TAB) {
+      setFocus(true);
+    }
+    if (event.nativeEvent.keyCode === KEY_SPACE || event.nativeEvent.keyCode === KEY_RETURN) {
+      setIsOpen(!isOpen);
+      event.preventDefault();
+    }
+  };
+
+  return (
+    <div>
+      <label htmlFor="Info-Icon">
+        <IconInformation data-show-focus-styles={focused} focusable onKeyDown={handleOnKeyDown} onMouseDown={() => { setFocus(false); }} onClick={handleOnClick} a11yLabel="Allergies, Information Icon" tabIndex="0" role="button" aria-expanded={isOpen} aria-controls="toggle" id="Info-Icon" />
+        <span> Allergies</span>
+      </label>
+      <Toggle isOpen={isOpen} isAnimated>
+        <Table
+          numberOfColumns={3}
+          cellPaddingStyle="standard"
+          dividerStyle="horizontal"
+          headerData={{
+            cells: [
+              { id: 'header-name', key: 'name', children: 'Patient is allergic TO:' },
+            ],
+          }}
+          bodyData={[
+            {
+              rows: [
+                {
+                  key: 'row-0',
+                  cells: [
+                    { key: 'cell-0', children: 'dogs' },
+                  ],
+                },
+                {
+                  key: 'row-1',
+                  cells: [
+                    { key: 'cell-0', children: 'dust' },
+                  ],
+                },
+                {
+                  key: 'row-2',
+                  cells: [
+                    { key: 'cell-0', children: 'peanuts' },
+                  ],
+                },
+              ],
+            },
+          ]}
+        />
+      </Toggle>
+    </div>
+  );
+};
+
+export default TogglePatient;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/toggle/example/ToggleWithLabel.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/toggle/example/ToggleWithLabel.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Toggle from 'terra-toggle';
 import IconInformation from 'terra-icon/lib/icon/IconInformation';
-import { KEY_TAB } from 'keycode-js';
+import { KEY_TAB, KEY_SPACE, KEY_RETURN } from 'keycode-js';
 import './ToggleExample.module.scss';
 
 const ToggleWithLabel = () => {
@@ -14,6 +14,10 @@ const ToggleWithLabel = () => {
     if (event.nativeEvent.keyCode === KEY_TAB) {
       setFocus(true);
     }
+    if (event.nativeEvent.keyCode === KEY_SPACE || event.nativeEvent.keyCode === KEY_RETURN) {
+      setIsOpen(!isOpen);
+      event.preventDefault();
+    }
   };
 
   return (