[CHUX-295] Force ec-modal to trap focus (#1910)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "main": "src/main.ts",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

src/components/ec-modal/ec-modal.spec.ts

@@ -45,6 +45,22 @@ describe('EcModal', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
+  it('should remove focus trap activation interval on unmount', () => {
+    const wrapper = mountModal(
+      { show: true },
+      {
+        slots: {
+          main: '<p>Before we can process your application we need you to upload your management accounts. You can do this now or leave it for later.</p>',
+        },
+      },
+    );
+
+    const clearIntervalSpy = vi.spyOn(global, 'clearInterval');
+    wrapper.unmount();
+
+    expect(clearIntervalSpy).toHaveBeenCalledTimes(1);
+  });
+
   it('should render with custom attributes', () => {
     const wrapper = mountModal({
       show: true,

src/components/ec-modal/ec-modal.vue

@@ -188,7 +188,9 @@ function getFocusTrapOptions(): UseFocusTrapOptions {
   return options;
 }
 
-const { deactivate } = useFocusTrap(focusTrapTarget, getFocusTrapOptions());
+const { deactivate, activate } = useFocusTrap(focusTrapTarget, getFocusTrapOptions());
+const focusTrapInterval = setInterval(() => activate(), 300);
+
 watch(() => focusTrapTarget.value, (targetEl) => {
   if (!targetEl) {
     deactivate();
@@ -219,6 +221,7 @@ function onKeyUp(e: KeyboardEvent) {
 }
 onBeforeUnmount(() => {
   document.removeEventListener('keyup', onKeyUp);
+  clearInterval(focusTrapInterval);
 });
 
 // modal footer