@1024pix/pix-ui 17.2.1 → 18.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Pix-UI Changelog
 
+## v18.0.0 (01/09/2022)
+
+
+### :bug: Correction
+- [#246](https://github.com/1024pix/pix-ui/pull/246) [BUGFIX] Mettre le focus sur le premier élement où est utiliser le `trap-focus`.
+
 ## v17.2.1 (31/08/2022)
 
 

package/addon/components/pix-modal.hbs

@@ -1,7 +1,7 @@
 <div
-  class="pix-modal__overlay"
+  class="pix-modal__overlay {{unless @showModal ' pix-modal__overlay--hidden'}}"
   {{on "click" this.closeAction}}
-  {{trap-focus}}
+  {{trap-focus @showModal}}
   {{on-escape-action this.closeAction}}
 >
   <div

package/addon/components/pix-sidebar.hbs

@@ -1,7 +1,7 @@
 <div
   class="pix-sidebar__overlay {{unless @showSidebar ' pix-sidebar__overlay--hidden'}}"
   {{on "click" this.closeAction}}
-  {{trap-focus}}
+  {{trap-focus @showSidebar}}
   {{on-escape-action this.closeAction}}
 >
   <div

package/addon/styles/_pix-modal.scss

@@ -7,6 +7,12 @@
   right: 0;
   top: 0;
   z-index: 1000;
+  transition: all .3s ease-in-out;
+
+  &--hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
 }
 
 $modal-padding: 24px;

package/app/modifiers/trap-focus.js

@@ -1,45 +1,25 @@
 import { modifier } from 'ember-modifier';
 
-export default modifier(function trapFocus(element) {
-  const [firstFocusableElement] = findFocusableElements(element);
-
-  firstFocusableElement.focus();
-
-  function handleKeyDown(event) {
-    const TAB_KEY = 9;
-    const focusableElements = findFocusableElements(element);
-    const [firstFocusableElement] = focusableElements;
-    const lastFocusableElement = focusableElements[focusableElements.length - 1];
-
-    if (event.keyCode !== TAB_KEY) {
-      return;
-    }
+let sourceActiveElement = null;
 
-    function handleBackwardTab() {
-      if (document.activeElement === firstFocusableElement) {
-        event.preventDefault();
-        lastFocusableElement.focus();
-      }
-    }
-
-    function handleForwardTab() {
-      if (document.activeElement === lastFocusableElement) {
-        event.preventDefault();
-        firstFocusableElement.focus();
-      }
-    }
+export default modifier(function trapFocus(element, [isOpen]) {
+  const [firstFocusableElement] = findFocusableElements(element);
 
-    if (event.shiftKey) {
-      handleBackwardTab();
-    } else {
-      handleForwardTab();
-    }
+  if (isOpen) {
+    sourceActiveElement = document.activeElement;
+    focusElement(firstFocusableElement, element);
+  } else {
+    focusElement(sourceActiveElement, element);
   }
 
-  element.addEventListener('keydown', handleKeyDown);
+  element.addEventListener('keydown', (event) => {
+    handleKeyDown(event, element);
+  });
 
   return () => {
-    element.removeEventListener('keydown', handleKeyDown);
+    element.removeEventListener('keydown', (event) => {
+      handleKeyDown(event, element);
+    });
   };
 });
 
@@ -50,3 +30,73 @@ function findFocusableElements(element) {
     ),
   ].filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
 }
+
+function focusElement(elementToFocus, element) {
+  let focusOnce = false;
+
+  const handleTransitionEnd = () => {
+    if (!focusOnce) {
+      elementToFocus.focus();
+      focusOnce = true;
+    }
+  };
+
+  if (hasTransitionDuration(element)) {
+    element.addEventListener('transitionend', handleTransitionEnd);
+  } else if (hasAnimationDuration(element)) {
+    element.addEventListener('animationend', handleTransitionEnd);
+  } else {
+    elementToFocus.focus();
+  }
+
+  return () => {
+    if (hasTransitionDuration(element)) {
+      element.removeEventListener('transitionend', handleTransitionEnd);
+    } else if (hasAnimationDuration(element)) {
+      element.removeEventListener('animationend', handleTransitionEnd);
+    }
+  };
+}
+
+function hasTransitionDuration(element) {
+  return hasDurationByKey(element, 'transition-duration');
+}
+
+function hasAnimationDuration(element) {
+  return hasDurationByKey(element, 'animation-duration');
+}
+
+function hasDurationByKey(element, key) {
+  return !['', '0s'].includes(getComputedStyle(element, null).getPropertyValue(key));
+}
+
+function handleKeyDown(event, element) {
+  const TAB_KEY = 9;
+  const focusableElements = findFocusableElements(element);
+  const [firstFocusableElement] = focusableElements;
+  const lastFocusableElement = focusableElements[focusableElements.length - 1];
+
+  if (event.keyCode !== TAB_KEY) {
+    return;
+  }
+
+  const handleBackwardTab = () => {
+    if (document.activeElement === firstFocusableElement) {
+      event.preventDefault();
+      lastFocusableElement.focus();
+    }
+  };
+
+  const handleForwardTab = () => {
+    if (document.activeElement === lastFocusableElement) {
+      event.preventDefault();
+      firstFocusableElement.focus();
+    }
+  };
+
+  if (event.shiftKey) {
+    handleBackwardTab();
+  } else {
+    handleForwardTab();
+  }
+}

package/app/stories/pix-modal.stories.js

@@ -3,22 +3,23 @@ import { hbs } from 'ember-cli-htmlbars';
 export const Template = (args) => {
   return {
     template: hbs`
-      <PixModal @title={{this.title}} @onCloseButtonClick={{onCloseButtonClick}}>
-        <:content>
-          <p>
-            Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et
-            de l'écran. Elle est en général associée à une question à laquelle il est impératif que l'utilisateur
-            réponde avant de poursuivre, ou de modifier quoi que ce soit. La fenêtre modale a pour propos : d'obtenir
-            des informations de l'utilisateur (ces informations sont nécessaires pour réaliser une opération) ; de
-            fournir une information à l'utilisateur (ce dernier doit en prendre connaissance avant de pouvoir continuer
-            à utiliser l'application).
-          </p>
-        </:content>
-        <:footer>
-          <PixButton @backgroundColor="transparent-light" @isBorderVisible="true">Annuler</PixButton>
-          <PixButton>Valider</PixButton>
-        </:footer>
-      </PixModal>
+    <PixModal @showModal={{showModal}} @title={{this.title}} @onCloseButtonClick={{fn (mut showModal) (not showModal)}} >
+      <:content>
+        <p>
+          Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et
+          de l'écran. Elle est en général associée à une question à laquelle il est impératif que l'utilisateur
+          réponde avant de poursuivre, ou de modifier quoi que ce soit. La fenêtre modale a pour propos : d'obtenir
+          des informations de l'utilisateur (ces informations sont nécessaires pour réaliser une opération) ; de
+          fournir une information à l'utilisateur (ce dernier doit en prendre connaissance avant de pouvoir continuer
+          à utiliser l'application).
+        </p>
+      </:content>
+      <:footer>
+        <PixButton @backgroundColor="transparent-light" @isBorderVisible="true" @triggerAction={{fn (mut showModal) (not showModal)}}>Annuler</PixButton>
+        <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Valider</PixButton>
+      </:footer>
+    </PixModal>
+    <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Ouvrir la modale</PixButton>
     `,
     context: args,
   };
@@ -26,10 +27,9 @@ export const Template = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {
+  showModal: true,
   title: "Qu'est-ce qu'une modale ?",
-  onCloseButtonClick: () => {
-    alert('Action : fermer modale');
-  },
+  onCloseButtonClick: () => {},
 };
 
 export const argTypes = {
@@ -45,4 +45,14 @@ export const argTypes = {
     type: { name: 'function', required: true },
     defaultValue: null,
   },
+  showModal: {
+    name: 'showModal',
+    description: "Gérer l'ouverture de la modale",
+    type: { name: 'boolean', required: false },
+    control: { type: 'boolean' },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
 };

package/app/stories/pix-modal.stories.mdx

@@ -57,4 +57,4 @@ Ce composant possède deux `yield` :
 
 ## Arguments
 
-<ArgsTable story="PixModal" />
+<ArgsTable story="Default" />

package/app/stories/pix-sidebar.stories.js

@@ -3,7 +3,6 @@ import { hbs } from 'ember-cli-htmlbars';
 export const Template = (args) => {
   return {
     template: hbs`
-      <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Ouvrir la sidebar</PixButton>
       <PixSidebar @showSidebar={{showSidebar}} @title={{title}} @onClose={{fn (mut showSidebar) (not showSidebar)}}>
         <:content>
           <p>
@@ -18,6 +17,7 @@ export const Template = (args) => {
           </div>
         </:footer>
       </PixSidebar>
+      <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Ouvrir la sidebar</PixButton>
     `,
     context: args,
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "17.2.1",
+  "version": "18.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"