Files
dspace-angular/src/app/submission/form/collection/submission-form-collection.component.html
Alexandre Vryghem 3e48e5903e Fixed dropdown accessibility issue
- Removed non-existing dropdownMenuButton references
- Added appropriate roles to dropdown menus
2024-01-31 09:51:19 -06:00

44 lines
1.6 KiB
HTML

<div>
<div
*ngIf="!(available$ | async)"
class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">{{ 'submission.sections.general.collection' | translate }}</span>
</div>
<div class="input-group-append">
<span class="input-group-text">{{ selectedCollectionName$ | async }}</span>
</div>
</div>
<div
ngbDropdown
#collectionControls="ngbDropdown"
*ngIf="(available$ | async)"
class="btn-group input-group"
(openChange)="toggled($event)">
<div class="input-group-prepend">
<span id="collectionControlsMenuLabel" class="input-group-text">
{{ 'submission.sections.general.collection' | translate }}
</span>
</div>
<button aria-describedby="collectionControlsMenuLabel"
id="collectionControlsMenuButton"
class="btn btn-outline-primary"
(blur)="onClose()"
(click)="onClose()"
[disabled]="(processingChange$ | async) || collectionModifiable == false || isReadonly"
ngbDropdownToggle>
<span *ngIf="(processingChange$ | async)"><i class='fas fa-circle-notch fa-spin'></i></span>
<span *ngIf="!(processingChange$ | async)">{{ selectedCollectionName$ | async }}</span>
</button>
<div ngbDropdownMenu
class="dropdown-menu p-0"
id="collectionControlsDropdownMenu"
aria-labelledby="collectionControlsMenuButton">
<ds-themed-collection-dropdown
(selectionChange)="onSelect($event)">
</ds-themed-collection-dropdown>
</div>
</div>
</div>