@1024pix/pix-ui 18.2.0 → 19.0.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Pix-UI Changelog
 
+## v19.0.1 (04/10/2022)
+
+
+### :rocket: Amélioration
+- [#258](https://github.com/1024pix/pix-ui/pull/258) [FEATURE] Centre la PixModal en hauteur
+- [#257](https://github.com/1024pix/pix-ui/pull/257) [FEATURE] Suppression du `padding` de la Sidebar pour permettre de mieux customiser
+
+### :coffee: Autre
+- [#256](https://github.com/1024pix/pix-ui/pull/256) [BUFGIX] Mettre à jour la page d'utilisation de la PixModal (PIX-5735)
+
+## v19.0.0 (16/09/2022)
+
+
+### :rocket: Amélioration
+- [#252](https://github.com/1024pix/pix-ui/pull/252) [FEATURE] Rendre accessible (a11y) le composant PixMultiSelect (PIX-5555)
+
 ## v18.2.0 (16/09/2022)
 
 

package/addon/components/pix-checkbox.hbs

@@ -1,15 +1,20 @@
 <div class="pix-checkbox">
-  <label
-    class="pix-checkbox__label {{this.labelSizeClass}} {{if @screenReaderOnly 'sr-only'}}"
-    for={{this.id}}
-  >
-    {{this.label}}
-  </label>
   <input
-    id={{this.id}}
+    id={{@id}}
     type="checkbox"
     class="pix-checkbox__input {{if @isIndeterminate ' pix-checkbox__input--indeterminate'}}"
     checked={{@checked}}
     ...attributes
   />
+  <label
+    class="pix-checkbox__label {{this.labelSizeClass}} {{if @screenReaderOnly 'sr-only'}}"
+    for={{@id}}
+  >
+    {{#if (has-block)}}
+      {{yield}}
+    {{else}}
+      yield required to give a label for PixCheckBox
+      {{@id}}.
+    {{/if}}
+  </label>
 </div>

package/addon/components/pix-checkbox.js

@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { htmlSafe } from '@ember/string';
 
 const labelSizeToClass = new Map([
   ['small', 'pix-checkbox__label--small'],
@@ -11,17 +10,9 @@ export default class PixCheckbox extends Component {
   constructor() {
     super(...arguments);
 
-    if (!this.args.label) {
-      throw new Error('ERROR in PixCheckbox component, you must provide @label params');
-    }
-    this.label = htmlSafe(this.args.label);
-  }
-
-  get id() {
     if (!this.args.id || !this.args.id.toString().trim()) {
       throw new Error('ERROR in PixCheckbox component, @id param is not provided');
     }
-    return this.args.id;
   }
 
   get labelSizeClass() {

package/addon/components/pix-multi-select.hbs

@@ -1,35 +1,51 @@
-<div class="pix-multi-select" ...attributes {{on-click-outside this.hideDropDown capture=true}}>
-
-  {{#if this.label}}
-    <label for={{@id}} class="pix-multi-select__label">{{this.label}}</label>
-  {{/if}}
+<div
+  class="pix-multi-select"
+  {{on-click-outside this.hideDropDown}}
+  {{on-arrow-down-up-action this.listId this.showDropDown this.isExpanded}}
+  {{on-escape-action this.hideDropDown @id}}
+>
 
   {{#if @isSearchable}}
-    <label class="pix-multi-select-header {{if this.isBig 'pix-multi-select-header--big'}}">
-
-      <span class="pix-multi-select-header__title">{{@title}}</span>
+    <label
+      for={{@id}}
+      class="pix-multi-select__label{{if @screenReaderOnly ' screen-reader-only'}}"
+    >{{@label}}</label>
+    <span class="pix-multi-select-header">
       <FaIcon @icon="magnifying-glass" class="pix-multi-select-header__search-icon" />
 
       <input
+        class="pix-multi-select-header__search-input"
         id={{@id}}
         type="text"
         name={{@id}}
-        placeholder={{this.placeholder}}
+        placeholder={{this.innerText}}
         autocomplete="off"
         {{on "input" this.updateSearch}}
-        {{on "focus" this.focusDropdown}}
-        class="pix-multi-select-header__search-input"
+        {{on "click" this.toggleDropDown}}
+        aria-expanded={{this.isAriaExpanded}}
+        aria-controls={{this.listId}}
+        aria-haspopup="menu"
+        ...attributes
       />
-
-    </label>
+    </span>
   {{else}}
+    <span
+      id={{this.labelId}}
+      class="pix-multi-select__label{{if @screenReaderOnly ' screen-reader-only'}}"
+    >{{@label}}</span>
+
     <button
+      aria-labelledby={{this.labelId}}
       id={{@id}}
       type="button"
-      class="pix-multi-select-header {{if this.isBig 'pix-multi-select-header--big'}}"
+      aria-expanded={{this.isAriaExpanded}}
+      aria-controls={{this.listId}}
+      aria-haspopup="menu"
+      class="pix-multi-select-header"
       {{on "click" this.toggleDropDown}}
+      ...attributes
     >
-      {{@title}}
+      {{this.innerText}}
       <FaIcon
         class="pix-multi-select-header__dropdown-icon
           {{if this.isExpanded ' pix-multi-select-header__dropdown-icon--expand'}}"
@@ -38,23 +54,25 @@
     </button>
   {{/if}}
 
-  <ul class="pix-multi-select-list {{unless this.isExpanded 'pix-multi-select-list--hidden'}}">
+  <ul
+    class="pix-multi-select-list {{unless this.isExpanded 'pix-multi-select-list--hidden'}}"
+    id={{this.listId}}
+    aria-multiselectable="true"
+    role="menu"
+  >
     {{#if (gt this.results.length 0)}}
       {{#each this.results as |option|}}
-        <li class="pix-multi-select-list__item">
-          <input
-            class="pix-multi-select-list__checkbox
-              {{if @isSearchable ' pix-multi-select-list__checkbox--searchable'}}"
-            type="checkbox"
-            checked={{option.checked}}
-            id={{concat @id "-" option.value}}
-            name={{option.label}}
+        <li class="pix-multi-select-list__item" role="menuitem">
+          <PixCheckbox
+            @id={{concat @id "-" option.value}}
+            @checked={{option.checked}}
             value={{option.value}}
             {{on "change" this.onSelect}}
-          />
-          <label for={{concat @id "-" option.value}}>
+            {{on-enter-action this.hideDropDown @id}}
+            tabindex={{if this.isExpanded "0" "-1"}}
+          >
             {{yield option}}
-          </label>
+          </PixCheckbox>
         </li>
       {{/each}}
     {{else if this.isLoadingOptions}}

package/addon/components/pix-multi-select.js

@@ -26,35 +26,47 @@ export default class PixMultiSelect extends Component {
 
   constructor(...args) {
     super(...args);
-    const { onLoadOptions, selected } = this.args;
+    const { onLoadOptions, id, label, innerText } = this.args;
+
+    const idIsNotDefined = !id || !id.trim();
+    const labelIsNotDefined = !label || !label.trim();
+    const innerTextIsNotDefined = !innerText || !innerText.trim();
+
+    if (idIsNotDefined || labelIsNotDefined || innerTextIsNotDefined) {
+      const missingParams = [];
+
+      if (idIsNotDefined) missingParams.push('@id');
+      if (labelIsNotDefined) missingParams.push('@label');
+      if (innerTextIsNotDefined) missingParams.push('@innerText');
+
+      throw new Error(
+        `ERROR in PixMultiSelect component, ${missingParams.join(', ')} ${
+          missingParams.length > 1 ? 'params are' : 'param is'
+        } necessary`
+      );
+    }
 
     if (onLoadOptions) {
       this.isLoadingOptions = true;
       onLoadOptions().then((options = []) => {
         this.options = options;
-        this._setDisplayedOptions(selected, true);
         this.isLoadingOptions = false;
       });
     } else {
       this.options = [...(this.args.options || [])];
-      this._setDisplayedOptions(selected, true);
     }
   }
 
-  get label() {
-    const labelIsDefined = this.args.label && this.args.label.trim();
-    const idIsNotDefined = this.args.id && !this.args.id.trim();
+  get listId() {
+    return `list-${this.args.id}`;
+  }
 
-    if (labelIsDefined && idIsNotDefined) {
-      throw new Error(
-        'ERROR in PixMultiSelect component, @id param is necessary when giving @label'
-      );
-    }
-    return this.args.label || null;
+  get labelId() {
+    return `label-${this.args.id}`;
   }
 
-  get isBig() {
-    return this.args.size === 'big';
+  get isAriaExpanded() {
+    return this.isExpanded ? 'true' : 'false';
   }
 
   get results() {
@@ -64,8 +76,8 @@ export default class PixMultiSelect extends Component {
     return this.options;
   }
 
-  get placeholder() {
-    const { selected, placeholder } = this.args;
+  get innerText() {
+    const { selected, innerText } = this.args;
     if (selected?.length > 0) {
       const selectedOptionLabels = this.options
         .filter(({ value, label }) => {
@@ -76,7 +88,7 @@ export default class PixMultiSelect extends Component {
         .join(', ');
       return selectedOptionLabels;
     }
-    return placeholder;
+    return innerText;
   }
 
   _setDisplayedOptions(selected, shouldSort) {
@@ -108,8 +120,6 @@ export default class PixMultiSelect extends Component {
       selected = selected.filter((value) => value !== event.target.value);
     }
 
-    this._setDisplayedOptions(selected, false);
-
     if (this.args.onSelect) {
       this.args.onSelect(selected);
     }
@@ -142,13 +152,6 @@ export default class PixMultiSelect extends Component {
     this.isExpanded = false;
   }
 
-  @action
-  focusDropdown() {
-    if (this.args.isSearchable && this.args.showOptionsOnInput) {
-      this.showDropDown();
-    }
-  }
-
   @action
   updateSearch(event) {
     this.searchData = this.args.strictSearch

package/addon/styles/_a11y.scss

@@ -0,0 +1,10 @@
+.screen-reader-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}

package/addon/styles/_form.scss

@@ -13,7 +13,7 @@
 }
 
 @mixin focusWithinFormElement() {
-  &:focus {
+  &:focus-within {
     border-color: $pix-primary;
     box-shadow: inset 0px 0px 0px 0.6px $pix-primary;
     outline: none;

package/addon/styles/_pix-checkbox.scss

@@ -1,9 +1,7 @@
 .pix-checkbox {
   @import 'reset-css';
-  display: flex;
   align-items: center;
   display: flex;
-  flex-direction: row-reverse;
 
   label, input {
     cursor: pointer;
@@ -31,9 +29,7 @@
     min-height: 18px;
     border: 1.2px solid $pix-neutral-90;
     border-radius: 2px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    position: relative;
 
     &:hover, &:focus {
       box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px $pix-neutral-15;
@@ -54,6 +50,9 @@
         background-position: center;
         width: 16px;
         height: 16px;
+        position: absolute;
+        top: 0;
+        left: 0;
 
       }
     }

package/addon/styles/_pix-modal.scss

@@ -1,14 +1,27 @@
 .pix-modal__overlay {
-  background-color: rgba(52, 69, 99, 0.7);
+  position: fixed;
+  z-index: 1000;
+  top: 0;
   bottom: 0;
   left: 0;
-  overflow-y: scroll;
-  position: fixed;
   right: 0;
-  top: 0;
-  z-index: 1000;
+  overflow-y: auto;
+  text-align: center; // Used to center horizontally the inline-block modal content
+  padding: $spacing-xs 0;
+  background-color: rgba(52, 69, 99, 0.7);
   transition: all 0.3s ease-in-out;
 
+  // This block is used to center vertically the modal
+  // if the content is less than 100vh
+  // Inspired by https://mui.com/material-ui/react-dialog/#scrolling-long-content
+  &::after {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+    width: 0px;
+  }
+
   &--hidden {
     visibility: hidden;
     opacity: 0;
@@ -23,16 +36,19 @@ $button-margin: 16px;
 
 .pix-modal {
   @import 'reset-css';
+  display: inline-block;
+  vertical-align: middle; // Centered vertically with the .pix-modal__overlay::after which is 100% height
+  width: 512px;
+  max-width: calc(100% - #{2 * $spacing-xs}); // Horizontal margin sets here to have extra space for the .pix-modal__overlay::after on mobile
+  text-align: initial; 
+  background-color: $pix-neutral-10;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-  margin: 20vh auto;
-  max-width: 512px;
-  width: calc(100% - 24px);
+  border-radius: 4px;
+  overflow: hidden;
 
   &__header {
     background: $pix-neutral-0;
     border-bottom: 1px solid $pix-neutral-20;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
     padding: $modal-padding;
     display: flex;
     align-items: flex-start;
@@ -64,7 +80,6 @@ $button-margin: 16px;
   }
 
   &__content {
-    background-color: $pix-neutral-10;
     padding: $modal-padding;
     font-size: 0.875rem;
     color: $pix-neutral-90;
@@ -78,10 +93,7 @@ $button-margin: 16px;
   }
 
   &__footer {
-    background-color: $pix-neutral-10;
     padding: 0 $modal-padding $modal-padding - $button-margin;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
 
     @include device-is('tablet') {
       display: flex;

package/addon/styles/_pix-multi-select.scss

@@ -71,7 +71,7 @@
 
 .pix-multi-select-list {
   width: 100%;
-  margin: 0px;
+  margin: 0;
   z-index: 200;
   background-color: $pix-neutral-0;
   position: absolute;
@@ -82,9 +82,11 @@
   list-style-type: none;
   padding: 0;
   box-shadow: 0px 8px 24px 0px rgba(23, 43, 77, 0.1);
+  transition: all .1s ease-in-out;
 
   &--hidden {
-    display: none;
+    visibility: hidden;
+    opacity: 0;
   }
 
   &::-webkit-scrollbar {
@@ -109,9 +111,10 @@
     border-bottom: 1px solid $pix-neutral-15;
     list-style: none;
     font-size: 0.9rem;
+    padding: 8px;
 
     @include hoverFormElement();
-
+    
     &--no-result {
       text-align: center;
       padding: 12px 0;
@@ -121,58 +124,4 @@
       border-bottom: none;
     }
   }
-
-  &__checkbox {
-    position: absolute;
-    opacity: 0;
-
-    & + label {
-      position: relative;
-      display: flex;
-      align-items: center;
-      padding: 11px 16px;
-      cursor: pointer;
-    }
-
-    & + label:before {
-      content: '';
-      margin-right: 12px;
-      display: inline-block;
-      vertical-align: text-top;
-      min-width: 16px;
-      min-height: 16px;
-      border-radius: 4px;
-      background: $pix-neutral-0;
-      border: 1px solid $pix-neutral-20;
-    }
-
-    &:checked + label:before {
-      background: $pix-primary;
-      border-color: $pix-primary;
-    }
-
-    &:checked + label:after {
-      position: absolute;
-      top: calc(50% - 5px);
-      left: 21px;
-      width: 7px;
-      height: 5px;
-      background: transparent;
-      border: 2px solid $pix-neutral-0;
-      border-top: none;
-      border-right: none;
-      transform: rotate(-45deg);
-      content: '';
-    }
-
-    &--searchable {
-      & + label {
-        padding: 11px 36px;
-      }
-
-      &:checked + label:after {
-        left: 41px;
-      }
-    }
-  }
 }

package/addon/styles/_pix-sidebar.scss

@@ -69,10 +69,6 @@ $button-margin: 16px;
     }
   }
 
-  &__content {
-    padding: $sidebar-padding 0;
-  }
-
   &__footer {
     padding: $sidebar-padding;
     border-top: 1px solid $pix-neutral-20;

package/addon/styles/_pix-stars.scss

@@ -1,5 +1,6 @@
 .pix-stars {
   @import 'reset-css';
+  line-height: 0;
 
   > svg {
     width: 36px;
@@ -30,14 +31,3 @@
     fill: $pix-neutral-15;
   }
 }
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}

package/addon/styles/addon.scss

@@ -1,4 +1,5 @@
 @import 'pix-design-tokens';
+@import 'a11y';
 @import 'pix-background-header';
 @import 'pix-banner';
 @import 'pix-block';

package/app/modifiers/on-arrow-down-up-action.js

@@ -0,0 +1,82 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [elementId, callback, isExpanded]) => {
+  const elementToTarget = document.getElementById(elementId);
+
+  element.addEventListener('keydown', handleKeyDown);
+
+  return () => {
+    element.removeEventListener('keydown', handleKeyDown);
+  };
+
+  function handleKeyDown(event) {
+    const ARROW_UP_KEY = 'ArrowUp';
+    const ARROW_DOWN_KEY = 'ArrowDown';
+
+    if (![ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key)) {
+      return;
+    }
+    event.preventDefault();
+
+    const focusElement = () => {
+      const focusableElements = findFocusableElements(elementToTarget);
+
+      const [firstFocusableElement] = focusableElements;
+      const lastFocusableElement = focusableElements[focusableElements.length - 1];
+
+      const activeIndexElement = focusableElements.findIndex((elementToTarget) => {
+        return document.activeElement === elementToTarget;
+      });
+
+      const handleArrowDown = () => {
+        if (
+          !isExpanded ||
+          document.activeElement === lastFocusableElement ||
+          activeIndexElement === -1
+        ) {
+          firstFocusableElement.focus();
+        } else {
+          focusableElements[activeIndexElement + 1].focus();
+        }
+      };
+
+      const handleArrowUp = () => {
+        if (
+          !isExpanded ||
+          document.activeElement === firstFocusableElement ||
+          activeIndexElement === -1
+        ) {
+          lastFocusableElement.focus();
+        } else {
+          focusableElements[activeIndexElement - 1].focus();
+        }
+      };
+
+      if (ARROW_UP_KEY === event.key) {
+        handleArrowUp();
+      } else if (ARROW_DOWN_KEY === event.key) {
+        handleArrowDown();
+      }
+    };
+
+    if (!isExpanded) {
+      elementToTarget.addEventListener('transitionend', focusElement);
+
+      callback();
+
+      return () => {
+        elementToTarget.removeEventListener('transitionend', focusElement);
+      };
+    } else {
+      focusElement(elementToTarget);
+    }
+  }
+});
+
+function findFocusableElements(element) {
+  return [
+    ...element.querySelectorAll(
+      'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
+    ),
+  ].filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
+}

package/app/modifiers/on-enter-action.js

@@ -0,0 +1,28 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [callback, focusId = null]) => {
+  function handleKeyUp(event) {
+    const ENTER_KEY = 'Enter';
+
+    if (event.key !== ENTER_KEY) {
+      return;
+    }
+
+    if (element.type === 'checkbox') {
+      element.checked = !element.checked;
+      element.dispatchEvent(new Event('change'));
+    }
+
+    if (focusId) {
+      document.getElementById(focusId).focus();
+    }
+
+    callback(event);
+  }
+
+  element.addEventListener('keydown', handleKeyUp);
+
+  return () => {
+    element.removeEventListener('keydown', handleKeyUp);
+  };
+});

package/app/modifiers/on-escape-action.js

@@ -1,14 +1,18 @@
 import { modifier } from 'ember-modifier';
 
-export default modifier((element, [callback]) => {
+export default modifier((element, [callback, focusId = null]) => {
   function handleKeyUp(event) {
-    const TAB_KEY = 'Escape';
+    const ESCAPE_KEY = 'Escape';
 
-    if (event.key !== TAB_KEY) {
+    if (event.key !== ESCAPE_KEY) {
       return;
     }
 
     callback(event);
+
+    if (focusId) {
+      document.getElementById(focusId).focus();
+    }
   }
 
   element.addEventListener('keyup', handleKeyUp);

package/app/modifiers/trap-focus.js

@@ -81,12 +81,12 @@ function hasDurationByKey(element, key) {
 }
 
 function handleKeyDown(event, element) {
-  const TAB_KEY = 9;
+  const TAB_KEY = 'Tab';
   const focusableElements = findFocusableElements(element);
   const [firstFocusableElement] = focusableElements;
   const lastFocusableElement = focusableElements[focusableElements.length - 1];
 
-  if (event.keyCode !== TAB_KEY) {
+  if (event.key !== TAB_KEY) {
     return;
   }
 

package/app/stories/form.stories.js

@@ -11,7 +11,7 @@ export const form = (args) => {
       <br>
 
       <PixMultiSelect
-        @title="Votre notation en étoiles..."
+        @innerText="Votre notation en étoiles..."
         @id="form__pix-mutli-select"
         @label="A quel point aimez vous Pix UI ?"
         @onSelect={{onSelect}}
@@ -22,6 +22,19 @@ export const form = (args) => {
       </PixMultiSelect>
       <br><br>
 
+      <PixMultiSelect
+        @innerText="Mes condiements"
+        @id="form__pix-mutli-select-searchable"
+        @label="Choississez vos condiments"
+        @onSelect={{onSelect}}
+        @selected={{selected}}
+        @isSearchable={{true}}
+        @options={{optionsSearch}} as |condiment|
+      >
+        {{condiment.label}}
+      </PixMultiSelect>
+      <br><br>
+
       <PixSelect
         @id="form__searchable-pix-select"
         @label="Votre fruit préféré est : "
@@ -90,6 +103,13 @@ form.args = {
     { value: '2', total: 3 },
     { value: '3', total: 3 },
   ],
+  optionsSearch: [
+    { value: 'Cornichon', label: 'Cornichon' },
+    { value: 'Ail', label: 'Ail' },
+    { value: 'Oignon', label: 'Oignon' },
+    { value: 'Aigre-Doux', label: 'Aigre-douc' },
+    { value: 'Soja sucré', label: 'Soja sucré' },
+  ],
   cancel: action('cancel'),
   onSelect: action('onSelect'),
   selectOptions: [

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

@@ -5,12 +5,12 @@ export const Template = (args) => {
     template: hbs`
       <PixCheckbox
         @id={{id}}
-        @label={{label}}
         @screenReaderOnly={{screenReaderOnly}}
         @isIndeterminate={{isIndeterminate}}
         @labelSize={{labelSize}}
-        @checked={{checked}}
-      />
+        @checked={{checked}}>
+        {{label}}
+      </PixCheckbox>
     `,
     context: args,
   };
@@ -53,7 +53,6 @@ export const argTypes = {
   label: {
     name: 'label',
     description: "Le label de l'input",
-    type: { name: 'string', required: false },
     defaultValue: null,
   },
   screenReaderOnly: {

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

@@ -38,11 +38,12 @@ La PixCheckbox permet de créer des checkbox basiques ou des checkbox mixées (c
 ```html
 <PixCheckbox
   @id="superId"
-  @label="Recevoir la newsletter"
   @screenReaderOnly={{false}}
   @isIndeterminate={{false}}
   @labelSize="small"
-/>
+>
+  Recevoir la newsletter
+</PixCheckBox>
 ```
 
 ## Arguments

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

@@ -49,7 +49,7 @@ export const argTypes = {
   showModal: {
     name: 'showModal',
     description: "Gérer l'ouverture de la modale",
-    type: { name: 'boolean', required: false },
+    type: { name: 'boolean', required: true },
     control: { type: 'boolean' },
     table: {
       type: { summary: 'boolean' },

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

@@ -30,6 +30,7 @@ Ce composant possède deux `yield` :
 ```html
 <PixModal
   @title="Qu'est-ce qu'une modale ?"
+  @showModal={{this.showModal}}
   @onCloseButtonClick={{this.closeModal}}
 >
  <:content>

package/app/stories/pix-multi-select.stories.js

@@ -20,14 +20,18 @@ export const multiSelectWithChildComponent = (args) => {
     template: hbs`
       <h4>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</h4>
       <PixMultiSelect
-        @title={{titleStars}}
-        @id={{id}}
-        @onSelect={{onSelect}}
-        @emptyMessage={{emptyMessage}}
-        @label={{label}}
-        @options={{options}} as |star|
+        @id={{this.id}}
+        @label={{this.label}}
+        @innerText={{this.titleStars}}
+        @screenReaderOnly={{this.screenReaderOnly}}
+        
+        @onSelect={{this.onSelect}}
+        @emptyMessage={{this.emptyMessage}}
+        
+        @options={{this.options}} as |star|
       >
         <PixStars
+          @alt={{concat "Étoiles " star.value " sur " star.total}}
           @count={{star.value}}
           @total={{star.total}}
         />
@@ -39,7 +43,9 @@ export const multiSelectWithChildComponent = (args) => {
 
 multiSelectWithChildComponent.args = {
   titleStars: 'Sélectionner le niveau souhaité',
+  label: 'Résultat évaluation',
   options: [
+    { value: '0', total: 3 },
     { value: '1', total: 3 },
     { value: '2', total: 3 },
     { value: '3', total: 3 },
@@ -52,17 +58,19 @@ export const multiSelectSearchable = (args) => {
       <h4>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</h4>
       <PixMultiSelect
         style="width:350px"
-        @id={{id}}
-        @title={{title}}
-        @placeholder={{placeholder}}
-        @isSearchable={{isSearchable}}
-        @showOptionsOnInput={{showOptionsOnInput}}
-        @strictSearch={{strictSearch}}
-        @onSelect={{doSomething}}
-        @emptyMessage={{emptyMessage}}
-        @size={{size}}
-        @selected={{selected}}
-        @options={{options}} as |option|
+        @id={{this.id}}
+        @label={{this.label}}
+        @screenReaderOnly={{this.screenReaderOnly}}
+        @innerText={{this.innerText}}
+
+        @isSearchable={{this.isSearchable}}
+        @strictSearch={{this.strictSearch}}
+
+        @onSelect={{this.doSomething}}
+        @selected={{this.selected}}
+
+        @emptyMessage={{this.emptyMessage}}
+        @options={{this.options}} as |option|
       >
         {{option.label}}
       </PixMultiSelect>
@@ -78,17 +86,19 @@ export const multiSelectAsyncOptions = (args) => {
       <h4>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</h4>
       <PixMultiSelect
         style="width:350px"
-        @id={{id}}
-        @title={{title}}
-        @placeholder={{placeholder}}
-        @isSearchable={{isSearchable}}
-        @showOptionsOnInput={{showOptionsOnInput}}
-        @strictSearch={{strictSearch}}
-        @onSelect={{doSomething}}
-        @emptyMessage={{emptyMessage}}
-        @size={{size}}
-        @selected={{selected}}
-        @onLoadOptions={{onLoadOptions}} as |option|
+        @id={{this.id}}
+        @label={{this.label}}
+        @screenReaderOnly={{this.screenReaderOnly}}
+        @innerText={{this.innerText}}
+
+        @isSearchable={{this.isSearchable}}
+        @strictSearch={{this.strictSearch}}
+
+        @onSelect={{this.doSomething}}
+        @selected={{this.selected}}
+
+        @emptyMessage={{this.emptyMessage}}
+        @onLoadOptions={{this.onLoadOptions}} as |option|
       >
         {{option.label}}
       </PixMultiSelect>
@@ -104,20 +114,18 @@ export const argTypes = {
     type: { name: 'string', required: true },
     defaultValue: 'aromate',
   },
-  title: {
-    name: 'title',
-    description: 'Donne un titre à sa liste de choix multiple.',
+  innerText: {
+    name: 'innerText',
+    description:
+      'Donne un titre à sa liste de choix multiple, utilisé comme placeholder lorsque ``isSearchable`` à ``true``',
     type: { name: 'string', required: true },
     defaultValue: 'Rechercher un condiment',
   },
   label: {
     name: 'label',
-    description: 'Donne un label au champ, le paramètre @id devient obligatoire avec ce paramètre.',
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: null },
-    },
+    description: 'Donne un label au champ',
+    type: { name: 'string', required: true },
+    defaultValue: 'Label du champ',
   },
   emptyMessage: {
     name: 'emptyMessage',
@@ -133,13 +141,6 @@ export const argTypes = {
     type: { name: 'string', required: false },
     defaultValue: 'Chargement...',
   },
-  placeholder: {
-    name: 'placeholder',
-    description:
-      'Donner une liste d‘exemple pour la recherche utilisateur dans le cas ``isSearchable`` à ``true``',
-    type: { name: 'string', required: true },
-    defaultValue: 'Curcuma, Thym, ...',
-  },
   options: {
     name: 'options',
     description:
@@ -165,13 +166,6 @@ export const argTypes = {
     type: { name: 'array', required: false },
     defaultValue: ['1', '4'],
   },
-  showOptionsOnInput: {
-    name: 'showOptionsOnInput',
-    description:
-      'Afficher la liste au focus du champs de saisie lorsque ``isSearchable`` à ``true``',
-    type: { name: 'boolean', required: false },
-    defaultValue: true,
-  },
   isSearchable: {
     name: 'isSearchable',
     description: 'Permet de rajouter une saisie utilisateur pour faciliter la recherche',
@@ -185,15 +179,10 @@ export const argTypes = {
     type: { name: 'boolean', required: false },
     defaultValue: false,
   },
-  size: {
-    name: 'size',
-    description:
-      '⚠️ **Propriété dépréciée** ⚠️ , désormais tous les éléments de formulaires feront 36px de hauteur.',
-    options: ['big', 'small'],
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: 'small' },
-    },
+  screenReaderOnly: {
+    name: 'screenReaderOnly',
+    description: "Permet de cacher à l'écran le label tout en restant vocalisable",
+    type: { name: 'boolean', required: false },
+    defaultValue: false,
   },
 };

package/app/stories/pix-multi-select.stories.mdx

@@ -40,11 +40,14 @@ Il est possible de donner un message via `loadingMessage` à afficher à la plac
 
 ```html
 <PixMultiSelect
-  @title={{title}}
-  @emptyMessage={{emptyMessage}}
   @id={{id}}
+  @label={{label}}
+  @screenReaderOnly={{screenReaderOnly}}
+  @innerText={{innerText}}
+
   @onSelect={{doSomething}}
   @selected={{selected}}
+  @emptyMessage={{emptyMessage}}
   @options={{options}} as |option|>
   {{option.label}}
 </PixMultiSelect>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "18.2.0",
+  "version": "19.0.1",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -72,6 +72,7 @@
     "@storybook/ember-cli-storybook": "^0.4.0",
     "@storybook/storybook-deployer": "^2.8.10",
     "@storybook/theming": "^6.3.7",
+    "@testing-library/user-event": "^14.4.3",
     "axios": "^0.21.1",
     "babel-eslint": "^10.1.0",
     "babel-plugin-ember-modules-api-polyfill": "^2.13.4",