hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 18:14:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed accessibility issues on SubmissionImportExternalSearchbarComponent

Browse Source 
- 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
This commit is contained in:
Alexandre Vryghem
2023-12-16 01:57:48 +01:00
committed by Tim Donohue
parent cc0501f340
commit b076b98996
1 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html
View File

@@ -1,25 +1,28 @@
<div *ngIf="(isXsOrSm$ | async)" class="input-group mb-2"> <div *ngIf="(isXsOrSm$ | async)" class="input-group mb-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=""> <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">
</div> </div>
<div class="input-group mb-5"> <div class="input-group mb-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=""> <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">
<div [ngClass]="{'input-group-append': !(isXsOrSm$ | async)}" ngbDropdown role="group" aria-label=""> <div [ngClass]="{'input-group-append': !(isXsOrSm$ | async)}" ngbDropdown role="group">
<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> <button [attr.aria-label]="'submission.import-external.search.source.hint' |translate"
<div ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100" class="btn btn-outline-secondary w-fx"
title="{{'submission.import-external.search.source.hint' |translate}}"
ngbDropdownToggle>
{{'submission.import-external.source.' + selectedElement?.name | translate}}
</button>
<ul ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false">
aria-labelledby="scrollableDropdownMenuButton"> <li class="scrollable-menu"
<div class="scrollable-menu"
aria-labelledby="scrollableDropdownMenuButton"
infiniteScroll infiniteScroll
[infiniteScrollDistance]="2" [infiniteScrollDistance]="2"
[infiniteScrollThrottle]="50" [infiniteScrollThrottle]="50"
(scrolled)="onScroll()" (scrolled)="onScroll()"
[scrollWindow]="false"> [scrollWindow]="false">
<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> <button ngbDropdownItem class="dropdown-item text-truncate" (click)="makeSourceSelection(source)" *ngFor="let source of sourceList">{{'submission.import-external.source.' + source?.name | translate}}</button>
<div ngbDropdownItem class="scrollable-dropdown-loading text-center" *ngIf="sourceListLoading"><p>{{'submission.import-external.source.loading' | translate}}</p></div> <div ngbDropdownItem class="scrollable-dropdown-loading text-center" *ngIf="sourceListLoading"><p>{{'submission.import-external.source.loading' | translate}}</p></div>
</div> </li>
</div> </ul>
<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> <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>
</div> </div>
</div> </div>