Skip to content
Snippets Groups Projects

Fix accessbility on pagination

Merged Dimitri DI GUSTO requested to merge DOS0065640 into development
2 files
+ 8
6
Compare changes
  • Side-by-side
  • Inline
Files
2
@@ -31,19 +31,21 @@
@@ -31,19 +31,21 @@
<ul>
<ul>
<ng-container *ngFor="let pageNum of getPages(); let i = index">
<ng-container *ngFor="let pageNum of getPages(); let i = index">
<li>
<li>
<button *ngIf="!loading; else pageNumberDisabled"
<button *ngIf="!loading; else pageNumberDisabled"
[attr.aria-label]="pageNum"
[attr.aria-label]="pageNum"
(click)="onPage(pageNum)" class="button"
(click)="onPage(pageNum)" class="button"
[ngClass]="{'is-current': pageNum === pageIndex}">{{ pageNum }}</button>
[ngClass]="{'is-current': pageNum === pageIndex}"
 
[attr.aria-current]="pageNum === pageIndex ? 'page' : undefined">{{ pageNum }}</button>
<ng-template #pageNumberDisabled>
<ng-template #pageNumberDisabled>
<button class="button" [ngClass]="{'is-current': pageNum === pageIndex}" disabled>{{ pageNum }}</button>
<button class="button" [ngClass]="{'is-current': pageNum === pageIndex}"
 
[attr.aria-current]="pageNum === pageIndex ? 'page' : undefined" disabled>{{ pageNum }}</button>
</ng-template>
</ng-template>
</li>
</li>
</ng-container>
</ng-container>
</ul>
</ul>
<!-- Next button -->
<!-- Next button -->
<button class="button" *ngIf="lastPage() || loading; else activeNextLink"
<button class="button" *ngIf="lastPage() || loading; else activeNextLink"
i18n-aria-label="@@research.pagination.next" aria-label="Next page" disabled>
i18n-aria-label="@@research.pagination.next" aria-label="Next page" disabled>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 9">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 9">
<path
<path
@@ -69,4 +71,4 @@
@@ -69,4 +71,4 @@
</ng-template>
</ng-template>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
Loading