Merge branch 'main' into UXPLATFORM-10398

packages/terra-framework-docs/CHANGELOG.md

@@ -6,6 +6,7 @@
   * Enabled `close` button in examples.
   * Modified Button in `PopupStandard` example.
   * Removed `ariaLabel` from `PopupStandard` example.
+  * Updated `terra-slide-panel` example to use `terra-buttons`.
 
 ## 1.86.0 - (May 8, 2024)
 

packages/terra-framework-docs/src/terra-dev-site/test/slide-panel/SlidePanelMultipleButtonsToggle.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames/bind';
 import SlidePanel from 'terra-slide-panel';
+import Button from 'terra-button';
 import styles from './SlidePanelDocCommon.test.module.scss';
 
 const cx = classNames.bind(styles);
@@ -29,15 +30,15 @@ class SlidePanelDemo extends React.Component {
           id="test-slide"
           mainContent={(
             <div className={cx('main-content')}>
-              <button type="button" id="other-button-1" className={cx('button')} onClick={SlidePanelDemo.handleOtherButton}>Other Button 1</button>
-              <button type="button" id="test-toggle" className={cx('button')} onClick={this.handlePanelToggle}>toggle</button>
-              <button type="button" id="another-button" className={cx('button')} onClick={SlidePanelDemo.handleOtherButton}>Another Button</button>
+              <Button text="Other Button 1" id="other-button-1" onClick={SlidePanelDemo.handleOtherButton} />
+              <Button text="Toggle" id="test-toggle" onClick={this.handlePanelToggle} />
+              <Button text="Another Button" id="another-button" onClick={SlidePanelDemo.handleOtherButton} />
             </div>
           )}
           panelContent={(
             <div id="panel-content" className={cx('panel-content')}>
-              <button type="button" id="other-button-2" className={cx('button')} onClick={SlidePanelDemo.handleOtherButton}>Other Button 2</button>
-              <button id="focus-button" type="button" className={cx('button')} onClick={this.handlePanelToggle}>Close panel</button>
+              <Button text="Other Button 2" id="other-button-2" onClick={SlidePanelDemo.handleOtherButton} />
+              <Button text="Close panel" id="focus-button" onClick={this.handlePanelToggle} />
             </div>
           )}
           panelAriaLabel="Panel content area"

packages/terra-slide-panel/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated to find the closest focusable element when disclosing.
+
 ## 3.49.0 - (April 4, 2024)
 
 * Changed

packages/terra-slide-panel/src/SlidePanel.jsx

@@ -85,6 +85,36 @@ const defaultProps = {
   panelSize: 'small',
 };
 
+/**
+ * Checks whether or not the given node should be focusable.
+ * If not focusable, find the closest parent element that is.
+ * If it cannot find a focusable element, return undefined.
+ */
+const findFocusableElement = (node) => {
+  const focusableElementSelector = 'a[href]:not([tabindex=\'-1\']), area[href]:not([tabindex=\'-1\']), input:not([disabled]):not([tabindex=\'-1\']), '
+  + 'select:not([disabled]):not([tabindex=\'-1\']), textarea:not([disabled]):not([tabindex=\'-1\']), button:not([disabled]):not([tabindex=\'-1\']), '
+  + 'iframe:not([tabindex=\'-1\']), [tabindex]:not([tabindex=\'-1\']), [contentEditable=true]:not([tabindex=\'-1\'])';
+
+  const focusableElements = [...document.body.querySelectorAll(`${focusableElementSelector}`)].filter(
+    element => !element.hasAttribute('disabled')
+    && !element.getAttribute('aria-hidden')
+    && !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length)
+    && window.getComputedStyle(element).visibility !== 'hidden'
+    && element.closest('[inert]') === null,
+  );
+
+  let currentNode = node;
+  while (currentNode.parentElement) {
+    if (focusableElements.includes(currentNode)) {
+      return currentNode;
+    }
+
+    currentNode = currentNode.parentElement;
+  }
+
+  return undefined;
+};
+
 class SlidePanel extends React.Component {
   constructor(props) {
     super(props);
@@ -97,7 +127,8 @@ class SlidePanel extends React.Component {
   componentDidUpdate(prevProps) {
     if (this.props.isOpen && this.props.isOpen !== prevProps.isOpen) {
       // Save the disclosing node for returning focus when panel is closed
-      this.setDisclosingNode(document.activeElement);
+      const disclosingNode = findFocusableElement(document.activeElement);
+      this.setDisclosingNode(disclosingNode);
       this.panelNode.focus();
       return;
     }