refactor(modal): DLT-3262 migrate DtModal to native dialog element (#1179)

Author: francisrupert

packages/dialtone-css/lib/build/less/components/modal.less

@@ -119,13 +119,37 @@
     will-change: visibility, z-index, opacity;
 }
 
+//  $$  DIALOG ELEMENT RESET
+//  ----------------------------------------------------------------------------
+//  When used as a native <dialog>, reset UA styles and hide the native backdrop
+//  since .d-modal itself serves as the visual backdrop overlay.
+//  The :not([open]) rule restores UA hidden behavior that .d-modal's display: flex
+//  would otherwise override.
+:where(dialog).d-modal {
+  margin: 0;
+  color: inherit;
+  border: none;
+  inline-size: auto;
+  block-size: auto;
+  max-inline-size: none;
+  max-block-size: none;
+
+  &:not([open]) {
+    display: none;
+  }
+
+  &::backdrop {
+    background: transparent;
+  }
+}
+
 .d-modal--transparent {
   --modal-backdrop-color-background: var(--d-bgc-transparent);
 
   // If we don't set this the native app header region will override all click events on the modal overlay
   -webkit-app-region: no-drag;
 
-  &[aria-hidden='false'] {
+  &:is([aria-hidden='false'], [open]) {
     position: fixed;
     inset-block-start: 0;
     inset-inline-start: 0;
@@ -169,10 +193,10 @@
 
 //  $$   MAKE THEM APPEAR
 //  ----------------------------------------------------------------------------
-.d-modal[aria-hidden='false'],
-.d-modal[aria-hidden='false'] .d-modal__dialog,
-.d-modal--transparent[aria-hidden='false'],
-.d-modal--transparent[aria-hidden='false'] .d-modal__dialog {
+//  [aria-hidden='false'] — raw HTML usage (div-based)
+//  [open] — native <dialog> element usage
+:is(.d-modal, .d-modal--transparent):is([aria-hidden='false'], [open]),
+:is(.d-modal, .d-modal--transparent):is([aria-hidden='false'], [open]) .d-modal__dialog {
   z-index: var(--zi-modal);
   transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   visibility: visible;

packages/dialtone-vue/components/modal/modal.test.js

@@ -22,6 +22,21 @@ const baseSlots = {};
 let mockProps = {};
 let mockSlots = {};
 
+// Mock native <dialog> methods not supported in JSDOM
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = vi.fn(function () {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.close = vi.fn(function () {
+    this.removeAttribute('open');
+  });
+});
+
+afterAll(() => {
+  delete HTMLDialogElement.prototype.showModal;
+  delete HTMLDialogElement.prototype.close;
+});
+
 describe('DtModal Tests', () => {
   let wrapper;
   let closeBtn;
@@ -47,6 +62,7 @@ describe('DtModal Tests', () => {
   };
 
   beforeEach(() => {
+    vi.clearAllMocks();
     updateWrapper();
   });
 
@@ -56,17 +72,15 @@ describe('DtModal Tests', () => {
     wrapper.unmount();
   });
 
-  afterAll(() => {
-    // Restore RequestAnimationFrame and cancelAnimationFrame
-    global.requestAnimationFrame = undefined;
-    global.cancelAnimationFrame = undefined;
-  });
-
   describe('Presentation Tests', () => {
     it('should render the component', () => {
       expect(wrapper.exists()).toBe(true);
     });
 
+    it('should render using a native dialog element', () => {
+      expect(overlay.element.tagName).toBe('DIALOG');
+    });
+
     it('should render the title content', () => {
       expect(title.exists()).toBe(true);
       expect(title.text()).toEqual(MOCK_MODAL_TITLE);
@@ -94,6 +108,10 @@ describe('DtModal Tests', () => {
       expect(banner.classes(MODAL_BANNER_KINDS[DtModal.props.bannerKind.default])).toBe(true);
     });
 
+    it('Should call showModal when show is true', () => {
+      expect(overlay.element.showModal).toHaveBeenCalled();
+    });
+
     describe('When hideClose prop is true', () => {
       beforeEach(async () => {
         mockProps = { ...mockProps, hideClose: true };
@@ -162,14 +180,20 @@ describe('DtModal Tests', () => {
       expect(wrapper.emitted()[SYNC_EVENT_NAME][0][0]).toBe(false);
     });
 
-    it('Should emit a sync-able update event when escape key is pressed', async () => {
+    it('Should emit a sync-able update event when cancel event fires (escape key)', async () => {
       expect(wrapper.emitted(SYNC_EVENT_NAME)).toBeFalsy();
 
-      await overlay.trigger('keydown', { code: 'Escape' });
+      await overlay.trigger('cancel');
 
       expect(wrapper.emitted()[SYNC_EVENT_NAME].length).toBe(1);
       expect(wrapper.emitted()[SYNC_EVENT_NAME][0][0]).toBe(false);
     });
+
+    it('Should emit keydown event to parent', async () => {
+      await overlay.trigger('keydown', { code: 'Escape' });
+
+      expect(wrapper.emitted().keydown).toBeTruthy();
+    });
   });
 
   describe('Extendability Tests', () => {