refactor: replace h5 in login error message with strong (#8438) (#8440)

Co-authored-by: Serhii Kulykov <[email protected]>
vaadin · Jan 3, 2025 · 95ab8a4 · 95ab8a4
1 parent 90056f0
commit 95ab8a4
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 9 deletions.
diff --git a/packages/login/src/vaadin-lit-login-form-wrapper.js b/packages/login/src/vaadin-lit-login-form-wrapper.js
@@ -53,7 +53,7 @@ class LoginFormWrapper extends ThemableMixin(PolylitMixin(LitElement)) {
       <section part="form">
         <h2 part="form-title">${this.i18n.form.title}</h2>
         <div part="error-message" ?hidden="${!this.error}">
-          <h5 part="error-message-title">${this.i18n.errorMessage.title}</h5>
+          <strong part="error-message-title">${this.i18n.errorMessage.title}</strong>
           <p part="error-message-description">${this.i18n.errorMessage.message}</p>
         </div>
 

diff --git a/packages/login/src/vaadin-login-form-wrapper.js b/packages/login/src/vaadin-login-form-wrapper.js
@@ -25,7 +25,7 @@ class LoginFormWrapper extends ThemableMixin(PolymerElement) {
       <section part="form">
         <h2 part="form-title">[[i18n.form.title]]</h2>
         <div part="error-message" hidden$="[[!error]]">
-          <h5 part="error-message-title">[[i18n.errorMessage.title]]</h5>
+          <strong part="error-message-title">[[i18n.errorMessage.title]]</strong>
           <p part="error-message-description">[[i18n.errorMessage.message]]</p>
         </div>
 

diff --git a/packages/login/test/dom/__snapshots__/login-form.test.snap.js b/packages/login/test/dom/__snapshots__/login-form.test.snap.js
@@ -570,9 +570,9 @@ snapshots["vaadin-login-form shadow default"] =
     hidden=""
     part="error-message"
   >
-    <h5 part="error-message-title">
+    <strong part="error-message-title">
       Incorrect username or password
-    </h5>
+    </strong>
     <p part="error-message-description">
       Check that you have entered the correct username and password and try again.
     </p>
@@ -601,9 +601,9 @@ snapshots["vaadin-login-form shadow error"] =
     Log in
   </h2>
   <div part="error-message">
-    <h5 part="error-message-title">
+    <strong part="error-message-title">
       Incorrect username or password
-    </h5>
+    </strong>
     <p part="error-message-description">
       Check that you have entered the correct username and password and try again.
     </p>
@@ -635,9 +635,9 @@ snapshots["vaadin-login-form shadow i18n"] =
     hidden=""
     part="error-message"
   >
-    <h5 part="error-message-title">
+    <strong part="error-message-title">
       Väärä käyttäjätunnus tai salasana
-    </h5>
+    </strong>
     <p part="error-message-description">
       Tarkista että käyttäjätunnus ja salasana ovat oikein ja yritä uudestaan.
     </p>

diff --git a/packages/login/theme/lumo/vaadin-login-form-wrapper-styles.js b/packages/login/theme/lumo/vaadin-login-form-wrapper-styles.js
@@ -65,8 +65,10 @@ const loginFormWrapper = css`
   }
 
   [part='error-message-title'] {
+    display: block;
     margin: 0 0 0.25em;
     color: inherit;
+    line-height: var(--lumo-line-height-xs);
   }
 
   [part='error-message-description'] {

diff --git a/packages/login/theme/material/vaadin-login-form-wrapper-styles.js b/packages/login/theme/material/vaadin-login-form-wrapper-styles.js
@@ -78,9 +78,12 @@ const loginFormWrapper = css`
     margin-right: calc(2.25rem * -0.95);
   }
 
-  [part='error-message'] h5 {
+  [part='error-message-title'] {
+    display: block;
     margin: 0 0 0.25em;
     color: inherit;
+    line-height: 1.1;
+    text-indent: -0.025em;
   }
 
   [part='error-message'] p {