cerner · adoroshk · Aug 14, 2023 · Jun 30, 2023 · Jul 7, 2023 · Jul 7, 2023
@@ -1,9 +1,10 @@
 # Changelog
 
+## Unreleased
+
 * Added
   * Added documentation updates for `Single Select` in `terra-form-select`.
-
-## Unreleased
+  * Added `focusRef` prop in `terra-show-hide`.
 
 ## 1.29.0 - (June 28, 2023)
 

@@ -1,4 +1,5 @@
 import { Badge } from 'terra-show-hide/package.json?dev-site-package';
+import { Notice } from "@cerner/terra-docs";
 
 import DefaultShowHide from './example/DefaultShowHide?dev-site-example';
 import CustomButtonTextShowHide from './example/CustomButtonTextShowHide?dev-site-example';
@@ -45,6 +46,19 @@ The Show-Hide component must be composed inside the [Base][1] component with a l
 import ShowHide from 'terra-show-hide';
 ```
 
+## Accessibility
+
+<Notice variant="important" ariaLevel="3">
+
+- In order for the component to be accessible, the `ref` to the first hidden child node have to be provided to the `focusRef` prop. The element will get focus once the full content revealed, that allows the assistive technologies to start reading the hidden content from the place where it was cut off.
+- While the back compatibility has been preserved and the `focusRef` prop is not required, it is highly reccomended to provide that prop for the best user experience.
+
+</Notice>
+
+#### Accessibility Guidance.
+- For the child component being a single paragraph `<p>`, wrap the portion of the text that is about to be hidden, in `<span>` tag, and pass a `ref` to that element as `focusRef` prop.
+- For multiple children, pass a `ref` to the first child that is not included in preview portion as `focusRef` prop.
+
 ## Component Features
 
 * [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)

@@ -1,15 +1,16 @@
 import React from 'react';
 import ShowHide from 'terra-show-hide';
 
-const fullText = 'According to the Journal of Healthcare Management/American College of Healthcare Executives, a 500-bed hospital loses over $4 million annually due to clinical communication inefficiencies. A unified clinical communication strategy can help health systems begin to close the gap and improve efficiency at every level. Enable your clinical care team with real-time health communication tools and workflows that help them to collaborate more effectively on the go and provide a quality patient care experience. A unified strategy and improved communication tools can help address many challenges including identification of patient care team members, mobile clinical workflows, secure and timely critical alerts, and more.';
-const previewText = fullText.substring(0, 280);
+const previewText = 'According to the Journal of Healthcare Management/American College of Healthcare Executives, a 500-bed hospital loses over $4 million annually due to clinical communication inefficiencies. A unified clinical communication strategy can help health systems begin to close the gap ';
+const text = 'and improve efficiency at every level. Enable your clinical care team with real-time health communication tools and workflows that help them to collaborate more effectively on the go and provide a quality patient care experience. A unified strategy and improved communication tools can help address many challenges including identification of patient care team members, mobile clinical workflows, secure and timely critical alerts, and more.';
 
 class ButtonAlignCenterShowHide extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = { isOpen: false };
     this.toggleShowHide = this.toggleShowHide.bind(this);
+    this.focusRef = React.createRef();
   }
 
   toggleShowHide() {
@@ -21,8 +22,11 @@ class ButtonAlignCenterShowHide extends React.Component {
   render() {
     return (
       <div>
-        <ShowHide buttonAlign="center" preview={<p>{previewText}</p>} isOpen={this.state.isOpen} onChange={this.toggleShowHide}>
-          <p>{fullText}</p>
+        <ShowHide focusRef={this.focusRef} buttonAlign="center" preview={<p>{previewText}</p>} isOpen={this.state.isOpen} onChange={this.toggleShowHide}>
+          <p>
+            { previewText }
+            <span ref={this.focusRef}>{ text }</span>
+          </p>
         </ShowHide>
       </div>
     );

@@ -2,15 +2,17 @@ import React from 'react';
 import ShowHide from 'terra-show-hide';
 
 const sentences = [
-  <h3 key="sentence1">Key Benefits of Cerner Cardiovascular Solutions</h3>,
-  <p key="sentence2">Eliminates silos of information and the resulting inefficiencies with a unified EHR and cardiovascular system</p>,
-  <p key="sentence3">Creates efficient diagnostic workflows, image management and analysis</p>,
-  <p key="sentence4">Enhances clinical, financial and performance outcomes with comprehensive procedural documentation</p>,
-  <p key="sentence5">Promotes cardiac disease management through health maintenance protocols</p>,
-  // <p key="sentence6">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>,
-  // <p key="sentence7">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>,
-  // <p key="sentence8">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>,
-  // <p key="sentence9">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
+  'Key Benefits of Cerner Cardiovascular Solutions',
+  'Eliminates silos of information and the resulting inefficiencies with a unified EHR and cardiovascular system',
+  'Creates efficient diagnostic workflows, image management and analysis',
+  'Enhances clinical, financial and performance outcomes with comprehensive procedural documentation',
+  'Promotes cardiac disease management through health maintenance protocols',
+];
+
+const preview = [
+  <h3 key="sentence1">{sentences[0]}</h3>,
+  <p key="sentence2">{sentences[1]}</p>,
+  <p key="sentence3">{sentences[2]}</p>,
 ];
 
 class CustomButtonTextShowHide extends React.Component {
@@ -19,6 +21,7 @@ class CustomButtonTextShowHide extends React.Component {
 
     this.state = { isOpen: false };
     this.toggleShowHide = this.toggleShowHide.bind(this);
+    this.focusRef = React.createRef();
   }
 
   toggleShowHide() {
@@ -38,12 +41,15 @@ class CustomButtonTextShowHide extends React.Component {
 
     return (
       <ShowHide
-        preview={[sentences[0], sentences[1], sentences[2]]}
+        preview={preview}
         onChange={this.toggleShowHide}
         isOpen={this.state.isOpen}
         buttonText={customText}
+        focusRef={this.focusRef}
       >
-        {sentences}
+        { preview }
+        <p ref={this.focusRef} key="sentence4">{sentences[3]}</p>
+        <p key="sentence5">{sentences[4]}</p>
       </ShowHide>
     );
   }

@@ -1,15 +1,16 @@
 import React from 'react';
 import ShowHide from 'terra-show-hide';
 
-const fullText = 'Patients are requesting greater affordability and efficiency in healthcare. With procedures performed in an ambulatory surgery center costing up to 60% less compared to a hospital outpatient department (1), the demand for these facilities is increasing. In fact, the U.S. ambulatory surgery center market is expected to see a 6.9 % compound annual growth rate, reaching $33 billion by 2028. (2) Cerner understands the urgency to grow in the ambulatory surgery center market while continuing to deliver excellent care. Healthcare IT products can help improve clinician efficiency and patient outcomes, as well as enhance communication and data exchange between ambulatory surgery center providers and patients.';
-const previewText = fullText.substring(0, 280);
+const previewText = 'Patients are requesting greater affordability and efficiency in healthcare. With procedures performed in an ambulatory surgery center costing up to 60% less compared to a hospital outpatient department (1), the demand for these facilities is increasing. ';
+const text = 'In fact, the U.S. ambulatory surgery center market is expected to see a 6.9 % compound annual growth rate, reaching $33 billion by 2028. (2) Cerner understands the urgency to grow in the ambulatory surgery center market while continuing to deliver excellent care. Healthcare IT products can help improve clinician efficiency and patient outcomes, as well as enhance communication and data exchange between ambulatory surgery center providers and patients.';
 
 class DefaultShowHide extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = { isOpen: false };
     this.toggleShowHide = this.toggleShowHide.bind(this);
+    this.focusRef = React.createRef();
   }
 
   toggleShowHide() {
@@ -21,8 +22,11 @@ class DefaultShowHide extends React.Component {
   render() {
     return (
       <div>
-        <ShowHide preview={<p>{previewText}</p>} isOpen={this.state.isOpen} onChange={this.toggleShowHide}>
-          <p>{fullText}</p>
+        <ShowHide focusRef={this.focusRef} preview={<p>{previewText}</p>} isOpen={this.state.isOpen} onChange={this.toggleShowHide}>
+          <p>
+            { previewText }
+            <span ref={this.focusRef}>{ text }</span>
+          </p>
         </ShowHide>
       </div>
     );

@@ -1,15 +1,16 @@
 import React from 'react';
 import ShowHide from 'terra-show-hide';
 
-const fullText = 'Cerner cardiovascular solutions are embedded within the EHR, allowing for a holistic patient record that includes: diagnostic activities, therapeutic interventions and follow-up regimens. Electrocardiogram (ECG) objects are digitized and accessed within the EHR providing physicians in your cardiology department the ability to receive and present ECG data in mere seconds after it is acquired. This eliminates the necessity for a separate ECG information system.';
-const previewText = fullText.substring(0, 280);
+const previewText = 'Cerner cardiovascular solutions are embedded within the EHR, allowing for a holistic patient record that includes: diagnostic activities, therapeutic interventions and follow-up regimens. Electrocardiogram (ECG) objects are digitized and accessed within the EHR providing physicians ';
+const text = 'in your cardiology department the ability to receive and present ECG data in mere seconds after it is acquired. This eliminates the necessity for a separate ECG information system.';
 
 class InitiallyOpenShowHide extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = { isOpen: true };
     this.toggleShowHide = this.toggleShowHide.bind(this);
+    this.focusRef = React.createRef();
   }
 
   toggleShowHide() {
@@ -20,8 +21,11 @@ class InitiallyOpenShowHide extends React.Component {
 
   render() {
     return (
-      <ShowHide preview={<p>{previewText}</p>} isOpen={this.state.isOpen} onChange={this.toggleShowHide}>
-        <p>{fullText}</p>
+      <ShowHide focusRef={this.focusRef} preview={<p>{previewText}</p>} isOpen={this.state.isOpen} onChange={this.toggleShowHide}>
+        <p>
+          { previewText }
+          <span ref={this.focusRef}>{ text }</span>
+        </p>
       </ShowHide>
     );
   }

@@ -9,6 +9,7 @@ class NoPreviewShowHide extends React.Component {
 
     this.state = { isOpen: false };
     this.toggleShowHide = this.toggleShowHide.bind(this);
+    this.focusRef = React.createRef();
   }
 
   toggleShowHide() {
@@ -19,8 +20,8 @@ class NoPreviewShowHide extends React.Component {
 
   render() {
     return (
-      <ShowHide isOpen={this.state.isOpen} onChange={this.toggleShowHide}>
-        <p>{fullText}</p>
+      <ShowHide focusRef={this.focusRef} isOpen={this.state.isOpen} onChange={this.toggleShowHide}>
+        <p ref={this.focusRef}>{fullText}</p>
       </ShowHide>
     );
   }

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * New focusRef prop to shift focus to upon revealing the hidden content for screen-reader users.
+
 ## 2.60.0 - (April 27, 2023)
 
 * Changed

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Toggle from 'terra-toggle';
 import { injectIntl } from 'react-intl';
 import classNames from 'classnames/bind';
+import ThemeContext from 'terra-theme-context';
 import styles from './ShowHide.module.scss';
 import Button from './_ShowHideButton';
 
@@ -34,6 +35,12 @@ const propTypes = {
    * Allows parent to toggle the component. True for open and false for close.
    */
   isOpen: PropTypes.bool,
+  /**
+   * Ref to the first hidden child element. The element will get focus once the full content revealed. That allows the assistive technologies to start reading the hidden content from the place where it was cut off.
+   */
+  focusRef: PropTypes.shape({
+    current: PropTypes.element,
+  }),
   /**
    * Elements(s) that will be visible to the user when component is collapsed
    */
@@ -55,9 +62,34 @@ const ShowHide = (props) => {
     preview,
     intl,
     isOpen,
+    focusRef,
     ...customProps
   } = props;
 
+  const theme = React.useContext(ThemeContext);
+  const contentRef = React.useRef(null);
+
+  /**
+   * Upon showing hidden content, add required attributes and set focus to the child element provided by focusRef,
+   * or the content container element, if focusRef wasn't provided.
+   */
+  React.useEffect(() => {
+    if (isOpen) {
+      let element = null;
+      if (props.focusRef?.current) {
+        element = props.focusRef?.current;
+      } else if (contentRef?.current) {
+        element = contentRef?.current;
+      }
+      if (element) {
+        element.setAttribute('tabIndex', '-1');
+        element.setAttribute('data-focus-styles-enabled', isOpen);
+        element.setAttribute('role', 'group');
+        element.focus();
+      }
+    }
+  }, [isOpen, props.focusRef, contentRef]);
+
   const buttonClassName = cx([
     'show-hide',
     'button',
@@ -78,9 +110,14 @@ const ShowHide = (props) => {
   return (
     <div {...customProps}>
       {!isOpen && preview}
-      <Toggle isOpen={isOpen}>
-        {children}
-      </Toggle>
+      <div
+        className={cx(['show-hide', 'show-hide-content', theme.className])}
+        ref={contentRef}
+      >
+        <Toggle isOpen={isOpen}>
+          {children}
+        </Toggle>
+      </div>
       <div className={cx('show-hide')}>
         <Button
           aria-expanded={isOpen}

@@ -1,3 +1,7 @@
+// Themes
+@import './clinical-lowlight-theme/ShowHide.module';
+@import './orion-fusion-theme/ShowHide.module';
+
 :local {
   .show-hide {
     display: flex;
@@ -14,4 +18,16 @@
   .end {
     margin-left: auto;
   }
+
+  .show-hide-content[data-focus-styles-enabled='true']:focus {
+    outline: var(--terra-show-hide-focus-outline, 2px dashed #000);
+    outline-offset: var(--terra-show-hide-focus-outline-offset, 2px);
+  }
+
+  .show-hide-content {
+    [data-focus-styles-enabled='true']:focus {
+      outline: var(--terra-show-hide-focus-outline, 2px dashed #000);
+      outline-offset: var(--terra-show-hide-focus-outline-offset, 2px);
+    }
+  }
 }
@@ -0,0 +1,6 @@
+:local {
+  .clinical-lowlight-theme {
+    --terra-show-hide-focus-outline: 2px dashed #c8cacb;
+    --terra-show-hide-focus-outline-offset: 2px;
+  }
+}
@@ -0,0 +1,6 @@
+:local {
+  .orion-fusion-theme {
+    --terra-show-hide-focus-outline: 2px dashed #000;
+    --terra-show-hide-focus-outline-offset: 2px;
+  }
+}