@springernature/global-expander - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

__tests__/expander.spec.js

@@ -30,2 +30,6 @@ import {Expander} from '../js/expander';
 			break;
+		case 'TabShift':
+			event.key = 'Tab';
+			event.shiftKey = true;
+			break;
 		case 'Tab':
@@ -54,2 +58,3 @@ event.key = 'Tab';
 		element.TARGET = document.querySelector('div');
+		element.FIRSTTABBABLE = document.querySelector('a');
 	});
@@ -358,12 +363,8 @@
 			// Given
-			const outsideElement = document.createElement('div');
-			outsideElement.setAttribute('tabindex', '-1');
-			element.TARGET.parentNode.insertBefore(outsideElement, element.TARGET.nextSibling);
 			const expander = new Expander(element.BUTTON, element.TARGET);
 			expander.init();
 			element.BUTTON.click();
-			outsideElement.focus();
 			// When
 			const keydownTabEvent = createKeydownEvent('Tab');
-			element.TARGET.dispatchEvent(keydownTabEvent);
+			element.FIRSTTABBABLE.dispatchEvent(keydownTabEvent);
 			// Then
@@ -377,2 +378,18 @@ window.requestAnimationFrame(() => {
 
+		test('Should close and set focus on trigger when tab out backwards of the target', done => {
+			// Given
+			const expander = new Expander(element.BUTTON, element.TARGET, {AUTOFOCUS: 'target'});
+			expander.init();
+			element.BUTTON.click();
+			// When
+			const keydownTabShiftEvent = createKeydownEvent('TabShift');
+			element.FIRSTTABBABLE.dispatchEvent(keydownTabShiftEvent);
+			// Then
+			window.requestAnimationFrame(() => {
+				expect(element.BUTTON.classList.contains(className.OPEN)).toBe(false);
+				expect(element.TARGET.classList.contains(className.HIDE)).toBe(true);
+				done();
+			});
+		});
+
 		test('Should not close when click on the open target', () => {
@@ -379,0 +396,0 @@ // Given

HISTORY.md

 # History
 
+## 2.0.2 (2020-07-28)
+    * Refactor when to focus back to trigger during tabbing 
+
 ## 2.0.1 (2020-07-20)
@@ -4,0 +7,0 @@ * Replace switch with if/else if when detecting AUTOFOCUS option

js/expander.js

@@ -67,9 +67,20 @@ import {makeArray, createEvent} from '@springernature/global-javascript/src/helpers';
 		if (this._options.CLOSE_ON_FOCUS_OUT) {
+			if (event.key === 'Tab' && event.shiftKey === true) {
+				if (event.target === this._targetTabbableItems[0] || event.target === this._triggerEl || event.target === this._targetEl) {
+					event.preventDefault();
+					window.requestAnimationFrame(() => {
+						this.close();
+						this._triggerEl.focus();
+					});
+				}
+			}
+
 			if (event.key === 'Tab') {
-				window.requestAnimationFrame(() => {
-					if (!this._targetTabbableItems.includes(document.activeElement)) {
+				if (event.target === this._targetTabbableItems[this._targetTabbableItems.length - 1]) {
+					event.preventDefault();
+					window.requestAnimationFrame(() => {
 						this.close();
 						this._triggerEl.focus();
-					}
-				});
+					});
+				}
 			}
@@ -76,0 +87,0 @@ }

package.json

 {
   "name": "@springernature/global-expander",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Frontend package for expanding a target when clicking a toggle",
@@ -5,0 +5,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

32655

increased by3.11%

Lines of code

788

increased by3.41%

No dependency changes