Merge pull request #2106 from ORCID/fix/8962-qa-accessibility-registr…

…ation-form-headings fix: Update accessibility headings in new register steps
ORCID · Dec 7, 2023 · 1d3b473 · 1d3b473
2 parents f7cd9ee + 856f3b4
commit 1d3b473
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 26 deletions.
diff --git a/src/app/register2/components/form-notifications/form-notifications.component.html b/src/app/register2/components/form-notifications/form-notifications.component.html
@@ -1,7 +1,7 @@
 <div [formGroup]="form">
-  <h2 class="orc-font-body" i18n="@@register.tipsFeaturesEmail">
+  <h3 class="orc-font-body" i18n="@@register.tipsFeaturesEmail">
     Tips & features email
-  </h2>
+  </h3>
   <p i18n="@@register.weOccasionallySend">
     We occasionally send out an email with information on new features and tips
     for getting the best out of your ORCID record.

diff --git a/src/app/register2/components/form-password/form-password.component.html b/src/app/register2/components/form-password/form-password.component.html
@@ -1,7 +1,7 @@
 <div [formGroup]="form">
-  <h2 i18n="@@register.yourPasswords" class="orc-font-body no-top-margin">
+  <h3 i18n="@@register.yourPasswords" class="orc-font-body no-top-margin">
     Your password
-  </h2>
+  </h3>
   <div class="input-container">
     <mat-label
       id="password-label"

diff --git a/src/app/register2/components/form-personal/form-personal.component.html b/src/app/register2/components/form-personal/form-personal.component.html
@@ -1,7 +1,7 @@
 <ng-container [formGroup]="form">
-  <h2 i18n="@@register.yourNames" class="orc-font-body margin-top-12">
+  <h3 i18n="@@register.yourNames" class="orc-font-body margin-top-12">
     Your names
-  </h2>
+  </h3>
 
   <div class="input-container">
     <mat-label
@@ -82,9 +82,9 @@ <h2 i18n="@@register.yourNames" class="orc-font-body margin-top-12">
 
   <!-- EMAIL -->
 
-  <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">
+  <h3 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">
     Your email addresses
-  </h2>
+  </h3>
   <ng-container formGroupName="emails">
     <div class="input-container">
       <mat-label
@@ -324,7 +324,7 @@ <h3 class="orc-font-body" i18n="@@register.addAnotherEmailToSecure">
           <div>
             <ng-container i18n="@@register.weRecommendAdding"
               >We recommend adding a </ng-container
-            ><strong i18n="@@register.personalEmail">personal email</strong>
+            >&nbsp;<strong i18n="@@register.personalEmail">personal email</strong>&nbsp;
             <ng-container i18n="@@register.asBackupSoYouAlways">
               as backup so you always have access to your ORCID account if you
               change jobs or roles.</ng-container

diff --git a/src/app/register2/components/form-terms/form-terms.component.html b/src/app/register2/components/form-terms/form-terms.component.html
@@ -1,4 +1,4 @@
-<h2 class="orc-font-body" i18n="@@register.termsOfUse">Terms of Use</h2>
+<h3 class="orc-font-body" i18n="@@register.termsOfUse">Terms of Use</h3>
 <mat-error
   *ngIf="
     termsOfUseWasTouched &&

diff --git a/src/app/register2/components/form-visibility/form-visibility.component.html b/src/app/register2/components/form-visibility/form-visibility.component.html
@@ -7,13 +7,11 @@
     </ng-container>
   </p>
   <fieldset>
-    <legend
-      class="orc-font-body mat-subheading-2"
-      i18n="@@register.visibilityLegend"
-    >
-      Visibility settings
+    <legend >
+      <h3 class="orc-font-body mat-subheading-2" i18n="@@register.visibilityLegend">
+        Visibility settings
+      </h3>
     </legend>
-
     <p i18n="@@register.visibilityDescription3">
       By default, what visibility should be given to new items added to your
       ORCID Record?

diff --git a/src/app/register2/components/register2.scss-theme.scss b/src/app/register2/components/register2.scss-theme.scss
@@ -8,6 +8,10 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
+  h2 {
+    font-weight: normal;
+  }
+
   .step-actions {
     border-color: mat.get-color-from-palette($background, ui-background-light);
     .mat-raised-button.mat-primary {

diff --git a/src/app/register2/components/register2.style.scss b/src/app/register2/components/register2.style.scss
@@ -7,17 +7,26 @@ a {
   margin-top: 0;
 }
 
-h2.margin-top-12,
+h2 {
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+h3.margin-top-12,
 .step-actions.margin-top-12,
 .margin-top-12 {
   margin-top: 12px;
 }
 
-h2,
 legend {
   margin-top: 32px;
   margin-bottom: 14px;
   font-weight: bold;
+  h3 {
+    margin-block-start: 0;
+    margin-block-end: 0;
+    font-weight: bold;
+  }
 }
 
 fieldset {

diff --git a/src/app/register2/components/step-a/step-a.component.html b/src/app/register2/components/step-a/step-a.component.html
@@ -20,8 +20,11 @@ <h1 class="orc-font-heading-small" i18n="@@register.create">
         Thank you for reactivating your ORCID iD.
       </ng-container>
     </mat-card-title>
-    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step1.2"
-      >Step 1 of 4 - Names and emails</mat-card-subtitle
+    <mat-card-subtitle role="heading" aria-level="2">
+      <h2 class="orc-font-body-small" i18n="@@register.step1.2">
+        Step 1 of 4 - Names and emails
+      </h2>
+    </mat-card-subtitle
     >
   </mat-card-header>
 

diff --git a/src/app/register2/components/step-b/step-b.component.html b/src/app/register2/components/step-b/step-b.component.html
@@ -20,8 +20,9 @@ <h1 class="orc-font-heading-small" i18n="@@register.create">
         Thank you for reactivating your ORCID iD.
       </ng-container>
     </mat-card-title>
-    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step2.2"
-      >Step 2 of 4 - Password</mat-card-subtitle
+    <mat-card-subtitle role="heading" aria-level="2">
+      <h2 class="orc-font-body-small" i18n="@@register.step2.2">Step 2 of 4 - Password</h2>
+    </mat-card-subtitle
     >
   </mat-card-header>
 

diff --git a/src/app/register2/components/step-c-t/step-c.component.html b/src/app/register2/components/step-c-t/step-c.component.html
@@ -26,8 +26,9 @@ <h1 class="orc-font-heading-small" i18n="@@register.create">
         Thank you for reactivating your ORCID iD.
       </ng-container>
     </mat-card-title>
-    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step2.3"
-      >Step 3 of 4 - Visibility</mat-card-subtitle
+    <mat-card-subtitle role="heading" aria-level="2">
+        <h2 class="orc-font-body-small" i18n="@@register.step2.3">Step 3 of 4 - Visibility</h2>
+    </mat-card-subtitle
     >
   </mat-card-header>
 

diff --git a/src/app/register2/components/step-d/step-d.component.html b/src/app/register2/components/step-d/step-d.component.html
@@ -27,8 +27,9 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
         Thank you for reactivating your ORCID iD.
       </ng-container>
     </mat-card-title>
-    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step2.3"
-      >Step 4 of 4 - Terms and conditions</mat-card-subtitle
+    <mat-card-subtitle role="heading" aria-level="2">
+        <h2 class="orc-font-body-small" i18n="@@register.step2.3">Step 4 of 4 - Terms and conditions</h2>
+    </mat-card-subtitle
     >
   </mat-card-header>