fix(pagination): prevent focus of disabled selectors

Fixes #1108 Closes #1114 Closes #1114
ng-bootstrap · Dec 13, 2016 · 733fc54 · 733fc54
1 parent d1abd37
commit 733fc54
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/pagination/pagination.spec.ts b/src/pagination/pagination.spec.ts
@@ -27,10 +27,16 @@ function expectPages(nativeEl: HTMLElement, pagesDef: string[]): void {
       expect(pages[i]).not.toHaveCssClass('active');
       expect(pages[i]).toHaveCssClass('disabled');
       expect(normalizeText(pages[i].textContent)).toEqual(pageDef.substr(1));
+      if (normalizeText(pages[i].textContent) !== '...') {
+        expect(pages[i].querySelector('a').getAttribute('tabindex')).toEqual('-1');
+      }
     } else {
       expect(pages[i]).not.toHaveCssClass('active');
       expect(pages[i]).not.toHaveCssClass('disabled');
       expect(normalizeText(pages[i].textContent)).toEqual(pageDef);
+      if (normalizeText(pages[i].textContent) !== '...') {
+        expect(pages[i].querySelector('a').hasAttribute('tabindex')).toBeFalsy();
+      }
     }
   }
 }

diff --git a/src/pagination/pagination.ts b/src/pagination/pagination.ts
@@ -12,14 +12,14 @@ import {NgbPaginationConfig} from './pagination-config';
     <nav>
       <ul [class]="'pagination' + (size ? ' pagination-' + size : '')">
         <li *ngIf="boundaryLinks" class="page-item" [class.disabled]="!hasPrevious()">
-          <a aria-label="First" class="page-link" href (click)="!!selectPage(1)">
+          <a aria-label="First" class="page-link" href (click)="!!selectPage(1)" [attr.tabindex]="hasPrevious() ? null : '-1'">
             <span aria-hidden="true">&laquo;&laquo;</span>
             <span class="sr-only">First</span>
           </a>                
         </li>
       
         <li *ngIf="directionLinks" class="page-item" [class.disabled]="!hasPrevious()">
-          <a aria-label="Previous" class="page-link" href (click)="!!selectPage(page-1)">
+          <a aria-label="Previous" class="page-link" href (click)="!!selectPage(page-1)" [attr.tabindex]="hasPrevious() ? null : '-1'">
             <span aria-hidden="true">&laquo;</span>
             <span class="sr-only">Previous</span>
           </a>
@@ -32,14 +32,14 @@ import {NgbPaginationConfig} from './pagination-config';
         </li>
 
         <li *ngIf="directionLinks" class="page-item" [class.disabled]="!hasNext()">
-          <a aria-label="Next" class="page-link" href (click)="!!selectPage(page+1)">
+          <a aria-label="Next" class="page-link" href (click)="!!selectPage(page+1)" [attr.tabindex]="hasNext() ? null : '-1'">
             <span aria-hidden="true">&raquo;</span>
             <span class="sr-only">Next</span>
           </a>
         </li>
         
         <li *ngIf="boundaryLinks" class="page-item" [class.disabled]="!hasNext()">
-          <a aria-label="Last" class="page-link" href (click)="!!selectPage(pageCount)">
+          <a aria-label="Last" class="page-link" href (click)="!!selectPage(pageCount)" [attr.tabindex]="hasNext() ? null : '-1'">
             <span aria-hidden="true">&raquo;&raquo;</span>
             <span class="sr-only">Last</span>
           </a>