fix more plan editor/ description editor accessibility issues, add labels to mat progress bars

frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.html

@@ -159,7 +159,7 @@
 					<ul class="list-unstyled list-inline fieldset-actions-list d-flex align-items-center text-primary-blue">
 						<li class="list-inline-item" *ngIf="!viewOnly">
 
-							<span [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
+							<span role="button" [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
 								<img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="{{('DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate) ?? 'add input'}}" />
 								<span class="fieldset-new-input-action">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}</span>
 							</span>
@@ -280,7 +280,7 @@
 							</mat-checkbox>
 						</li>
 						<li class="list-inline-item">
-							<mat-icon [matMenuTriggerFor]="menu" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon>
+							<mat-icon role="button" [matMenuTriggerFor]="menu" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon>
 							<mat-menu #menu="matMenu">
 								<!-- TODO to check -->
 								<mat-checkbox 

frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html

@@ -297,7 +297,7 @@
 			<span class="d-flex flex-row row">
 				<span (click)="save(); formSubmit()" class="col">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}</span>
 				<mat-divider [vertical]="true"></mat-divider>
-				<span class="align-items-center justify-content-center mw-100 col-4 d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menuSave">
+				<span role="button" class="align-items-center justify-content-center mw-100 col-4 d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menuSave">
 					<mat-icon>expand_more</mat-icon>
 				</span>
 			</span>

frontend/src/app/ui/description/editor/description-editor.component.html

@@ -20,7 +20,7 @@
                                     <div class="col-auto description-to-plan">{{'DESCRIPTION-EDITOR.TO-PLAN' | translate}}</div>
                                     <div class="plan-title p-0">:&nbsp;{{ item?.plan?.label }}</div>
 									<div class="col-auto d-flex align-items-center">
-										<a [routerLink]="routerUtils.generateUrl(['/plans/overview/', item.plan.id])" target="_blank" class="pointer open-in-new-icon">
+										<a [routerLink]="routerUtils.generateUrl(['/plans/overview/', item.plan.id])" target="_blank" class="pointer open-in-new-icon" [attr.aria-label]="'ALT-TEXT.OPEN-PLAN-OVERVIEW' | translate">
 											<mat-icon class="size-18">open_in_new</mat-icon>
 										</a>
 									</div>
@@ -55,10 +55,13 @@
 											<span class="d-flex flex-row row">
 												<span (click)="!saving?formSubmit():null" class="col">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE' | translate }}</span>
 												<mat-divider [vertical]="true"></mat-divider>
-												<span *ngIf="!saving" class="align-items-center justify-content-center col d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menu">
-													<mat-icon>expand_more</mat-icon>
-												</span>
-												<span *ngIf="saving" class="align-items-center justify-content-center col d-flex">
+                                                <span 
+                                                    role="button" 
+                                                    class="align-items-center justify-content-center col d-flex" 
+                                                    (click)="$event.stopPropagation();" 
+                                                    [matMenuTriggerFor]="!saving? menu : null"
+                                                    [attr.aria-label]="'GENERAL.ACTIONS.SHOW-MORE' | translate"
+                                                >
                                                     <mat-icon>expand_more</mat-icon>
                                                 </span>
 											</span>
@@ -96,7 +99,7 @@
 						<div class="row stepper-title">
 							<div class="col-12 pl-0 mb-1"><span>{{'DESCRIPTION-EDITOR.TOC.TITLE' | translate}}</span></div>
 						</div>
-						<div class="row stepper-options" id="stepper-options">
+						<div class="row stepper-options" id="stepper-options" tabindex="0">
 							<div class="col-12">
 								<div class="container stepper-list ml-1">
 									<div class="row" *ngIf="!descriptionInfoValid()">
@@ -160,7 +163,7 @@
 							</div>
 						</div>
 					</div>
-					<div class="col-12 col-md form" id="description-editor-form">
+					<div class="col-12 col-md form" id="description-editor-form" tabindex="0">
 						<app-description-base-fields-editor-component [hidden]="!reachedBase" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component>
 						<app-description-form
 						*ngIf="formGroup && formGroup.get('properties')"

frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html

@@ -6,8 +6,10 @@
 					<app-description-form-field-set-title [fieldSet]="fieldSet" [path]="path" [isChild]="isChild" [hildeLink]="hideAnnotations" (copyLinkEvent)="copyLink(fieldSet.id)" [isAnchor]="isAnchor"></app-description-form-field-set-title>
 				</div>
 				<div *ngIf="!hideAnnotations" class="col-auto" style="margin-top: 1rem;">
-					<button mat-icon-button class="col-auto annotation-icon" (click)="showAnnotations(fieldSet.id)" matTooltip="{{ 'DESCRIPTION-EDITOR.QUESTION.EXTENDED-DESCRIPTION.ANNOTATIONS' | translate }}" [disabled]="!canAnnotate">
-						<mat-icon [matBadge]="annotationsCount" [matBadgeHidden]="annotationsCount <= 0" matBadgeColor="warn">comment</mat-icon>
+					<button mat-icon-button class="col-auto annotation-icon" (click)="showAnnotations(fieldSet.id)" matTooltip="{{ 'DESCRIPTION-EDITOR.QUESTION.EXTENDED-DESCRIPTION.ANNOTATIONS' | translate }}" [disabled]="!canAnnotate" [attr.aria-label]="'PLAN-EDITOR.ACTIONS.ANNOTATIONS' | translate">
+						<mat-icon [matBadge]="annotationsCount" [matBadgeHidden]="annotationsCount <= 0" matBadgeColor="warn" [attr.aria-label]="(annotationsPerAnchor?.get(field.id) ?? 0) + ' ' + ('ANNOTATION-DIALOG.TITLE' | translate)">
+                            comment
+                        </mat-icon>
 					</button>
 				</div>
 			</div>
@@ -35,12 +37,12 @@
 			<div *ngIf="canAddMultiplicityField()" class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
 				<mat-error *ngIf="fieldSet.hasMultiplicity && fieldSet?.multiplicity?.min && propertiesFormGroup.get('items').hasError('minlength')">{{'GENERAL.VALIDATION.MULTIPLICITY.MIN' | translate: { min: fieldSet.multiplicity.min} }}</mat-error>
 					<mat-error *ngIf="fieldSet.hasMultiplicity && fieldSet?.multiplicity?.max && propertiesFormGroup.get('items').hasError('maxlength')">{{'GENERAL.VALIDATION,MULTIPLICITY.MAX' | translate: { max: fieldSet.multiplicity.max} }}</mat-error>
-				<span class="d-inline-flex align-items-center" [ngClass]="propertiesFormGroup.disabled ? '' : 'pointer'" (click)="addMultiplicityField()">
-					<button mat-icon-button color="primary" [disabled]="propertiesFormGroup.disabled">
+				<span class="d-inline-flex align-items-center">
+					<button mat-icon-button color="primary" [disabled]="propertiesFormGroup.disabled" (click)="addMultiplicityField()" [attr.aria-label]="fieldSet?.multiplicity?.placeholder ? fieldSet.multiplicity.placeholder : ('DESCRIPTION-EDITOR.ACTIONS.MULTIPLICITY-ADD-ONE-FIELD' | translate)">
 						<mat-icon>add_circle</mat-icon>
 					</button>
-					<span class="mt-1" *ngIf="fieldSet?.multiplicity?.placeholder">{{fieldSet.multiplicity.placeholder}}</span>
-					<span class="mt-1" *ngIf="!fieldSet?.multiplicity?.placeholder">{{'DESCRIPTION-EDITOR.ACTIONS.MULTIPLICITY-ADD-ONE-FIELD' | translate}}</span>
+                    <span *ngIf="fieldSet?.multiplicity?.placeholder" aria-hidden>{{fieldSet?.multiplicity?.placeholder}}</span>
+                    <span *ngIf="!fieldSet?.multiplicity?.placeholder" aria-hidden>{{'DESCRIPTION-EDITOR.ACTIONS.MULTIPLICITY-ADD-ONE-FIELD' | translate}}</span>
 				</span>
 			</div>
 		</div>

frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.scss

@@ -17,3 +17,8 @@
 	overflow: hidden; 
 	text-overflow: ellipsis; 
 }
+
+.add-more-button {
+    font-size: 1rem;
+    color: var(--dark-gray);
+}

frontend/src/app/ui/navbar/navbar.component.html

@@ -112,6 +112,6 @@
 		</div>
 	</nav>
 	<div *ngIf="progressIndication" class="progress-bar">
-		<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
+		<mat-progress-bar color="primary" mode="indeterminate" [attr.aria-label]="'ALT-TEXT.PROGRESS-BAR' | translate"></mat-progress-bar>
 	</div>
 </ng-container>

frontend/src/app/ui/plan/editor/plan-deposit-dropdown/plan-deposit-dropdown.component.html

@@ -1,4 +1,4 @@
-<div [matMenuTriggerFor]="depositMenu" class="row pb-3 align-items-center">
+<div role="button" [matMenuTriggerFor]="depositMenu" class="row pb-3 align-items-center">
 	<div class="col-auto pr-0">
 		<button mat-mini-fab class="frame-btn">
 			<mat-icon class="mat-mini-fab-icon">archive</mat-icon>

frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html

@@ -39,10 +39,13 @@
 										<span class="d-flex flex-row row">
 											<span (click)="!saving?formSubmit():null" class="col">{{ 'PLAN-EDITOR.ACTIONS.SAVE' | translate }}</span>
 											<mat-divider [vertical]="true"></mat-divider>
-											<span *ngIf="!saving" class="align-items-center justify-content-center col d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menu">
-												<mat-icon>expand_more</mat-icon>
-											</span>
-											<span *ngIf="saving" class="align-items-center justify-content-center col d-flex">
+											<span 
+                                                role="button" 
+                                                class="align-items-center justify-content-center col d-flex" 
+                                                (click)="$event.stopPropagation();" 
+                                                [matMenuTriggerFor]="!saving? menu : null"
+                                                [attr.aria-label]="'GENERAL.ACTIONS.SHOW-MORE' | translate"
+                                            >
 												<mat-icon>expand_more</mat-icon>
 											</span>
 										</span>
@@ -78,7 +81,7 @@
 				<div class="row" id="editor-form" *ngIf="this.step === 0 && this.isNew">
 					<div class="col-12 blueprint-section">
 						<div class="row">
-							<label for="titleInput" class="heading2 col-12">{{'PLAN-EDITOR.FIELDS.TITLE' | translate}}&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></label>
+							<label for="titleInput" class="heading2 col-12" tabindex="0">{{'PLAN-EDITOR.FIELDS.TITLE' | translate}}&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></label>
 							<div class="col-12">
 								<mat-form-field class="w-100">
 									<mat-label>{{'PLAN-EDITOR.FIELDS.TITLE' | translate}}</mat-label>
@@ -139,7 +142,8 @@
 										<ng-container *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
 											<li (click)="changeStep(i + 1)" [ngClass]="{'active': this.step === (i + 1), 'text-danger': hasErrors(section.id) }"><span class="d-flex align-items-center">{{section.label}}
 													<mat-icon *ngIf="section.description" class="ml-1 w-auto h-auto" style="font-size: 1rem; font-weight: 700;" [matTooltip]="section.description">info</mat-icon>
-												</span></li>
+												</span>
+                                            </li>
 											<ol class="descriptionsInSection">
 												<li *ngFor="let description of descriptionsInSection(section.id); let descriptionIndex = index" (click)="editDescription(description.id, false)" class="active-description">
 													<div class="d-flex flex-direction-row">
@@ -220,8 +224,8 @@
 														</div>
                                                         @if(!isNew){
                                                             <div class="ml-auto col-auto" style="margin-top: 1rem;">
-                                                                <button mat-icon-button class="col-auto annotation-icon" (click)="showAnnotations(field.id)" matTooltip="{{ 'PLAN-EDITOR.ACTIONS.ANNOTATIONS' | translate }}" [disabled]="!canAnnotate(section.id)">
-                                                                    <mat-icon [matBadge]="annotationsPerAnchor?.get(field.id)" [matBadgeHidden]="annotationsPerAnchor?.get(field.id) <= 0" matBadgeColor="warn">comment</mat-icon>
+                                                                <button mat-icon-button class="col-auto annotation-icon" (click)="showAnnotations(field.id)" matTooltip="{{ 'PLAN-EDITOR.ACTIONS.ANNOTATIONS' | translate }}" [disabled]="!canAnnotate(section.id)" [attr.aria-label]="'PLAN-EDITOR.ACTIONS.ANNOTATIONS' | translate">
+                                                                    <mat-icon [matBadge]="annotationsPerAnchor?.get(field.id)" [matBadgeHidden]="annotationsPerAnchor?.get(field.id) <= 0" matBadgeColor="warn" [attr.aria-label]="(annotationsPerAnchor?.get(field.id) ?? 0) + ' ' + ('ANNOTATION-DIALOG.TITLE' | translate)">comment</mat-icon>
                                                                 </button>
                                                             </div>
                                                         }
@@ -293,13 +297,13 @@
 																			</div>
 																		</div>
 																		<div *ngIf="canSave || isNew" class="col-12 col-xl-auto">
-																			<button mat-icon-button class="action-list-icon" matTooltip="{{'PLAN-EDITOR.ACTIONS.SEARCH-CONTACT' | translate}}" (click)="searchContact(contactIndex, field)" [disabled]="formGroup.disabled || (!isNew && !this.canSave)">
-																				<mat-icon>search</mat-icon>
+																			<button mat-icon-button class="action-list-icon" matTooltip="{{'PLAN-EDITOR.ACTIONS.SEARCH-CONTACT' | translate}}" (click)="searchContact(contactIndex, field)" [disabled]="formGroup.disabled || (!isNew && !this.canSave)" [attr.aria-label]="'PLAN-EDITOR.ACTIONS.SEARCH-CONTACT' | translate">
+																				<mat-icon aria-hidden>search</mat-icon>
 																			</button>
 																		</div>
 																		<div *ngIf="canSave || isNew" class="col-12 col-xl-auto">
-																			<button mat-icon-button class="action-list-icon" matTooltip="{{'PLAN-EDITOR.ACTIONS.REMOVE-CONTACT' | translate}}" (click)="removeContact(contactIndex)" [disabled]="formGroup.disabled || (!isNew && !this.canSave)">
-																				<mat-icon>delete</mat-icon>
+																			<button mat-icon-button class="action-list-icon" matTooltip="{{'PLAN-EDITOR.ACTIONS.REMOVE-CONTACT' | translate}}" (click)="removeContact(contactIndex)" [disabled]="formGroup.disabled || (!isNew && !this.canSave)" [attr.aria-label]="'PLAN-EDITOR.ACTIONS.REMOVE-CONTACT' | translate">
+																				<mat-icon aria-hidden>delete</mat-icon>
 																			</button>
 																		</div>
 																	</div>
@@ -307,8 +311,8 @@
 																	<mat-error *ngIf="formGroup.get('properties').get('contacts').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 																</div>
 																<div class="col-12">
-																	<button mat-icon-button (click)="addContact()" [disabled]="formGroup.disabled || isFinalized || (!this.canSave && !isNew)">
-																		<mat-icon>add</mat-icon>
+																	<button mat-icon-button (click)="addContact()" [disabled]="formGroup.disabled || isFinalized || (!this.canSave && !isNew)" matTooltip="{{'PLAN-EDITOR.ACTIONS.ADD-CONTACT' | translate}}" [attr.aria-label]="'PLAN-EDITOR.ACTIONS.ADD-CONTACT' | translate">
+																		<mat-icon aria-hidden>add</mat-icon>
 																	</button>
 																</div>
 															</div>

frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss

@@ -363,3 +363,4 @@ a:hover {
 	cursor: auto; 
 	color: rgba(0, 0, 0, 0.38);;
 }
+

frontend/src/assets/i18n/baq.json

@@ -1927,6 +1927,7 @@
 			"DEFAULT-BLUEPRINT": "Default Blueprint",
 			"OR-CONTINUE-WITH": "or continue with",
 			"REMOVE-CONTACT": "Remove Contact",
+            "ADD-CONTACT": "Add Contact",
 			"SEARCH-CONTACT": "Search Contact",
 			"REMOVE-USER": "Remove User",
 			"SAVE-AND-CLOSE": "Save & Close",

frontend/src/assets/i18n/de.json

@@ -1930,6 +1930,7 @@
 			"DEFAULT-BLUEPRINT": "Default Blueprint",
 			"OR-CONTINUE-WITH": "or continue with",
 			"REMOVE-CONTACT": "Remove Contact",
+            "ADD-CONTACT": "Add Contact",
 			"SEARCH-CONTACT": "Search Contact",
 			"REMOVE-USER": "Remove User",
 			"SAVE-AND-CLOSE": "Save & Close",

frontend/src/assets/i18n/en.json

@@ -1930,6 +1930,7 @@
 			"DEFAULT-BLUEPRINT": "Default Blueprint",
 			"OR-CONTINUE-WITH": "or continue with",
 			"REMOVE-CONTACT": "Remove Contact",
+			"ADD-CONTACT": "Add Contact",
 			"SEARCH-CONTACT": "Search Contact",
 			"REMOVE-USER": "Remove User",
 			"SAVE-AND-CLOSE": "Save & Close",

frontend/src/assets/i18n/es.json

@@ -1930,6 +1930,7 @@
 			"DEFAULT-BLUEPRINT": "Default Blueprint",
 			"OR-CONTINUE-WITH": "or continue with",
 			"REMOVE-CONTACT": "Remove Contact",
+            "ADD-CONTACT": "Add Contact",
 			"SEARCH-CONTACT": "Search Contact",
 			"REMOVE-USER": "Remove User",
 			"SAVE-AND-CLOSE": "Save & Close",

frontend/src/assets/i18n/gr.json

@@ -1930,6 +1930,7 @@
 			"DEFAULT-BLUEPRINT": "Default Blueprint",
 			"OR-CONTINUE-WITH": "or continue with",
 			"REMOVE-CONTACT": "Remove Contact",
+            "ADD-CONTACT": "Add Contact",
 			"SEARCH-CONTACT": "Search Contact",
 			"REMOVE-USER": "Remove User",
 			"SAVE-AND-CLOSE": "Save & Close",

frontend/src/assets/i18n/hr.json

@@ -1929,6 +1929,7 @@
 			"DEFAULT-BLUEPRINT": "Default Blueprint",
 			"OR-CONTINUE-WITH": "or continue with",
 			"REMOVE-CONTACT": "Remove Contact",
+            "ADD-CONTACT": "Add Contact",
 			"SEARCH-CONTACT": "Search Contact",
 			"REMOVE-USER": "Remove User",
 			"SAVE-AND-CLOSE": "Save & Close",

frontend/src/assets/i18n/pl.json

@@ -1930,6 +1930,7 @@
 			"DEFAULT-BLUEPRINT": "Default Blueprint",
 			"OR-CONTINUE-WITH": "or continue with",
 			"REMOVE-CONTACT": "Remove Contact",
+            "ADD-CONTACT": "Add Contact",
 			"SEARCH-CONTACT": "Search Contact",
 			"REMOVE-USER": "Remove User",
 			"SAVE-AND-CLOSE": "Save & Close",

frontend/src/assets/i18n/pt.json

@@ -1929,6 +1929,7 @@
 			"DEFAULT-BLUEPRINT": "Default Blueprint",
 			"OR-CONTINUE-WITH": "or continue with",
 			"REMOVE-CONTACT": "Remove Contact",
+            "ADD-CONTACT": "Add Contact",
 			"SEARCH-CONTACT": "Search Contact",
 			"REMOVE-USER": "Remove User",
 			"SAVE-AND-CLOSE": "Save & Close",

frontend/src/assets/i18n/sk.json

@@ -1930,6 +1930,7 @@
 			"DEFAULT-BLUEPRINT": "Default Blueprint",
 			"OR-CONTINUE-WITH": "or continue with",
 			"REMOVE-CONTACT": "Remove Contact",
+            "ADD-CONTACT": "Add Contact",
 			"SEARCH-CONTACT": "Search Contact",
 			"REMOVE-USER": "Remove User",
 			"SAVE-AND-CLOSE": "Save & Close",

frontend/src/assets/i18n/sr.json

@@ -1930,6 +1930,7 @@
 			"DEFAULT-BLUEPRINT": "Default Blueprint",
 			"OR-CONTINUE-WITH": "or continue with",
 			"REMOVE-CONTACT": "Remove Contact",
+            "ADD-CONTACT": "Add Contact",
 			"SEARCH-CONTACT": "Search Contact",
 			"REMOVE-USER": "Remove User",
 			"SAVE-AND-CLOSE": "Save & Close",

frontend/src/assets/i18n/tr.json

@@ -1930,6 +1930,7 @@
 			"DEFAULT-BLUEPRINT": "Default Blueprint",
 			"OR-CONTINUE-WITH": "or continue with",
 			"REMOVE-CONTACT": "Remove Contact",
+            "ADD-CONTACT": "Add Contact",
 			"SEARCH-CONTACT": "Search Contact",
 			"REMOVE-USER": "Remove User",
 			"SAVE-AND-CLOSE": "Save & Close",