Merge branch 'master' into kdinev-patch-1

Author: kdinev

package-lock.json

@@ -76,7 +76,7 @@
     "dompurify": "^3.3.0",
     "express": "^5.2.1",
     "fflate": "^0.8.1",
-    "igniteui-i18n-core": "^1.0.1",
+    "igniteui-i18n-core": "^1.0.2",
     "igniteui-theming": "^24.0.0",
     "igniteui-trial-watermark": "^3.1.0",
     "jspdf": "^3.0.4",
@@ -126,7 +126,7 @@
     "hammerjs": "^2.0.8",
     "ig-typedoc-theme": "^7.0.1",
     "igniteui-dockmanager": "^1.17.0",
-    "igniteui-i18n-resources": "1.0.1",
+    "igniteui-i18n-resources": "^1.0.2",
     "igniteui-sassdoc-theme": "^2.1.0",
     "igniteui-webcomponents": "^6.3.1",
     "jasmine": "^5.6.0",

package.json

@@ -24,7 +24,7 @@
   },
   "homepage": "https://github.com/IgniteUI/igniteui-angular/projects/igniteui-angular-i18n#readme",
   "dependencies": {
-    "igniteui-i18n-core": "^1.0.1",
-    "igniteui-i18n-resources": "^1.0.1"
+    "igniteui-i18n-core": "^1.0.2",
+    "igniteui-i18n-resources": "^1.0.2"
   }
 }

projects/igniteui-angular-i18n/package.json

@@ -117,6 +117,13 @@
         display: flex;
         align-items: center;
 
+        @if $variant == 'indigo' {
+            igc-icon-button,
+            [igxIconButton] {
+                padding: rem(6px);
+            }
+        }
+
         igx-icon,
         igc-icon {
             --component-size: #{if($variant == 'indigo', 2, 3)};
@@ -128,7 +135,6 @@
             @if $variant == 'indigo' {
                 width: auto;
                 height: auto;
-                padding: rem(6px);
             }
         }
 

projects/igniteui-angular/core/src/core/styles/components/navbar/_navbar-theme.scss

@@ -76,7 +76,7 @@
         "jspdf": "^3.0.2",
         "lodash-es": "^4.17.21",
         "igniteui-theming": "^24.0.0",
-        "igniteui-i18n-core": "^1.0.1",
+        "igniteui-i18n-core": "^1.0.2",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -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/page-size-selector.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/pager.component.html

@@ -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.spec.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/paginator/src/paginator/paginator.component.ts

@@ -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>