[terra-popup] Move focus to first interactable child if available.

packages/terra-popup/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated popup to have focus on first interactable child when opened.
+
 ## 6.58.0 - (October 14, 2021)
 
 * Fixed

packages/terra-popup/package.json

@@ -32,6 +32,7 @@
     "focus-trap-react": "^6.0.0",
     "prop-types": "^15.5.8",
     "react-portal": "^4.1.2",
+    "tabbable": "^5.2.1",
     "terra-button": "^3.3.0",
     "terra-content-container": "^3.0.0",
     "terra-hookshot": "^5.38.0",
@@ -53,6 +54,6 @@
     "wdio-default": "cd ../.. && terra wdio",
     "wdio-lowlight": "cd ../.. && terra wdio --themes clinical-lowlight-theme",
     "wdio-fusion": "cd ../.. && terra wdio --themes orion-fusion-theme",
-    "wdio": "npm run wdio-default && npm run wdio-lowlight && npm run wdio-fusion"
+    "wdio": "cd ../.. && terra wdio --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme"
   }
 }

packages/terra-popup/src/_PopupContent.jsx

@@ -8,6 +8,7 @@ import Button from 'terra-button';
 import ContentContainer from 'terra-content-container';
 import FocusTrap from 'focus-trap-react';
 import Hookshot from 'terra-hookshot';
+import { tabbable } from 'tabbable';
 import styles from './PopupContent.module.scss';
 
 const cx = classNamesBind.bind(styles);
@@ -113,6 +114,7 @@ class PopupContent extends React.Component {
         </FormattedMessage>
       </div>
     );
+
     return <ContentContainer header={header} fill>{children}</ContentContainer>;
   }
 
@@ -137,13 +139,33 @@ class PopupContent extends React.Component {
   constructor(props) {
     super(props);
     this.handleOnResize = this.handleOnResize.bind(this);
+    this.popupContentRef = React.createRef();
   }
 
   componentDidMount() {
     // Value used to verify horizontal resize.
     this.windowWidth = window.innerWidth;
   }
 
+  componentDidUpdate() {
+    if (this.popupContentRef && this.popupContentRef.current) {
+      const mainContent = this.popupContentRef.current.querySelector("[class*='main']");
+      const headerContent = this.popupContentRef.current.querySelector("[class*='header']");
+      if (headerContent) {
+        const headerContentFocusableChildren = tabbable(headerContent);
+        if (headerContentFocusableChildren && headerContentFocusableChildren[0]) {
+          headerContentFocusableChildren[0].focus();
+        }
+      }
+      if (mainContent) {
+        const mainContentFocusableChildren = tabbable(mainContent);
+        if (mainContentFocusableChildren && mainContentFocusableChildren[0]) {
+          mainContentFocusableChildren[0].focus();
+        }
+      }
+    }
+  }
+
   static getContentStyle(height, maxHeight, width, maxWidth, isHeightAutomatic, isWidthAutomatic) {
     const heightStyle = PopupContent.getDimensionStyle(height, maxHeight, isHeightAutomatic);
     const widthStyle = PopupContent.getDimensionStyle(width, maxWidth, isWidthAutomatic);
@@ -240,7 +262,7 @@ class PopupContent extends React.Component {
           >
             {arrowContent}
             {/* eslint-disable-next-line react/forbid-dom-props */}
-            <div {...heightData} {...widthData} className={innerClassNames} style={contentStyle}>
+            <div {...heightData} {...widthData} ref={this.popupContentRef} className={innerClassNames} style={contentStyle}>
               {content}
             </div>
           </Hookshot.Content>

packages/terra-popup/src/terra-dev-site/test/popup/BoundedPopupWithInteractableChildren.test.jsx

@@ -0,0 +1,76 @@
+/* eslint-disable jsx-a11y/no-autofocus */
+import React from 'react';
+import classNames from 'classnames/bind';
+import Popup from '../../../Popup';
+import styles from './BoundedPopupCommon.test.module.scss';
+
+const cx = classNames.bind(styles);
+
+class BoundedPopup extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleButtonClick = this.handleButtonClick.bind(this);
+    this.handleRequestClose = this.handleRequestClose.bind(this);
+    this.setButtonNode = this.setButtonNode.bind(this);
+    this.getButtonNode = this.getButtonNode.bind(this);
+    this.setParentNode = this.setParentNode.bind(this);
+    this.getParentNode = this.getParentNode.bind(this);
+    this.state = { open: false };
+  }
+
+  componentDidMount() {
+    this.forceUpdate();
+  }
+
+  handleButtonClick() {
+    this.setState({ open: true });
+  }
+
+  handleRequestClose() {
+    this.setState({ open: false });
+  }
+
+  setButtonNode(node) {
+    this.buttonNode = node;
+  }
+
+  getButtonNode() {
+    return this.buttonNode;
+  }
+
+  setParentNode(node) {
+    this.parentNode = node;
+  }
+
+  getParentNode() {
+    return this.parentNode;
+  }
+
+  render() {
+    return (
+      <div id="test-popup-area" className={cx('test-popup-area')} ref={this.setParentNode}>
+        <Popup
+          boundingRef={this.getParentNode}
+          classNameArrow="test-arrow"
+          classNameContent="test-content"
+          contentHeight="240"
+          contentWidth="320"
+          isOpen={this.state.open}
+          onRequestClose={this.handleRequestClose}
+          targetRef={this.getButtonNode}
+        >
+          <p placeholder="Popup Content">Popup Content</p>
+          <div>
+            <input placeholder="1st childPopup Content" aria-label="1st child" />
+          </div>
+          <input placeholder="2nd child Popup Content" aria-label="2nd child" />
+        </Popup>
+        <button type="button" id="bounded-button" onClick={this.handleButtonClick} ref={this.setButtonNode}>
+          Bounded Popup
+        </button>
+      </div>
+    );
+  }
+}
+
+export default BoundedPopup;

packages/terra-popup/tests/wdio/popup-spec.js

@@ -84,6 +84,13 @@ Terra.describeViewports('Popup', ['medium'], () => {
       $('.test-content').waitForDisplayed();
       Terra.validates.element('bounded width', { selector });
     });
+
+    it('validates focus to be on first interactable element', () => {
+      browser.url('/raw/tests/terra-popup/popup/bounded-popup-with-interactable-children');
+      $('#bounded-button').click();
+      $('.test-content').waitForDisplayed();
+      Terra.validates.element('first interactable child focused', { selector });
+    });
   });
 
   describe('Popup inside a modal', () => {