@1024pix/pix-ui 18.0.1 → 18.1.0

package/.github/workflows/auto-merge.yml

@@ -4,9 +4,13 @@ on:
   pull_request:
     types:
       - labeled
+      - unlabeled
   check_suite:
     types:
       - completed
+  status:
+    types:
+      - success
 
 permissions: write-all
 
@@ -14,13 +18,6 @@ jobs:
   automerge:
     runs-on: ubuntu-latest
     steps:
-      - name: automerge
-        uses: "pascalgn/automerge-action@v0.14.3"
-        env:
-          GITHUB_TOKEN: "${{ github.token }}"
-          MERGE_LABELS: ":rocket: Ready to Merge"
-          MERGE_COMMIT_MESSAGE: "pull-request-title"
-          UPDATE_LABELS: ":rocket: Ready to Merge"
-          UPDATE_METHOD: "rebase"
-          MERGE_FORKS: "false"
-          LOG: "TRACE"
+      - uses: 1024pix/pix-actions/auto-merge@v0
+        with:
+          auto_merge_token: "${{ github.token }}"

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Pix-UI Changelog
 
+## 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)
+
+
+### :bug: Correction
+- [#251](https://github.com/1024pix/pix-ui/pull/251) [BUGFIX] Évite de casser les tests d'acceptance des applis (PIX-5619)
+
+### :coffee: Autre
+- [#250](https://github.com/1024pix/pix-ui/pull/250) [CLEANUP] Utilise l'action commune d'automerge
+
 ## v18.0.1 (02/09/2022)
 
 

package/addon/components/pix-modal.hbs

@@ -2,7 +2,7 @@
   class="pix-modal__overlay {{unless @showModal ' pix-modal__overlay--hidden'}}"
   {{on "click" this.closeAction}}
   {{trap-focus @showModal}}
-  {{on-escape-action this.closeAction}}
+  {{on-escape-action @onCloseButtonClick}}
 >
   <div
     class="pix-modal"
@@ -10,14 +10,13 @@
     aria-labelledby="modal-title"
     aria-describedby="modal-content"
     aria-modal="true"
-    {{on "click" this.stopPropagation}}
     ...attributes
   >
     <header class="pix-modal__header">
       <h1 id="modal-title" class="pix-modal__title">{{@title}}</h1>
       <PixIconButton
         @icon="xmark"
-        @triggerAction={{this.closeAction}}
+        @triggerAction={{@onCloseButtonClick}}
         @ariaLabel="Fermer"
         @size="small"
         @withBackground={{true}}

package/addon/components/pix-modal.js

@@ -11,14 +11,13 @@ export default class PixModal extends Component {
   }
 
   @action
-  stopPropagation(event) {
-    event.stopPropagation();
+  closeAction(event) {
+    if (this.args.onCloseButtonClick && this.isClickOnOverlay(event)) {
+      this.args.onCloseButtonClick(event);
+    }
   }
 
-  @action
-  closeAction(params) {
-    if (this.args.onCloseButtonClick) {
-      this.args.onCloseButtonClick(params);
-    }
+  isClickOnOverlay(event) {
+    return event.target.classList.contains('pix-modal__overlay');
   }
 }

package/addon/components/pix-sidebar.hbs

@@ -2,29 +2,28 @@
   class="pix-sidebar__overlay {{unless @showSidebar ' pix-sidebar__overlay--hidden'}}"
   {{on "click" this.closeAction}}
   {{trap-focus @showSidebar}}
-  {{on-escape-action this.closeAction}}
+  {{on-escape-action @onClose}}
 >
   <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"
-    {{on "click" this.stopPropagation}}
     ...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={{this.closeAction}}
+        @triggerAction={{@onClose}}
         @ariaLabel="Fermer"
         @size="small"
         @withBackground={{true}}
         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) {
@@ -11,14 +12,17 @@ export default class PixSidebar extends Component {
   }
 
   @action
-  stopPropagation(event) {
-    event.stopPropagation();
+  closeAction(event) {
+    if (this.args.onClose && this.isClickOnOverlay(event)) {
+      this.args.onClose(event);
+    }
   }
 
-  @action
-  closeAction(params) {
-    if (this.args.onClose) {
-      this.args.onClose(params);
-    }
+  isClickOnOverlay(event) {
+    return event.target.classList.contains('pix-sidebar__overlay');
+  }
+
+  get id() {
+    return uniqueId();
   }
 }

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-sidebar.stories.js

@@ -12,12 +12,14 @@ export const Template = (args) => {
         </:content>
         <:footer>
         <div style="display: flex; gap: 8px">
-          <PixButton @backgroundColor="transparent-light" @isBorderVisible="true">Annuler</PixButton>
-          <PixButton>Valider</PixButton>
+          <PixButton @backgroundColor="transparent-light" @isBorderVisible="true" @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Annuler</PixButton>
+          <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Valider</PixButton>
           </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.1",
+  "version": "18.1.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"