Merge branch 'master' of https://github.com/primefaces/primeng

src/app/components/accordion/accordion.spec.ts

@@ -3,7 +3,7 @@ import { By } from '@angular/platform-browser';
 import { Accordion } from './accordion';
 import { AccordionTab } from './accordion';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
 
 @Component({
     template: `<p-accordion [collapseIcon]="collapseIcon" [expandIcon]="expandIcon" [styleClass]="styleClass" [style]="style">
@@ -175,15 +175,61 @@ describe('Accordion', () => {
         expect(secondAccordionTabHeaderEl.className).toContain('p-highlight');
     });
 
-    it('should be closed', () => {
-        fixture.detectChanges();
-
-        const secondAccordionTabOpenEl = fixture.debugElement.children[0].children[0].children[1].query(By.css('a')).nativeElement;
-        let spaceEvent = { which: 32, preventDefault() {} };
-        secondAccordionTab.onKeydown(spaceEvent as KeyboardEvent);
+    it('should be toggle on space and enter keydown event', () => {
         fixture.detectChanges();
 
         const secondAccordionTabHeaderEl = fixture.debugElement.children[0].children[0].children[1].query(By.css('.p-accordion-header')).nativeElement;
+        expect(secondAccordionTabHeaderEl.className).not.toContain('p-highlight');
+
+        //toggle when enter is pressed
+        const spaceEvent = new KeyboardEvent('keydown', { key: 'Enter', code: 'Enter' });
+        secondAccordionTab.onKeydown(spaceEvent);
+
         expect(secondAccordionTabHeaderEl.className).toContain('p-highlight');
+
+        //toggle when space is pressed
+        const keyDownEvent = new KeyboardEvent('keydown', { key: 'Space', code: 'Space' });
+        secondAccordionTab.onKeydown(keyDownEvent);
+        fixture.detectChanges();
+
+        expect(secondAccordionTabHeaderEl.className).not.toContain('p-highlight');
+    });
+
+    describe('onKeydown', () => {
+        let firstAccordionTabEl;
+        let secondAccordionTabEl;
+
+        beforeEach(() => {
+            firstAccordionTabEl = fixture.debugElement.children[0].children[0].children[0].query(By.css('a')).nativeElement;
+            secondAccordionTabEl = fixture.debugElement.children[0].children[0].children[1].query(By.css('a')).nativeElement;
+        });
+
+        const testKeyBoardEvent = (keyCode, eventTarget, activeTab) => {
+            fixture.detectChanges();
+
+            const keyDownEvent = new KeyboardEvent('keydown', { code: keyCode });
+            spyOnProperty(keyDownEvent, 'target', 'get').and.returnValue(eventTarget);
+
+            accordion.onKeydown(keyDownEvent);
+            fixture.detectChanges();
+
+            expect(document.activeElement).toEqual(activeTab);
+        };
+
+        it('ArrowDown should focus on the next tab', () => {
+            testKeyBoardEvent('ArrowDown', firstAccordionTabEl, secondAccordionTabEl);
+        });
+
+        it('ArrowUp should focus on the next tab', () => {
+            testKeyBoardEvent('ArrowUp', secondAccordionTabEl, firstAccordionTabEl);
+        });
+
+        it('Home should focus on the first tab', () => {
+            testKeyBoardEvent('Home', secondAccordionTabEl, firstAccordionTabEl);
+        });
+
+        it('End should focus on the last tab', () => {
+            testKeyBoardEvent('End', firstAccordionTabEl, secondAccordionTabEl);
+        });
     });
 });

src/app/components/dialog/dialog.spec.ts

@@ -332,11 +332,7 @@ describe('Dialog', () => {
         fixture.detectChanges();
 
         tick(300);
-        const escapeEvent: any = document.createEvent('CustomEvent');
-        escapeEvent.which = 27;
-        escapeEvent.initEvent('keydown', true, true);
-        document.dispatchEvent(escapeEvent);
-        document.dispatchEvent(escapeEvent as KeyboardEvent);
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
         fixture.detectChanges();
 
         expect(closeSpy).toHaveBeenCalled();

src/app/components/fileupload/fileupload.ts

@@ -140,7 +140,7 @@ import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEv
                     </div>
                 </div>
                 <ng-container
-                    *ngTemplateOutlet="contentTemplate; context: { $implicit: files, uploadedFiles: uploadedFiles, removeUploadedFileCallback: removeUploadedFile.bind(this), removeFileCallback: remove.bind(this), progress: progress, messages: msgs }"
+                    *ngTemplateOutlet="contentTemplate; context: { $implicit: files, uploadedFiles: uploadedFiles, chooseCallback: choose.bind(this), clearCallback: clear.bind(this), removeUploadedFileCallback: removeUploadedFile.bind(this), removeFileCallback: remove.bind(this), progress: progress, messages: msgs }"
                 ></ng-container>
                 <div *ngIf="emptyTemplate && !hasFiles() && !hasUploadedFiles()" class="p-fileupload-empty">
                     <ng-container *ngTemplateOutlet="emptyTemplate"></ng-container>

src/app/components/rating/rating.spec.ts

@@ -62,8 +62,8 @@ describe('Rating', () => {
         fixture.detectChanges();
 
         const starElements = fixture.debugElement.queryAll(By.css('span'));
-        expect(starElements[0].nativeElement.className).toContain('Primeng Rocks!');
-        expect(starElements[0].nativeElement.style.height).toEqual('300px');
+        expect(starElements[1].nativeElement.className).toContain('Primeng Rocks!');
+        expect(starElements[1].nativeElement.style.height).toEqual('300px');
     });
 
     it('should value 3', () => {
@@ -86,11 +86,18 @@ describe('Rating', () => {
         rating.onRate.subscribe((value) => (onRateValue = value));
         rating.onCancel.subscribe((value) => (onCancelRate = value));
         thirdStarEl.parentElement.click();
-        cancelEl.parentElement.click();
         fixture.detectChanges();
 
         expect(onRateValue.value).toEqual(3);
-        expect(onCancelRate).toBeTruthy();
+
+        const cancelspy = spyOn(rating.onCancel, 'emit').and.callThrough();
+        const onModelChangeSpy = spyOn(rating, 'onModelChange').and.callThrough();
+        cancelEl.parentElement.click();
+        fixture.detectChanges();
+
+        expect(onModelChangeSpy).toHaveBeenCalled();
+        expect(rating.value).toEqual(null);
+        expect(cancelspy).toHaveBeenCalled();
     });
 
     it('should clear value', () => {

src/app/components/skeleton/skeleton.ts

@@ -44,7 +44,7 @@ export class Skeleton {
      * Size of the skeleton.
      * @group Props
      */
-    @Input() size: 'circle' | 'square' | undefined;
+    @Input() size: string | undefined;
     /**
      * Width of the element.
      * @group Props

src/app/components/tree/tree.ts

@@ -1271,7 +1271,10 @@ export class Tree implements OnInit, AfterContentInit, OnChanges, OnDestroy, Blo
             return;
         } else if (this.selectionMode) {
             if (node.selectable === false) {
+                node.style = '--p-focus-ring-color: none;';
                 return;
+            } else {
+                node.style = '--p-focus-ring-color: var(--primary-color)';
             }
 
             if (this.hasFilteredNodes()) {

src/app/components/treeselect/treeselect.ts

@@ -53,8 +53,8 @@ export const TREESELECT_VALUE_ACCESSOR: any = {
                     [attr.id]="inputId"
                     readonly
                     [disabled]="disabled"
-                    (focus)="onFocus()"
-                    (blur)="onBlur()"
+                    (focus)="onInputFocus($event)"
+                    (blur)="onInputBlur($event)"
                     (keydown)="onKeyDown($event)"
                     [attr.tabindex]="!disabled ? tabindex : -1"
                     [attr.aria-controls]="overlayVisible ? listId : null"
@@ -437,6 +437,7 @@ export class TreeSelect implements AfterContentInit {
      * @group Emits
      */
     @Output() onNodeCollapse: EventEmitter<TreeSelectNodeCollapseEvent> = new EventEmitter<TreeSelectNodeCollapseEvent>();
+
     /**
      * Callback to invoke when the overlay is shown.
      * @param {Event} event - Browser event.
@@ -459,6 +460,18 @@ export class TreeSelect implements AfterContentInit {
      * @group Emits
      */
     @Output() onFilter: EventEmitter<TreeFilterEvent> = new EventEmitter<TreeFilterEvent>();
+    /**
+     * Callback to invoke when treeselect gets focus.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    @Output() onFocus: EventEmitter<Event> = new EventEmitter<Event>();
+    /**
+     * Callback to invoke when treeselect loses focus.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    @Output() onBlur: EventEmitter<Event> = new EventEmitter<Event>();
     /**
      * Callback to invoke when a node is unselected.
      * @param {TreeNodeUnSelectEvent} event - node unselect event.
@@ -908,7 +921,7 @@ export class TreeSelect implements AfterContentInit {
         this.onNodeSelect.emit(event);
 
         if (this.selectionMode === 'single') {
-            // this.hide();
+            this.hide();
             this.focusInput?.nativeElement.focus();
         }
     }
@@ -917,12 +930,20 @@ export class TreeSelect implements AfterContentInit {
         this.onNodeUnselect.emit(event);
     }
 
-    onFocus() {
+    onInputFocus(event: Event) {
+        if (this.disabled) {
+            // For ScreenReaders
+            return;
+        }
+
         this.focused = true;
+        this.onFocus.emit(event);
     }
 
-    onBlur() {
+    onInputBlur(event: Event) {
         this.focused = false;
+        this.onBlur.emit(event);
+        this.onModelTouched();
     }
 
     writeValue(value: any): void {

src/app/showcase/doc/apidoc/index.json

@@ -12084,7 +12084,7 @@
                                 "type": "{\n  \t $implicit: any, // File list.\n  \t uploadedFiles: any, // Uploaded files list.\n  \t chooseCallback: VoidFunction, // Callback to invoke on choose button click.\n  \t clearCallback: VoidFunction, // Callback to invoke on clear button click.\n  \t uploadCallback: VoidFunction, // Callback to invoke on upload.\n  }"
                             }
                         ],
-                        "description": "Custom template of file."
+                        "description": "Custom template of header."
                     },
                     {
                         "parent": "fileupload",

src/app/showcase/doc/calendar/calendardoc.module.ts

@@ -22,7 +22,6 @@ import { TemplateDoc } from './templatedoc';
 import { InlineDoc } from './inlinedoc';
 import { TouchUIDoc } from './touchuidoc';
 import { DateTemplateDoc } from './datetemplatedoc';
-import { PropsDoc } from './propsdoc';
 import { StyleDoc } from './styledoc';
 import { EventsDoc } from './eventsdoc';
 import { MethodsDoc } from './methodsdoc';
@@ -56,7 +55,6 @@ import { FloatLabelModule } from 'primeng/floatlabel';
         InlineDoc,
         TouchUIDoc,
         DateTemplateDoc,
-        PropsDoc,
         StyleDoc,
         EventsDoc,
         MethodsDoc,