Merge pull request #16668 from IgniteUI/vtoneva/fix-accesibility-in-paginator

fix(paginator): accessibility issues in Paginator Component

Author: kdinev

projects/igniteui-angular/paginator/src/paginator/page-size-selector.component.html

@@ -1,6 +1,6 @@
-<label class="igx-page-size__label">{{ paginator.resourceStrings.igx_paginator_label }}</label>
+<label [id]="labelId" class="igx-page-size__label">{{ paginator.resourceStrings.igx_paginator_label }}</label>
 <div class="igx-page-size__select">
-    <igx-select [overlaySettings]="paginator.overlaySettings" [(ngModel)]="paginator.perPage" type="border">
+    <igx-select [labelledBy]="labelId" [overlaySettings]="paginator.overlaySettings" [(ngModel)]="paginator.perPage" type="border">
         @for (val of paginator.selectOptions; track val) {
             <igx-select-item [value]="val">
                 {{ val }}

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

@@ -1,5 +1,6 @@
 <button
     [title]="paginator.resourceStrings.igx_paginator_first_page_button_text"
+    [attr.aria-label]="paginator.resourceStrings.igx_paginator_first_page_button_text"
     [disabled]="paginator.isFirstPage"
     [attr.aria-disabled]="paginator.isFirstPage"
     (click)="paginator.paginate(0)"
@@ -12,6 +13,7 @@
 </button>
 <button
     [title]="paginator.resourceStrings.igx_paginator_previous_page_button_text"
+    [attr.aria-label]="paginator.resourceStrings.igx_paginator_previous_page_button_text"
     [disabled]="paginator.isFirstPage"
     [attr.aria-disabled]="paginator.isFirstPage"
     (click)="paginator.previousPage()"
@@ -33,6 +35,7 @@
 </div>
 <button
     [title]="paginator.resourceStrings.igx_paginator_next_page_button_text"
+    [attr.aria-label]="paginator.resourceStrings.igx_paginator_next_page_button_text"
     [disabled]="paginator.isLastPage"
     [attr.aria-disabled]="paginator.isLastPage"
     (click)="paginator.nextPage()"
@@ -45,6 +48,7 @@
 </button>
 <button
     [title]="paginator.resourceStrings.igx_paginator_last_page_button_text"
+    [attr.aria-label]="paginator.resourceStrings.igx_paginator_last_page_button_text"
     [disabled]="paginator.isLastPage"
     [attr.aria-disabled]="paginator.isLastPage"
     (click)="paginator.paginate(paginator.totalPages - 1)"

projects/igniteui-angular/paginator/src/paginator/paginator.component.spec.ts

@@ -277,6 +277,26 @@ describe('IgxPaginator with custom settings', () => {
         expect(paginator.resourceStrings.igx_paginator_label).toEqual('Per page');
     });
 
+    it('should have correct accessibility attributes', () => {
+        const fix = TestBed.createComponent(DefaultPaginatorComponent);
+        fix.detectChanges();
+        const paginator = fix.componentInstance.paginator;
+        const dom = fix.nativeElement;
+
+        const label = dom.querySelector('.igx-page-size__label');
+        const select = dom.querySelector('igx-select');
+        const input = select.querySelector('input[role="combobox"]');
+
+        expect(label.id).toBeTruthy();
+        expect(label.id).toContain('igx-paginator-');
+        expect(input.getAttribute('aria-labelledby')).toBe(label.id);
+
+        const buttons = dom.querySelectorAll('igx-page-nav button');
+        expect(buttons[0].getAttribute('aria-label')).toBe(paginator.resourceStrings.igx_paginator_first_page_button_text);
+        expect(buttons[1].getAttribute('aria-label')).toBe(paginator.resourceStrings.igx_paginator_previous_page_button_text);
+        expect(buttons[2].getAttribute('aria-label')).toBe(paginator.resourceStrings.igx_paginator_next_page_button_text);
+        expect(buttons[3].getAttribute('aria-label')).toBe(paginator.resourceStrings.igx_paginator_last_page_button_text);
+    });
 });
 @Component({
     template: `

projects/igniteui-angular/paginator/src/paginator/paginator.component.ts

@@ -362,6 +362,7 @@ export class IgxPaginatorComponent implements IgxPaginatorToken {
     }
 }
 
+let NEXT_ID = 0;
 
 @Component({
     selector: 'igx-page-size',
@@ -377,6 +378,14 @@ export class IgxPageSizeSelectorComponent {
      */
     @HostBinding('class.igx-page-size')
     public cssClass = 'igx-page-size';
+
+    @HostBinding('attr.id')
+    @Input()
+    public id = `igx-paginator-${NEXT_ID++}`;
+
+    public get labelId() {
+        return `${this.id}-label`;
+    }
 }
 
 

projects/igniteui-angular/select/src/select/select.component.html

@@ -13,7 +13,7 @@
         [value]="this.selectionValue"
         role="combobox"
         aria-haspopup="listbox"
-        [attr.aria-labelledby]="this.label?.id"
+        [attr.aria-labelledby]="labelledBy || label?.id"
         [attr.aria-expanded]="!this.collapsed"
         [attr.aria-owns]="this.listId"
         [attr.aria-activedescendant]="!this.collapsed ? this.focusedItem?.id : null"
@@ -50,7 +50,7 @@
 
     <!-- #7436 LMB scrolling closes items container - unselectable attribute is IE specific  -->
     <div #scrollContainer class="igx-drop-down__list-scroll" unselectable="on" [style.maxHeight]="maxHeight"
-        [attr.id]="this.listId" role="listbox" [attr.aria-labelledby]="this.label?.id">
+        [attr.id]="this.listId" role="listbox" [attr.aria-labelledby]="labelledBy || label?.id">
         <ng-content select="igx-select-item, igx-select-item-group"></ng-content>
     </div>
 

src/app/pagination/pagination.template.html

@@ -20,16 +20,16 @@
     <igx-paginator-content>
         <igx-page-size></igx-page-size>
         <span style="margin: 0 20px 0 20px;">{{ (pag.page * pag.perPage) + 1}}-{{(pag.page * pag.perPage) + pag.perPage}} of {{ pag.totalRecords}}</span>
-        <button [disabled]="pag.isFirstPage" (click)="pag.paginate(0)" igxIconButton="flat">
+        <button [disabled]="pag.isFirstPage" (click)="pag.paginate(0)" igxIconButton="flat" [attr.aria-label]="pag.resourceStrings.igx_paginator_first_page_button_text">
             <igx-icon>first_page</igx-icon>
         </button>
-        <button [disabled]="pag.isFirstPage" (click)="pag.previousPage()" igxIconButton="flat">
+        <button [disabled]="pag.isFirstPage" (click)="pag.previousPage()" igxIconButton="flat" [attr.aria-label]="pag.resourceStrings.igx_paginator_previous_page_button_text">
             <igx-icon>chevron_left</igx-icon>
         </button>
-        <button [disabled]="pag.isLastPage" (click)="pag.nextPage()" igxIconButton="flat">
+        <button [disabled]="pag.isLastPage" (click)="pag.nextPage()" igxIconButton="flat" [attr.aria-label]="pag.resourceStrings.igx_paginator_next_page_button_text">
             <igx-icon>chevron_right</igx-icon>
         </button>
-        <button [disabled]="paginator.isLastPage" (click)="paginator.paginate(paginator.totalPages - 1)" igxIconButton="flat">
+        <button [disabled]="pag.isLastPage" (click)="pag.paginate(pag.totalPages - 1)" igxIconButton="flat" [attr.aria-label]="pag.resourceStrings.igx_paginator_last_page_button_text">
             <igx-icon>last_page</igx-icon>
         </button>
     </igx-paginator-content>