svelte-accessible-dialog - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

dist/index.js

@@ -150,5 +150,2 @@ (function (global, factory) {
     }
-    function beforeUpdate(fn) {
-        get_current_component().$$.before_update.push(fn);
-    }
     function onMount(fn) {
@@ -557,5 +554,5 @@ get_current_component().$$.on_mount.push(fn);
     			element.setAttribute("data-keep-inert", "");
-    		} else {
-    			element.setAttribute("inert", "true");
     		}
+
+    		element.setAttribute("inert", "true");
     	};
@@ -620,4 +617,4 @@
     	let dispose;
-    	const default_slot_template = /*$$slots*/ ctx[10].default;
-    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[9], null);
+    	const default_slot_template = /*$$slots*/ ctx[9].default;
+    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], null);
 
@@ -636,3 +633,3 @@ return {
 
-    			/*div_binding*/ ctx[11](div);
+    			/*div_binding*/ ctx[10](div);
     			current = true;
@@ -644,4 +641,4 @@ if (remount) dispose();
     			if (default_slot) {
-    				if (default_slot.p && dirty & /*$$scope*/ 512) {
-    					default_slot.p(get_slot_context(default_slot_template, ctx, /*$$scope*/ ctx[9], null), get_slot_changes(default_slot_template, /*$$scope*/ ctx[9], dirty, null));
+    				if (default_slot.p && dirty & /*$$scope*/ 256) {
+    					default_slot.p(get_slot_context(default_slot_template, ctx, /*$$scope*/ ctx[8], null), get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, null));
     				}
@@ -662,3 +659,3 @@ }
     			if (default_slot) default_slot.d(detaching);
-    			/*div_binding*/ ctx[11](null);
+    			/*div_binding*/ ctx[10](null);
     			dispose();
@@ -669,4 +666,2 @@ }
 
-    const FOCUSABLE_ELEMENTS = "button:not([hidden]):not([disabled]), [href]:not([hidden]), input:not([hidden]):not([type=\"hidden\"]):not([disabled]), select:not([hidden]):not([disabled]), textarea:not([hidden]):not([disabled]), [tabindex=\"0\"]:not([hidden]):not([disabled]), summary:not([hidden]), [contenteditable]:not([hidden]), audio[controls]:not([hidden]), video[controls]:not([hidden])";
-
     function instance$2($$self, $$props, $$invalidate) {
@@ -676,25 +671,12 @@ let { initialFocusElement } = $$props;
     	let ref;
-    	let mounted = false;
-    	let focusableChildren;
-    	let firstFocusableChild;
-    	let lastFocusableChild;
+    	let tabbableChildren;
+    	let firstTabbableChild;
+    	let lastTabbableChild;
     	let returnFocusElem;
 
-    	beforeUpdate(() => {
-    		if (!mounted) {
-    			// `beforeUpdate` runs before `onMount`, so it's the safest place to set the
-    			// previously focused element (i.e. the element that invoked the dialog). This is
-    			// especially important when an element in the dialog content contains the `autofocus`
-    			// attribute. In this scenario, the browser sets `document.activeElement` to the
-    			// `autofocus` element as soon as the dialog mounts to the DOM, before we can capture
-    			// the previously focused element.
-    			returnFocusElem = returnFocusElement || document.activeElement;
-    		}
-    	});
-
     	onMount(async () => {
-    		mounted = true;
-    		focusableChildren = ref.querySelectorAll(FOCUSABLE_ELEMENTS);
-    		firstFocusableChild = focusableChildren[0];
-    		lastFocusableChild = focusableChildren[focusableChildren.length - 1];
+    		returnFocusElem = returnFocusElement || document.activeElement;
+    		tabbableChildren = [...ref.querySelectorAll("*")].filter(node => node.tabIndex >= 0);
+    		firstTabbableChild = tabbableChildren[0];
+    		lastTabbableChild = tabbableChildren[tabbableChildren.length - 1];
 
@@ -707,3 +689,3 @@ // Wait for children to mount before trying to focus `initialFocusElement`
     		} else {
-    			const initialFocusElem = ref.querySelector("[autofocus]") || firstFocusableChild;
+    			const initialFocusElem = ref.querySelector("[autofocus]") || firstTabbableChild;
     			initialFocusElem.focus();
@@ -726,10 +708,10 @@ }
     			// Handle shift + tab
-    			if (document.activeElement === firstFocusableChild) {
+    			if (document.activeElement === firstTabbableChild) {
     				event.preventDefault();
-    				lastFocusableChild.focus();
+    				lastTabbableChild.focus();
     			}
     		} else {
-    			if (document.activeElement === lastFocusableChild) {
+    			if (document.activeElement === lastTabbableChild) {
     				event.preventDefault();
-    				firstFocusableChild.focus();
+    				firstTabbableChild.focus();
     			}
@@ -750,3 +732,3 @@ }
     		if ("returnFocusElement" in $$props) $$invalidate(3, returnFocusElement = $$props.returnFocusElement);
-    		if ("$$scope" in $$props) $$invalidate(9, $$scope = $$props.$$scope);
+    		if ("$$scope" in $$props) $$invalidate(8, $$scope = $$props.$$scope);
     	};
@@ -759,6 +741,5 @@
     		returnFocusElement,
-    		mounted,
-    		focusableChildren,
-    		firstFocusableChild,
-    		lastFocusableChild,
+    		tabbableChildren,
+    		firstTabbableChild,
+    		lastTabbableChild,
     		returnFocusElem,
@@ -765,0 +746,0 @@ $$scope,

package.json

 {
   "name": "svelte-accessible-dialog",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "An accessible dialog component for Svelte apps",
@@ -17,3 +17,3 @@ "author": "Reece Lucas <[e-mail]>",
     "build": "rollup -c",
-    "test": "jest src/__tests__/",
+    "test": "BABEL_ENV=test jest src/__tests__/",
     "test:watch": "jest test --watch",
@@ -20,0 +20,0 @@ "test:cover": "yarn test --coverage",

No alert changes

Worsened metrics

Total package byte prevSize

102877

decreased by-2.97%

Lines of code

2632

decreased by-1.42%

No dependency changes