Merge pull request #7155 from IgniteUI/aria-grid-errors

Aria grid errors

Author: zdrawku

CHANGELOG.md

@@ -7,6 +7,8 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
+- `igx-paginator` -  The following inputs have been deprecated for the `paginator` component and will be removed in future versions
+    - `selectLabel` and `prepositionPage` Use 'resourceStrings' to set/get values.
 
 - `IgxInputGroup`
   - **Renamed** `supressInputAutofocus` input to `suppressInputAutofocus`

package-lock.json

@@ -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',
 };

projects/igniteui-angular/src/lib/core/i18n/paginator-resources.ts

@@ -28,7 +28,7 @@
 </div>
 
 <div class="igx-grid__thead">
-    <div class="igx-grid__thead-wrapper" [class.igx-grid__tr--mrl]='hasColumnLayouts' role="composite" (focus)="navigation.focusFirstCell()"
+    <div class="igx-grid__thead-wrapper" [class.igx-grid__tr--mrl]='hasColumnLayouts' role="rowgroup" (focus)="navigation.focusFirstCell()"
     [style.width.px]='calcWidth' tabindex="0" [attr.aria-activedescendant]="activeDescendant" (keydown)="navigation.headerNavigation($event)" (scroll)="preventHeaderScroll($event)" #theadRow>
         <div class="igx-grid__tr" role="row" [style.width.px]='calcWidth'>
             <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
@@ -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>

projects/igniteui-angular/src/lib/grids/grid/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>

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.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'"

projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html

@@ -142,7 +142,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>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -1,30 +1,31 @@
 <div class="igx-paginator__select" [hidden]="dropdownHidden">
-    <label class="igx-paginator__label">{{ selectLabel }}</label>
+    <label class="igx-paginator__label">{{ resourceStrings.igx_paginator_label }}</label>
     <div class="igx-paginator__select-input">
         <igx-select [(ngModel)]="perPage" [displayDensity]="paginatorSelectDisplayDensity()" type="border"
             [disabled]="!dropdownEnabled">
+            <label igxLabel [hidden]="true">{{ resourceStrings.igx_paginator_label }}</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]="resourceStrings.igx_paginator_first_page_button_text" [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]="resourceStrings.igx_paginator_previous_page_button_text" [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>&nbsp;{{ resourceStrings.igx_paginator_pager_text }}&nbsp;</span>
         <span>{{ totalPages }}</span>
     </div>
-    <button [disabled]="isLastPage || !pagerEnabled ? true: false" (click)="nextPage()" igxRipple igxRippleCentered="true" igxButton="icon">
+    <button [title]="resourceStrings.igx_paginator_next_page_button_text" [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]="resourceStrings.igx_paginator_last_page_button_text" [disabled]="isLastPageDisabled" [attr.aria-disabled]="isLastPageDisabled" (click)="paginate(totalPages - 1)" igxButton="icon" igxRipple
         igxRippleCentered="true">
         <igx-icon fontSet="material">last_page</igx-icon>
     </button>

projects/igniteui-angular/src/lib/paginator/paginator.component.html

@@ -146,9 +146,10 @@ describe('IgxPaginator with custom settings', () => {
         const fix = TestBed.createComponent(CustomizedPaginatorComponent);
         fix.detectChanges();
         const paginator = fix.componentInstance.paginator;
-        const selectLabel = paginator.selectLabel;
+        paginator.resourceStrings.igx_paginator_label = 'Per page';
 
-        expect(selectLabel).toEqual('Per page');
+        fix.detectChanges();
+        expect(paginator.resourceStrings.igx_paginator_label).toEqual('Per page');
     });
 
     it('should disable the dropdown and pager buttons if set to false through input', () => {
@@ -189,7 +190,6 @@ export class DefaultPaginatorComponent {
 }
 @Component({
     template: `<igx-paginator
-        [selectLabel]="'Per page'"
         [totalRecords]="25"
         [selectOptions]="[3,10,25,40]"
         [perPage]="7"