[GDSD] accessibility part-2

src/Spd.Presentation.GuideDogServiceDog/ClientApp/angular.json

@@ -1,118 +1,110 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "ClientApp": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss",
-          "inlineStyle": true,
-          "inlineTemplate": true,
-          "flat": true,
-          "skipTests": true
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:application",
-          "options": {
+	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+	"version": 1,
+	"newProjectRoot": "projects",
+	"projects": {
+		"ClientApp": {
+			"projectType": "application",
+			"schematics": {
+				"@schematics/angular:component": {
+					"style": "scss",
+					"inlineStyle": true,
+					"inlineTemplate": true,
+					"flat": true,
+					"skipTests": true
+				}
+			},
+			"root": "",
+			"sourceRoot": "src",
+			"prefix": "app",
+			"architect": {
+				"build": {
+					"builder": "@angular-devkit/build-angular:application",
+					"options": {
 						"outputPath": {
 							"base": "dist",
 							"browser": ""
 						},
-            "index": "src/index.html",
-            "browser": "src/main.ts",
-            "polyfills": ["zone.js"],
-            "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
+						"index": "src/index.html",
+						"browser": "src/main.ts",
+						"polyfills": ["zone.js"],
+						"tsConfig": "tsconfig.app.json",
+						"inlineStyleLanguage": "scss",
 						"assets": ["src/favicon.ico", "src/assets", "src/maintenance"],
-            "styles": [
-              "@angular/material/prebuilt-themes/azure-blue.css",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/ngx-spinner/animations/square-jelly-box.css",
-              "node_modules/@ngxpert/hot-toast/src/styles/styles.css",
-              "src/scss/app.scss"
-            ],
-            "scripts": [
-              "node_modules/jquery/dist/jquery.min.js",
-              "node_modules/bootstrap/dist/js/bootstrap.min.js"
-            ],
-            "allowedCommonJsDependencies": ["moment"]
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
-                }
-              ],
-              "outputHashing": "all",
-              "baseHref": "/guide-dog-service-dog/"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "ClientApp:build:production"
-            },
-            "development": {
-              "buildTarget": "ClientApp:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "polyfills": ["zone.js", "zone.js/testing"],
-            "tsConfig": "tsconfig.spec.json",
+						"styles": [
+							"@angular/material/prebuilt-themes/azure-blue.css",
+							"node_modules/bootstrap/dist/css/bootstrap.min.css",
+							"node_modules/ngx-spinner/animations/square-jelly-box.css",
+							"src/scss/app.scss"
+						],
+						"scripts": ["node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js"],
+						"allowedCommonJsDependencies": ["moment"]
+					},
+					"configurations": {
+						"production": {
+							"budgets": [
+								{
+									"type": "initial",
+									"maximumWarning": "500kB",
+									"maximumError": "5mb"
+								},
+								{
+									"type": "anyComponentStyle",
+									"maximumWarning": "4kB",
+									"maximumError": "8kB"
+								}
+							],
+							"outputHashing": "all",
+							"baseHref": "/guide-dog-service-dog/"
+						},
+						"development": {
+							"optimization": false,
+							"extractLicenses": false,
+							"sourceMap": true
+						}
+					},
+					"defaultConfiguration": "production"
+				},
+				"serve": {
+					"builder": "@angular-devkit/build-angular:dev-server",
+					"configurations": {
+						"production": {
+							"buildTarget": "ClientApp:build:production"
+						},
+						"development": {
+							"buildTarget": "ClientApp:build:development"
+						}
+					},
+					"defaultConfiguration": "development"
+				},
+				"extract-i18n": {
+					"builder": "@angular-devkit/build-angular:extract-i18n"
+				},
+				"test": {
+					"builder": "@angular-devkit/build-angular:karma",
+					"options": {
+						"polyfills": ["zone.js", "zone.js/testing"],
+						"tsConfig": "tsconfig.spec.json",
 						"assets": ["src/favicon.ico", "src/assets", "src/maintenance"],
-            "styles": [
-              "@angular/material/prebuilt-themes/azure-blue.css",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/ngx-spinner/animations/square-jelly-box.css",
-              "node_modules/@ngxpert/hot-toast/src/styles/styles.css",
-              "src/scss/app.scss"
-            ],
-            "scripts": [
-              "node_modules/jquery/dist/jquery.min.js",
-              "node_modules/bootstrap/dist/js/bootstrap.min.js"
-            ]
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
-          }
-        }
-      }
-    }
-  },
-  "cli": {
-    "analytics": false
-  }
+						"styles": [
+							"@angular/material/prebuilt-themes/azure-blue.css",
+							"node_modules/bootstrap/dist/css/bootstrap.min.css",
+							"node_modules/ngx-spinner/animations/square-jelly-box.css",
+							"src/scss/app.scss"
+						],
+						"scripts": ["node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js"]
+					}
+				},
+				"lint": {
+					"builder": "@angular-eslint/builder:lint",
+					"options": {
+						"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+					}
+				}
+			}
+		}
+	},
+	"cli": {
+		"analytics": false
+	}
 }

src/Spd.Presentation.GuideDogServiceDog/ClientApp/package.json

@@ -29,7 +29,6 @@
     "@bcgov/bc-sans": "^2.1.0",
     "@ngneat/overview": "^6.1.1",
     "@ngneat/until-destroy": "^10.0.0",
-    "@ngxpert/hot-toast": "^4.1.2",
     "angular-oauth2-oidc": "^19.0.0",
     "bootstrap": "^5.3.5",
     "jquery": "^3.7.0",

src/Spd.Presentation.GuideDogServiceDog/ClientApp/src/app/app.module.ts

@@ -4,7 +4,6 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { provideHotToastConfig } from '@ngxpert/hot-toast';
 import { OAuthModule } from 'angular-oauth2-oidc';
 import { NgxSpinnerModule } from 'ngx-spinner';
 import { AppRoutingModule } from './app-routing.module';
@@ -246,7 +245,6 @@ import { SharedModule } from './shared/shared.module';
 		SharedModule,
 	],
 	providers: [
-		provideHotToastConfig(),
 		{
 			provide: APP_BASE_HREF,
 			useFactory: (location: PlatformLocation) => location.getBaseHrefFromDOM(),

src/Spd.Presentation.GuideDogServiceDog/ClientApp/src/app/components/dog-trainer/step-dt-dog-trainer-info.component.ts

@@ -38,26 +38,22 @@ import { FormErrorStateMatcher } from '@app/shared/directives/form-error-state-m
 									<mat-label>Date of Birth</mat-label>
 									<input
 										matInput
-										[matDatepicker]="picker"
 										formControlName="trainerDateOfBirth"
-										[max]="maxBirthDate"
-										[min]="minDate"
+										[mask]="dateMask"
+										[showMaskTyped]="true"
 										[errorStateMatcher]="matcher"
+										(blur)="onValidateDate()"
 									/>
-									<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-									<mat-datepicker #picker startView="multi-year"></mat-datepicker>
 									<!-- We always want the date format hint to display -->
 									<mat-hint *ngIf="!showHintError">Date format YYYY-MM-DD</mat-hint>
 									<mat-error *ngIf="showHintError">
 										<span class="hint-inline">Date format YYYY-MM-DD</span>
 									</mat-error>
 									<mat-error *ngIf="trainerDateOfBirth?.hasError('required')">This is required</mat-error>
-									<mat-error *ngIf="trainerDateOfBirth?.hasError('matDatepickerMin')">
-										Invalid date of birth
-									</mat-error>
-									<mat-error *ngIf="trainerDateOfBirth?.hasError('matDatepickerMax')">
-										This must be on or before {{ maxBirthDate | formatDate }}
-									</mat-error>
+									<mat-error *ngIf="trainerDateOfBirth?.hasError('invalidDate')">This date is invalid</mat-error>
+									<mat-error *ngIf="trainerDateOfBirth?.hasError('futureDate')"
+										>This date cannot be in the future</mat-error
+									>
 								</mat-form-field>
 							</div>
 							<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-12">
@@ -104,8 +100,7 @@ export class StepDtDogTrainerInfoComponent implements OnInit, LicenceChildSteppe
 	applicationTypeCodes = ApplicationTypeCode;
 	matcher = new FormErrorStateMatcher();
 
-	maxBirthDate = this.utilService.getBirthDateMax();
-	minDate = this.utilService.getDateMin();
+	dateMask = SPD_CONSTANTS.date.dateMask;
 	phoneMask = SPD_CONSTANTS.phone.displayMask;
 
 	form: FormGroup = this.dogTrainerApplicationService.dogTrainerFormGroup;
@@ -127,13 +122,20 @@ export class StepDtDogTrainerInfoComponent implements OnInit, LicenceChildSteppe
 		return this.form.valid;
 	}
 
+	onValidateDate(): void {
+		const errorKey = this.utilService.getIsInputValidDate(this.trainerDateOfBirth.value);
+		if (errorKey) {
+			this.trainerDateOfBirth.setErrors({ [errorKey]: true });
+		}
+	}
+
 	get isRenewal(): boolean {
 		return this.applicationTypeCode === ApplicationTypeCode.Renewal;
 	}
 	get showHintError(): boolean {
 		return (this.trainerDateOfBirth?.dirty || this.trainerDateOfBirth?.touched) && this.trainerDateOfBirth?.invalid;
 	}
-	public get trainerDateOfBirth(): FormControl {
+	get trainerDateOfBirth(): FormControl {
 		return this.form.get('trainerDateOfBirth') as FormControl;
 	}
 }

src/Spd.Presentation.GuideDogServiceDog/ClientApp/src/app/components/dog-trainer/step-dt-training-school-info.component.ts

@@ -12,7 +12,7 @@ import { FormErrorStateMatcher } from '@app/shared/directives/form-error-state-m
 		<app-step-section [heading]="title" [subheading]="subtitle">
 			<form [formGroup]="form" novalidate>
 				<div class="row">
-					<div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 mx-auto">
+					<div class="col-xl-7 col-lg-12 col-md-12 col-sm-12 mx-auto">
 						<app-form-gdsd-accredited-school
 							schoolLabel="Name of Assistance Dogs International or International Guide Dog Federation Accredited School"
 							[accreditedSchoolIdControl]="accreditedSchoolId"

src/Spd.Presentation.GuideDogServiceDog/ClientApp/src/app/components/gdsd-team/gdsd-team-wizard-new-renewal.component.ts

@@ -30,7 +30,7 @@ import { StepsTeamTrainingInfoComponent } from './steps-team-training-info.compo
 			(selectionChange)="onStepSelectionChange($event)"
 			#stepper
 		>
-			<mat-step>
+			<mat-step [completed]="step1Complete">
 				<app-steps-team-selection
 					[isFormValid]="isFormValid"
 					[applicationTypeCode]="applicationTypeCode"
@@ -41,7 +41,7 @@ import { StepsTeamTrainingInfoComponent } from './steps-team-training-info.compo
 				></app-steps-team-selection>
 			</mat-step>
 
-			<mat-step>
+			<mat-step [completed]="step2Complete">
 				<app-steps-team-personal-info
 					[isLoggedIn]="isLoggedIn"
 					[showSaveAndExit]="showSaveAndExit"
@@ -57,7 +57,7 @@ import { StepsTeamTrainingInfoComponent } from './steps-team-training-info.compo
 				></app-steps-team-personal-info>
 			</mat-step>
 
-			<mat-step>
+			<mat-step [completed]="step3Complete">
 				<app-steps-team-dog-info
 					[isLoggedIn]="isLoggedIn"
 					[showSaveAndExit]="showSaveAndExit"
@@ -73,7 +73,7 @@ import { StepsTeamTrainingInfoComponent } from './steps-team-training-info.compo
 				></app-steps-team-dog-info>
 			</mat-step>
 
-			<mat-step *ngIf="isNew">
+			<mat-step [completed]="step4Complete" *ngIf="isNew">
 				<app-steps-team-training-info
 					[isLoggedIn]="isLoggedIn"
 					[showSaveAndExit]="showSaveAndExit"
@@ -278,9 +278,10 @@ export class GdsdTeamWizardNewRenewalComponent extends BaseWizardComponent imple
 		if (this.gdsdTeamApplicationService.isAutoSave()) {
 			this.gdsdTeamApplicationService.partialSaveLicenceStepAuthenticated().subscribe({
 				next: (_resp: any) => {
+					const matchingIndex = this.getMatchingIndex(this.STEP_REVIEW_AND_CONFIRM);
 					setTimeout(() => {
 						// hack... does not navigate without the timeout
-						this.stepper.selectedIndex = this.getMatchingIndex(this.STEP_REVIEW_AND_CONFIRM);
+						this.stepper.selectedIndex = matchingIndex;
 					}, 250);
 				},
 				error: (error: HttpErrorResponse) => {