terra-slide-panel - npm Package Compare versions

Comparing version 3.37.0 to 3.38.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## 3.38.0 - (March 29, 2023)
+
+* Changed
+  * Updated to focus originating element when slide panel is closed. 
+
 ## 3.37.0 - (February 14, 2023)
@@ -7,0 +12,0 @@

lib/SlidePanel.js

@@ -87,2 +87,4 @@ "use strict";
     _this.mainNode = /*#__PURE__*/_react.default.createRef();
+    _this.setLastClicked = _this.setLastClicked.bind((0, _assertThisInitialized2.default)(_this));
+    _this.setDisclosingNode = _this.setDisclosingNode.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
@@ -94,5 +96,8 @@ }
       if (this.props.isOpen && this.props.isOpen !== prevProps.isOpen) {
+        // Save the disclosing node for returning focus when panel is closed
+        this.setDisclosingNode(this.lastClicked);
         this.panelNode.focus();
       } else if (!this.props.isOpen && this.props.isOpen !== prevProps.isOpen) {
-        this.mainNode.current.focus();
+        // Return focus to the disclosing element
+        this.disclosingNode.focus();
       }
@@ -106,2 +111,12 @@ }
   }, {
+    key: "setLastClicked",
+    value: function setLastClicked(event) {
+      this.lastClicked = event.target;
+    }
+  }, {
+    key: "setDisclosingNode",
+    value: function setDisclosingNode(node) {
+      this.disclosingNode = node;
+    }
+  }, {
     key: "render",
@@ -137,3 +152,6 @@ value: function render() {
       }, panelContent);
-      var mainDiv = /*#__PURE__*/_react.default.createElement("div", {
+      var mainDiv =
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      _react.default.createElement("div", {
         className: cx('main'),
@@ -143,3 +161,5 @@ key: "main",
         "aria-label": mainAriaLabel,
-        ref: this.mainNode
+        ref: this.mainNode,
+        onClick: this.setLastClicked,
+        onKeyUp: this.setLastClicked
       }, mainContent);
@@ -146,0 +166,0 @@ var content = panelPosition === SlidePanelPositions.START ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, panelDiv, mainDiv) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mainDiv, panelDiv);

package.json

 {
   "name": "terra-slide-panel",
   "main": "lib/SlidePanel.js",
-  "version": "3.37.0",
+  "version": "3.38.0",
   "description": "The Terra SlidePanel component is a progressive disclosure mechanism that allows additional content to be shown and hidden in a variety of ways.",
@@ -47,3 +47,3 @@ "repository": {
   },
-  "gitHead": "dadf4d9798ac1d94e56840504fe67623f75f9a9a"
+  "gitHead": "9075a61ed186b64f553fdfc6035df63a657999dd"
 }

src/SlidePanel.jsx

@@ -78,2 +78,4 @@ import React from 'react';
     this.mainNode = React.createRef();
+    this.setLastClicked = this.setLastClicked.bind(this);
+    this.setDisclosingNode = this.setDisclosingNode.bind(this);
   }
@@ -83,5 +85,8 @@
     if (this.props.isOpen && this.props.isOpen !== prevProps.isOpen) {
+      // Save the disclosing node for returning focus when panel is closed
+      this.setDisclosingNode(this.lastClicked);
       this.panelNode.focus();
     } else if (!this.props.isOpen && this.props.isOpen !== prevProps.isOpen) {
-      this.mainNode.current.focus();
+      // Return focus to the disclosing element
+      this.disclosingNode.focus();
     }
@@ -94,2 +99,10 @@ }
 
+  setLastClicked(event) {
+    this.lastClicked = event.target;
+  }
+
+  setDisclosingNode(node) {
+    this.disclosingNode = node;
+  }
+
   render() {
@@ -128,3 +141,4 @@ const {
     const mainDiv = (
-      <div className={cx('main')} key="main" tabIndex="-1" aria-label={mainAriaLabel} ref={this.mainNode}>
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      <div className={cx('main')} key="main" tabIndex="-1" aria-label={mainAriaLabel} ref={this.mainNode} onClick={this.setLastClicked} onKeyUp={this.setLastClicked}>
         {mainContent}
@@ -131,0 +145,0 @@ </div>

tests/wdio/slide-panel-spec.js

@@ -74,2 +74,79 @@ const context = '[data-terra-dev-site-content] *:first-child';
     });
+    it('Closes panel and focuses on toggle button with keyboard controls', () => {
+      browser.url('/raw/tests/cerner-terra-framework-docs/slide-panel/slide-panel-toggle');
+
+      browser.keys(['Tab']);
+      $('#test-toggle').isFocused();
+      browser.keys(['Enter']);
+      $('#test-slide [aria-hidden="false"]').waitForExist();
+      browser.pause(150);
+
+      browser.keys(['Tab']);
+      $('#focus-button').isFocused();
+      browser.keys(['Enter']);
+      $('#test-slide [aria-hidden="true"]').waitForExist();
+
+      $('#test-toggle').isFocused();
+
+      browser.pause(150);
+
+      Terra.validates.element('toggle button focused', { selector: '#root' });
+    });
+    it('Closes panel and focuses on toggle button with mouse controls', () => {
+      browser.url('/raw/tests/cerner-terra-framework-docs/slide-panel/slide-panel-toggle');
+      $('#test-toggle').click();
+      $('#test-slide [aria-hidden="false"]').waitForExist();
+      browser.pause(150);
+
+      $('#focus-button').click();
+      $('#test-slide [aria-hidden="true"]').waitForExist();
+
+      $('#test-toggle').isFocused();
+
+      browser.pause(150);
+
+      Terra.validates.element('toggle button focused', { selector: '#root' });
+    });
+    it('Closes panel and focuses on toggle button with multiple buttons with keyboard controls', () => {
+      browser.url('/raw/tests/cerner-terra-framework-docs/slide-panel/slide-panel-multiple-buttons-toggle');
+
+      browser.keys(['Tab', 'Tab']);
+      $('#test-toggle').isFocused();
+      browser.keys(['Enter']);
+      $('#test-slide [aria-hidden="false"]').waitForExist();
+      browser.pause(150);
+
+      browser.keys(['Shift', 'Tab']);
+      $('#another-button').isFocused();
+
+      browser.keys(['Tab', 'Tab']);
+      $('#focus-button').isFocused();
+      browser.keys(['Enter']);
+      $('#test-slide [aria-hidden="true"]').waitForExist();
+
+      browser.pause(150);
+
+      $('#test-toggle').isFocused();
+
+      Terra.validates.element('toggle button focused with multiple buttons', { selector: '#root' });
+    });
+    it('Closes panel and focuses on toggle button with multiple buttons with mouse controls', () => {
+      browser.url('/raw/tests/cerner-terra-framework-docs/slide-panel/slide-panel-multiple-buttons-toggle');
+
+      $('#test-toggle').click();
+      $('#test-slide [aria-hidden="false"]').waitForExist();
+      browser.pause(150);
+
+      browser.keys(['Shift', 'Tab']);
+      $('#another-button').isFocused();
+
+      $('#focus-button').click();
+      $('#test-slide [aria-hidden="true"]').waitForExist();
+
+      browser.pause(150);
+
+      $('#test-toggle').isFocused();
+
+      Terra.validates.element('toggle button focused with multiple buttons', { selector: '#root' });
+    });
   });
@@ -76,0 +153,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59386

increased by7.56%

Lines of code

552

increased by18.97%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes