mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-09 02:54:13 +00:00
Fix Bulk Access Management usability issues
- Added aria-labels to trash & select bitstream icon
- Added aria-labels ui-switch components (had to upgrade ngx-ui-switch to 14.1.0)
- Fixed aria-controls pointing to non-existing ids
- Fixed bulk-access-browse not having the tab role on it's tabs
- Fixed role="tablist" not having direct role="tab" by adding role="presentation" on the li elements
- Fixed aria-expanded being set to true when collapsed and backwards for BulkAccessBrowseComponent & BulkAccessSettingsComponent
(cherry picked from commit c300123b78)
This commit is contained in:
Alexandre Vryghem
committed by
github-actions[bot]
github-actions[bot]
parent
1c4be7d1fe
commit
fc7aa27706
@@ -1,15 +1,15 @@
|
||||
<ngb-accordion #acc="ngbAccordion" [activeIds]="'browse'">
|
||||
<ngb-panel [id]="'browse'">
|
||||
<ng-template ngbPanelHeader>
|
||||
<div class="w-100 d-flex justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('browse')"
|
||||
<div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('browse')"
|
||||
data-test="browse">
|
||||
<button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
|
||||
[attr.aria-expanded]="!acc.isExpanded('browse')"
|
||||
aria-controls="collapsePanels">
|
||||
[attr.aria-expanded]="acc.isExpanded('browse')"
|
||||
aria-controls="bulk-access-browse-panel-content">
|
||||
{{ 'admin.access-control.bulk-access-browse.header' | translate }}
|
||||
</button>
|
||||
<div class="text-right d-flex">
|
||||
<div class="ml-3 d-inline-block">
|
||||
<div class="text-right d-flex gap-2">
|
||||
<div class="d-flex my-auto">
|
||||
<span *ngIf="acc.isExpanded('browse')" class="fas fa-chevron-up fa-fw"></span>
|
||||
<span *ngIf="!acc.isExpanded('browse')" class="fas fa-chevron-down fa-fw"></span>
|
||||
</div>
|
||||
@@ -17,51 +17,53 @@
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template ngbPanelContent>
|
||||
<ul ngbNav #nav="ngbNav" [(activeId)]="activateId" class="nav-pills">
|
||||
<li [ngbNavItem]="'search'">
|
||||
<a ngbNavLink>{{'admin.access-control.bulk-access-browse.search.header' | translate}}</a>
|
||||
<ng-template ngbNavContent>
|
||||
<div class="mx-n3">
|
||||
<ds-themed-search [configuration]="'administrativeBulkAccess'"
|
||||
[selectable]="true"
|
||||
[selectionConfig]="{ repeatable: true, listId: listId }"
|
||||
[showThumbnails]="false"></ds-themed-search>
|
||||
</div>
|
||||
</ng-template>
|
||||
</li>
|
||||
<li [ngbNavItem]="'selected'">
|
||||
<a ngbNavLink>
|
||||
{{'admin.access-control.bulk-access-browse.selected.header' | translate: {number: ((objectsSelected$ | async)?.payload?.totalElements) ? (objectsSelected$ | async)?.payload?.totalElements : '0'} }}
|
||||
</a>
|
||||
<ng-template ngbNavContent>
|
||||
<ds-pagination
|
||||
[paginationOptions]="(paginationOptions$ | async)"
|
||||
[pageInfoState]="(objectsSelected$|async)?.payload.pageInfo"
|
||||
[collectionSize]="(objectsSelected$|async)?.payload?.totalElements"
|
||||
[objects]="(objectsSelected$|async)"
|
||||
[showPaginator]="false"
|
||||
(prev)="pagePrev()"
|
||||
(next)="pageNext()">
|
||||
<ul *ngIf="(objectsSelected$|async)?.hasSucceeded" class="list-unstyled ml-4">
|
||||
<li *ngFor='let object of (objectsSelected$|async)?.payload?.page | paginate: { itemsPerPage: (paginationOptions$ | async).pageSize,
|
||||
currentPage: (paginationOptions$ | async).currentPage, totalItems: (objectsSelected$|async)?.payload?.page.length }; let i = index; let last = last '
|
||||
class="mt-4 mb-4 d-flex"
|
||||
[attr.data-test]="'list-object' | dsBrowserOnly">
|
||||
<ds-selectable-list-item-control [index]="i"
|
||||
[object]="object"
|
||||
[selectionConfig]="{ repeatable: true, listId: listId }"></ds-selectable-list-item-control>
|
||||
<ds-listable-object-component-loader [listID]="listId"
|
||||
[index]="i"
|
||||
[object]="object"
|
||||
[showThumbnails]="false"
|
||||
[viewMode]="'list'"></ds-listable-object-component-loader>
|
||||
</li>
|
||||
</ul>
|
||||
</ds-pagination>
|
||||
</ng-template>
|
||||
</li>
|
||||
</ul>
|
||||
<div [ngbNavOutlet]="nav" class="mt-5"></div>
|
||||
<div id="bulk-access-browse-panel-content">
|
||||
<ul ngbNav #nav="ngbNav" [(activeId)]="activateId" class="nav-pills">
|
||||
<li [ngbNavItem]="'search'" role="presentation">
|
||||
<a ngbNavLink>{{'admin.access-control.bulk-access-browse.search.header' | translate}}</a>
|
||||
<ng-template ngbNavContent>
|
||||
<div class="mx-n3">
|
||||
<ds-themed-search [configuration]="'administrativeBulkAccess'"
|
||||
[selectable]="true"
|
||||
[selectionConfig]="{ repeatable: true, listId: listId }"
|
||||
[showThumbnails]="false"></ds-themed-search>
|
||||
</div>
|
||||
</ng-template>
|
||||
</li>
|
||||
<li [ngbNavItem]="'selected'" role="presentation">
|
||||
<a ngbNavLink>
|
||||
{{'admin.access-control.bulk-access-browse.selected.header' | translate: {number: ((objectsSelected$ | async)?.payload?.totalElements) ? (objectsSelected$ | async)?.payload?.totalElements : '0'} }}
|
||||
</a>
|
||||
<ng-template ngbNavContent>
|
||||
<ds-pagination
|
||||
[paginationOptions]="(paginationOptions$ | async)"
|
||||
[pageInfoState]="(objectsSelected$|async)?.payload.pageInfo"
|
||||
[collectionSize]="(objectsSelected$|async)?.payload?.totalElements"
|
||||
[objects]="(objectsSelected$|async)"
|
||||
[showPaginator]="false"
|
||||
(prev)="pagePrev()"
|
||||
(next)="pageNext()">
|
||||
<ul *ngIf="(objectsSelected$|async)?.hasSucceeded" class="list-unstyled ml-4">
|
||||
<li *ngFor='let object of (objectsSelected$|async)?.payload?.page | paginate: { itemsPerPage: (paginationOptions$ | async).pageSize,
|
||||
currentPage: (paginationOptions$ | async).currentPage, totalItems: (objectsSelected$|async)?.payload?.page.length }; let i = index; let last = last '
|
||||
class="mt-4 mb-4 d-flex"
|
||||
[attr.data-test]="'list-object' | dsBrowserOnly">
|
||||
<ds-selectable-list-item-control [index]="i"
|
||||
[object]="object"
|
||||
[selectionConfig]="{ repeatable: true, listId: listId }"></ds-selectable-list-item-control>
|
||||
<ds-listable-object-component-loader [listID]="listId"
|
||||
[index]="i"
|
||||
[object]="object"
|
||||
[showThumbnails]="false"
|
||||
[viewMode]="'list'"></ds-listable-object-component-loader>
|
||||
</li>
|
||||
</ul>
|
||||
</ds-pagination>
|
||||
</ng-template>
|
||||
</li>
|
||||
</ul>
|
||||
<div [ngbNavOutlet]="nav" class="mt-5"></div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ngb-panel>
|
||||
</ngb-accordion>
|
||||
|
||||
Reference in New Issue
Block a user