MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

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

This commit is contained in:
mchouliara 2024-09-27 17:16:57 +03:00
parent fd831e6814
commit 1f06b5121f
21 changed files with 62 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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

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

@ -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>

17
frontend/src/app/ui/description/editor/description-editor.component.html
View File

@ -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')"

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

@ -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>

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

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

2
frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html
View File

@ -237,7 +237,7 @@
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
<div class="col-md-1">
<mat-progress-spinner *ngIf="validationIcon === 'loading'" mode="indeterminate" [diameter]="24"></mat-progress-spinner>
<mat-progress-spinner *ngIf="validationIcon === 'loading'" mode="indeterminate" [diameter]="24" ></mat-progress-spinner>
<mat-icon *ngIf="validationIcon !== 'loading'" [ngClass]="{'success': validationIcon === 'done', 'fail': validationIcon === 'clear'}">{{validationIcon}}</mat-icon>
</div>
</div>

2
frontend/src/app/ui/navbar/navbar.component.html
View File

@ -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>

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

@ -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>

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

@ -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>

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

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

1
frontend/src/assets/i18n/baq.json
View File

@ -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",

1
frontend/src/assets/i18n/de.json
View File

@ -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",

1
frontend/src/assets/i18n/en.json
View File

@ -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",

1
frontend/src/assets/i18n/es.json
View File

@ -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",

1
frontend/src/assets/i18n/gr.json
View File

@ -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",

1
frontend/src/assets/i18n/hr.json
View File

@ -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",

1
frontend/src/assets/i18n/pl.json
View File

@ -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",

1
frontend/src/assets/i18n/pt.json
View File

@ -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",

1
frontend/src/assets/i18n/sk.json
View File

@ -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",

1
frontend/src/assets/i18n/sr.json
View File

@ -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",

1
frontend/src/assets/i18n/tr.json
View File

@ -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",