Extend input fields aria-described property to all types of messages (#…

…7279)
public-ui · Jan 29, 2025 · c5e3557 · c5e3557
2 parents c392eda + 29cd22d
commit c5e3557
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 70 deletions.
diff --git a/packages/components/src/components/input-checkbox/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-checkbox/test/__snapshots__/snapshot.spec.tsx.snap
@@ -202,7 +202,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--variant-default">
               <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
             </label>
           </div>
         </div>
@@ -228,7 +228,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--variant-default">
               <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
             </label>
           </div>
         </div>
@@ -538,7 +538,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--variant-button">
               <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
             </label>
           </div>
           <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
@@ -564,7 +564,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--variant-button">
               <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
             </label>
           </div>
           <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
@@ -881,7 +881,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--variant-switch">
               <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
             </label>
           </div>
           <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
@@ -907,7 +907,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--variant-switch">
               <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
             </label>
           </div>
           <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
@@ -1231,7 +1231,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
               <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
             </label>
           </div>
         </div>
@@ -1257,7 +1257,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
               <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
             </label>
           </div>
         </div>
@@ -1567,7 +1567,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
               <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
             </label>
           </div>
           <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
@@ -1593,7 +1593,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
               <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
             </label>
           </div>
           <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
@@ -1910,7 +1910,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-button">
               <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
             </label>
           </div>
           <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
@@ -1936,7 +1936,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-button">
               <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
             </label>
           </div>
           <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
@@ -2253,7 +2253,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-switch">
               <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
             </label>
           </div>
           <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
@@ -2279,7 +2279,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-switch">
               <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
             </label>
           </div>
           <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
@@ -2596,7 +2596,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--indeterminate kol-checkbox--variant-default">
               <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
             </label>
           </div>
           <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
@@ -2622,7 +2622,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
           <div class="kol-field-control__input">
             <label class="kol-checkbox kol-checkbox--indeterminate kol-checkbox--variant-default">
               <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
-              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+              <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
             </label>
           </div>
           <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">

diff --git a/packages/components/src/components/input-color/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-color/test/__snapshots__/snapshot.spec.tsx.snap
@@ -193,7 +193,7 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
       <div class="kol-form-field__input">
         <div class="kol-input-container">
           <div class="kol-input-container__container">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+            <input aria-describedby="id-nonce-msg" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
           </div>
         </div>
       </div>
@@ -216,7 +216,7 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
       <div class="kol-form-field__input">
         <div class="kol-input-container">
           <div class="kol-input-container__container">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+            <input aria-describedby="id-nonce-msg" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
           </div>
         </div>
       </div>
@@ -527,7 +527,7 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
       <div class="kol-form-field__input">
         <div class="kol-input-container">
           <div class="kol-input-container__container">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <input aria-describedby="id-nonce-msg" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
             <datalist id="id-nonce-list">
               <option value="#F00"></option>
               <option value="#0F0"></option>
@@ -555,7 +555,7 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
       <div class="kol-form-field__input">
         <div class="kol-input-container">
           <div class="kol-input-container__container">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <input aria-describedby="id-nonce-msg" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
             <datalist id="id-nonce-list">
               <option value="#F00"></option>
               <option value="#0F0"></option>

diff --git a/packages/components/src/components/input-date/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-date/test/__snapshots__/snapshot.spec.tsx.snap
@@ -193,7 +193,7 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
       <div class="kol-form-field__input">
         <div class="kol-input-container">
           <div class="kol-input-container__container">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+            <input aria-describedby="id-nonce-msg" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
           </div>
         </div>
       </div>
@@ -216,7 +216,7 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
       <div class="kol-form-field__input">
         <div class="kol-input-container">
           <div class="kol-input-container__container">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+            <input aria-describedby="id-nonce-msg" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
           </div>
         </div>
       </div>