sr(documentation): improve input and textarea documentation

1024pix · May 2, 2024 · fce4f89 · fce4f89
1 parent 6f6f362
commit fce4f89
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 11 deletions.
diff --git a/app/stories/pix-input.mdx b/app/stories/pix-input.mdx
@@ -9,8 +9,17 @@ Le PixInput permet de créer un champ de texte.
 
 ## Accessibilité
 
-Si vous utilisez le `PixInput` sans vouloir afficher le label, il faudra renseigner `screenReaderOnly` à `true`.
-Il est possible d'ajouter un label en dehors du composant en précisant bien un attribut `for` correspondant à l'`@id` passé au PixInput.
+La propriété label est optionnelle pour le composant.
+
+Mais au niveau de l'accessibilité, il est quand même nécessaire que le champ soit rattaché à un label.
+
+Il y a alors plusieurs possibilités :
+
+- Vous pouvez cacher le label visuellement mais le rendre disponible pour les lecteurs d'écran via la propriété `screenReaderOnly` à `true`.
+- Les attributs `aria-label` et `aria-labelledby` sont utilisables.
+- Un attribut `@for` pointant vers l'id de l'input peut être ajouté à un composant `<PixLabel />` extérieur.
+
+## Tests
 
 Pour acceder à l'élément via son label avec testing-library:
 

diff --git a/app/stories/pix-input.stories.js b/app/stories/pix-input.stories.js
@@ -31,7 +31,7 @@ export default {
     label: {
       name: 'label',
       description: 'Le label du champ',
-      type: { name: 'string', required: true },
+      type: { name: 'string', required: false },
       table: {
         type: { summary: 'string' },
       },

diff --git a/app/stories/pix-textarea.mdx b/app/stories/pix-textarea.mdx
@@ -9,13 +9,19 @@ Un textarea permettant d'avoir un champ de saisie libre.
 
 Optionellement, il peut afficher le nombre de caractères tapés ainsi que le nombre de caractères maximum.
 
+<Story of={ComponentStories.textarea} height={150} />
+
 ## Accessibilité
 
-Si vous utilisez le `PixTextarea` sans vouloir afficher le label, il faudra renseigner `screenReaderOnly` à `true`.
+La propriété label est optionnelle pour le composant.
+
+Mais au niveau de l'accessibilité, il est quand même nécessaire que le champ soit rattaché à un label.
 
-<Story of={ComponentStories.textarea} height={100} />
+Il y a alors plusieurs possibilités :
 
-## Without Label
+- Vous pouvez cacher le label visuellement mais le rendre disponible pour les lecteurs d'écran via la propriété `screenReaderOnly` à `true`.
+- Les attributs `aria-label` et `aria-labelledby` sont utilisables.
+- Un attribut `@for` pointant vers l'id du textarea peut être ajouté à un composant `<PixLabel />` extérieur.
 
 <Story of={ComponentStories.textareaWithoutLabel} height={100} />
 

diff --git a/app/stories/pix-textarea.stories.js b/app/stories/pix-textarea.stories.js
@@ -11,7 +11,7 @@ export default {
     value: {
       name: 'value',
       description: 'Valeur du champ',
-      type: { name: 'string', required: true },
+      type: { name: 'string', required: false },
     },
     maxlength: {
       name: 'maxlength',
@@ -23,11 +23,10 @@ export default {
       description: 'Affiche une erreur en dessous du champ.',
       type: { name: 'string', required: false },
     },
-
     label: {
       name: 'label',
       description: 'Donne un label au champ.',
-      type: { name: 'string', required: true },
+      type: { name: 'string', required: false },
     },
     subLabel: {
       name: 'subLabel',
@@ -109,11 +108,13 @@ const TemplateWithoutlabel = (args) => {
 export const textarea = Template.bind({});
 textarea.args = {
   id: 'textarea',
+  label: 'Label du textarea',
+  subLabel: 'Sous-label',
   value: 'Contenu du textarea',
 };
 
 export const textareaWithoutLabel = TemplateWithoutlabel.bind({});
-textarea.args = {
+textareaWithoutLabel.args = {
   id: 'textarea-without-label',
-  value: 'Contenu du textarea',
+  value: 'Contenu du textarea sans label affiché',
 };