@1024pix/pix-ui 18.0.2 → 18.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Pix-UI Changelog
 
+## v18.2.0 (16/09/2022)
+
+
+### :rocket: Amélioration
+- [#255](https://github.com/1024pix/pix-ui/pull/255) [FEATURE] Améliorer l'accessibilité de Pix-Modal.
+
+## v18.1.0 (15/09/2022)
+
+
+### :rocket: Amélioration
+- [#253](https://github.com/1024pix/pix-ui/pull/253) [FEATURE] Améliorer de l'accessibilité de Pix-Sidebar.
+
 ## v18.0.2 (06/09/2022)
 
 

package/addon/components/pix-modal.hbs

@@ -7,13 +7,13 @@
   <div
     class="pix-modal"
     role="dialog"
-    aria-labelledby="modal-title"
-    aria-describedby="modal-content"
+    aria-labelledby="modal-title--{{this.id}}"
+    aria-describedby="modal-content--{{this.id}}"
     aria-modal="true"
     ...attributes
   >
     <header class="pix-modal__header">
-      <h1 id="modal-title" class="pix-modal__title">{{@title}}</h1>
+      <h1 id="modal-title--{{this.id}}" class="pix-modal__title">{{@title}}</h1>
       <PixIconButton
         @icon="xmark"
         @triggerAction={{@onCloseButtonClick}}
@@ -23,7 +23,7 @@
         class="pix-modal__close-button"
       />
     </header>
-    <main id="modal-content" class="pix-modal__content">
+    <main id="modal-content--{{this.id}}" class="pix-modal__content">
       {{yield to="content"}}
     </main>
     <footer class="pix-modal__footer">

package/addon/components/pix-modal.js

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import uniqueId from '@1024pix/pix-ui/utils/unique-id';
 
 export default class PixModal extends Component {
   constructor(...args) {
@@ -20,4 +21,8 @@ export default class PixModal extends Component {
   isClickOnOverlay(event) {
     return event.target.classList.contains('pix-modal__overlay');
   }
+
+  get id() {
+    return uniqueId();
+  }
 }

package/addon/components/pix-sidebar.hbs

@@ -7,13 +7,13 @@
   <div
     class="pix-sidebar {{unless @showSidebar ' pix-sidebar--hidden'}}"
     role="dialog"
-    aria-labelledby="sidebar-title"
-    aria-describedby="sidebar-content"
+    aria-labelledby="sidebar-title--{{this.id}}"
+    aria-describedby="sidebar-content--{{this.id}}"
     aria-modal="true"
     ...attributes
   >
     <header class="pix-sidebar__header">
-      <h1 id="sidebar-title" class="pix-sidebar__title">{{@title}}</h1>
+      <h1 id="sidebar-title--{{this.id}}" class="pix-sidebar__title">{{@title}}</h1>
       <PixIconButton
         @icon="xmark"
         @triggerAction={{@onClose}}
@@ -23,7 +23,7 @@
         class="pix-sidebar__close-button"
       />
     </header>
-    <main id="sidebar-content" class="pix-sidebar__content">
+    <main id="sidebar-content--{{this.id}}" class="pix-sidebar__content">
       {{yield to="content"}}
     </main>
     <footer class="pix-sidebar__footer">

package/addon/components/pix-sidebar.js

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import uniqueId from '@1024pix/pix-ui/utils/unique-id';
 
 export default class PixSidebar extends Component {
   constructor(...args) {
@@ -20,4 +21,8 @@ export default class PixSidebar extends Component {
   isClickOnOverlay(event) {
     return event.target.classList.contains('pix-sidebar__overlay');
   }
+
+  get id() {
+    return uniqueId();
+  }
 }

package/addon/styles/_pix-modal.scss

@@ -7,7 +7,7 @@
   right: 0;
   top: 0;
   z-index: 1000;
-  transition: all .3s ease-in-out;
+  transition: all 0.3s ease-in-out;
 
   &--hidden {
     visibility: hidden;

package/addon/styles/_trap-focus.scss

@@ -0,0 +1,3 @@
+.body__trap-focus {
+  overflow: hidden;
+}

package/addon/styles/addon.scss

@@ -28,6 +28,7 @@
 @import 'pix-dropdown';
 @import 'pix-pagination';
 @import 'pix-checkbox';
+@import 'trap-focus';
 
 html {
   font-size: 16px;

package/addon/utils/unique-id.js

@@ -0,0 +1,5 @@
+export default function uniqueId() {
+  return ([3e7] + -1e3 + -4e3 + -2e3 + -1e11).replace(/[0-3]/g, (a) =>
+    ((a * 4) ^ ((Math.random() * 16) >> (a & 2))).toString(16)
+  );
+}

package/app/modifiers/trap-focus.js

@@ -6,9 +6,11 @@ export default modifier(function trapFocus(element, [isOpen]) {
   const [firstFocusableElement] = findFocusableElements(element);
 
   if (isOpen) {
+    preventPageScrolling();
     sourceActiveElement = document.activeElement;
     focusElement(firstFocusableElement, element);
   } else if (sourceActiveElement) {
+    allowPageScrolling();
     focusElement(sourceActiveElement, element);
   }
 
@@ -58,6 +60,14 @@ function focusElement(elementToFocus, element) {
   };
 }
 
+function preventPageScrolling() {
+  document.body.classList.add('body__trap-focus');
+}
+
+function allowPageScrolling() {
+  document.body.classList.remove('body__trap-focus');
+}
+
 function hasTransitionDuration(element) {
   return hasDurationByKey(element, 'transition-duration');
 }

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

@@ -19,8 +19,9 @@ export const Template = (args) => {
         <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Valider</PixButton>
       </:footer>
     </PixModal>
-    <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Ouvrir la modale</PixButton>
-    `,
+    <div style="display:flex; justify-content:center; align-items:center; height:105vh;">
+      <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Ouvrir la modale</PixButton>
+    </div>`,
     context: args,
   };
 };

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

@@ -17,7 +17,9 @@ export const Template = (args) => {
           </div>
         </:footer>
       </PixSidebar>
-      <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Ouvrir la sidebar</PixButton>
+      <div style="display:flex; justify-content:center; align-items:center; height:105vh;">
+        <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}} style="height:45px">Ouvrir la sidebar</PixButton>
+      </div>
     `,
     context: args,
   };

package/package.json

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