@1024pix/pix-ui 13.5.1 → 14.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Pix-UI Changelog
 
+## v14.0.0 (12/04/2022)
+
+
+### :coffee: Autre
+- [#212](https://github.com/1024pix/pix-ui/pull/212) [BREAKING_CHANGES][BUGFIX] Ajouter un aria-label au Pix Input (PIX-4759).
+
 ## v13.5.1 (12/04/2022)
 
 

package/addon/components/pix-input.hbs

@@ -18,6 +18,7 @@
       id={{this.id}}
       class={{this.className}}
       value={{@value}}
+      aria-label={{this.ariaLabel}}
       aria-required="{{if @requiredLabel true false}}"
       required={{if @requiredLabel true false}}
       aria-describedby={{if @errorMessage "text-input-error"}}

package/addon/components/pix-input.js

@@ -1,5 +1,7 @@
 import Component from '@glimmer/component';
 
+const ERROR_MESSAGE = 'ERROR in PixInput component, you must provide @label or @ariaLabel params';
+
 export default class PixInput extends Component {
   get id() {
     if (!this.args.id || !this.args.id.toString().trim()) {
@@ -15,4 +17,18 @@ export default class PixInput extends Component {
     this.args.isIconLeft && classNames.push('pix-input__input--icon-left');
     return classNames.join(' ');
   }
+
+  get label() {
+    if (!this.args.label && !this.args.ariaLabel) {
+      throw new Error(ERROR_MESSAGE);
+    }
+    return this.args.label;
+  }
+
+  get ariaLabel() {
+    if (!this.args.label && !this.args.ariaLabel) {
+      throw new Error(ERROR_MESSAGE);
+    }
+    return this.args.label ? null : this.args.ariaLabel;
+  }
 }

package/app/stories/pix-input-password.stories.js

@@ -72,7 +72,7 @@ export const argTypes = {
   },
   ariaLabel: {
     name: 'ariaLabel',
-    description: "L'action du bouton, pour l'accessibilité. Requis si label n'est pas définit.",
+    description: "L'action du champ, pour l'accessibilité. Requis si label n'est pas définit.",
     type: { name: 'string', required: true },
     defaultValue: null,
   },

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

@@ -12,6 +12,7 @@ export const Template = (args) => {
         @isIconLeft={{isIconLeft}}
         placeholder='Jeanne, Pierre ...'
         @requiredLabel={{requiredLabel}}
+        @ariaLabel={{ariaLabel}}
       />
     `,
     context: args,
@@ -21,6 +22,7 @@ export const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   id: 'firstName',
+  ariaLabel: 'Prénom',
 };
 
 export const withLabel = Template.bind({});
@@ -53,6 +55,12 @@ withRequiredLabel.args = {
 };
 
 export const argTypes = {
+  ariaLabel: {
+    name: 'ariaLabel',
+    description: "L'action du champ, pour l'accessibilité. Requis si label n'est pas définit.",
+    type: { name: 'string', required: true },
+    defaultValue: null,
+  },
   id: {
     name: 'id',
     description: 'Identifiant du champ permettant de lui attacher un label',

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

@@ -14,6 +14,12 @@ import * as stories from './pix-input.stories.js';
 
 Le PixInput permet de créer un champ de texte.
 
+## Accessibilité
+
+Si vous utilisez le `PixInput` sans label alors il faut renseigner le paramètre `ariaLabel`, sinon le composant renvoie une erreur.
+
+> Si vous renseignez les paramètres label et ariaLabel ensemble, ariaLabel sera nullifié.
+
 
 ## Default
 

package/package.json

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