fix issue with missing aria label

This commit is contained in:
Giuseppe Digilio
2021-07-08 19:37:39 +02:00
parent ab73bf87b0
commit eae89e1be0
5 changed files with 23 additions and 21 deletions

View File

@@ -12,7 +12,7 @@
<div class="col-4 d-inline-block">
<div *ngIf="logo" class="btn-group btn-group-sm float-right" role="group">
<button *ngIf="!markLogoForDeletion" type="button" class="btn btn-danger"
[attr.aria-label]="(type.value + 'edit.logo.delete.title' | translate)"
[attr.aria-label]="(type.value + '.edit.logo.delete.title' | translate)"
title="{{type.value + '.edit.logo.delete.title' | translate}}"
(click)="deleteLogo()">
<i class="fas fa-trash" aria-hidden="true"></i>

View File

@@ -3,7 +3,7 @@
<i ngbDropdownToggle class="far fa-caret-down position-absolute scrollable-dropdown-toggle"
aria-hidden="true"></i>
<input class="form-control"
[attr.aria-labelledby]="'label_' + model.id"
[attr.aria-label]="model.placeholder"
[attr.autoComplete]="model.autoComplete"
[class.is-invalid]="showErrorMessages"
[class.scrollable-dropdown-input]="!model.readOnly"
@@ -22,9 +22,9 @@
class="dropdown-menu scrollable-dropdown-menu w-100"
aria-haspopup="true"
aria-expanded="false"
[attr.aria-labelledby]="'label_' + model.id">
[attr.aria-label]="model.placeholder">
<div class="scrollable-menu"
[attr.aria-labelledby]="'label_' + model.id"
[attr.aria-label]="model.placeholder"
infiniteScroll
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="50"

View File

@@ -17,18 +17,20 @@
class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
<button type="button" class="btn btn-secondary" role="button"
title="{{'form.remove' | translate}}"
attr.aria-label="{{'form.remove' | translate}}"
(click)="removeItem($event, context, index)"
[disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
<span attr.aria-label="{{'form.remove' | translate}}"><i class="fas fa-trash" aria-hidden="true"></i></span>
<span><i class="fas fa-trash" aria-hidden="true"></i></span>
</button>
</div>
<div *ngIf="(!context.notRepeatable) && index === (group.context.groups.length - 1)" class="clearfix pl-4 w-100">
<div class="btn-group" role="group">
<button type="button" role="button" class="ds-form-add-more btn btn-link"
title="{{'form.add' | translate}}"
attr.aria-label="{{'form.add' | translate}}"
[disabled]="isItemReadOnly(context, index)"
(click)="insertItem($event, group.context, group.context.groups.length)">
<span attr.aria-label="{{'form.add' | translate}}"><i class="fas fa-plus"></i> {{'form.add' | translate}}</span>
<span><i class="fas fa-plus"></i> {{'form.add' | translate}}</span>
</button>
</div>
</div>
@@ -39,9 +41,10 @@
<div class="btn-group" role="button">
<button type="button" class="btn btn-secondary"
title="{{'form.discard' | translate}}"
attr.aria-label="{{'form.discard' | translate}}"
(click)="removeItem($event, context, index)"
[disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
<span attr.aria-label="{{'form.discard' | translate}}">{{'form.discard' | translate}}</span>
<span>{{'form.discard' | translate}}</span>
</button>
</div>
</div>

View File

@@ -2,7 +2,7 @@
<h5 id="configuration-switch">{{ 'search.switch-configuration.title' | translate}}</h5>
<select class="form-control"
attr.aria-labelledby="configuration-switch"
aria-labelledby="configuration-switch"
[compareWith]="compare"
[(ngModel)]="selectedOption"
(change)="onSelect()">

View File

@@ -22,12 +22,11 @@
aria-hidden="true" title="{{'submission.sections.status.valid.title' | translate}}"></i>
<a class="close"
tabindex="0"
role="button"
[attr.aria-label]="(sectionRef.isOpen() ? 'submission.sections.toggle.close' : 'submission.sections.toggle.open') | translate"
[title]="(sectionRef.isOpen() ? 'submission.sections.toggle.close' : 'submission.sections.toggle.open') | translate">
<span *ngIf="sectionRef.isOpen()" class="fas fa-chevron-up fa-fw"
aria-hidden="true"></span>
<span *ngIf="!sectionRef.isOpen()" class="fas fa-chevron-down fa-fw"
aria-hidden="true"></span>
<span *ngIf="sectionRef.isOpen()" class="fas fa-chevron-up fa-fw"></span>
<span *ngIf="!sectionRef.isOpen()" class="fas fa-chevron-down fa-fw"></span>
</a>
<a href="#" class="close mr-3" *ngIf="!sectionRef.isMandatory()"
(click)="removeSection($event)">