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

Fixed accessibility issues with pagination button

Browse Source 
- Replaced the h6 tags with the role heading
- Gave the gear button the roles in order to be detected as an expandable menu
- Replaced the dropdown structure to render a menu of listboxes
- Added the aria-selected attribute
This commit is contained in:
Alexandre Vryghem
2023-12-16 03:10:06 +01:00
parent b8e0401388
commit 1989a6c042
2 changed files with 25 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/shared/pagination/pagination.component.html
View File

@@ -7,15 +7,29 @@
</div> </div>
<div class="col"> <div class="col">
<div *ngIf="!hideGear" ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-right"> <div *ngIf="!hideGear" ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-right">
<button class="btn btn-secondary" id="paginationControls" ngbDropdownToggle [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate"><i class="fas fa-cog" aria-hidden="true"></i></button> <button class="btn btn-secondary" id="paginationControls" ngbDropdownToggle [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate" aria-haspopup="true" aria-expanded="false"><i class="fas fa-cog" aria-hidden="true"></i></button>
<div id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" ngbDropdownMenu> <ul id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" role="menu" ngbDropdownMenu>
<h6 class="dropdown-header">{{ 'pagination.results-per-page' | translate}}</h6> <li role="menuitem">
<button class="dropdown-item" *ngFor="let item of pageSizeOptions" (click)="doPageSizeChange(item)"><i [ngClass]="{'invisible': item != (pageSize$|async)}" class="fas fa-check" aria-hidden="true"></i> {{item}} </button> <span class="dropdown-header" id="pagination-control_results-per-page" role="heading">{{ 'pagination.results-per-page' | translate}}</span>
<ng-container *ngIf="!hideSortOptions"> <ul aria-labelledby="pagination-control_results-per-page" class="list-unstyled" role="listbox">
<h6 class="dropdown-header">{{ 'pagination.sort-direction' | translate}}</h6> <li *ngFor="let item of pageSizeOptions" role="option" [attr.aria-selected]="item === (pageSize$ | async)">
<button class="dropdown-item" *ngFor="let direction of (sortDirections | dsKeys)" (click)="doSortDirectionChange(direction.value)"><i [ngClass]="{'invisible': direction.value !== (sortDirection$ |async)}" class="fas fa-check" aria-hidden="true"></i> {{'sorting.' + direction.key | translate}} </button> <button (click)="doPageSizeChange(item)" class="dropdown-item">
</ng-container> <i [ngClass]="{'invisible': item !== (pageSize$ | async) }" class="fas fa-check" aria-hidden="true"></i> {{item}}
</div> </button>
</li>
</ul>
</li>
<li *ngIf="!hideSortOptions" role="menuitem">
<span class="dropdown-header" id="pagination-control_sort-direction" role="heading">{{ 'pagination.sort-direction' | translate}}</span>
<ul aria-labelledby="pagination-control_sort-direction" class="list-unstyled" role="listbox">
<li *ngFor="let direction of (sortDirections | dsKeys)" [attr.aria-selected]="direction.value === (sortDirection$ | async)" role="option">
<button class="dropdown-item" (click)="doSortDirectionChange(direction.value)">
<i [ngClass]="{'invisible': direction.value !== (sortDirection$ |async)}" class="fas fa-check" aria-hidden="true"></i> {{'sorting.' + direction.key | translate}}
</button>
</li>
</ul>
</li>
</ul>
</div> </div>
<ds-rss></ds-rss> <ds-rss></ds-rss>
</div> </div>

4
src/app/shared/pagination/pagination.component.ts
View File

@@ -167,7 +167,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
/** /**
* Number of items per page. * Number of items per page.
*/ */
public pageSize$; public pageSize$: Observable<number>;
/** /**
* Declare SortDirection enumeration to use it in the template * Declare SortDirection enumeration to use it in the template
@@ -188,7 +188,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
/** /**
* Name of the field that's used to sort by * Name of the field that's used to sort by
*/ */
public sortField$; public sortField$: Observable<string>;
public defaultSortField = 'name'; public defaultSortField = 'name';
/** /**