Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(pagination): add 'aria-disabled' attribute (#3471)
  • Loading branch information
peterblazejewicz authored and maxokorokov committed Nov 18, 2019
1 parent c502341 commit c0a2bda
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 6 deletions.
14 changes: 14 additions & 0 deletions src/pagination/pagination.spec.ts
Expand Up @@ -31,6 +31,7 @@ function expectPages(nativeEl: HTMLElement, pagesDef: string[], ellipsis = '...'
expect(normalizeText(pages[i].textContent)).toEqual(pageDef.substr(1));
if (normalizeText(pages[i].textContent) !== ellipsis) {
expect(pages[i].querySelector('a').getAttribute('tabindex')).toEqual('-1');
expect(pages[i].querySelector('a').hasAttribute('aria-disabled')).toBeTruthy();
}
} else {
expect(pages[i]).not.toHaveCssClass('active');
Expand All @@ -39,6 +40,7 @@ function expectPages(nativeEl: HTMLElement, pagesDef: string[], ellipsis = '...'
expect(normalizeText(pages[i].textContent)).toEqual(pageDef);
if (normalizeText(pages[i].textContent) !== ellipsis) {
expect(pages[i].querySelector('a').hasAttribute('tabindex')).toBeFalsy();
expect(pages[i].querySelector('a').hasAttribute('aria-disabled')).toBeFalsy();
}
}
}
Expand Down Expand Up @@ -654,6 +656,18 @@ describe('ngb-pagination', () => {
expect(buttonLinks[i].getAttribute('tabindex')).toEqual('-1');
}
});

it('should set aria-disabled for links correctly for disabled state', () => {
const html = `<ngb-pagination [collectionSize]="collectionSize" [pageSize]="pageSize" [maxSize]="maxSize"
[disabled]=true></ngb-pagination>`;
const fixture = createTestComponent(html);

const buttonLinks = fixture.nativeElement.querySelectorAll('li a');
for (let i = 0; i < buttonLinks.length; i++) {
expect(buttonLinks[i].getAttribute('aria-disabled')).toEqual('true');
}
});

});

describe('Customization', () => {
Expand Down
18 changes: 12 additions & 6 deletions src/pagination/pagination.ts
Expand Up @@ -132,7 +132,8 @@ export class NgbPaginationPrevious {
<li *ngIf="boundaryLinks" class="page-item"
[class.disabled]="previousDisabled()">
<a aria-label="First" i18n-aria-label="@@ngb.pagination.first-aria" class="page-link" href
(click)="selectPage(1); $event.preventDefault()" [attr.tabindex]="(hasPrevious() && !disabled ? null : '-1')">
(click)="selectPage(1); $event.preventDefault()" [attr.tabindex]="(hasPrevious() && !disabled ? null : '-1')"
[attr.aria-disabled]="(previousDisabled() ? 'true' : null)">
<ng-template [ngTemplateOutlet]="tplFirst?.templateRef || first"
[ngTemplateOutletContext]="{disabled: previousDisabled(), currentPage: page}"></ng-template>
</a>
Expand All @@ -141,33 +142,38 @@ export class NgbPaginationPrevious {
<li *ngIf="directionLinks" class="page-item"
[class.disabled]="previousDisabled()">
<a aria-label="Previous" i18n-aria-label="@@ngb.pagination.previous-aria" class="page-link" href
(click)="selectPage(page-1); $event.preventDefault()" [attr.tabindex]="(hasPrevious() && !disabled ? null : '-1')">
(click)="selectPage(page-1); $event.preventDefault()" [attr.tabindex]="(hasPrevious() && !disabled ? null : '-1')"
[attr.aria-disabled]="(previousDisabled() ? 'true' : null)">
<ng-template [ngTemplateOutlet]="tplPrevious?.templateRef || previous"
[ngTemplateOutletContext]="{disabled: previousDisabled()}"></ng-template>
</a>
</li>
<li *ngFor="let pageNumber of pages" class="page-item" [class.active]="pageNumber === page"
[class.disabled]="isEllipsis(pageNumber) || disabled" [attr.aria-current]="(pageNumber === page ? 'page' : null)">
<a *ngIf="isEllipsis(pageNumber)" class="page-link" [attr.tabindex]="(disabled ? '-1' : null)">
<a *ngIf="isEllipsis(pageNumber)" class="page-link" [attr.tabindex]="(disabled ? '-1' : null)"
[attr.aria-disabled]="(isEllipsis(pageNumber) || disabled ? 'true' : null)">
<ng-template [ngTemplateOutlet]="tplEllipsis?.templateRef || ellipsis"
[ngTemplateOutletContext]="{disabled: true, currentPage: page}"></ng-template>
</a>
<a *ngIf="!isEllipsis(pageNumber)" class="page-link" href (click)="selectPage(pageNumber); $event.preventDefault()" [attr.tabindex]="(disabled ? '-1' : null)">
<a *ngIf="!isEllipsis(pageNumber)" class="page-link" href (click)="selectPage(pageNumber); $event.preventDefault()" [attr.tabindex]="(disabled ? '-1' : null)"
[attr.aria-disabled]="(disabled ? 'true' : null)">
<ng-template [ngTemplateOutlet]="tplNumber?.templateRef || defaultNumber"
[ngTemplateOutletContext]="{disabled: disabled, $implicit: pageNumber, currentPage: page}"></ng-template>
</a>
</li>
<li *ngIf="directionLinks" class="page-item" [class.disabled]="nextDisabled()">
<a aria-label="Next" i18n-aria-label="@@ngb.pagination.next-aria" class="page-link" href
(click)="selectPage(page+1); $event.preventDefault()" [attr.tabindex]="(hasNext() && !disabled ? null : '-1')">
(click)="selectPage(page+1); $event.preventDefault()" [attr.tabindex]="(hasNext() && !disabled ? null : '-1')"
[attr.aria-disabled]="(nextDisabled() ? 'true' : null)">
<ng-template [ngTemplateOutlet]="tplNext?.templateRef || next"
[ngTemplateOutletContext]="{disabled: nextDisabled(), currentPage: page}"></ng-template>
</a>
</li>
<li *ngIf="boundaryLinks" class="page-item" [class.disabled]="nextDisabled()">
<a aria-label="Last" i18n-aria-label="@@ngb.pagination.last-aria" class="page-link" href
(click)="selectPage(pageCount); $event.preventDefault()" [attr.tabindex]="(hasNext() && !disabled ? null : '-1')">
(click)="selectPage(pageCount); $event.preventDefault()" [attr.tabindex]="(hasNext() && !disabled ? null : '-1')"
[attr.aria-disabled]="(nextDisabled() ? 'true' : null)">
<ng-template [ngTemplateOutlet]="tplLast?.templateRef || last"
[ngTemplateOutletContext]="{disabled: nextDisabled(), currentPage: page}"></ng-template>
</a>
Expand Down

0 comments on commit c0a2bda

Please sign in to comment.