Resolve portal accessibility errors and alerts

alcs-frontend/src/styles/colors.scss

@@ -19,7 +19,7 @@ $link-color: #1a5a96;
 
 $bg-color: #f5f7e7;
 
-$error-color: #d8292f;
+$error-color: #c6242a;
 $success-color: #2e8540;
 $warning-color: #fcba19;
 

portal-frontend/src/app/features/applications/application-details/application-details.component.html

@@ -1,3 +1,4 @@
+<h2 *ngIf="showEdit" class="page-title">Review & Submit</h2>
 <section>
   <app-parcel
     [draftMode]="draftMode"

portal-frontend/src/app/features/applications/application-details/application-details.component.scss

@@ -2,6 +2,10 @@
 @use '../../../../styles/colors';
 
 :host::ng-deep {
+  .page-title {
+    margin: rem(16) 0 !important;
+  }
+
   .multiple-documents {
     a {
       display: block;

portal-frontend/src/app/features/applications/edit-submission/change-application-type-dialog/change-application-type-dialog.component.html

@@ -15,13 +15,7 @@ <h4>Change Application Type</h4>
 
     <div [ngClass]="{ 'display-none': stepIdx !== applicationTypeStep }">
       <div class="step-description">Select an option to learn more about the application type.</div>
-      <mat-radio-group
-        class="app-type-radio-group"
-        aria-labelledby="radio-label"
-        (change)="onAppTypeSelected($event)"
-        color="primary"
-        required
-      >
+      <mat-radio-group class="app-type-radio-group" (change)="onAppTypeSelected($event)" color="primary" required>
         <mat-radio-button *ngFor="let appType of applicationTypes" [value]="appType.code" class="radio-option">
           {{ appType.portalLabel }}
         </mat-radio-button>

portal-frontend/src/app/features/applications/edit-submission/land-use/land-use.component.html

@@ -122,7 +122,7 @@ <h5>Choose and describe neighbouring land uses.</h5>
     <div class="subtext">Choose the main land use type from the drop-down and describe the specific activities.</div>
     <div class="form-row">
       <div class="full-row">
-        <label for="northLandUseType">North</label>
+        <mat-label for="northLandUseType">North</mat-label>
         <div class="land-use-type-wrapper">
           <div class="land-use-type">
             <mat-form-field appearance="outline">
@@ -147,6 +147,7 @@ <h5>Choose and describe neighbouring land uses.</h5>
                 placeholder="Specific Activity"
                 matInput
                 formControlName="northLandUseTypeDescription"
+                aria-label="North land use type description"
               />
             </mat-form-field>
             <div
@@ -164,7 +165,7 @@ <h5>Choose and describe neighbouring land uses.</h5>
       </div>
 
       <div class="full-row">
-        <label for="eastLandUseType">East</label>
+        <mat-label for="eastLandUseType">East</mat-label>
         <div class="land-use-type-wrapper">
           <div class="land-use-type">
             <mat-form-field appearance="outline">
@@ -189,6 +190,7 @@ <h5>Choose and describe neighbouring land uses.</h5>
                 placeholder="Specific Activity"
                 matInput
                 formControlName="eastLandUseTypeDescription"
+                aria-label="East land use type description"
               />
             </mat-form-field>
             <div
@@ -206,7 +208,7 @@ <h5>Choose and describe neighbouring land uses.</h5>
       </div>
 
       <div class="full-row">
-        <label for="southLandUseType">South</label>
+        <mat-label for="southLandUseType">South</mat-label>
         <div class="land-use-type-wrapper">
           <div class="land-use-type">
             <mat-form-field appearance="outline">
@@ -231,6 +233,7 @@ <h5>Choose and describe neighbouring land uses.</h5>
                 placeholder="Specific Activity"
                 matInput
                 formControlName="southLandUseTypeDescription"
+                aria-label="South land use type description"
               />
             </mat-form-field>
             <div
@@ -248,7 +251,7 @@ <h5>Choose and describe neighbouring land uses.</h5>
       </div>
 
       <div class="full-row">
-        <label for="westLandUseType">West</label>
+        <mat-label for="westLandUseType">West</mat-label>
         <div class="land-use-type-wrapper">
           <div class="land-use-type">
             <mat-form-field appearance="outline">
@@ -273,6 +276,7 @@ <h5>Choose and describe neighbouring land uses.</h5>
                 placeholder="Specific Activity"
                 matInput
                 formControlName="westLandUseTypeDescription"
+                aria-label="West land use type description"
               />
             </mat-form-field>
             <div

portal-frontend/src/app/features/applications/edit-submission/other-attachments/other-attachments.component.html

@@ -51,6 +51,7 @@ <h2>Optional Attachments</h2>
                 type="text"
                 matInput
                 placeholder="Type description"
+                aria-label="Attachment description"
               />
             </mat-form-field>
             <div

portal-frontend/src/app/features/applications/edit-submission/other-attachments/other-attachments.component.scss

@@ -33,6 +33,6 @@ h4 {
 
 .no-data-text {
   text-align: center;
-  color: colors.$grey;
+  color: colors.$grey-dark;
   padding-top: rem(12);
 }

portal-frontend/src/app/features/applications/edit-submission/parcel-details/parcel-details.component.html

@@ -1,6 +1,6 @@
 <div>
   <div class="step-description">
-    <h3>Identify Parcels Under Application</h3>
+    <h2>Identify Parcels Under Application</h2>
     <p>Provide parcel identification and registered ownership information for each parcel under application.</p>
     <p>*All fields are required unless stated optional.</p>
     <div class="step-documents">
@@ -23,7 +23,7 @@ <h6>Documents needed for this step:</h6>
     </mat-expansion-panel-header>
 
     <app-parcel-entry
-      [isDraft]='draftMode'
+      [isDraft]="draftMode"
       [parcel]="parcel"
       [$owners]="$owners"
       [fileId]="fileId"

portal-frontend/src/app/features/applications/edit-submission/parcel-details/parcel-entry/parcel-entry.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="parcelForm" (keydown.enter)="$event.preventDefault()">
   <div class="type">
-    <label>Select ownership type:</label>
+    <mat-label for="parcelType">Select ownership type:</mat-label>
     <div class="warning">
       The answer to the following question will change the rest of the application form. Do not change this answer once
       selected.
@@ -147,7 +147,7 @@ <h5>Parcel Lookup</h5>
     </div>
 
     <div>
-      <label for="isFarm">Farm Classification</label>
+      <mat-label for="isFarm">Farm Classification</mat-label>
       <div class="subtext">
         As determined by
         <a class="subtext" href="https://www.bcassessment.ca/" target="_blank" rel="noreferrer">BC Assessment</a>
@@ -183,7 +183,7 @@ <h5>Parcel Lookup</h5>
   </div>
 
   <div class="section" *ngIf="enableCertificateOfTitleUpload">
-    <label for="certificate-of-title-upload">Upload Certificate of Title</label>
+    <mat-label for="certificate-of-title-upload">Upload Certificate of Title</mat-label>
     <div class="subtext">
       Visit
       <a href="https://ltsa.ca/property-owners/how-can-i/search-for-a-title/" target="_blank">BC Land Title & Survey</a>
@@ -273,9 +273,7 @@ <h6>Owner Information</h6>
       </div>
     </ng-container>
     <ng-container *ngIf="isCrownLand">
-      <div>
-        <label for="crown-owner-type">Select owner:</label>
-      </div>
+      <mat-label for="crown-owner-type">Select owner:</mat-label>
       <mat-radio-group
         formControlName="crownLandOwnerType"
         class="crown-owner-type"

portal-frontend/src/app/features/applications/edit-submission/primary-contact/primary-contact.component.html

@@ -116,7 +116,7 @@ <h4>Primary Contact Information</h4>
           </div>
         </div>
         <div>
-          <label for="firstName">Email</label>
+          <label for="email">Email</label>
           <mat-form-field appearance="outline">
             <input id="email" type="email" matInput placeholder="Enter Email" formControlName="email" />
           </mat-form-field>

portal-frontend/src/app/features/applications/edit-submission/proposal/cove-proposal/cove-proposal.component.html

@@ -153,7 +153,7 @@ <h2>Proposal</h2>
         <div class="subtext">Characters left: {{ 4000 - purposeText.textLength }}</div>
       </div>
       <div class="full-row">
-        <label class="subheading2" for="proposal-map">Proposal Map / Site Plan</label>
+        <mat-label class="subheading2" for="proposal-map">Proposal Map / Site Plan</mat-label>
         <div class="subtext">A visual representation of your proposal.</div>
         <app-file-drag-drop
           id="proposal-map"
@@ -167,7 +167,7 @@ <h2>Proposal</h2>
         ></app-file-drag-drop>
       </div>
       <div class="full-row">
-        <label for="hasDraftCopy"> Do you have a draft copy of the covenant? </label>
+        <mat-label for="hasDraftCopy"> Do you have a draft copy of the covenant? </mat-label>
         <div class="subtext">If yes, please attach the Draft in the section below.</div>
         <div>
           <mat-button-toggle-group
@@ -196,7 +196,7 @@ <h2>Proposal</h2>
         </div>
       </div>
       <div class="full-row">
-        <label class="subheading2" for="proposal-map">Draft Covenant</label>
+        <mat-label class="subheading2" for="draftCovenant">Draft Covenant</mat-label>
         <div class="subtext">A visual representation of your proposal.</div>
         <app-file-drag-drop
           id="draftCovenant"

portal-frontend/src/app/features/applications/edit-submission/proposal/cove-proposal/cove-proposal.component.scss

@@ -2,7 +2,7 @@
 @use '../../../../../../styles/colors';
 
 .no-data {
-  color: colors.$grey;
+  color: colors.$grey-dark;
   text-align: center;
   padding: rem(8);
 }
@@ -31,7 +31,8 @@
     flex-direction: column;
     align-items: start;
 
-    div, button {
+    div,
+    button {
       margin-top: rem(4);
       width: 100%;
     }

portal-frontend/src/app/features/applications/edit-submission/proposal/cove-proposal/transferee-dialog/transferee-dialog.component.html

@@ -6,7 +6,7 @@ <h3 *ngIf="isEdit">Edit Transferee</h3>
   <form [formGroup]="form">
     <div class="form-row">
       <div class="full-row">
-        <label for="type">Transferee Type</label>
+        <mat-label for="type">Transferee Type</mat-label>
         <mat-button-toggle-group (change)="onChangeType($event)" class="input" id="type" formControlName="type">
           <mat-button-toggle color="primary" [value]="OWNER_TYPE.INDIVIDUAL">Individual</mat-button-toggle>
           <mat-button-toggle color="primary" [value]="OWNER_TYPE.ORGANIZATION">Organization</mat-button-toggle>
@@ -64,7 +64,7 @@ <h5 class="full-row" *ngIf="type.getRawValue() === OWNER_TYPE.ORGANIZATION">Orga
         </div>
       </div>
       <div>
-        <label for="firstName">Email</label>
+        <label for="email">Email</label>
         <mat-form-field appearance="outline">
           <input id="email" type="email" matInput placeholder="Enter Email" formControlName="email" />
         </mat-form-field>

portal-frontend/src/app/features/applications/edit-submission/proposal/excl-proposal/excl-proposal.component.html

@@ -19,13 +19,13 @@ <h2>Proposal</h2>
 <form [formGroup]="form">
   <div class="form-row">
     <div class="full-row">
-      <label for="hectares">The governmental or prescribed public body that is applying to exclude land:</label>
+      <label for="prescribedBody">The governmental or prescribed public body that is applying to exclude land:</label>
       <div class="subtext">
         Note: To change this selection, you will need to use the 'Change Application Type' button at the top right of
         the form.
       </div>
       <mat-form-field appearance="outline">
-        <input matInput [value]="prescribedBody ?? ''" disabled />
+        <input matInput [value]="prescribedBody ?? ''" disabled id="prescribedBody" />
       </mat-form-field>
     </div>
     <div>
@@ -50,10 +50,10 @@ <h2>Proposal</h2>
       </div>
     </div>
     <div class="full-row">
-      <label for="share-property">
+      <mat-label for="share-property">
         Does any land under application share a common property line with land in another Local or First Nation
         Government?
-      </label>
+      </mat-label>
       <div class="subtext">
         If any property under application shares a common boundary with a neighbouring Local or First Nation Government,
         then that government must be notified of the application and given the opportunity to comment.
@@ -116,7 +116,7 @@ <h2>Proposal</h2>
       </div>
     </div>
     <div class="full-row">
-      <label class="subheading2" for="proposal-map">Proposal Map / Site Plan</label>
+      <mat-label class="subheading2" for="proposal-map">Proposal Map / Site Plan</mat-label>
       <div class="subtext">A visual representation of your proposal.</div>
       <app-file-drag-drop
         id="proposal-map"
@@ -149,7 +149,7 @@ <h3>Notification and Public Hearing Requirements</h3>
   <form>
     <div class="form-row">
       <div class="full-row">
-        <label class="subheading2" for="advertising">Notice of Public Hearing (Advertisement)</label>
+        <mat-label class="subheading2" for="advertising">Notice of Public Hearing (Advertisement)</mat-label>
         <div class="subtext">
           Proof that notice of the application was provided in a form and manner acceptable to the Commission
         </div>
@@ -166,7 +166,7 @@ <h3>Notification and Public Hearing Requirements</h3>
         ></app-file-drag-drop>
       </div>
       <div class="full-row">
-        <label class="subheading2" for="signage">Proof of Signage</label>
+        <mat-label class="subheading2" for="signage">Proof of Signage</mat-label>
         <div class="subtext">
           Proof that a sign, in a form and manner acceptable to the Commission, was posted on the land that is the
           subject of the application
@@ -184,7 +184,7 @@ <h3>Notification and Public Hearing Requirements</h3>
         ></app-file-drag-drop>
       </div>
       <div class="full-row">
-        <label class="subheading2" for="report">Report of Public Hearing</label>
+        <mat-label class="subheading2" for="report">Report of Public Hearing</mat-label>
         <div class="subtext">Public hearing report and any other public comments received</div>
         <app-file-drag-drop
           id="report"

portal-frontend/src/app/features/applications/edit-submission/proposal/incl-proposal/incl-proposal.component.html

@@ -107,7 +107,7 @@ <h2>Proposal</h2>
       <div class="subtext">Characters left: {{ 4000 - improvementsText.textLength }}</div>
     </div>
     <div class="full-row">
-      <label class="subheading2" for="proposal-map">Proposal Map / Site Plan</label>
+      <mat-label class="subheading2" for="proposal-map">Proposal Map / Site Plan</mat-label>
       <div class="subtext">A visual representation of your proposal.</div>
       <app-file-drag-drop
         id="proposal-map"
@@ -121,8 +121,9 @@ <h2>Proposal</h2>
       ></app-file-drag-drop>
     </div>
     <div class="full-row" *ngIf="showGovernmentQuestions">
-      <label for="isFarm"
-        >Is the {{ governmentName }} the registered land owner of all parcels under this inclusion application?</label
+      <mat-label for="isFarm"
+        >Is the {{ governmentName }} the registered land owner of all parcels under this inclusion
+        application?</mat-label
       >
       <div class="subtext">
         The ALR General Regulation does not require the {{ governmentName }} to complete a public hearing if all
@@ -185,7 +186,7 @@ <h3>Notification and Public Hearing Requirements</h3>
   <form>
     <div class="form-row">
       <div class="full-row">
-        <label class="subheading2" for="advertising">Notice of Public Hearing (Advertisement)</label>
+        <mat-label class="subheading2" for="advertising">Notice of Public Hearing (Advertisement)</mat-label>
         <div class="subtext">
           Proof that notice of the application was provided in a form and manner acceptable to the Commission
         </div>
@@ -203,7 +204,7 @@ <h3>Notification and Public Hearing Requirements</h3>
         ></app-file-drag-drop>
       </div>
       <div class="full-row">
-        <label class="subheading2" for="signage">Proof of Signage</label>
+        <mat-label class="subheading2" for="signage">Proof of Signage</mat-label>
         <div class="subtext">
           Proof that a sign, in a form and manner acceptable to the Commission, was posted on the land that is the
           subject of the application
@@ -222,7 +223,7 @@ <h3>Notification and Public Hearing Requirements</h3>
         ></app-file-drag-drop>
       </div>
       <div class="full-row">
-        <label class="subheading2" for="report">Report of Public Hearing</label>
+        <mat-label class="subheading2" for="report">Report of Public Hearing</mat-label>
         <div class="subtext">Public hearing report and any other public comments received</div>
         <app-file-drag-drop
           id="report"