feat: create focus trap mixin and add it to modal (#257)

* feat: create focus trap mixin and add it to modal

* feat: remove global focus trap variable

Author: albrechtjohannes

ui/package.json

@@ -40,5 +40,8 @@
   "peerDependencies": {
     "vue": "^2.6.7",
     "fiori-fundamentals": "^1.4.3"
+  },
+  "dependencies": {
+    "focus-trap": "^4.0.2"
   }
 }

ui/src/components/Modal/Modal.vue

@@ -8,6 +8,7 @@
       <ClickAwayContainer
         @clickOutside="clickOutside"
         class="fd-modal"
+        :tabindex="isActive ? -1 : 0"
         :active="isActive"
       >
         <div class="fd-modal__content" role="document">
@@ -44,17 +45,21 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
 // Use these types in order to cast your props. Delete if not needed.
 // import { PropValidator } from "vue/types/options";
 // import { Prop } from "vue/types/options";
 import ClickAwayContainer from "@/components/ClickAwayContainer";
 import { Button } from "@/components/Button";
+import { FocusTrap, mixins } from "@/mixins";
 
-export default Vue.extend({
+export default mixins(FocusTrap).extend({
   name: "FdModal",
   mounted() {
     document.body.appendChild(this.$el);
+    this.initializeFocusTrap(this.$el, {
+      onDeactivate: this.close,
+      initialFocus: ".fd-modal"
+    });
   },
   destroyed() {
     const el = this.$el;
@@ -65,6 +70,13 @@ export default Vue.extend({
       }
     }
   },
+  updated() {
+    if (this.isActive) {
+      this.activateFocusTrap();
+    } else {
+      this.deactivateFocusTrap();
+    }
+  },
   props: {
     active: { type: Boolean, default: false },
     title: { type: String, default: null }

ui/src/components/Modal/__tests__/Modal.test.ts

@@ -0,0 +1,104 @@
+import Vue from "vue";
+import { mount, Wrapper, shallowMount } from "@vue/test-utils";
+import Modal from "../Modal.vue";
+import { FocusTrap } from "@/mixins";
+import createFocusTrap, { Options } from "focus-trap";
+
+jest.mock("focus-trap");
+interface ModalWrapper extends Vue {
+  clickOutside(): void;
+  close(): void;
+  activateFocusTrap(): void;
+  deactivateFocusTrap(): void;
+  initializeFocusTrap(element: Element, options?: Options): void;
+}
+
+describe("Modal", () => {
+  it("renders correctly", () => {
+    const wrapper = mount(Modal, { mixins: [FocusTrap] });
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("should update tabindex when opened", () => {
+    const wrapper = shallowMount(Modal, {
+      mixins: [FocusTrap],
+      propsData: { active: true }
+    });
+
+    expect(wrapper.find(".fd-modal").attributes("tabindex")).toBe("-1");
+  });
+
+  it("should update tabindex when closed", () => {
+    const wrapper = shallowMount(Modal, {
+      mixins: [FocusTrap],
+      propsData: { active: false }
+    });
+
+    expect(wrapper.find(".fd-modal").attributes("tabindex")).toBe("0");
+  });
+
+  it("should initialize focus trap while mounting", () => {
+    const initializeFocusTrapMock = jest.fn();
+
+    const wrapper: Wrapper<ModalWrapper> = shallowMount(Modal, {
+      mixins: [FocusTrap],
+      methods: {
+        initializeFocusTrap: initializeFocusTrapMock
+      }
+    }) as Wrapper<ModalWrapper>;
+
+    expect(initializeFocusTrapMock).toHaveBeenCalledWith(wrapper.element, {
+      initialFocus: ".fd-modal",
+      onDeactivate: wrapper.vm.close
+    });
+  });
+
+  describe("methods", () => {
+    describe("initializeFocusTrap", () => {
+      it("should create trap on given HTML element", () => {
+        const mockElement = document.createElement("div");
+        const wrapper = shallowMount(Modal, {
+          mixins: [FocusTrap]
+        }) as Wrapper<ModalWrapper>;
+
+        wrapper.vm.initializeFocusTrap(mockElement, {});
+
+        expect(createFocusTrap).toHaveBeenCalledWith(mockElement, {});
+      });
+    });
+
+    describe("activateFocusTrap", () => {
+      it("should activate focus trap", () => {
+        const focusTrapMock = {
+          activate: jest.fn(),
+          deactivate: jest.fn()
+        };
+        (<jest.Mock>createFocusTrap).mockReturnValue(focusTrapMock);
+        const wrapper = shallowMount(Modal, {
+          mixins: [FocusTrap]
+        }) as Wrapper<ModalWrapper>;
+
+        wrapper.vm.activateFocusTrap();
+
+        expect(focusTrapMock.activate).toHaveBeenCalled();
+      });
+    });
+
+    describe("deactivateFocusTrap", () => {
+      it("should deactivate focus trap", () => {
+        const focusTrapMock = {
+          activate: jest.fn(),
+          deactivate: jest.fn()
+        };
+        (<jest.Mock>createFocusTrap).mockReturnValue(focusTrapMock);
+        const wrapper = shallowMount(Modal, {
+          mixins: [FocusTrap]
+        }) as Wrapper<ModalWrapper>;
+
+        wrapper.vm.activateFocusTrap();
+
+        expect(focusTrapMock.activate).toHaveBeenCalled();
+      });
+    });
+  });
+});

ui/src/components/Modal/__tests__/__snapshots__/Modal.test.ts.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal renders correctly 1`] = `
+<div
+  aria-hidden="true"
+  class="fd-ui__overlay fd-overlay fd-overlay--modal"
+  name="fade"
+  style="display: none;"
+>
+  <div
+    class="fd-modal"
+    tabindex="0"
+  >
+    <div
+      class="fd-modal__content"
+      role="document"
+    >
+      <div
+        class="fd-modal__header"
+      >
+        <h1
+          class="fd-modal__title"
+        >
+          
+        </h1>
+         
+        <button
+          aria-label="close"
+          class="fd-modal__close fd-button--light"
+        />
+      </div>
+       
+      <div
+        class="fd-modal__body"
+      />
+       
+      <!---->
+    </div>
+  </div>
+</div>
+`;

ui/src/mixins/FocusTrap.ts

@@ -0,0 +1,26 @@
+import Vue from "vue";
+import createFocusTrap, { FocusTrap, Options } from "focus-trap";
+
+export default Vue.extend({
+  data() {
+    return {
+      fdFocusTrap: undefined as FocusTrap | undefined
+    };
+  },
+  methods: {
+    initializeFocusTrap(element: Element, options?: Options): void {
+      const domNode = element as HTMLElement;
+      this.fdFocusTrap = createFocusTrap(domNode, options);
+    },
+    activateFocusTrap(): void {
+      if (typeof this.fdFocusTrap === "undefined") return;
+
+      this.fdFocusTrap.activate();
+    },
+    deactivateFocusTrap(): void {
+      if (typeof this.fdFocusTrap === "undefined") return;
+
+      this.fdFocusTrap.deactivate();
+    }
+  }
+});

ui/src/mixins/index.ts

@@ -6,3 +6,4 @@ export { default as withTargetLocation } from "./withTargetLocation";
 export { default as Compactable } from "./Compactable";
 // @ts-ignore
 export { default as CompactableContainer } from "./CompactableContainer";
+export { default as FocusTrap } from "./FocusTrap";

ui/yarn.lock

@@ -4105,6 +4105,14 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+focus-trap@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-4.0.2.tgz#4ee2b96547c9ea0e4252a2d4b2cca68944194663"
+  integrity sha512-HtLjfAK7Hp2qbBtLS6wEznID1mPT+48ZnP2nkHzgjpL4kroYHg0CdqJ5cTXk+UO5znAxF5fRUkhdyfgrhh8Lzw==
+  dependencies:
+    tabbable "^3.1.2"
+    xtend "^4.0.1"
+
 follow-redirects@^1.0.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
@@ -8777,6 +8785,11 @@ symbol-tree@^3.2.2:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
   integrity sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=
 
+tabbable@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-3.1.2.tgz#f2d16cccd01f400e38635c7181adfe0ad965a4a2"
+  integrity sha512-wjB6puVXTYO0BSFtCmWQubA/KIn7Xvajw0x0l6eJUudMG/EAiJvIUnyNX6xO4NpGrJ16lbD0eUseB9WxW0vlpQ==
+
 [email protected]:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
@@ -9731,7 +9744,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
   integrity sha512-PHyM+sQouu7xspQQwELlGwwd05mXUFqwFYfqPO0cC7x4fxyHnnuetmQr6CjJiafIDoH4MogHb9dOoJzR/Y4rFg==
 
-xtend@^4.0.0, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
   integrity sha1-pcbVMr5lbiPbgg77lDofBJmNY68=