[terra-toggle]fixing focus issue & added expanded & collapse state (#…

…3715)

* first commit

* updated Example

* lint changes

* Tab Focus

* focus styles

* minor changes

---------

Co-authored-by: Supreeth <supreeth.mr1990@gmail.com>

packages/terra-core-docs/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+* Changed
+  * Updated examples to use informative icons.
+
+* Added 
+  * Added Label Example for `terra-toggle`.
+
 ## 1.19.0 - (January 31, 2023)
 
 * Added

packages/terra-core-docs/src/terra-dev-site/doc/toggle/About.1.doc.mdx

@@ -2,7 +2,7 @@ import { Badge } from 'terra-toggle/package.json?dev-site-package';
 
 import DefaultToggle from './example/DefaultToggle?dev-site-example';
 import AnimatedToggle from './example/AnimatedToggle?dev-site-example';
-
+import ToggleWithLabel from './example/ToggleWithLabel?dev-site-example'
 
 import TogglePropsTable from 'terra-toggle/src/Toggle?dev-site-props-table';
 
@@ -43,6 +43,7 @@ import Toggle from 'terra-toggle/lib/Toggle';
 ## Examples
 <DefaultToggle />
 <AnimatedToggle title="isAnimated Toggle" />
+<ToggleWithLabel title="Toggle With Label"/>
 
 ## Toggle Props
 <TogglePropsTable />

packages/terra-core-docs/src/terra-dev-site/doc/toggle/example/AnimatedToggle.jsx

@@ -1,17 +1,24 @@
 import React, { useState } from 'react';
-import IconInformation from 'terra-icon/lib/icon/IconInformation';
 import Toggle from 'terra-toggle';
+import IconInformation from 'terra-icon/lib/icon/IconInformation';
+import { KEY_TAB } from 'keycode-js';
+import './ToggleExample.module.scss';
 
-const ToggleDefault = () => {
+const AnimatedToggle = () => {
   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);
+    }
+  };
 
   return (
     <div>
-      <IconInformation onClick={handleOnClick} aria-expanded={isOpen} aria-controls="toggle" />
+      <IconInformation data-show-focus-styles={focused} focusable a11yLabel="information Icon" tabIndex="0" role="button" onKeyDown={handleOnKeyDown} onMouseDown={() => { setFocus(false); }} onClick={handleOnClick} aria-expanded={isOpen} aria-controls="toggle" />
       {/**
       * The aria-expanded state is used on the triggering component to indicate the contents are collapsible, and whether a region is currently expanded or collapsed
       */}
@@ -27,4 +34,4 @@ const ToggleDefault = () => {
   );
 };
 
-export default ToggleDefault;
+export default AnimatedToggle;

packages/terra-core-docs/src/terra-dev-site/doc/toggle/example/DefaultToggle.jsx

@@ -1,17 +1,23 @@
 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 './ToggleExample.module.scss';
 
 const ToggleDefault = () => {
   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);
+    }
+  };
   return (
     <div>
-      <IconInformation onClick={handleOnClick} aria-expanded={isOpen} aria-controls="toggle" />
+      <IconInformation data-show-focus-styles={focused} focusable a11yLabel="information Icon" tabIndex="0" role="button" onKeyDown={handleOnKeyDown} onMouseDown={() => { setFocus(false); }} onClick={handleOnClick} aria-expanded={isOpen} aria-controls="toggle" />
       {/**
       * The aria-expanded state is used on the triggering component to indicate the contents are collapsible, and whether a region is currently expanded or collapsed
       */}
@@ -28,3 +34,4 @@ const ToggleDefault = () => {
 };
 
 export default ToggleDefault;
+

packages/terra-core-docs/src/terra-dev-site/doc/toggle/example/ToggleExample.module.scss

@@ -0,0 +1,10 @@
+:local {
+  [data-show-focus-styles='false']:focus {
+    outline: none;
+  }
+
+  [data-show-focus-styles='true']:focus {
+    outline: 2px dashed #000;
+    outline-offset: 2px;
+  } 
+}

packages/terra-core-docs/src/terra-dev-site/doc/toggle/example/ToggleWithLabel.jsx

@@ -0,0 +1,37 @@
+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 './ToggleExample.module.scss';
+
+const ToggleWithLabel = () => {
+  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);
+    }
+  };
+
+  return (
+    <div>
+      <label htmlFor="Icon-label">
+        <IconInformation data-show-focus-styles={focused} focusable onKeyDown={handleOnKeyDown} onMouseDown={() => { setFocus(false); }} onClick={handleOnClick} a11yLabel="information Icon" tabIndex="0" role="button" aria-expanded={isOpen} aria-controls="toggle" id="Icon-label" />
+        <span id="Icon-label"> Toggle label</span>
+      </label>
+      <Toggle isOpen={isOpen} isAnimated>
+        <p>
+          Cerner provides research solutions and services to support clinical sites and academic institutions.
+          <a href="https://www.cerner.com/gb/en/solutions/data-research">Data and research</a>
+          {' '}
+          We bring a deep understanding of clinical systems, workflows and health data, as well as extensive experience in pharmaceutical, outcomes and health economic research. Through medical and economic analyses, researchers gain insights into the viability, safety, and efficacy of new and existing therapies. Principal investigators and research coordinators can use the Cerner EHR to facilitate and enhance their research activities.
+        </p>
+      </Toggle>
+    </div>
+  );
+};
+
+export default ToggleWithLabel;