From 98d38eb2d2d33c6db4a4091524743ac003a901e9 Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Fri, 3 Jan 2025 11:26:20 +0200
Subject: [PATCH] refactor: replace h5 in login error message with strong

---
 packages/login/src/vaadin-lit-login-form-wrapper.js  |  2 +-
 packages/login/src/vaadin-login-form-wrapper.js      |  2 +-
 .../test/dom/__snapshots__/login-form.test.snap.js   | 12 ++++++------
 .../theme/lumo/vaadin-login-form-wrapper-styles.js   |  2 ++
 .../material/vaadin-login-form-wrapper-styles.js     |  5 ++++-
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/login/src/vaadin-lit-login-form-wrapper.js b/packages/login/src/vaadin-lit-login-form-wrapper.js
index 0e5bbffbd8e..3ec2999a6d0 100644
--- 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
index a02587175d4..99854d815c8 100644
--- 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
index fe48035e254..29c86426262 100644
--- a/packages/login/test/dom/__snapshots__/login-form.test.snap.js
+++ b/packages/login/test/dom/__snapshots__/login-form.test.snap.js
@@ -580,9 +580,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>
@@ -611,9 +611,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>
@@ -645,9 +645,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
index f7b12df831a..597581eb83b 100644
--- 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
index 05dd5f531ce..f7abcc21818 100644
--- 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 {