DigitaleBibliothek / Frontend / 1989a6c0423

Commits

Alexandre Vryghem authored 1989a6c0423 16 Dec 2023

Fixed accessibility issues with pagination button

- 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

src/app/shared/pagination/pagination.component.html

Modified

-1
+<div *ngIf="currentPageState == undefined || currentPageState == (currentPage$|async)" [id]="'p-' + id">
-2
+  <div *ngIf="(!hidePaginationDetail && collectionSize > 0) || !hideGear" class="pagination-masked clearfix top">
-3
+    <div class="row">
-4
+      <div *ngIf="!hidePaginationDetail && collectionSize > 0" class="col-auto pagination-info">
-5
+          <span class="align-middle hidden-xs-down">{{ 'pagination.showing.label' | translate }}</span>
-6
+          <span class="align-middle">{{ 'pagination.showing.detail' | translate:(getShowingDetails(collectionSize)|async)}}</span>
-7
+      </div>
-8
+      <div class="col">
-9
+        <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>
--
+          <div id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" ngbDropdownMenu>
--
+            <h6 class="dropdown-header">{{ 'pagination.results-per-page' | translate}}</h6>
--
+            <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>
--
+            <ng-container *ngIf="!hideSortOptions">
--
+              <h6 class="dropdown-header">{{ 'pagination.sort-direction' | translate}}</h6>
--
+              <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>
--
+            </ng-container>
--
+          </div>
-+
+          <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>
-+
+          <ul id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" role="menu" ngbDropdownMenu>
-+
+            <li role="menuitem">
-+
+              <span class="dropdown-header" id="pagination-control_results-per-page" role="heading">{{ 'pagination.results-per-page' | translate}}</span>
-+
+              <ul aria-labelledby="pagination-control_results-per-page" class="list-unstyled" role="listbox">
-+
+                <li *ngFor="let item of pageSizeOptions" role="option" [attr.aria-selected]="item === (pageSize$ | async)">
-+
+                  <button (click)="doPageSizeChange(item)" class="dropdown-item">
-+
+                    <i [ngClass]="{'invisible': item !== (pageSize$ | async) }" class="fas fa-check" aria-hidden="true"></i> {{item}}
-+
+                  </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>
-33
+        </div>
-34
+        <ds-rss></ds-rss>
-35
+      </div>
-36
+    </div>
-37
+  </div>
-38
+  <ng-content></ng-content>
-39
-40
+  <div *ngIf="shouldShowBottomPager | async">
-41
+    <div *ngIf="showPaginator" class="pagination justify-content-center clearfix bottom">
-42
+      <ngb-pagination [boundaryLinks]="paginationOptions.boundaryLinks"

Frontend

Commits

Jira Issues

Add shortcut