refactor: use div with heading role instead of h2 in form title (#8441)…

… (#8442) Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Jan 3, 2025 · 8c9f445 · 8c9f445
1 parent 2ae9430
commit 8c9f445
Show file tree

Hide file tree

Showing 6 changed files with 29 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
@@ -51,7 +51,7 @@ class LoginFormWrapper extends ThemableMixin(PolylitMixin(LitElement)) {
   render() {
     return html`
       <section part="form">
-        <h2 part="form-title">${this.i18n.form.title}</h2>
+        <div part="form-title" role="heading" aria-level="2">${this.i18n.form.title}</div>
         <div part="error-message" ?hidden="${!this.error}">
           <strong part="error-message-title">${this.i18n.errorMessage.title}</strong>
           <p part="error-message-description">${this.i18n.errorMessage.message}</p>

diff --git a/packages/login/src/vaadin-login-form-wrapper.js b/packages/login/src/vaadin-login-form-wrapper.js
@@ -23,7 +23,7 @@ class LoginFormWrapper extends ThemableMixin(PolymerElement) {
   static get template() {
     return html`
       <section part="form">
-        <h2 part="form-title">[[i18n.form.title]]</h2>
+        <div part="form-title" part="form-title" role="heading" aria-level="2">[[i18n.form.title]]</div>
         <div part="error-message" hidden$="[[!error]]">
           <strong part="error-message-title">[[i18n.errorMessage.title]]</strong>
           <p part="error-message-description">[[i18n.errorMessage.message]]</p>

diff --git a/packages/login/test/dom/__snapshots__/login-form.test.snap.js b/packages/login/test/dom/__snapshots__/login-form.test.snap.js
@@ -573,9 +573,13 @@ snapshots["vaadin-login-form host noForgotPassword"] =
 
 snapshots["vaadin-login-form shadow default"] = 
 `<section part="form">
-  <h2 part="form-title">
+  <div
+    aria-level="2"
+    part="form-title"
+    role="heading"
+  >
     Log in
-  </h2>
+  </div>
   <div
     hidden=""
     part="error-message"
@@ -607,9 +611,13 @@ snapshots["vaadin-login-form shadow default"] =
 
 snapshots["vaadin-login-form shadow error"] = 
 `<section part="form">
-  <h2 part="form-title">
+  <div
+    aria-level="2"
+    part="form-title"
+    role="heading"
+  >
     Log in
-  </h2>
+  </div>
   <div part="error-message">
     <strong part="error-message-title">
       Incorrect username or password
@@ -638,9 +646,13 @@ snapshots["vaadin-login-form shadow error"] =
 
 snapshots["vaadin-login-form shadow i18n"] = 
 `<section part="form">
-  <h2 part="form-title">
+  <div
+    aria-level="2"
+    part="form-title"
+    role="heading"
+  >
     Kirjaudu sisään
-  </h2>
+  </div>
   <div
     hidden=""
     part="error-message"

diff --git a/packages/login/theme/lumo/vaadin-login-form-wrapper-styles.js b/packages/login/theme/lumo/vaadin-login-form-wrapper-styles.js
@@ -15,6 +15,10 @@ const loginFormWrapper = css`
 
   [part='form-title'] {
     margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
+    color: var(--lumo-header-text-color);
+    font-size: var(--lumo-font-size-xxl);
+    font-weight: 600;
+    line-height: var(--lumo-line-height-xs);
   }
 
   ::slotted([slot='submit']) {

diff --git a/packages/login/theme/material/vaadin-login-form-wrapper-styles.js b/packages/login/theme/material/vaadin-login-form-wrapper-styles.js
@@ -19,6 +19,10 @@ const loginFormWrapper = css`
   [part='form-title'] {
     margin-top: calc(var(--material-h3-font-size) - var(--material-h4-font-size));
     font-size: var(--material-h5-font-size);
+    font-weight: 300;
+    line-height: 1.1;
+    letter-spacing: -0.01em;
+    text-indent: -0.07em;
   }
 
   ::slotted([slot='submit']) {

diff --git a/packages/login/theme/material/vaadin-login-overlay-styles.js b/packages/login/theme/material/vaadin-login-overlay-styles.js
@@ -311,7 +311,7 @@ const loginFormWrapper = css`
     padding: 2rem 2.5rem 2rem 1.8rem;
   }
 
-  :host([theme~='with-overlay']) [part='form'] h2 {
+  :host([theme~='with-overlay']) [part='form-title'] {
     text-align: center;
     font-size: 1.8em;
     font-weight: 500;