Merge branch 'master' into bpenkov/pickers-base-parent

.github/workflows/nodejs.yml

@@ -37,6 +37,7 @@ jobs:
             npm run test:lib:grid
             npm run test:lib:hgrid
             npm run test:lib:tgrid
+            npm run test:styles
             npm run test:schematics
         env:
             NODE_OPTIONS: --max_old_space_size=4096

.travis.yml

@@ -24,6 +24,7 @@ script:
 - if [ -z "${TRAVIS_TAG}" ]; then npm run test:lib:grid; fi
 - if [ -z "${TRAVIS_TAG}" ]; then npm run test:lib:tgrid; fi
 - if [ -z "${TRAVIS_TAG}" ]; then npm run test:lib:hgrid; fi
+- if [ -z "${TRAVIS_TAG}" ]; then npm run test:styles; fi
 - if [ -z "${TRAVIS_TAG}" ]; then npm run test:schematics; fi
 ## Use only Github actions for publishing coveralls.io status
 #- if [ -z "${TRAVIS_TAG}" ]; then istanbul-combine -d coverage -p none -r lcov -r html coverage/hierarchical-grid/coverage-final.json coverage/tree-grid/coverage-final.json coverage/non-grid/coverage-final.json coverage/grid/coverage-final.json; fi

CHANGELOG.md

@@ -6,6 +6,8 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 - `IgxDropDown`
     - The `igx-drop-down-item` now allows for `igxPrefix`, `igxSuffix` and `igx-divider` directives to be passed as `ng-content` and they will be renderer accordingly in the item's content.
+- `IgxGrid`
+    - Added support for exporting grouped data.
 ### General
 - `IgxDialog`
     - The dialog content has been moved inside the dialog window container in the template. This means that if you have added something in-between the opening and closing tags of the dialog, you may have to adjust its styling a bit since that content is now rendered inside a container that has padding on it.

azure-pipelines.yml

@@ -38,6 +38,9 @@ steps:
   env:
     NODE_OPTIONS: "--max_old_space_size=4096"
 
+- script: npm run test:styles
+  displayName: 'Run styling library tests'
+
 ## Use only Github actions for publishing coveralls.io status
 # - script: istanbul-combine -d coverage -p none -r lcov -r cobertura coverage/hierarchical-grid/coverage-final.json coverage/tree-grid/coverage-final.json coverage/non-grid/coverage-final.json coverage/grid/coverage-final.json
 #   displayName: 'Combine coverage results'

package.json

@@ -22,6 +22,7 @@
     "test:lib:azure:others": "ng test igniteui-angular --watch=false --no-progress --karma-config=./projects/igniteui-angular/karma.azure.non-grid.conf.js --tsConfig=./projects/igniteui-angular/tsconfig.ivy.false.spec.json",
     "test:lib:watch": "ng test igniteui-angular",
     "test:schematics": "ts-node --project projects/igniteui-angular/migrations/tsconfig.json ./node_modules/jasmine/bin/jasmine.js ./projects/igniteui-angular/migrations/**/*.spec.ts ./projects/igniteui-angular/schematics/**/*.spec.ts",
+    "test:styles": "ts-node --skip-project ./node_modules/jasmine/bin/jasmine.js ./projects/igniteui-angular/src/lib/core/styles/spec/tests.ts",
     "build:lib": "ng build igniteui-angular --prod && gulp buildStyle",
     "build:style": "gulp buildStyle",
     "build:migration": "gulp copyMigrations && tsc --listEmittedFiles --project ./projects/igniteui-angular/migrations/tsconfig.json",
@@ -73,6 +74,11 @@
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1100.0",
     "@angular-devkit/schematics": "^11.0.0",
+    "@angular-eslint/builder": "0.8.0-beta.5",
+    "@angular-eslint/eslint-plugin": "0.8.0-beta.5",
+    "@angular-eslint/eslint-plugin-template": "0.8.0-beta.5",
+    "@angular-eslint/schematics": "^0.8.0-beta.5",
+    "@angular-eslint/template-parser": "0.8.0-beta.5",
     "@angular/cli": "~11.0.0",
     "@angular/compiler-cli": "^11.0.0",
     "@angular/language-service": "^11.0.0",
@@ -81,9 +87,15 @@
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^12.12.39",
     "@types/webpack-env": "^1.15.2",
+    "@typescript-eslint/eslint-plugin": "4.3.0",
+    "@typescript-eslint/parser": "4.3.0",
     "browser-sync": "^2.26.12",
     "codelyzer": "^6.0.0",
     "coveralls": "^3.1.0",
+    "eslint": "^7.6.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jsdoc": "30.7.6",
+    "eslint-plugin-prefer-arrow": "1.2.2",
     "gulp": "^4.0.2",
     "gulp-cached": "^1.1.1",
     "gulp-concat": "^2.6.1",
@@ -112,6 +124,7 @@
     "ng-packagr": "^11.0.3",
     "pngcrush": "^2.0.1",
     "protractor": "~7.0.0",
+    "sass-true": "^5.0.0",
     "sassdoc": "^2.7.3",
     "sassdoc-plugin-localization": "^1.4.1",
     "stylelint": "^11.1.1",
@@ -122,17 +135,6 @@
     "typedoc": "^0.17.7",
     "typedoc-plugin-localization": "^2.2.1",
     "typescript": "~4.0.2",
-    "webpack-sources": "1.3.0",
-    "eslint": "^7.6.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsdoc": "30.7.6",
-    "eslint-plugin-prefer-arrow": "1.2.2",
-    "@angular-eslint/builder": "0.8.0-beta.5",
-    "@angular-eslint/eslint-plugin": "0.8.0-beta.5",
-    "@angular-eslint/eslint-plugin-template": "0.8.0-beta.5",
-    "@angular-eslint/schematics": "^0.8.0-beta.5",
-    "@angular-eslint/template-parser": "0.8.0-beta.5",
-    "@typescript-eslint/eslint-plugin": "4.3.0",
-    "@typescript-eslint/parser": "4.3.0"
+    "webpack-sources": "1.3.0"
   }
 }

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

@@ -21,30 +21,32 @@
     </a>
 </ng-template>
 
-
-<div *ngIf="showIndicators" [ngClass]="indicatorsOrientationClass">
+<div *ngIf="showIndicators" [ngClass]="indicatorsOrientationClass" [attr.role]="'tablist'">
     <div *ngFor="let slide of slides"
         class="igx-carousel-indicators__indicator"
         (click)="select(slide)"
-        [attr.aria-label]="setAriaLabel(slide)"
+        [id]="'tab-'+ slide.index + '-' + total"
+        [attr.role]="'tab'"
+        [attr.aria-label]="resourceStrings.igx_carousel_slide + ' ' + (slide.index + 1) + ' ' + resourceStrings.igx_carousel_of + ' ' + this.total"
+        [attr.aria-controls]="'panel-' + slide.index"
         [attr.aria-selected]="slide.active">
         <ng-container *ngTemplateOutlet="getIndicatorTemplate; context: {$implicit: slide};"></ng-container>
     </div>
 </div>
 
 <div *ngIf="showIndicatorsLabel" [ngClass]="indicatorsOrientationClass">
-    <span class="igx-carousel__label">{{getCarouselLabel}}</span>
+    <span [id]="labelId" class="igx-carousel__label">{{getCarouselLabel}}</span>
 </div>
 
-<div class="igx-carousel__inner" role="list">
+<div class="igx-carousel__inner" [attr.aria-live]="!interval || stoppedByInteraction ? 'polite' : 'off'">
     <ng-content></ng-content>
 </div>
 
-<div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--prev" (click)="prev()">
+<div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--prev" [attr.aria-label]="resourceStrings.igx_carousel_previous_slide" (keydown.enter)="prev()" (click)="prev()">
     <ng-container *ngTemplateOutlet="getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};"></ng-container>
 </div>
 
-<div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--next" (click)="next()">
+<div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--next" [attr.aria-label]="resourceStrings.igx_carousel_next_slide" (keydown.enter)="next()" (click)="next()">
     <ng-container *ngTemplateOutlet="getNextButtonTemplate; context: {$implicit: nextButtonDisabled};"></ng-container>
 </div>
 

projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts

@@ -464,6 +464,41 @@ describe('Carousel', () => {
         });
 
 
+        it('should apply correctly aria attributes to carousel component', () => {
+            const expectedRole = 'region';
+            const expectedRoleDescription = 'carousel';
+            const tabIndex = carousel.nativeElement.getAttribute('tabindex');
+
+            expect(tabIndex).toBeNull();
+            expect(carousel.nativeElement.getAttribute('role')).toEqual(expectedRole);
+            expect(carousel.nativeElement.getAttribute('aria-roledescription')).toEqual(expectedRoleDescription);
+
+            const indicators = carousel.nativeElement.querySelector(HelperTestFunctions.INDICATORS_BOTTOM_CLASS);
+
+            expect(indicators).toBeDefined();
+            expect(indicators.getAttribute('role')).toEqual('tablist');
+
+            const tabs = carousel.nativeElement.querySelectorAll('[role="tab"]');
+            expect(tabs.length).toEqual(4);
+        });
+
+        it('should apply correctly aria attributes to slide components', () => {
+            carousel.loop = false;
+            carousel.select(carousel.get(1));
+            fixture.detectChanges();
+
+            const expectedRole = 'tabpanel';
+            const slide = carousel.slides.find(s => s.active);
+            const tabIndex = slide.nativeElement.getAttribute('tabindex');
+
+            expect(+tabIndex).toBe(0);
+            expect(slide.nativeElement.getAttribute('role')).toEqual(expectedRole);
+
+            const tabs = carousel.nativeElement.querySelectorAll('[role="tab"]');
+            const slides = carousel.nativeElement.querySelectorAll('[role="tabpanel"]');
+
+            expect(slides.length).toEqual(tabs.length);
+        });
     });
 
     describe('Templates Tests: ', () => {
@@ -887,7 +922,7 @@ class HelperTestFunctions {
             deltaY: 0,
             duration: 100,
             velocity,
-            preventDefault: ( ( e: any ) => {  })
+            preventDefault: ( () => {  })
         };
 
         carouselElement.triggerEventHandler(event, panOptions);
@@ -1013,7 +1048,7 @@ class CarouselDynamicSlidesComponent {
         this.addNewSlide();
     }
 
-    addNewSlide() {
+    public addNewSlide() {
         this.slides.push(
             { text: 'Slide 1', active: false },
             { text: 'Slide 2', active: false },