Merge pull request #71 from ScottLogic/disabled-calculate-button-acce…

…ssibility SFD-97: Add accessibility to disabled 'Calculate' Button
ScottLogic · Jun 14, 2024 · 12153f3 · 12153f3
2 parents 08c8f74 + 3bf7a6a
commit 12153f3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.component.html b/src/app/carbon-estimator-form/carbon-estimator-form.component.html
@@ -252,9 +252,10 @@
 
   <div class="tce-flex tce-gap-4 tce-flex-row-reverse">
     <button
-      class="tce-button-calculate tce-px-3 tce-py-2 disabled:tce-opacity-50 disabled:tce-cursor-not-allowed"
+      class="tce-button-calculate tce-px-3 tce-py-2"
+      [ngClass]="{ 'tce-opacity-50 tce-cursor-not-allowed': !estimatorForm.valid }"
       type="submit"
-      [disabled]="!estimatorForm.valid">
+      [attr.aria-disabled]="!estimatorForm.valid">
       Calculate
     </button>
     <button class="tce-button-reset tce-px-3 tce-py-2" type="button" (click)="resetForm()">Reset</button>

diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.component.ts b/src/app/carbon-estimator-form/carbon-estimator-form.component.ts
@@ -156,6 +156,9 @@ export class CarbonEstimatorFormComponent implements OnInit {
   }
 
   public handleSubmit() {
+    if (!this.estimatorForm.valid) {
+      return;
+    }
     const formValue = this.estimatorForm.getRawValue();
     if (formValue.onPremise.serverLocation === 'unknown') {
       formValue.onPremise.serverLocation = 'WORLD';