chore(aria): Add pager buttons tooltips and #7037

zdrawku · zdrawku · commit 58af11264c5f · 2020-04-16T17:59:51.000+03:00
diff --git a/projects/igniteui-angular/src/lib/core/i18n/paginator-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/paginator-resources.ts
@@ -1,9 +1,17 @@
 export interface IPaginatorResourceStrings {
     igx_paginator_label?: string;
     igx_paginator_pager_text?: string;
+    igx_paginator_first_page_button_text?: string;
+    igx_paginator_previous_page_button_text?: string;
+    igx_paginator_last_page_button_text?: string;
+    igx_paginator_next_page_button_text?: string;
 }
 
 export const PaginatorResourceStringsEN: IPaginatorResourceStrings = {
     igx_paginator_label: 'Items per page',
-    igx_paginator_pager_text: 'of'
+    igx_paginator_pager_text: 'of',
+    igx_paginator_first_page_button_text: 'Go to first page',
+    igx_paginator_previous_page_button_text: 'Previous page',
+    igx_paginator_last_page_button_text: 'Go to last page',
+    igx_paginator_next_page_button_text: 'Next page',
 };
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -209,7 +209,7 @@
 <div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' tabindex="0" [attr.aria-activedescendant]="activeDescendant"
 (focus)="navigation.focusFirstCell(false)" (keydown)="navigation.summaryNav($event)" #tfoot>
     <igx-grid-summary-row [style.width.px]='calcWidth'  [style.height.px]='summariesHeight'
-        *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id"
+        *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
         [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
         class="igx-grid__summaries" #summaryRow>
     </igx-grid-summary-row>
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -167,7 +167,7 @@
 <div class="igx-grid__tfoot" tabindex="0" (focus)="navigation.focusFirstCell(false)" [attr.aria-activedescendant]="activeDescendant"
  (keydown)="navigation.summaryNav($event)"  role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
     <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'
-        *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id"
+        *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
         [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
         class="igx-grid__summaries" #summaryRow>
     </igx-grid-summary-row>
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html
@@ -12,6 +12,7 @@
     <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges" [igxForSizePropName]='"calcPixelWidth"' #igxDirRef>
         <igx-grid-summary-cell
             class="igx-grid-summary igx-grid-summary--fw"
+            role="cell"
             [class.igx-grid-summary--cosy]="grid.displayDensity === 'cosy'"
             [class.igx-grid-summary--compact]="grid.displayDensity === 'compact'"
             [class.igx-grid-summary--empty]="!col.hasSummary"
@@ -37,6 +38,7 @@
 
 <ng-template #summaryCellTemplate let-col>
     <igx-grid-summary-cell *ngFor="let col of pinnedColumns | igxNotGrouped"
+            role="cell"
             class="igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned"
             [class.igx-grid-summary--cosy]="grid.displayDensity === 'cosy'"
             [class.igx-grid-summary--compact]="grid.displayDensity === 'compact'"
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -116,7 +116,7 @@
 
 <div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' tabindex="0" [attr.aria-activedescendant]="activeDescendant" (focus)="navigation.focusFirstCell(false)" (keydown)="navigation.summaryNav($event)" #tfoot>
     <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'
-        *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id"
+        *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
         [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
         class="igx-grid__summaries" #summaryRow>
     </igx-grid-summary-row>
diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.html b/projects/igniteui-angular/src/lib/paginator/paginator.component.html
@@ -3,28 +3,29 @@
     <div class="igx-paginator__select-input">
         <igx-select [(ngModel)]="perPage" [displayDensity]="paginatorSelectDisplayDensity()" type="border"
             [disabled]="!dropdownEnabled">
+            <label igxLabel [hidden]="true">{{ selectLabel }}</label>
             <igx-select-item [value]="val" *ngFor="let val of selectOptions">
                 {{val}}
             </igx-select-item>
         </igx-select>
     </div>
 </div>
-<div class="igx-paginator__pager" [hidden]="pagerHidden">
-    <button [disabled]="isFirstPage || !pagerEnabled ? true: false" (click)="paginate(0)" igxButton="icon" igxRipple igxRippleCentered="true">
+<div class="igx-paginator__pager" [hidden]="pagerHidden" role="navigation">
+    <button [title]="firstPageLabel" [disabled]="isFirstPageDisabled" [attr.aria-disabled]="isFirstPageDisabled" (click)="paginate(0)" igxButton="icon" igxRipple igxRippleCentered="true">
         <igx-icon fontSet="material">first_page</igx-icon>
     </button>
-    <button [disabled]="isFirstPage || !pagerEnabled ? true: false" (click)="previousPage()" igxButton="icon" igxRipple igxRippleCentered="true">
+    <button [title]="previousPageLabel" [disabled]="isFirstPageDisabled" [attr.aria-disabled]="isFirstPageDisabled" (click)="previousPage()" igxButton="icon" igxRipple igxRippleCentered="true">
         <igx-icon fontSet="material">chevron_left</igx-icon>
     </button>
-    <div class='igx-paginator__pager-text'>
+    <div class='igx-paginator__pager-text' aria-current="page">
         <span>{{ page + 1 }}</span>
         <span>&nbsp;{{prepositionPage}}&nbsp;</span>
         <span>{{ totalPages }}</span>
     </div>
-    <button [disabled]="isLastPage || !pagerEnabled ? true: false" (click)="nextPage()" igxRipple igxRippleCentered="true" igxButton="icon">
+    <button [title]="nextPageLabel" [disabled]="isLastPageDisabled" [attr.aria-disabled]="isLastPageDisabled" (click)="nextPage()" igxRipple igxRippleCentered="true" igxButton="icon">
         <igx-icon fontSet="material">chevron_right</igx-icon>
     </button>
-    <button [disabled]="isLastPage || !pagerEnabled ? true: false" (click)="paginate(totalPages - 1)" igxButton="icon" igxRipple
+    <button [title]="lastPageLabel" [disabled]="isLastPageDisabled" [attr.aria-disabled]="isLastPageDisabled" (click)="paginate(totalPages - 1)" igxButton="icon" igxRipple
         igxRippleCentered="true">
         <igx-icon fontSet="material">last_page</igx-icon>
     </button>
diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts
@@ -7,6 +7,7 @@ import { IgxSelectModule } from '../select/index';
 import { IgxIconModule } from '../icon/index';
 import { IgxButtonModule } from '../directives/button/button.directive';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
+import { IgxInputGroupModule } from '../input-group';
 
 @Component({
     selector: 'igx-paginator',
@@ -177,6 +178,38 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
    @Input()
    public prepositionPage = CurrentResourceStrings.PaginatorResStrings.igx_paginator_pager_text;
 
+   /**
+    * An @Input property, sets a tooltip text for first page button label
+    * The default is 'Go to first page' localized string.
+    * @memberof IgxPaginatorComponent
+    */
+   @Input()
+   public firstPageLabel = CurrentResourceStrings.PaginatorResStrings.igx_paginator_first_page_button_text;
+
+   /**
+    * An @Input property, sets a tooltip text for the previous page button label
+    * The default is 'Previous page' localized string.
+    * @memberof IgxPaginatorComponent
+    */
+   @Input()
+   public previousPageLabel = CurrentResourceStrings.PaginatorResStrings.igx_paginator_previous_page_button_text;
+
+   /**
+    * An @Input property, sets a tooltip text for last page button label
+    * The default is 'Go to last page' localized string.
+    * @memberof IgxPaginatorComponent
+    */
+   @Input()
+   public lastPageLabel = CurrentResourceStrings.PaginatorResStrings.igx_paginator_last_page_button_text;
+
+   /**
+    * An @Input property, sets a tooltip text for the next page button label
+    * The default is 'Next page' localized string.
+    * @memberof IgxPaginatorComponent
+    */
+   @Input()
+   public nextPageLabel = CurrentResourceStrings.PaginatorResStrings.igx_paginator_next_page_button_text;
+
     /**
      * An event that is emitted when the select in the `IgxPaginatorComponent` changes its value.
      */
@@ -214,6 +247,21 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
         return this.page === 0;
     }
 
+
+    /**
+     * Returns if the first pager buttons should be disabled
+     */
+    get isFirstPageDisabled(): boolean {
+        return this.isFirstPage || !this.pagerEnabled;
+    }
+
+    /**
+     * Returns if the last pager buttons should be disabled
+     */
+    get isLastPageDisabled(): boolean {
+        return this.isLastPage || !this.pagerEnabled;
+    }
+
     private sortUniqueOptions(values: Array<number>, newOption: number): number[] {
         return Array.from(new Set([...values, newOption])).sort((a, b) => a - b);
     }
@@ -255,7 +303,7 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
     /**
      * Goes to the desired page index.
      * ```typescript
-     * this.pagiantor.paginate(1);
+     * this.paginator.paginate(1);
      * ```
      * @param val
      * @memberof IgxPaginatorComponent
@@ -271,6 +319,6 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
 @NgModule({
     declarations: [IgxPaginatorComponent],
     exports: [IgxPaginatorComponent],
-    imports: [CommonModule, IgxSelectModule, FormsModule, IgxIconModule, IgxButtonModule, IgxRippleModule]
+    imports: [CommonModule, IgxSelectModule, FormsModule, IgxIconModule, IgxButtonModule, IgxRippleModule, IgxInputGroupModule]
 })
 export class IgxPaginatorModule { }
