@1024pix/pix-ui 61.4.0 → 62.0.0

package/addon/components/pix-modal.gjs

@@ -36,15 +36,9 @@ export default class PixModal extends Component {
       @onClose={{@onCloseButtonClick}}
       @focusOnClose={{@focusOnClose}}
       @hasCenteredContent={{true}}
+      @labelledBy="modal-title--{{this.id}}"
     >
-      <div
-        class="pix-modal pix-modal--{{this.variant}}"
-        role="dialog"
-        aria-labelledby="modal-title--{{this.id}}"
-        aria-describedby="modal-content--{{this.id}}"
-        aria-modal="true"
-        ...attributes
-      >
+      <div class="pix-modal pix-modal--{{this.variant}}" ...attributes>
         <PixModalHeader
           @id="modal-title--{{this.id}}"
           @title={{@title}}
@@ -55,7 +49,7 @@ export default class PixModal extends Component {
           @onCloseButtonClick={{@onCloseButtonClick}}
         />
 
-        <div id="modal-content--{{this.id}}" class="pix-modal__content">
+        <div class="pix-modal__content">
           {{yield to="content"}}
         </div>
         <div class="pix-modal__footer">

package/addon/components/pix-overlay.gjs

@@ -2,8 +2,7 @@ import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
-import onEscapeAction from '../modifiers/on-escape-action';
-import trapFocus from '../modifiers/trap-focus';
+import modalDialog from '../modifiers/modal-dialog';
 
 export default class PixOverlay extends Component {
   @action
@@ -15,17 +14,41 @@ export default class PixOverlay extends Component {
     }
   }
 
+  /**
+   * A `<dialog>` cancel does not bubble, unlike an `<input type="file">` one when its picker is
+   * dismissed. Without `onClose`, the default action is kept so the user is not trapped inside.
+   */
+  @action
+  onCancel(event) {
+    const isCloseRequestOnOverlay = event.target === event.currentTarget;
+
+    if (!isCloseRequestOnOverlay || !this.args.onClose) {
+      return;
+    }
+
+    event.preventDefault();
+    this.args.onClose(event);
+  }
+
+  @action
+  onDialogClose(event) {
+    if (this.args.isVisible && this.args.onClose) {
+      this.args.onClose(event);
+    }
+  }
+
   <template>
-    <div
-      class="pix-overlay
-        {{unless @isVisible ' pix-overlay--hidden'}}
-        {{if @hasCenteredContent ' pix-overlay--with-centered-content'}}"
+    <dialog
+      class="pix-overlay {{if @hasCenteredContent ' pix-overlay--with-centered-content'}}"
+      aria-labelledby={{@labelledBy}}
+      aria-describedby={{@describedBy}}
       {{on "click" this.onClick}}
-      {{trapFocus @isVisible @focusOnClose}}
-      {{onEscapeAction @onClose}}
+      {{on "cancel" this.onCancel}}
+      {{on "close" this.onDialogClose}}
+      {{modalDialog @isVisible @focusOnClose}}
       ...attributes
     >
       {{yield}}
-    </div>
+    </dialog>
   </template>
 }

package/addon/components/pix-side-panel.gjs

@@ -36,16 +36,9 @@ export default class PixSidePanel extends Component {
       @isVisible={{@showSidePanel}}
       @onClose={{@onClose}}
       @focusOnClose={{@focusOnClose}}
+      @labelledBy="side-panel-title--{{this.id}}"
     >
-      <div
-        class="pix-side-panel pix-side-panel--{{this.variant}}
-          {{unless @showSidePanel ' pix-side-panel--hidden'}}"
-        role="dialog"
-        aria-labelledby="side-panel-title--{{this.id}}"
-        aria-describedby="side-panel-content--{{this.id}}"
-        aria-modal="true"
-        ...attributes
-      >
+      <div class="pix-side-panel pix-side-panel--{{this.variant}}" ...attributes>
         <PixModalHeader
           class="pix-side-panel__header"
           @id="side-panel-title--{{this.id}}"
@@ -56,7 +49,7 @@ export default class PixSidePanel extends Component {
           @onCloseButtonClick={{@onClose}}
         />
 
-        <div id="side-panel-content--{{this.id}}" class="pix-side-panel__content">
+        <div class="pix-side-panel__content">
           {{yield to="content"}}
         </div>
         <div class="pix-side-panel__footer pix-side-panel__footer--{{this.variant}}">

package/addon/modifiers/modal-dialog.js

@@ -0,0 +1,44 @@
+import { modifier } from 'ember-modifier';
+
+const SCROLL_LOCK_CLASS = 'pix-overlay-scroll-lock';
+
+const scrollLockingDialogs = new Set();
+
+function lockPageScrolling(element) {
+  scrollLockingDialogs.add(element);
+  document.body.classList.add(SCROLL_LOCK_CLASS);
+}
+
+function unlockPageScrolling(element) {
+  scrollLockingDialogs.delete(element);
+
+  if (scrollLockingDialogs.size === 0) {
+    document.body.classList.remove(SCROLL_LOCK_CLASS);
+  }
+}
+
+/**
+ * @param {boolean} isOpen
+ * @param {boolean} [focusOnClose=true]
+ */
+export default modifier(function modalDialog(element, [isOpen, focusOnClose = true]) {
+  if (isOpen) {
+    if (!element.open) {
+      element.showModal();
+    }
+
+    lockPageScrolling(element);
+  } else if (element.open) {
+    const hadFocusInside = element.contains(document.activeElement);
+
+    element.close();
+
+    if (focusOnClose === false && hadFocusInside) {
+      document.activeElement?.blur();
+    }
+  }
+
+  return () => {
+    unlockPageScrolling(element);
+  };
+});

package/addon/modifiers/trap-focus.js

@@ -1,8 +1,15 @@
+import { warn } from '@ember/debug';
 import { modifier } from 'ember-modifier';
 
 let sourceActiveElement = null;
 
 export default modifier(function trapFocus(element, [isOpen, focusOnClose = true]) {
+  warn(
+    'trap-focus is deprecated: it only intercepts Tab, so it cannot keep the virtual cursor of a screen reader inside the element. Use PixModal, PixSidePanel or PixOverlay, which rely on a native <dialog> placed in the top layer.',
+    false,
+    { id: 'pix-ui.trap-focus.deprecated' },
+  );
+
   const [firstFocusableElement] = findFocusableElements(element);
 
   if (isOpen) {

package/addon/styles/_pix-modal.scss

@@ -10,6 +10,11 @@
   background-color: var(--pix-neutral-0);
   border-radius: var(--pix-spacing-4x);
   transform: translateX(-50%);
+  animation: fade-out-modal 0.3s ease-out forwards;
+
+  .pix-overlay[open] & {
+    animation: fade-in-modal 0.3s ease-out forwards;
+  }
 
   &--default {
     @extend %pix-shadow-default;
@@ -51,3 +56,23 @@
     }
   }
 }
+
+@keyframes fade-in-modal {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out-modal {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

package/addon/styles/_pix-overlay.scss

@@ -1,19 +1,45 @@
 .pix-overlay {
   position: fixed;
   z-index: 1000;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  margin: 0;
+  padding: 0;
   overflow-y: auto;
-  background-color: rgba(var(--pix-neutral-800-inline), 0.4);
-  transition: all 0.3s ease-in-out;
+  background-color: rgba(var(--pix-neutral-800-inline), 0);
+  border: none;
+  transition:
+    background-color 0.3s ease-out,
+    display 0.3s allow-discrete,
+    overlay 0.3s allow-discrete;
   inset: 0;
 
+  &::backdrop {
+    background-color: transparent;
+  }
+
+  &[open] {
+    background-color: rgba(var(--pix-neutral-800-inline), 0.4);
+  }
+
   &--with-centered-content {
-    display: grid;
     align-items: center;
     padding-block: var(--pix-spacing-4x);
+
+    &[open] {
+      display: grid;
+    }
   }
 
-  &--hidden {
-    visibility: hidden;
-    opacity: 0;
+  @starting-style {
+    &[open] {
+      background-color: rgba(var(--pix-neutral-800-inline), 0);
+    }
   }
 }
+
+.pix-overlay-scroll-lock {
+  overflow: hidden;
+}

package/addon/styles/_pix-side-panel.scss

@@ -3,7 +3,8 @@
 @use 'pix-design-tokens/shadows';
 
 .pix-side-panel__overlay {
-  overflow-x: hidden;
+  overflow: hidden; // fallback for Safari < 16, which ignores the clip value below
+  overflow: clip; // not a scroll container, so focus cannot scroll the sliding panel into place
 }
 
 .pix-side-panel {
@@ -16,15 +17,14 @@
   margin-left: auto;
   background: var(--pix-neutral-0);
   border-radius: var(--pix-spacing-4x) 0 0 var(--pix-spacing-4x);
-  transform: translate(0);
-  transition: transform 0.3s ease-in-out;
+  animation: slide-out-side-panel 0.3s ease-in-out forwards;
 
   @include breakpoints.device-is('tablet') {
     width: 412px;
   }
 
-  &--hidden {
-    transform: translate(100%);
+  .pix-overlay[open] & {
+    animation: slide-in-side-panel 0.3s ease-in-out forwards;
   }
 
   &--default {
@@ -84,3 +84,23 @@
     }
   }
 }
+
+@keyframes slide-in-side-panel {
+  from {
+    transform: translate(100%);
+  }
+
+  to {
+    transform: translate(0);
+  }
+}
+
+@keyframes slide-out-side-panel {
+  from {
+    transform: translate(0);
+  }
+
+  to {
+    transform: translate(100%);
+  }
+}

package/addon/styles/addon.scss

@@ -1,6 +1,8 @@
 @use 'pix-design-tokens';
 @use 'normalize-reset';
 @use 'a11y';
+@use 'trap-focus';
+@use 'pix-overlay';
 @use 'pix-icon';
 @use 'pix-background-header';
 @use 'pix-banner-alert';
@@ -37,7 +39,6 @@
 @use 'pix-checkbox';
 @use 'pix-segmented-control';
 @use 'pix-indicator-card';
-@use 'trap-focus';
 @use 'pix-search-input';
 @use 'pix-toast';
 @use 'toast-example';
@@ -48,7 +49,6 @@
 @use 'pix-app-layout';
 @use 'pix-structure-switcher';
 @use 'pix-code';
-@use 'pix-overlay';
 @use 'pix-tabs';
 @use 'pix-gauge';
 @use 'pix-stepper';

package/app/modifiers/modal-dialog.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/modifiers/modal-dialog';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "61.4.0",
+  "version": "62.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -76,7 +76,7 @@
     "tracked-toolbox": "^2.2.0"
   },
   "devDependencies": {
-    "@1024pix/ember-testing-library": "^3.0.27",
+    "@1024pix/ember-testing-library": "^3.0.40",
     "@1024pix/eslint-plugin": "^2.1.12",
     "@1024pix/stylelint-config": "^5.1.37",
     "@babel/eslint-parser": "^7.26.8",