fix: set hidden attribute on the error message when field is valid (#…

…3143) (#3147) Co-authored-by: David Sosa <[email protected]>
vaadin · Dec 2, 2021 · 1016a88 · 1016a88
1 parent b668e9b
commit 1016a88
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 16 deletions.
diff --git a/packages/email-field/test/dom/__snapshots__/email-field.test.snap.js b/packages/email-field/test/dom/__snapshots__/email-field.test.snap.js
@@ -231,7 +231,10 @@ snapshots["vaadin-email-field shadow theme"] =
 snapshots["vaadin-email-field slots default"] = 
 `<label slot="label">
 </label>
-<div slot="error-message">
+<div
+  hidden=""
+  slot="error-message"
+>
 </div>
 <input
   autocapitalize="off"
@@ -244,7 +247,10 @@ snapshots["vaadin-email-field slots default"] =
 snapshots["vaadin-email-field slots helper"] = 
 `<label slot="label">
 </label>
-<div slot="error-message">
+<div
+  hidden=""
+  slot="error-message"
+>
 </div>
 <input
   autocapitalize="off"

diff --git a/packages/field-base/src/field-mixin.js b/packages/field-base/src/field-mixin.js
@@ -301,6 +301,7 @@ export const FieldMixin = (superclass) =>
       }
       const hasError = Boolean(invalid && errorMessage);
       error.textContent = hasError ? errorMessage : '';
+      error.hidden = !hasError;
       this.toggleAttribute('has-error-message', hasError);
 
       // Role alert will make the error message announce immediately

diff --git a/packages/integer-field/test/dom/__snapshots__/integer-field.test.snap.js b/packages/integer-field/test/dom/__snapshots__/integer-field.test.snap.js
@@ -344,7 +344,10 @@ snapshots["vaadin-integer-field shadow theme"] =
 snapshots["vaadin-integer-field slots default"] = 
 `<label slot="label">
 </label>
-<div slot="error-message">
+<div
+  hidden=""
+  slot="error-message"
+>
 </div>
 <input
   max="undefined"
@@ -359,7 +362,10 @@ snapshots["vaadin-integer-field slots default"] =
 snapshots["vaadin-integer-field slots helper"] = 
 `<label slot="label">
 </label>
-<div slot="error-message">
+<div
+  hidden=""
+  slot="error-message"
+>
 </div>
 <input
   max="undefined"

diff --git a/packages/message-input/test/dom/__snapshots__/message-input.test.snap.js b/packages/message-input/test/dom/__snapshots__/message-input.test.snap.js
@@ -5,7 +5,10 @@ snapshots["vaadin-message-input default"] =
 `<vaadin-message-input-text-area placeholder="Message">
   <label slot="label">
   </label>
-  <div slot="error-message">
+  <div
+    hidden=""
+    slot="error-message"
+  >
   </div>
   <textarea
     aria-label="Message"
@@ -34,7 +37,10 @@ snapshots["vaadin-message-input disabled"] =
 >
   <label slot="label">
   </label>
-  <div slot="error-message">
+  <div
+    hidden=""
+    slot="error-message"
+  >
   </div>
   <textarea
     aria-label="Message"

diff --git a/packages/number-field/test/dom/__snapshots__/number-field.test.snap.js b/packages/number-field/test/dom/__snapshots__/number-field.test.snap.js
@@ -344,7 +344,10 @@ snapshots["vaadin-number-field shadow theme"] =
 snapshots["vaadin-number-field slots default"] = 
 `<label slot="label">
 </label>
-<div slot="error-message">
+<div
+  hidden=""
+  slot="error-message"
+>
 </div>
 <input
   max="undefined"
@@ -359,7 +362,10 @@ snapshots["vaadin-number-field slots default"] =
 snapshots["vaadin-number-field slots helper"] = 
 `<label slot="label">
 </label>
-<div slot="error-message">
+<div
+  hidden=""
+  slot="error-message"
+>
 </div>
 <input
   max="undefined"

diff --git a/packages/password-field/test/dom/__snapshots__/password-field.test.snap.js b/packages/password-field/test/dom/__snapshots__/password-field.test.snap.js
@@ -266,7 +266,10 @@ snapshots["vaadin-password-field shadow theme"] =
 snapshots["vaadin-password-field slots default"] = 
 `<label slot="label">
 </label>
-<div slot="error-message">
+<div
+  hidden=""
+  slot="error-message"
+>
 </div>
 <button
   aria-label="Show password"
@@ -287,7 +290,10 @@ snapshots["vaadin-password-field slots default"] =
 snapshots["vaadin-password-field slots helper"] = 
 `<label slot="label">
 </label>
-<div slot="error-message">
+<div
+  hidden=""
+  slot="error-message"
+>
 </div>
 <button
   aria-label="Show password"

diff --git a/packages/select/test/dom/__snapshots__/select.test.snap.js b/packages/select/test/dom/__snapshots__/select.test.snap.js
@@ -221,7 +221,10 @@ snapshots["vaadin-select shadow theme"] =
 snapshots["vaadin-select slots default"] = 
 `<label slot="label">
 </label>
-<div slot="error-message">
+<div
+  hidden=""
+  slot="error-message"
+>
 </div>
 <vaadin-select-value-button
   aria-expanded="false"
@@ -238,7 +241,10 @@ snapshots["vaadin-select slots default"] =
 snapshots["vaadin-select slots helper"] = 
 `<label slot="label">
 </label>
-<div slot="error-message">
+<div
+  hidden=""
+  slot="error-message"
+>
 </div>
 <vaadin-select-value-button
   aria-expanded="false"

diff --git a/packages/text-area/test/dom/__snapshots__/text-area.test.snap.js b/packages/text-area/test/dom/__snapshots__/text-area.test.snap.js
@@ -231,7 +231,10 @@ snapshots["vaadin-text-area shadow theme"] =
 snapshots["vaadin-text-area slots default"] = 
 `<label slot="label">
 </label>
-<div slot="error-message">
+<div
+  hidden=""
+  slot="error-message"
+>
 </div>
 <textarea slot="textarea">
 </textarea>
@@ -241,7 +244,10 @@ snapshots["vaadin-text-area slots default"] =
 snapshots["vaadin-text-area slots helper"] = 
 `<label slot="label">
 </label>
-<div slot="error-message">
+<div
+  hidden=""
+  slot="error-message"
+>
 </div>
 <textarea slot="textarea">
 </textarea>

diff --git a/packages/text-field/test/dom/__snapshots__/text-field.test.snap.js b/packages/text-field/test/dom/__snapshots__/text-field.test.snap.js
@@ -231,7 +231,10 @@ snapshots["vaadin-text-field shadow theme"] =
 snapshots["vaadin-text-field slots default"] = 
 `<label slot="label">
 </label>
-<div slot="error-message">
+<div
+  hidden=""
+  slot="error-message"
+>
 </div>
 <input
   slot="input"
@@ -243,7 +246,10 @@ snapshots["vaadin-text-field slots default"] =
 snapshots["vaadin-text-field slots helper"] = 
 `<label slot="label">
 </label>
-<div slot="error-message">
+<div
+  hidden=""
+  slot="error-message"
+>
 </div>
 <input
   slot="input"