Make button focusable when disabled

ScottLogic · Jun 10, 2024 · f8c3a7b · f8c3a7b
1 parent 8d760db
commit f8c3a7b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 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
@@ -1,4 +1,4 @@
-<form (ngSubmit)="handleSubmit()" [formGroup]="estimatorForm" class="tce-w-full tce-flex tce-flex-col tce-gap-6">
+<form [formGroup]="estimatorForm" #estimatorFormComponent class="tce-w-full tce-flex tce-flex-col tce-gap-6">
   <div formGroupName="upstream">
     <ng-container *ngTemplateOutlet="sectionHeader; context: formContext.upstream"></ng-container>
 
@@ -235,9 +235,13 @@
 
   <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"
-      type="submit"
-      [disabled]="!estimatorForm.valid">
+      class="{{
+        'tce-button-calculate tce-px-3 tce-py-2' +
+          (!estimatorForm.valid ? ' tce-opacity-50 tce-cursor-not-allowed' : '')
+      }}"
+      type="button"
+      [attr.aria-disabled]="!estimatorForm.valid"
+      (click)="handleSubmit()">
       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
@@ -155,6 +155,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';