@1024pix/pix-ui 18.1.0 → 18.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Pix-UI Changelog
2
2
 
3
+ ## v18.2.0 (16/09/2022)
4
+
5
+
6
+ ### :rocket: Amélioration
7
+ - [#255](https://github.com/1024pix/pix-ui/pull/255) [FEATURE] Améliorer l'accessibilité de Pix-Modal.
8
+
3
9
  ## v18.1.0 (15/09/2022)
4
10
 
5
11
 
@@ -7,13 +7,13 @@
7
7
  <div
8
8
  class="pix-modal"
9
9
  role="dialog"
10
- aria-labelledby="modal-title"
11
- aria-describedby="modal-content"
10
+ aria-labelledby="modal-title--{{this.id}}"
11
+ aria-describedby="modal-content--{{this.id}}"
12
12
  aria-modal="true"
13
13
  ...attributes
14
14
  >
15
15
  <header class="pix-modal__header">
16
- <h1 id="modal-title" class="pix-modal__title">{{@title}}</h1>
16
+ <h1 id="modal-title--{{this.id}}" class="pix-modal__title">{{@title}}</h1>
17
17
  <PixIconButton
18
18
  @icon="xmark"
19
19
  @triggerAction={{@onCloseButtonClick}}
@@ -23,7 +23,7 @@
23
23
  class="pix-modal__close-button"
24
24
  />
25
25
  </header>
26
- <main id="modal-content" class="pix-modal__content">
26
+ <main id="modal-content--{{this.id}}" class="pix-modal__content">
27
27
  {{yield to="content"}}
28
28
  </main>
29
29
  <footer class="pix-modal__footer">
@@ -1,5 +1,6 @@
1
1
  import Component from '@glimmer/component';
2
2
  import { action } from '@ember/object';
3
+ import uniqueId from '@1024pix/pix-ui/utils/unique-id';
3
4
 
4
5
  export default class PixModal extends Component {
5
6
  constructor(...args) {
@@ -20,4 +21,8 @@ export default class PixModal extends Component {
20
21
  isClickOnOverlay(event) {
21
22
  return event.target.classList.contains('pix-modal__overlay');
22
23
  }
24
+
25
+ get id() {
26
+ return uniqueId();
27
+ }
23
28
  }
@@ -7,7 +7,7 @@
7
7
  right: 0;
8
8
  top: 0;
9
9
  z-index: 1000;
10
- transition: all .3s ease-in-out;
10
+ transition: all 0.3s ease-in-out;
11
11
 
12
12
  &--hidden {
13
13
  visibility: hidden;
@@ -19,8 +19,9 @@ export const Template = (args) => {
19
19
  <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Valider</PixButton>
20
20
  </:footer>
21
21
  </PixModal>
22
- <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Ouvrir la modale</PixButton>
23
- `,
22
+ <div style="display:flex; justify-content:center; align-items:center; height:105vh;">
23
+ <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Ouvrir la modale</PixButton>
24
+ </div>`,
24
25
  context: args,
25
26
  };
26
27
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1024pix/pix-ui",
3
- "version": "18.1.0",
3
+ "version": "18.2.0",
4
4
  "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
5
5
  "keywords": [
6
6
  "ember-addon"