Fix Create a new process page accessibility issues

- Added missing aria-label to delete buttons
- Moved hardcoded translation to translation files
- Fix color contrast issues on buttons
- Fix minor alignment issues
- Added missing aria labels to input and select elements

Author: alexandrevryghem

src/app/process-page/form/process-form.component.html

@@ -3,12 +3,12 @@
         <h2 class="col-12">
             {{headerKey | translate}}
         </h2>
-        <div class="col-12 col-md-6">
+        <div class="col-12 col-md-6 mb-2">
             <form #form="ngForm" (ngSubmit)="submitForm(form)">
                 <ds-scripts-select [script]="selectedScript" (select)="selectedScript = $event; parameters = undefined"></ds-scripts-select>
                 <ds-process-parameters [initialParams]="parameters" [script]="selectedScript" (updateParameters)="parameters = $event"></ds-process-parameters>
-                <button [routerLink]="['/processes']" class="btn btn-light float-left">{{ 'process.new.cancel' | translate }}</button>
-                <button type="submit" class="btn btn-light float-right">{{ 'process.new.submit' | translate }}</button>
+                <a [routerLink]="['/processes']" class="btn btn-danger float-left">{{ 'process.new.cancel' | translate }}</a>
+                <button type="submit" class="btn btn-primary float-right">{{ 'process.new.submit' | translate }}</button>
             </form>
         </div>
         <div class="col-12 col-md-6">

src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html

@@ -1,16 +1,20 @@
-<div class="form-row mb-2 mx-0">
+<div class="form-row gap-2 mb-2 mx-0">
     <select id="process-parameters"
             class="form-control col"
             name="parameter-{{index}}"
+            [attr.aria-label]="'process.new.select-parameter' | translate"
             [(ngModel)]="selectedParameter"
             #param="ngModel">
-        <option [ngValue]="undefined">Add a parameter...</option>
+        <option [ngValue]="undefined">{{ 'process.new.add-parameter' | translate }}</option>
         <option *ngFor="let param of parameters" [ngValue]="param.name">
             {{param.nameLong || param.name}}
         </option>
     </select>
-    <ds-parameter-value-input [initialValue]="parameterValue.value" [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col" [index]="index"></ds-parameter-value-input>
-    <button *ngIf="removable" class="btn btn-light col-1 remove-button" (click)="removeParameter.emit(parameterValue);"><span class="fas fa-trash"></span></button>
+    <ds-parameter-value-input [initialValue]="parameterValue.value" [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col px-0" [index]="index"></ds-parameter-value-input>
+    <button *ngIf="removable" [attr.aria-label]="'process.new.delete-parameter' | translate"
+            (click)="removeParameter.emit(parameterValue);" class="btn btn-danger col-1 remove-button">
+      <i class="fas fa-trash"></i>
+    </button>
     <span *ngIf="!removable" class="col-1"></span>
 </div>
 

src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.spec.ts

@@ -1,5 +1,5 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { TranslateModule } from '@ngx-translate/core';
 import { ParameterSelectComponent } from './parameter-select.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -33,7 +33,10 @@ describe('ParameterSelectComponent', () => {
   beforeEach(waitForAsync(() => {
     init();
     TestBed.configureTestingModule({
-      imports: [FormsModule],
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot(),
+      ],
       declarations: [ParameterSelectComponent],
       schemas: [NO_ERRORS_SCHEMA]
     })

src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html

@@ -1 +1 @@
-<input type="hidden" value="true" name="boolean-value-{{index}}" id="boolean-value-{{index}}"/>
+<input [attr.aria-label]="'process.new.parameter.label' | translate" type="hidden" value="true" name="boolean-value-{{index}}" id="boolean-value-{{index}}"/>

src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
+import { TranslateModule } from '@ngx-translate/core';
 import { BooleanValueInputComponent } from './boolean-value-input.component';
 
 describe('BooleanValueInputComponent', () => {
@@ -8,6 +8,9 @@ describe('BooleanValueInputComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot(),
+      ],
       declarations: [BooleanValueInputComponent]
     })
       .compileComponents();

src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html

@@ -1,6 +1,6 @@
-<input required #string="ngModel" type="text" class="form-control" name="date-value-{{index}}" id="date-value-{{index}}" [ngModel]="value" (ngModelChange)="setValue($event)"/>
+<input [attr.aria-label]="'process.new.parameter.label' | translate" required #string="ngModel" type="text" class="form-control" name="date-value-{{index}}" id="date-value-{{index}}" [ngModel]="value" (ngModelChange)="setValue($event)"/>
 <div *ngIf="string.invalid && (string.dirty || string.touched)"
-     class="alert alert-danger validation-error">
+     class="alert alert-danger validation-error mb-0">
     <div *ngIf="string.errors.required">
         {{'process.new.parameter.string.required' | translate}}
     </div>

src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--bs-spacer) / 2);
+}

src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html

@@ -1,5 +1,5 @@
 <label for="file-upload-{{index}}" class="d-flex align-items-center m-0">
-    <span class="btn btn-light">
+    <span class="btn btn-primary">
         {{'process.new.parameter.file.upload-button' | translate}}
     </span>
     <span class="file-name ml-1">{{fileObject?.name}}</span>

src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html

@@ -1,6 +1,6 @@
-<input required #string="ngModel" type="text" name="string-value-{{index}}" class="form-control" id="string-value-{{index}}" [ngModel]="value" (ngModelChange)="setValue($event)"/>
+<input [attr.aria-label]="'process.new.parameter.label' | translate" required #string="ngModel" type="text" name="string-value-{{index}}" class="form-control" id="string-value-{{index}}" [ngModel]="value" (ngModelChange)="setValue($event)"/>
 <div *ngIf="string.invalid && (string.dirty || string.touched)"
-     class="alert alert-danger validation-error">
+     class="alert alert-danger validation-error mb-0">
     <div *ngIf="string.errors.required">
         {{'process.new.parameter.string.required' | translate}}
     </div>

src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--bs-spacer) / 2);
+}