[FSADT1-1040] Apply HTML heading tags to heading styles for Accessibi…

…lity (#709) * temp: from heading-05 to heading-new-03 * temp: from heading-03 to heading-new-05 * temp: from heading-02 to heading-new-06 * temp: from heading-01 to heading-new-07 * refactor: replace heading-0n styles with hn tags * refactor: replace .fluid-heading-05 with h4.fluid
bcgov · Jan 3, 2024 · 168b37f · 168b37f
1 parent cf4d1be
commit 168b37f
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 60 deletions.
diff --git a/frontend/cypress/e2e/FormBCSCPage.cy.ts b/frontend/cypress/e2e/FormBCSCPage.cy.ts
@@ -61,7 +61,7 @@ describe("BCSC Form", () => {
     cy.get('[data-test="wizard-submit-button"]')
     .click();
 
-    cy.get('.fluid-heading-05').should('contain', 'Application submitted!');
+    cy.get('h4.fluid').should('contain', 'Application submitted!');
   });
 
   it("should add a new contact", () => {
@@ -125,7 +125,7 @@ describe("BCSC Form", () => {
     cy.get('[data-test="wizard-submit-button"]')
     .click();
 
-    cy.get('.fluid-heading-05').should('contain', 'Application submitted!');
+    cy.get('h4.fluid').should('contain', 'Application submitted!');
 
   });
 
@@ -196,7 +196,7 @@ describe("BCSC Form", () => {
     cy.get('[data-test="wizard-submit-button"]')
     .click();
 
-    cy.get('.fluid-heading-05').should('contain', 'Application submitted!');
+    cy.get('h4.fluid').should('contain', 'Application submitted!');
   });
 
 

diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -415,10 +415,10 @@ div#app {
   color: var(--light-theme-text-text-primary, #131315) !important;
 }
 
-.heading-01,
+.heading-07,
 cds-accordion-item.grouping-05-internal::part(title) {
   color: var(--light-theme-text-text-primary, #131315);
-  /* Fixed heading styles/heading-01 */
+  /* Fixed heading styles/heading-07 */
   font-family: BC Sans;
   font-size: 0.875rem;
   font-style: normal;
@@ -427,29 +427,29 @@ cds-accordion-item.grouping-05-internal::part(title) {
   letter-spacing: 0.01rem;
 }
 
-.heading-02 {
+h6 {
   color: var(--light-theme-text-text-primary, #131315) !important;
 
-  /* Fixed heading styles/heading-02 */
+  /* Fixed heading styles/heading-06 */
 
   font-size: 1rem;
   font-style: normal;
   font-weight: 700;
   line-height: 1.5rem;
 }
 
-.heading-03 {
+h5 {
   color: var(--light-theme-text-text-primary, #131315);
 
-  /* Fixed heading styles/heading-03 */
+  /* Fixed heading styles/heading-05 */
 
   font-size: 1.25rem;
   font-style: normal;
   font-weight: 400;
   line-height: 1.75rem;
 }
 
-.heading-04 {
+h4 {
   color: var(--light-theme-text-text-primary, #131315);
 
   /* Fixed heading styles/heading-04 */
@@ -460,22 +460,22 @@ cds-accordion-item.grouping-05-internal::part(title) {
   line-height: 2.25rem;
 }
 
-.heading-05 {
+h3 {
   color: var(--light-theme-text-text-primary, #131315);
 
-  /* Fixed heading styles/heading-05 */
+  /* Fixed heading styles/heading-03 */
 
   font-size: 2rem;
   font-style: normal;
   font-weight: 400;
   line-height: 2.5rem;
 }
 
-.fluid-heading-05 {
+h4.fluid {
   align-self: stretch;
   color: var(--light-theme-text-text-primary, #131315);
 
-  /* Fluid styles/MAX/fluid-heading-05 */
+  /* Fluid styles/MAX/fluid-heading-04 */
 
   font-size: 3.75rem;
   font-style: normal;
@@ -1404,8 +1404,8 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     align-items: flex-start;
   }
 
-  .fluid-heading-05 {
-    /* Fluid styles/SM/fluid-heading-05 */
+  h4.fluid {
+    /* Fluid styles/SM/fluid-heading-04 */
     font-size: 2rem;
     line-height: 2.5rem;
   }
@@ -1515,8 +1515,8 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     align-items: flex-start;
   }
 
-  .fluid-heading-05 {
-    /* Fluid styles/MED/fluid-heading-05 */
+  h4.fluid {
+    /* Fluid styles/MED/fluid-heading-04 */
     font-size: 2.25rem;
     line-height: 2.75rem;
   }
@@ -1606,8 +1606,8 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     column-gap: 4.0625rem;
   }
 
-  .fluid-heading-05 {
-    /* Fluid styles/MED/fluid-heading-05 */
+  h4.fluid {
+    /* Fluid styles/MED/fluid-heading-04 */
     font-size: 2.25rem;
     line-height: 2.75rem;
   }
@@ -1673,8 +1673,8 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     column-gap: 3.3125rem;
   }
 
-  .fluid-heading-05 {
-    /* Fluid styles/XLG/fluid-heading-05 */
+  h4.fluid {
+    /* Fluid styles/XLG/fluid-heading-04 */
     font-size: 3rem;
     line-height: 56px;
   }

diff --git a/frontend/src/components/MainHeaderComponent.vue b/frontend/src/components/MainHeaderComponent.vue
@@ -161,7 +161,7 @@ const onClickLogout = () => {
 
     <cds-header-panel :id="myProfilePanelId" v-if="$route.meta.profile" ref="myProfilePanel">
       <div class="grouping-16" id="panel-title">
-        <span class="heading-03">My profile</span>
+        <h5>My profile</h5>
         <cds-button kind="ghost" size="sm" @click.prevent="closePanel" class="close-panel-button">
           <Close16 slot="icon" />
         </cds-button>

diff --git a/frontend/src/pages/FormBCSCPage.vue b/frontend/src/pages/FormBCSCPage.vue
@@ -335,9 +335,9 @@ watch([error], () => {
 <template>
   <div class="form-header">
     <div class="form-header-title">
-      <span class="heading-05" data-scroll="top">
+      <h3 data-scroll="top">
         New client application
-      </span>
+      </h3>
     </div>
     <div class="hide-when-less-than-two-children"><!--
       This div is necessary to avoid the div.header-offset below from interfering in the flex flow.
@@ -351,9 +351,9 @@ watch([error], () => {
   </div>
 
   <div class="form-steps-section">
-    <span class="heading-04" data-scroll="scroll-0">
+    <h4 data-scroll="scroll-0">
       Personal information
-    </span>
+    </h4>
     <p class="body-compact-01">
       Review the information below. It’s from your BC Services card. We use it to know who we're giving a number to and for communicating with clients. 
     </p>
@@ -407,9 +407,9 @@ watch([error], () => {
       </div>
     </div>
 
-    <span class="heading-04" data-scroll="scroll-0">
+    <h4 data-scroll="scroll-0">
       Contact information
-    </span>
+    </h4>
     <p class="body-compact-01">
       We need your phone number to communicate with you.
     </p>
@@ -438,7 +438,7 @@ watch([error], () => {
         <hr />
 
         <div class="grouping-09" :data-scroll="`additional-contact-${index + 1}`">
-          <span class="heading-03">Additional contact</span>
+          <h5>Additional contact</h5>
         </div>
 
         <contact-group-component

diff --git a/frontend/src/pages/FormBCeIDPage.vue b/frontend/src/pages/FormBCeIDPage.vue
@@ -366,10 +366,10 @@ const scrollToNewContact = () => {
 <template>
   <div class="form-header">
     <div class="form-header-title">
-      <span class="heading-05">
+      <h3>
         <div data-scroll="top" class="header-offset"></div>
         New client application
-      </span>
+      </h3>
     </div>
     <cds-progress-indicator space-equally :vertical="isSmallScreen">
       <cds-progress-step 
@@ -398,7 +398,7 @@ const scrollToNewContact = () => {
 
     <div v-if="currentTab == 0" class="form-steps-01">
       <div class="form-steps-01-title">
-        <span class="heading-04" data-scroll="scroll-0">Before you begin</span>
+        <h4 data-scroll="scroll-0">Before you begin</h4>
         <ol type="1" class="bulleted-list body-compact-01">
           <li>
             A registered business must be in good standing with BC
@@ -414,10 +414,10 @@ const scrollToNewContact = () => {
       <hr class="divider" />
 
       <div class="form-steps-section">
-        <label class="heading-04" data-scroll="focus-0">
+        <h4 data-scroll="focus-0">
           <div data-scroll="step-title" class="header-offset"></div>
           {{ progressData[0].title}}
-        </label>
+        </h4>
         <div class="frame-01">
           <business-information-wizard-step
               v-model:data="formData"
@@ -430,10 +430,10 @@ const scrollToNewContact = () => {
 
     <div v-if="currentTab == 1" class="form-steps-02">
       <div class="form-steps-section">
-        <span class="heading-04" data-scroll="scroll-1">
+        <h4 data-scroll="scroll-1">
           <div data-scroll="step-title" class="header-offset"></div>
           {{ progressData[1].title}}
-        </span>
+        </h4>
 
         <div class="form-steps-section-01">
             <p class="body-01 heading-compact-01-dark">
@@ -451,15 +451,13 @@ const scrollToNewContact = () => {
 
     <div v-if="currentTab == 2" class="form-steps-03">
       <div class="form-steps-section">
-        <span class="heading-04" data-scroll="scroll-2">
+        <h4 data-scroll="scroll-2">
           <div data-scroll="step-title" class="header-offset"></div>
           {{ progressData[2].title}}
-        </span>
+        </h4>
 
         <div class="form-steps-section-01">
-          <span class="heading-03"
-              >Add authorized people to the account</span
-            >
+          <h5>Add authorized people to the account</h5>
             <p class="body-01 heading-compact-01-dark">
               Review your name and email address. They’re from your BCeID.
             </p>
@@ -477,10 +475,10 @@ const scrollToNewContact = () => {
     <div v-if="currentTab == 3" class="form-steps-04">
 
       <div class="form-steps-section form-steps-section-04">
-        <span class="heading-04" data-scroll="scroll-3">
+        <h4 data-scroll="scroll-3">
           <div data-scroll="step-title" class="header-offset"></div>
           {{ progressData[3].title}}
-        </span>
+        </h4>
         <span class="body-02">
           Review the content and make any changes by using the "Edit" buttons in each section below.
         </span>

diff --git a/frontend/src/pages/FormSubmittedPage.vue b/frontend/src/pages/FormSubmittedPage.vue
@@ -19,7 +19,7 @@ const SVG = useSvg(badgePictogram);
   <div class="frame-03">
     <SVG alt="Badge pictogram" class="submission-badge"></SVG>    
     <div class="form-header form-header-application-submitted">
-      <p class="fluid-heading-05">Application submitted!</p>
+      <h4 class="fluid">Application submitted!</h4>
       <p class="fluid-paragraph-01">Your application for a client number has been submitted.</p>
       <p class="fluid-paragraph-01">&nbsp;</p>
       <p class="fluid-paragraph-01">

diff --git a/frontend/src/pages/SubmissionListPage.vue b/frontend/src/pages/SubmissionListPage.vue
@@ -114,7 +114,7 @@ onMounted(() => {
     <div id="title">
       <div>
         <div class="form-header-title mg-sd-25">
-          <p class="heading-05">Submissions</p>
+          <h3>Submissions</h3>
           <p class="body-compact-01">Check and manage client submissions</p>
         </div>        
       </div>

diff --git a/frontend/src/pages/SubmissionReviewPage.vue b/frontend/src/pages/SubmissionReviewPage.vue
@@ -203,7 +203,7 @@ const tagColor = (status: string) =>{
 
         </cds-breadcrumb>
 
-        <p class="submission-details--title heading-05">
+        <h3 class="submission-details--title">
           <component
             data-testid="display-row-icon"
             :is="iconForRow(data.submissionType)"      
@@ -212,7 +212,7 @@ const tagColor = (status: string) =>{
           <span>
             {{ data.submissionType }}: {{ normalizeString(data.business.organizationName) }}
           </span>
-        </p>
+        </h3>
         <p class="body-01" v-if="data.submissionType === 'Auto approved client'">Check this new client data</p>
         <p class="body-01" v-else>Check and manage this submission for a new client number</p>
       </div>
@@ -295,7 +295,7 @@ const tagColor = (status: string) =>{
       <div class="grouping-14">
         <div class="grouping-05-short">
           <div>
-            <p class="heading-02 mg-tl-2">Client summary</p>
+            <h6 class="mg-tl-2">Client summary</h6>
             <div class="grouping-10">
               <read-only-component label="Name">
                 <span class="body-compact-01">{{ normalizeString(data.business.organizationName) }}</span>

diff --git a/frontend/src/pages/bceidform/AddressWizardStep.vue b/frontend/src/pages/bceidform/AddressWizardStep.vue
@@ -147,7 +147,7 @@ onMounted(() => safeSetFocusedComponent("addr_0", 800));
   <div v-for="(address, index) in otherAddresses">
     <hr />
     <div class="grouping-09">
-      <span class="heading-03">Additional address</span>
+      <h5>Additional address</h5>
     </div>
     <address-group-component
       :key="index + 1"

diff --git a/frontend/src/pages/bceidform/ContactWizardStep.vue b/frontend/src/pages/bceidform/ContactWizardStep.vue
@@ -156,7 +156,7 @@ defineExpose({
     <div  v-for="(contact, index) in otherContacts">
       <hr />
       <div class="grouping-09" :data-scroll="`additional-contact-${index + 1}`">
-      <span class="heading-03">Additional contact</span>
+      <h5>Additional contact</h5>
     </div>
     <contact-group-component
       :key="index + 1"

diff --git a/frontend/src/pages/bceidform/ReviewWizardStep.vue b/frontend/src/pages/bceidform/ReviewWizardStep.vue
@@ -55,13 +55,13 @@ onMounted(() => {
 
 <template>
   <div class="grouping-05">
-    <label class="heading-03">Business information</label>
+    <h5>Business information</h5>
     <div class="grouping-22">
       <div class="grouping-01">
-        <p class="heading-02 review-icon-title">
+        <h6 class="review-icon-title">
           <Enterprise20 />
           {{ formData.businessInformation.businessName }}
-        </p>
+        </h6>
         <p class="body-compact-01" id="clientTypeId">
           {{ clientType.text }}
         </p>
@@ -79,15 +79,15 @@ onMounted(() => {
     </div>
   </div>
   <div class="grouping-05">
-    <label class="heading-03">Address</label>
+    <h5>Address</h5>
     <div v-for="(address, index) in formData.location.addresses" 
         :key="address.locationName" 
         class="grouping-07">
       <hr class="divider" v-if="index > 0" />
-      <span class="heading-02 review-icon-title">
+      <h6 class="review-icon-title">
         <LocationStar20 v-if="index === 0" />
         <Location20 v-else />{{ address.locationName }}
-      </span>
+      </h6>
       <div class="grouping-23">
         <span class="body-compact-01">{{ address.streetAddress }}</span>
         <span class="body-compact-01">{{ address.city }}, {{ address.province.text }}</span>
@@ -103,15 +103,15 @@ onMounted(() => {
     </div>
   </div>
   <div class="grouping-05">
-    <label class="heading-03">Contacts</label>
+    <h5>Contacts</h5>
     <div v-for="(contact, index) in formData.location.contacts" 
         :key="contact.email" 
         class="grouping-07">
       <hr class="divider" 
           v-if="index > 0" />
-      <span class="heading-02 review-icon-title">
+      <h6 class="review-icon-title">
         <User20 />{{ contact.firstName }} {{ contact.lastName }}
-      </span>
+      </h6>
       <div class="grouping-23">
         <span class="body-compact-01">
           {{ contact.locationNames.map((codeDesc) => codeDesc.text).join(', ') }}