@springernature/global-expander - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1

__tests__/expander.spec.js

@@ -36,2 +36,3 @@ import {Expander} from '../js/expander';
 			event.key = 'Tab';
+			event.shiftKey = false;
 			break;
@@ -51,4 +52,5 @@ default:
 			<button data-expander data-expander-target="#unique">Expander</button>
-			<div id="unique" class=${className.HIDE}>
-				<a href="#">Tabbable element</a>
+			<div id="unique" class=${className.HIDE} hidden>
+				<a href="#">First tabbable element</a>
+				<a href="#">Last tabbable element</a>
 			</div>
@@ -59,3 +61,5 @@ `;
 		element.TARGET = document.querySelector('div');
-		element.FIRSTTABBABLE = document.querySelector('a');
+		element.TABBABLES = document.querySelector('#unique').children;
+		element.FIRSTTABBABLE = element.TABBABLES[0];
+		element.LASTTABBABLE = element.TABBABLES[element.TABBABLES.length - 1];
 	});
@@ -348,2 +352,20 @@
 
+		test('Should close when tab from last visible tabbable item', done => {
+			// Given
+			const expander = new Expander(element.BUTTON, element.TARGET, {AUTOFOCUS: 'target'});
+			expander.init();
+			element.LASTTABBABLE.style.visibility = 'hidden';
+			element.BUTTON.click();
+			// When
+			const keydownTabEvent = createKeydownEvent('Tab');
+			element.FIRSTTABBABLE.dispatchEvent(keydownTabEvent);
+			// Then
+			window.requestAnimationFrame(() => {
+				expect(element.BUTTON.classList.contains(className.OPEN)).toBe(false);
+				expect(element.TARGET.classList.contains(className.HIDE)).toBe(true);
+				expect(element.TARGET.hasAttribute('hidden')).toBe(true);
+				done();
+			});
+		});
+
 		test('Should close and set focus on trigger when tab out of the target', done => {
@@ -356,3 +378,3 @@ // Given
 			const keydownTabEvent = createKeydownEvent('Tab');
-			element.FIRSTTABBABLE.dispatchEvent(keydownTabEvent);
+			element.LASTTABBABLE.dispatchEvent(keydownTabEvent);
 			// Then
@@ -384,2 +406,19 @@ window.requestAnimationFrame(() => {
 
+		test('Should not close when tab backwards from last tabbable element', done => {
+			// Given
+			const expander = new Expander(element.BUTTON, element.TARGET, {AUTOFOCUS: 'target'});
+			expander.init();
+			element.BUTTON.click();
+			// When
+			const keydownTabShiftEvent = createKeydownEvent('TabShift');
+			element.LASTTABBABLE.dispatchEvent(keydownTabShiftEvent);
+			// Then
+			window.requestAnimationFrame(() => {
+				expect(element.BUTTON.classList.contains(className.OPEN)).toBe(true);
+				expect(element.TARGET.classList.contains(className.HIDE)).toBe(false);
+				expect(element.TARGET.hasAttribute('hidden')).toBe(false);
+				done();
+			});
+		});
+
 		test('Should not close when click on the open target', () => {
@@ -386,0 +425,0 @@ // Given

HISTORY.md

 # History
 
+## 4.0.1 (2021-02-12)
+    * BUG: 
+        * Fix expander incorrectly closing when shift+tab on last item and there are still tabbable items before it
+        * Fix expander not closing when tababble number of items in expander changes
+        * Bump global-javascript to 3.0.1
+
 ## 4.0.0 (2021-02-03)
@@ -4,0 +10,0 @@ * BREAKING:

js/expander.js

@@ -23,5 +23,2 @@ import {makeArray, createEvent} from '@springernature/global-javascript/src/helpers';
 		this._originalTriggerText = trigger.textContent;
-		this._targetTabbableItems = makeArray(target.querySelectorAll(
-			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-		));
 		this._isOpen = false;
@@ -77,3 +74,3 @@ this._handleButtonClick = this._handleButtonClick.bind(this);
 
-			if (event.key === 'Tab') {
+			if (event.key === 'Tab' && event.shiftKey === false) {
 				if (event.target === this._targetTabbableItems[this._targetTabbableItems.length - 1]) {
@@ -160,2 +157,12 @@ event.preventDefault();
 	/**
+	 * Tabbable Items
+	 */
+
+	_updateTabbableItems() {
+		this._targetTabbableItems = makeArray(this._targetEl.querySelectorAll(
+			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+		)).filter(element => window.getComputedStyle(element).getPropertyValue('visibility') !== 'hidden');
+	}
+
+	/**
 	 * AutoFocus
@@ -196,2 +203,3 @@ */
 		this._updateClassAttributes();
+		this._updateTabbableItems();
 
@@ -198,0 +206,0 @@ this._setupTemporaryEventListeners();

package.json

 {
   "name": "@springernature/global-expander",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Frontend package for expanding a target when clicking a toggle",
   "license": "MIT",
   "dependencies": {
-    "@springernature/global-javascript": "^3.0.0"
+    "@springernature/global-javascript": "^3.0.1"
   }
 }

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

Improved metrics

Total package byte prevSize

35233

increased by6.2%

Lines of code

844

increased by5.37%

Dependency changes

• Updated@springernature/global-javascript@^3.0.1