Commits

Alexandre Vryghem authored d876fadd2a7
Fixed accessibility issues on SubmissionImportExternalSearchbarComponent

- Fixed input not describing itself - Put the items from the dropdown in an ul - Fixed broken aria labels - Removed titles who where identical to the displayed value
No tags

src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html

Modified
1 1 <div *ngIf="(isXsOrSm$ | async)" class="input-group mb-2">
2 - <input type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' |translate}}" aria-label="" aria-describedby="">
2 + <input type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' | translate}}" [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
3 3 </div>
4 4 <div class="input-group mb-5">
5 - <input *ngIf="!(isXsOrSm$ | async)" type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' |translate}}" aria-label="" aria-describedby="">
6 - <div [ngClass]="{'input-group-append': !(isXsOrSm$ | async)}" ngbDropdown role="group" aria-label="">
7 - <button class="btn btn-outline-secondary w-fx" title="{{'submission.import-external.search.source.hint' |translate}}" ngbDropdownToggle>{{'submission.import-external.source.' + selectedElement?.name | translate}}</button>
8 - <div ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100"
5 + <input *ngIf="!(isXsOrSm$ | async)" type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' | translate}}" [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
6 + <div [ngClass]="{'input-group-append': !(isXsOrSm$ | async)}" ngbDropdown role="group">
7 + <button [attr.aria-label]="'submission.import-external.search.source.hint' |translate"
8 + class="btn btn-outline-secondary w-fx"
9 + title="{{'submission.import-external.search.source.hint' |translate}}"
10 + ngbDropdownToggle>
11 + {{'submission.import-external.source.' + selectedElement?.name | translate}}
12 + </button>
13 + <ul ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100"
9 14 aria-haspopup="true"
10 - aria-expanded="false"
11 - aria-labelledby="scrollableDropdownMenuButton">
12 - <div class="scrollable-menu"
13 - aria-labelledby="scrollableDropdownMenuButton"
15 + aria-expanded="false">
16 + <li class="scrollable-menu"
14 17 infiniteScroll
15 18 [infiniteScrollDistance]="2"
16 19 [infiniteScrollThrottle]="50"
17 20 (scrolled)="onScroll()"
18 21 [scrollWindow]="false">
19 - <button ngbDropdownItem class="dropdown-item text-truncate" title="{{'submission.import-external.source.' + source?.name | translate}}" (click)="makeSourceSelection(source)" *ngFor="let source of sourceList">{{'submission.import-external.source.' + source?.name | translate}}</button>
22 + <button ngbDropdownItem class="dropdown-item text-truncate" (click)="makeSourceSelection(source)" *ngFor="let source of sourceList">{{'submission.import-external.source.' + source?.name | translate}}</button>
20 23 <div ngbDropdownItem class="scrollable-dropdown-loading text-center" *ngIf="sourceListLoading"><p>{{'submission.import-external.source.loading' | translate}}</p></div>
21 - </div>
22 - </div>
23 - <button type="button" class="btn btn-primary" [title]="(searchString === '')?('submission.import-external.search.button.hint' | translate):('submission.import-external.search.button' | translate)" [disabled]="searchString === ''" (click)="search()">{{'submission.import-external.search.button' | translate}}</button>
24 + </li>
25 + </ul>
26 + <button type="button" class="btn btn-primary" [title]="(searchString === '')?('submission.import-external.search.button.hint' | translate):''" [disabled]="searchString === ''" (click)="search()">{{'submission.import-external.search.button' | translate}}</button>
24 27 </div>
25 28 </div>

Everything looks good. We'll let you know here if there's anything you should know about.

Add shortcut