fix(image-viewer): DLT-3456 trap focus within the modal via v-dt-focustrap directive (#1313)

Author: paulojreis-dialpad

apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/popover-dark.png

@@ -1,4 +1,6 @@
 import { mount } from '@vue/test-utils';
+import { DtFocustrapDirective } from '@/directives/focustrap_directive';
+import { flushPromises } from '@/common/utils';
 import DtImageViewer from './ImageViewer.vue';
 
 const baseProps = {
@@ -23,10 +25,12 @@ describe('DtImageViewer Tests', () => {
     wrapper = mount(DtImageViewer, {
       props: { ...baseProps, ...mockProps },
       global: {
+        plugins: [DtFocustrapDirective],
         stubs: {
           teleport: true,
         },
       },
+      attachTo: document.body,
     });
 
     imageViewerPreview = wrapper.find('[data-qa="dt-image-viewer-preview"]');
@@ -38,6 +42,7 @@ describe('DtImageViewer Tests', () => {
   });
 
   afterEach(() => {
+    wrapper.unmount();
     mockProps = {};
   });
 
@@ -46,7 +51,7 @@ describe('DtImageViewer Tests', () => {
 
     imageViewerFull = wrapper.find('[data-qa="dt-image-viewer-full"]');
     fullImage = imageViewerFull.find('img');
-    closeButton = wrapper.find('[data-qa="dt-image-viewer-close-btn"');
+    closeButton = wrapper.find('[data-qa="dt-image-viewer-close-btn"]');
     overlay = wrapper.find('[data-qa="dt-modal"]');
   };
 
@@ -92,6 +97,23 @@ describe('DtImageViewer Tests', () => {
     });
   });
 
+  describe('Focus trapping', () => {
+    it('keeps focus trapped inside the open modal (Tab is intercepted)', async () => {
+      await _openModal();
+      await flushPromises();
+
+      const closeEl = wrapper.find('[data-qa="dt-image-viewer-close-btn"]').element;
+      closeEl.focus();
+      expect(document.activeElement).toBe(closeEl);
+
+      const tabEvent = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true });
+      overlay.element.dispatchEvent(tabEvent);
+
+      // v-dt-focustrap intercepts Tab at the boundary so focus cannot escape the modal.
+      expect(tabEvent.defaultPrevented).toBe(true);
+    });
+  });
+
   describe('Interactivity Tests', () => {
     describe('As an image preview', () => {
       it('should open on click', async () => {

apps/dialtone-documentation/docs/.vuepress/public/assets/images/components/popover-light.png

@@ -18,6 +18,7 @@
       :to="appendTo"
     >
       <div
+        v-dt-focustrap="{ active: isOpen, initialFocus: false, restoreFocus: false }"
         :aria-hidden="!isOpen ? 'true' : 'false'"
         class="d-modal"
         data-qa="dt-modal"
@@ -72,7 +73,6 @@
 </template>
 
 <script>
-import Modal from '@/common/mixins/modal';
 import ModeMixin from '@/common/mixins/mode';
 import { returnFirstEl } from '@/common/utils';
 import { EVENT_KEYNAMES } from '@/common/constants';
@@ -90,7 +90,7 @@ export default {
     DtIconClose,
   },
 
-  mixins: [Modal, ModeMixin],
+  mixins: [ModeMixin],
 
   props: {
     /**
@@ -181,14 +181,12 @@ export default {
         },
 
         keydown: event => {
+          // Tab focus trapping is handled by the v-dt-focustrap directive on the modal.
           switch (event.code) {
             case EVENT_KEYNAMES.esc:
             case EVENT_KEYNAMES.escape:
               this.close();
               break;
-            case EVENT_KEYNAMES.tab:
-              this.trapFocus(event);
-              break;
           }
         },
       };
@@ -252,12 +250,6 @@ export default {
     focusAfterOpen () {
       returnFirstEl(this.$refs.closeImage?.$el)?.focus();
     },
-
-    trapFocus (e) {
-      if (this.isOpen) {
-        this.focusTrappedTabPress(e);
-      }
-    },
   },
 };
 </script>