ovh · aesteves60 · Nov 24, 2023 · Nov 22, 2023 · Nov 22, 2023 · Nov 23, 2023
@@ -1,8 +1,6 @@
 import type { OdsModalAttribute } from '../interfaces/attributes';
-
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 
-
 const DEFAULT_ATTRIBUTE: OdsModalAttribute = Object.freeze({
   color: ODS_THEME_COLOR_INTENT.info,
   dismissible: true,

@@ -5,6 +5,6 @@ interface OdsModalEvent {
   odsModalOpen: EventEmitter<void>;
 }
 
-export {
+export type {
   OdsModalEvent,
 };
@@ -10,6 +10,6 @@ interface OdsModalMethod {
   open(): Promise<void>;
 }
 
-export {
+export type {
   OdsModalMethod,
 };
@@ -24,8 +24,8 @@ describe('e2e:osds-modal', () => {
     await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
 
     await page.evaluate(() => {
-      const wrapperElement = document.querySelector('osds-modal')?.shadowRoot?.querySelector('.wrapper') as HTMLElement;
-      wrapperElement.style.setProperty('animation', 'none');
+      const modalElement = document.querySelector('osds-modal')?.shadowRoot?.querySelector('.wrapper') as HTMLDialogElement;
+      modalElement.style.setProperty('animation', 'none');
     });
   }
 

@@ -9,7 +9,7 @@ import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
 
 describe('e2e:osds-modal', () => {
-  const baseAttribute = { color: ODS_THEME_COLOR_INTENT.info, dismissible: true, headline: '', masked: false };
+  const baseAttribute = { color: ODS_THEME_COLOR_INTENT.info, dismissible: false, headline: '', masked: false };
   let page: E2EPage;
   let el: E2EElement;
 
@@ -23,8 +23,8 @@ describe('e2e:osds-modal', () => {
     el = await page.find('osds-modal');
 
     await page.evaluate(() => {
-      const wrapperElement = document.querySelector('osds-modal')?.shadowRoot?.querySelector('.wrapper') as HTMLElement;
-      wrapperElement.style.setProperty('animation', 'none');
+      const modalElement = document.querySelector('osds-modal')?.shadowRoot?.querySelector('.wrapper') as HTMLDialogElement;
+      modalElement.style.setProperty('animation', 'none');
     });
   }
 
@@ -195,6 +195,8 @@ describe('e2e:osds-modal', () => {
 
   describe('keyboard navigation', () => {
     let outsideButton: E2EElement;
+    let insideModalButton1: E2EElement;
+    let insideModalButton2: E2EElement;
 
     beforeEach(async() => {
       page = await newE2EPage();
@@ -209,23 +211,42 @@ describe('e2e:osds-modal', () => {
       await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
 
       el = await page.find('osds-modal');
+
+      await el.callMethod('open');
+      await page.waitForChanges();
       outsideButton = await page.find('#outsideButton');
+      insideModalButton1 = await page.find('#insideModalButton1');
+      insideModalButton2 = await page.find('#insideModalButton2');
     });
 
-    it('should have inert attribute on outsideButton when modal is active', async() => {
-      await el.callMethod('open');
+    it('should move focus to first button inside modal on first tab press', async() => {
+      await page.keyboard.press('Tab');
+      await page.waitForChanges();
+
+      const focusedElementId = await page.evaluate(() => document.activeElement?.id);
+      expect(focusedElementId).toBe('insideModalButton1');
+    });
+
+    it('should keep focus within modal when open', async() => {
+      for (let i = 0; i < 10; i++) {
+        await page.keyboard.press('Tab');
+      }
       await page.waitForChanges();
 
-      const inert = outsideButton.getAttribute('inert');
-      expect(inert).not.toBeNull();
+      const focusedElementId = await page.evaluate(() => document.activeElement?.closest('osds-modal') ? document.activeElement.id : null);
+      expect(focusedElementId).not.toBeNull();
     });
 
-    it('should not have inert attribute on outsideButton when modal is closed', async() => {
+    it('should return focus to the outside button if modal is closed', async() => {
       await el.callMethod('close');
       await page.waitForChanges();
 
-      const inert = outsideButton.getAttribute('inert');
-      expect(inert).toBeNull();
+      await page.click('body');
+      await page.keyboard.press('Tab');
+      await page.waitForChanges();
+
+      const focusedElementId = await page.evaluate(() => document.activeElement?.id);
+      expect(focusedElementId).toBe('outsideButton');
     });
   });
 });
@@ -35,7 +35,10 @@
   }
 
   .wrapper {
+    position: absolute;
     z-index: 1;
+    outline: none;
+    border: none;
     overflow: hidden;
     animation: modal-appear 0.2s ease-in-out;
 

@@ -8,7 +8,6 @@ import { newSpecPage } from '@stencil/core/testing';
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 import { OsdsModal } from './osds-modal';
 
-
 describe('spec:osds-modal', () => {
   const baseAttribute = { color: ODS_THEME_COLOR_INTENT.info, dismissible: true, headline: '', masked: false };
   let page: SpecPage;
@@ -24,7 +23,7 @@ describe('spec:osds-modal', () => {
 
     page = await newSpecPage({
       components: [OsdsModal],
-      html: `<osds-modal ${odsStringAttributes2Str(stringAttributes)}>My Modal</osds-modal>`,
+      html: `<osds-modal ${odsStringAttributes2Str(stringAttributes)}>Modal</osds-modal>`,
     });
 
     root = page.root;

@@ -1,23 +1,24 @@
 import type { OdsModalAttribute } from './interfaces/attributes';
 import type { OdsModalEvent } from './interfaces/events';
-
+import type { OdsModalMethod } from './interfaces/methods';
+import type { EventEmitter } from '@stencil/core';
 import { ODS_THEME_COLOR_INTENT, ODS_THEME_TYPOGRAPHY_SIZE } from '@ovhcloud/ods-common-theming';
+import { ODS_BUTTON_VARIANT } from '@ovhcloud/ods-component-button';
 import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-component-icon';
 import { ODS_TEXT_LEVEL } from '@ovhcloud/ods-component-text';
-import { Component, Element, Host, Method, Prop, Watch, h, Event, EventEmitter } from '@stencil/core';
-
+import { Component, Element, Event, Host, Listen, Method, Prop, Watch, h } from '@stencil/core';
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
-import { OdsModalMethod } from './interfaces/methods';
 
 /**
  * @slot (unnamed) - Modal content
  */
 @Component({
-  tag: 'osds-modal',
-  styleUrl: 'osds-modal.scss',
   shadow: true,
+  styleUrl: 'osds-modal.scss',
+  tag: 'osds-modal',
 })
 export class OsdsModal implements OdsModalAttribute, OdsModalMethod, OdsModalEvent {
+  modal: HTMLDialogElement | undefined = undefined;
   @Element() el!: HTMLElement;
 
   /** @see OdsModalAttributes.color */
@@ -30,14 +31,37 @@ export class OsdsModal implements OdsModalAttribute, OdsModalMethod, OdsModalEve
   @Prop({ reflect: true }) headline?: string = DEFAULT_ATTRIBUTE.headline;
 
   /** @see OdsModalAttributes.masked */
-  @Prop({ reflect: true, mutable: true }) masked?: boolean = DEFAULT_ATTRIBUTE.masked;
+  @Prop({ mutable: true, reflect: true }) masked?: boolean = DEFAULT_ATTRIBUTE.masked;
 
   /** @see OdsModalEvents.odsModalOpen */
   @Event() odsModalOpen!: EventEmitter<void>;
 
   /** @see OdsModalEvents.odsModalClose */
   @Event() odsModalClose!: EventEmitter<void>;
 
+  @Listen('keydown', { target: 'window' })
+  handleKeyDown(event: KeyboardEvent): void {
+    console.log(document.activeElement);
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      event.preventDefault();
+      if (this.modal?.open && this.dismissible) {
+        this.close();
+      }
+    }
+  }
+
+  @Watch('masked')
+  handleShownState(): void {
+    if (!this.modal) {
+      return;
+    }
+    if (this.masked) {
+      return this.modal.close?.();
+    }
+    return this.modal.showModal?.();
+  }
+
   /**
    * @see OdsModalMethods.close
    */
@@ -56,40 +80,25 @@ export class OsdsModal implements OdsModalAttribute, OdsModalMethod, OdsModalEve
     this.odsModalOpen.emit();
   }
 
-  @Watch('masked')
-  watchOpenedStateHandler(masked: boolean) {
-    this.inertBodyChildren(masked);
-  }
-
-  inertBodyChildren(masked = false) {
-    const directChildren = Array.from(document.body.children);
-    for (const child of directChildren) {
-      if (child !== this.el && child.nodeName !== 'SCRIPT') {
-        if (!masked) {
-          child.setAttribute('inert', '');
-        } else {
-          child.removeAttribute('inert');
-        }
-      }
-    }
-  }
-
-  componentWillLoad(): void {
-    document.body.appendChild(this.el);
-    this.watchOpenedStateHandler(this.masked ?? false);
+  componentDidLoad(): void {
+    this.handleShownState();
   }
 
-  render() {
+  render(): JSX.Element {
     const { color, headline, dismissible, masked } = this;
 
     return (
       <Host masked={masked}>
         <div class="backdrop"></div>
 
-        <div class="wrapper">
+        <dialog
+          class="wrapper"
+          ref={(el?: HTMLElement | null): void => {
+            this.modal = el as HTMLDialogElement;
+          }}>
           <div class="header">
             {dismissible && (
-              <osds-button onClick={() => this.close()} color={color} circle={true} ghost={true}>
+              <osds-button onClick={(): Promise<void> => this.close()} color={color} circle variant={ODS_BUTTON_VARIANT.ghost}>
                 <osds-icon ariaName={ODS_ICON_NAME.CLOSE + ' icon'} name={ODS_ICON_NAME.CLOSE} size={ODS_ICON_SIZE.sm} color={color}></osds-icon>
               </osds-button>
             )}
@@ -112,7 +121,7 @@ export class OsdsModal implements OdsModalAttribute, OdsModalMethod, OdsModalEve
               <slot name="actions"></slot>
             </div>
           </div>
-        </div>
+        </dialog>
       </Host>
     );
   }

@@ -3,12 +3,10 @@
 
 @mixin osds-modal-theme-color-variant-default() {
   @include ods-and-all-hue-foreach-theme-color((
-          color: '800',
-          background-color: '100'
+    color: '800',
+    background-color: '100'
   )) using($colors) {
     @include osds-modal-on-selected-host {
-      // color: map_get($colors, color);
-
       .wrapper {
         .header {
           background-color: map_get($colors, background-color);
@@ -30,6 +28,10 @@
 
     .wrapper {
       background: #fff;
+
+      &::backdrop {
+        opacity: 0;
+      }
     }
   }
 

@@ -17,8 +17,8 @@
         }
 
         .wrapper {
-            margin: var(--ods-size-04);
             border-radius: var(--ods-size-04);
+            padding: 0;
             width: 70%;
             min-width: 50%;
             max-width: clamp(36rem, 70%, 70%);

@@ -35,7 +35,7 @@
     id="modal-1"
     color="info"
     headline="On Vous Héberge ?"
-    dismissible="true"
+    dismissible="false"
     masked="true"
   >
     <osds-text color="text">