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

[CST-4659] Deque accessibility issues - 469993

Browse Source
This commit is contained in:
Davide Negretti
2021-10-05 16:22:46 +02:00
parent ad15c07a18
commit 5c8448c36e
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
View File

@@ -1,8 +1,13 @@
<div #sdRef="ngbDropdown" ngbDropdown display="dynamic" placement="bottom-right" class="w-100"> <div #sdRef="ngbDropdown" ngbDropdown display="dynamic" placement="bottom-right" class="w-100">
<div class="position-relative right-addon"> <div class="position-relative right-addon"
role="combobox"
[attr.aria-label]="model.label"
[attr.aria-owns]="'combobox_' + id + '_listbox'">
<i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle" <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
aria-hidden="true"></i> aria-hidden="true"></i>
<input class="form-control" <input class="form-control"
[attr.aria-controls]="'combobox_' + id + '_listbox'"
[attr.aria-activedescendant]="'combobox_' + id + '_selected'"
[attr.aria-label]="model.placeholder" [attr.aria-label]="model.placeholder"
[attr.autoComplete]="model.autoComplete" [attr.autoComplete]="model.autoComplete"
[class.is-invalid]="showErrorMessages" [class.is-invalid]="showErrorMessages"
@@ -24,6 +29,8 @@
aria-expanded="false" aria-expanded="false"
[attr.aria-label]="model.placeholder"> [attr.aria-label]="model.placeholder">
<div class="scrollable-menu" <div class="scrollable-menu"
role="listbox"
[id]="'combobox_' + id + '_listbox'"
[attr.aria-label]="model.placeholder" [attr.aria-label]="model.placeholder"
infiniteScroll infiniteScroll
[infiniteScrollDistance]="2" [infiniteScrollDistance]="2"
@@ -32,7 +39,10 @@
[scrollWindow]="false"> [scrollWindow]="false">
<button class="dropdown-item disabled" *ngIf="optionsList && optionsList.length == 0">{{'form.no-results' | translate}}</button> <button class="dropdown-item disabled" *ngIf="optionsList && optionsList.length == 0">{{'form.no-results' | translate}}</button>
<button class="dropdown-item collection-item text-truncate" *ngFor="let listEntry of optionsList" (click)="onSelect(listEntry); sdRef.close()" title="{{ listEntry.display }}"> <button class="dropdown-item collection-item text-truncate" *ngFor="let listEntry of optionsList"
(click)="onSelect(listEntry); sdRef.close()"
title="{{ listEntry.display }}" role="option"
[attr.id]="listEntry.display == (currentValue|async) ? ('combobox_' + id + '_selected') : null">
{{inputFormatter(listEntry)}} {{inputFormatter(listEntry)}}
</button> </button>
<div class="scrollable-dropdown-loading text-center" *ngIf="loading"><p>{{'form.loading' | translate}}</p></div> <div class="scrollable-dropdown-loading text-center" *ngIf="loading"><p>{{'form.loading' | translate}}</p></div>
@@ -40,5 +50,3 @@
</div> </div>
</div> </div>