@featherds/dialog - npm Package Compare versions

Comparing version 0.9.2 to 0.9.3

dist/app.es.js

@@ -26,6 +26,7 @@ var __defProp = Object.defineProperty;
 var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
-    sfc[key] = val;
+    target[key] = val;
   }
-  return sfc;
+  return target;
 };
@@ -66,3 +67,3 @@ const _sfc_main$2 = {
     addFocusTrapEvents() {
-      document.addEventListener("focus", this.trapFocus, true);
+      document.addEventListener("blur", this.trapFocus, true);
       if (this.$refs.content) {
@@ -81,3 +82,5 @@ this.attemptToFocusFirst(this.$refs.content);
       if (firstFocus && firstFocus.focus) {
-        firstFocus.focus();
+        this.$nextTick(() => {
+          firstFocus.focus();
+        });
       } else {
@@ -89,3 +92,3 @@ this.focusFirstDescendant(el);
       if (typeof document !== "undefined")
-        document.removeEventListener("focus", this.trapFocus, true);
+        document.removeEventListener("blur", this.trapFocus, true);
     },
@@ -121,16 +124,36 @@ focusFirstDescendant(element) {
     },
-    trapFocus(event) {
+    trapFocus() {
       if (this.ignoreUtilFocusChanges) {
         return;
       }
-      if (this.$refs.content.contains(event.target)) {
-        this.lastFocus = event.target;
-      } else {
-        this.focusFirstDescendant(this.$refs.content);
-        if (this.lastFocus === document.activeElement) {
-          this.focusLastDescendant(this.$refs.content);
+      setTimeout(() => {
+        var target = document.activeElement;
+        if (this.$refs.content.contains(target)) {
+          this.lastFocus = target;
+        } else {
+          let position = this.comparePositionInDOM(this.$refs.content, target);
+          switch (position) {
+            case "before":
+              this.focusLastDescendant(this.$refs.content);
+              break;
+            case "after":
+              this.focusFirstDescendant(this.$refs.content);
+              break;
+            case "parent":
+              this.attemptToFocusFirst(this.$refs.content);
+              break;
+          }
+          this.lastFocus = document.activeElement;
         }
-        this.lastFocus = document.activeElement;
-      }
+      }, 0);
     },
+    comparePositionInDOM(a, b) {
+      let result = a.compareDocumentPosition ? a.compareDocumentPosition(b) : a.contains ? (a != b && a.contains(b) && 16) + (a != b && b.contains(a) && 8) + (a.sourceIndex >= 0 && b.sourceIndex >= 0 ? (a.sourceIndex < b.sourceIndex && 4) + (a.sourceIndex > b.sourceIndex && 2) : 1) + 0 : 0;
+      if (result === 2)
+        return "before";
+      if (result === 4)
+        return "after";
+      if (result === 10 || result === 12)
+        return "parent";
+    },
     isFocusable(element) {
@@ -151,2 +174,3 @@ if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute("tabIndex") !== null) {
         case "TEXTAREA":
+        case "IFRAME":
           return true;
@@ -153,0 +177,0 @@ default:

package.json

 {
   "name": "@featherds/dialog",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "publishConfig": {
@@ -12,6 +12,6 @@ "access": "public"
   "dependencies": {
-    "@featherds/composables": "^0.9.2",
-    "@featherds/icon": "^0.9.2",
-    "@featherds/styles": "^0.9.2",
-    "@featherds/utils": "^0.9.2",
+    "@featherds/composables": "^0.9.3",
+    "@featherds/icon": "^0.9.3",
+    "@featherds/styles": "^0.9.3",
+    "@featherds/utils": "^0.9.3",
     "vue": "^3.1.0-0"
@@ -24,3 +24,3 @@ },
   "types": "./src/index.d.ts",
-  "gitHead": "c5b9a591688579921f59e070325aa141c23315f7"
+  "gitHead": "aebb5c7fe38504ab6719aff7007fe42ba940c63e"
 }

src/components/FocusTrap.spec.js

@@ -31,4 +31,4 @@ import { mount, config } from "@vue/test-utils";
     wrapper = getWrapper({ props: { enable: false }, slots });
-    const addEvents = spyOn(wrapper.vm, "addFocusTrapEvents");
-    const removeEvents = spyOn(wrapper.vm, "removeFocusTrapEvents");
+    const addEvents = jest.spyOn(wrapper.vm, "addFocusTrapEvents");
+    const removeEvents = jest.spyOn(wrapper.vm, "removeFocusTrapEvents");
     await wrapper.setProps({ enable: true });
@@ -41,3 +41,3 @@ expect(addEvents).toHaveBeenCalled();
     wrapper = getWrapper({ props: { enable: false }, slots });
-    const focusFirst = spyOn(wrapper.vm, "focusFirstDescendant");
+    const focusFirst = jest.spyOn(wrapper.vm, "focusFirstDescendant");
     await wrapper.setProps({ enable: true });
@@ -48,3 +48,3 @@ expect(focusFirst).toHaveBeenCalled();
     wrapper = getWrapper({ props: { enable: false }, slots });
-    const removeEvents = spyOn(wrapper.vm, "removeFocusTrapEvents");
+    const removeEvents = jest.spyOn(wrapper.vm, "removeFocusTrapEvents");
     wrapper.unmount();
@@ -92,3 +92,3 @@ expect(removeEvents).toHaveBeenCalled();
     describe("trapFocus", () => {
-      it("should set lastFocus to event.target if it's inside content element", () => {
+      it("should set lastFocus to event.target if it's inside content element", (done) => {
         wrapper = getWrapper({ props, slots, attachTo: document.body });
@@ -98,7 +98,19 @@ const vm = wrapper.vm;
         vm.trapFocus({ target: first });
-        expect(vm.lastFocus).toBe(first);
+        setTimeout(() => {
+          expect(vm.lastFocus).toBe(first);
+          done();
+        }, 1);
       });
-      it("should loop focus back to last element", () => {
+      it("should loop focus back to last element if focusing before", () => {
+        jest.useFakeTimers();
         wrapper = getWrapper({ props, slots });
         const vm = wrapper.vm;
+
+        //add an element before
+        var button = document.createElement("BUTTON");
+        button.id = "pre-button";
+        var t = document.createTextNode("Test Button");
+        button.appendChild(t);
+        document.body.appendChild(button);
+
         document.body.appendChild(wrapper.element);
@@ -108,9 +120,45 @@ //focus first element
         vm.lastFocus = first;
+        const butt = document.getElementById("pre-button");
         const last = wrapper.find("#last").element;
-        //try to focus something outside of element
-        vm.trapFocus({ target: document.body });
+
+        //try to focus something before the trap
+        butt.focus();
+        vm.trapFocus();
+
         //should set focus to last
+        jest.runAllTimers();
         expect(vm.lastFocus).toBe(last);
         document.body.removeChild(wrapper.element);
+        document.body.removeChild(butt);
       });
+      it("should loop focus back to first element if focusing after", () => {
+        jest.useFakeTimers();
+        wrapper = getWrapper({ props, slots });
+        const vm = wrapper.vm;
+
+        document.body.appendChild(wrapper.element);
+
+        //add an element after
+        var button = document.createElement("BUTTON");
+        button.id = "post-button";
+        var t = document.createTextNode("Test Button");
+        button.appendChild(t);
+        document.body.appendChild(button);
+
+        //focus last element
+        const first = wrapper.find("#first").element;
+        const butt = document.getElementById("post-button");
+        const last = wrapper.find("#last").element;
+        vm.lastFocus = last;
+
+        //try to focus something after the trap
+        butt.focus();
+        vm.trapFocus();
+
+        //should set focus to first
+        jest.runAllTimers();
+        expect(vm.lastFocus).toBe(first);
+        document.body.removeChild(wrapper.element);
+        document.body.removeChild(butt);
+      });
     });
@@ -117,0 +165,0 @@ describe("focusFirstDescendant", () => {

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

52862

increased by8.43%

Lines of code

898

increased by7.54%

Dependency changes

• Updated@featherds/composables@^0.9.3

• Updated@featherds/icon@^0.9.3

• Updated@featherds/styles@^0.9.3

• Updated@featherds/utils@^0.9.3