From c0a2bdabf8afb55e44efa9a978d8c064f05b3293 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20B=C5=82a=C5=BCejewicz=20=28Peter=20Blazejewicz=29?=
 <peterblazejewicz@users.noreply.github.com>
Date: Mon, 18 Nov 2019 11:24:05 +0100
Subject: [PATCH] feat(pagination): add 'aria-disabled' attribute (#3471)

As per discussion in #3470 and as per:
https://getbootstrap.com/docs/4.3/components/pagination/#disabled-and-active-states
---
 src/pagination/pagination.spec.ts | 14 ++++++++++++++
 src/pagination/pagination.ts      | 18 ++++++++++++------
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/pagination/pagination.spec.ts b/src/pagination/pagination.spec.ts
index d19ca58c0d..6e7674008d 100644
--- a/src/pagination/pagination.spec.ts
+++ b/src/pagination/pagination.spec.ts
@@ -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');
@@ -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();
       }
     }
   }
@@ -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', () => {
diff --git a/src/pagination/pagination.ts b/src/pagination/pagination.ts
index ff502431fa..8ada40447d 100644
--- a/src/pagination/pagination.ts
+++ b/src/pagination/pagination.ts
@@ -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>
@@ -141,25 +142,29 @@ 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>
@@ -167,7 +172,8 @@ export class NgbPaginationPrevious {
 
       <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>