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

… not just errors Refs: #7037
public-ui · Jan 23, 2025 · 8ddc515 · 8ddc515
1 parent 01bb5c0
commit 8ddc515
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
@@ -172,7 +172,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
     </div>
@@ -194,7 +194,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
     </div>
@@ -456,7 +456,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
       <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
@@ -478,7 +478,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
       <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
@@ -747,7 +747,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
       <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
@@ -769,7 +769,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
       <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
@@ -1045,7 +1045,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
     </div>
@@ -1067,7 +1067,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
     </div>
@@ -1329,7 +1329,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
       <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
@@ -1351,7 +1351,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
       <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
@@ -1620,7 +1620,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
       <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
@@ -1642,7 +1642,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
       <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
@@ -1911,7 +1911,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
       <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
@@ -1933,7 +1933,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
       <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
@@ -2202,7 +2202,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
       <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
@@ -2224,7 +2224,7 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
       <div class="input">
         <label class="checkbox-container">
           <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
+          <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
         </label>
       </div>
       <label class="input-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
@@ -163,7 +163,7 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
         </span>
       </label>
       <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+        <input aria-describedby="id-nonce-msg" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
       </div>
     </div>
   </template>
@@ -182,7 +182,7 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
         </span>
       </label>
       <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+        <input aria-describedby="id-nonce-msg" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
       </div>
     </div>
   </template>
@@ -449,7 +449,7 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
         </span>
       </label>
       <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" 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" 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>
@@ -473,7 +473,7 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
         </span>
       </label>
       <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" 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" 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
@@ -163,7 +163,7 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
         </span>
       </label>
       <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" 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" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
       </div>
     </div>
   </template>
@@ -182,7 +182,7 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
         </span>
       </label>
       <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" 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" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
       </div>
     </div>
   </template>

diff --git a/packages/components/src/components/input-email/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-email/test/__snapshots__/snapshot.spec.tsx.snap
@@ -163,7 +163,7 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
         </span>
       </label>
       <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+        <input aria-describedby="id-nonce-msg" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
       </div>
     </div>
   </template>
@@ -182,7 +182,7 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
         </span>
       </label>
       <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+        <input aria-describedby="id-nonce-msg" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
       </div>
     </div>
   </template>
@@ -449,7 +449,7 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
         </span>
       </label>
       <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+        <input aria-describedby="id-nonce-msg" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
         <datalist id="id-nonce-list">
           <option value="email1@example.com"></option>
           <option value="email2@example.com"></option>
@@ -473,7 +473,7 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
         </span>
       </label>
       <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+        <input aria-describedby="id-nonce-msg" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
         <datalist id="id-nonce-list">
           <option value="email1@example.com"></option>
           <option value="email2@example.com"></option>

diff --git a/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
@@ -163,7 +163,7 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
         </span>
       </label>
       <div class="input">
-        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
+        <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
       </div>
     </div>
   </template>
@@ -182,7 +182,7 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
         </span>
       </label>
       <div class="input">
-        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
+        <input aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
       </div>
     </div>
   </template>