fix(a11y): input aria describedby

italia · Feb 6, 2025 · 396c752 · 396c752
1 parent 609eb16
commit 396c752
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 111 deletions.
diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx
@@ -203,8 +203,8 @@ export const Input = ({
   }
 
   // associate the input field with the help text
-  const infoId = id ? `${id}Description` : undefined;
-  if (id) {
+  const infoId = id && infoText ? `${id}Description` : undefined;
+  if (infoId) {
     extraAttributes['aria-describedby'] = infoId;
   }
 
@@ -296,8 +296,11 @@ export const Input = ({
     }
     const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
     nativeInputValueSetter?.call(inputRef.current, `${newValue}`);
+    const ev1 = new Event('change', { bubbles: true });
     const ev2 = new Event('input', { bubbles: true });
+    inputRef.current?.dispatchEvent(ev1);
     inputRef.current?.dispatchEvent(ev2);
+    inputRef.current?.focus();
   };
 
   if (['currency', 'percentage', 'adaptive', 'number'].includes(type)) {
@@ -328,10 +331,10 @@ export const Input = ({
             ref={inputRef}
           />
           <span className='input-group-text align-buttons flex-column'>
-            <button className='input-number-add' onClick={() => clickIncrDecr(1)} type='button'>
+            <button className='input-number-add' onClick={() => clickIncrDecr(1)}>
               <span className='visually-hidden'>{incrementLabel || ''}</span>
             </button>
-            <button className='input-number-sub' onClick={() => clickIncrDecr(-1)} type='button'>
+            <button className='input-number-sub' onClick={() => clickIncrDecr(-1)}>
               <span className='visually-hidden'>{decrementLabel || ''}</span>
             </button>
           </span>

diff --git a/stories/Components/Form/Input.stories.tsx b/stories/Components/Form/Input.stories.tsx
@@ -16,8 +16,9 @@ export const EsempiDiCampiDiInput: Story = {
     return (
       <div>
         <Input type='text' label='Campo di tipo testuale' id='exampleInputText' />
+        <Input type='text' label='Campo di tipo testuale con descrizione' infoText='Questo campo contiene anche una descrizione' id='exampleInputTextInfo' />
         <Input type='email' label='Campo di tipo email' id='exampleInputEmail' />
-        <Input type='number' label='Campo di tipo numerico' id='exampleInputNumber' />
+        <Input type='number' label='Campo di tipo numerico' id='exampleInputNumber' incrementLabel="Aumenta il valore di 1" decrementLabel="Diminuisci il valore di 1"/>
         <Input type='tel' label='Campo di tipo telefono' id='exampleInputTel' />
       </div>
     );