@progress/kendo-angular-buttons 8.1.0 → 8.1.1-dev.202210181055

package/chip/chip-content-click-event-args.interface.d.ts

@@ -14,5 +14,5 @@ export interface ChipContentClickEvent {
     /**
      * The DOM event that triggered the `contentClick` event of the Chip.
      */
-    originalEvent: MouseEvent;
+    originalEvent: any;
 }

package/chip/chip-list-remove-event-args.interface.d.ts

@@ -15,7 +15,7 @@ export interface ChipListRemoveEvent {
     /**
      * The DOM event that triggered the `remove` event of the ChipList.
      */
-    originalEvent: MouseEvent;
+    originalEvent: any;
     /**
      * The removed `ChipComponent` instance.
      */

package/chip/chip-list.component.d.ts

@@ -14,6 +14,7 @@ export declare class ChipListComponent implements OnInit, AfterViewInit, AfterCo
     private renderer;
     private element;
     hostClass: boolean;
+    orientation: string;
     /**
      * @hidden
      */

package/chip/chip-remove-event-args.interface.d.ts

@@ -14,5 +14,5 @@ export interface ChipRemoveEvent {
     /**
      * The DOM event that triggered the `remove` event of the Chip.
      */
-    originalEvent: MouseEvent;
+    originalEvent: any;
 }

package/chip/chip.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter, ElementRef, Renderer2, AfterViewInit, OnInit, NgZone } from '@angular/core';
+import { EventEmitter, ElementRef, Renderer2, AfterViewInit, OnInit, NgZone, OnChanges, SimpleChanges } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ChipRemoveEvent } from './chip-remove-event-args.interface';
 import { ChipContentClickEvent } from './chip-content-click-event-args.interface';
@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 /**
  * Displays a Chip that represents an input, attribute or an action.
  */
-export declare class ChipComponent implements OnInit, AfterViewInit {
+export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
     element: ElementRef;
     private renderer;
     private ngZone;
@@ -116,7 +116,6 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      */
     contentClick: EventEmitter<ChipContentClickEvent>;
     tabIndex: number;
-    get ariaChecked(): boolean;
     hostClass: boolean;
     get hasIconClass(): boolean;
     get disabledClass(): boolean;
@@ -135,6 +134,7 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
     constructor(element: ElementRef, renderer: Renderer2, ngZone: NgZone, localizationService: LocalizationService);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     /**
      * @hidden
@@ -171,6 +171,7 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
     private verifyIconSettings;
     private handleClasses;
     private handleThemeColor;
+    private keyDownHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChipComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ChipComponent, "kendo-chip", never, { "label": "label"; "icon": "icon"; "iconClass": "iconClass"; "avatarClass": "avatarClass"; "selected": "selected"; "removable": "removable"; "removeIcon": "removeIcon"; "disabled": "disabled"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; }, { "remove": "remove"; "contentClick": "contentClick"; }, never, ["*"]>;
 }

package/esm2015/chip/chip-list.component.js

@@ -16,6 +16,7 @@ export class ChipListComponent {
         this.renderer = renderer;
         this.element = element;
         this.hostClass = true;
+        this.orientation = 'horizontal';
         /**
          * Sets the selection mode of the ChipList.
          *
@@ -90,7 +91,13 @@ export class ChipListComponent {
     }
     ngAfterContentInit() {
         this.chips.forEach((chip) => {
-            this.renderer.setAttribute(chip.element.nativeElement, 'role', 'option');
+            const chipEl = chip.element.nativeElement;
+            this.renderer.setAttribute(chipEl, 'role', 'option');
+            if (chip.removable) {
+                this.renderer.setAttribute(chipEl, 'aria-keyshortcuts', 'Enter Delete');
+            }
+            this.renderer.removeAttribute(chipEl, 'aria-pressed');
+            this.renderer.setAttribute(chipEl, 'aria-selected', `${chip.selected}`);
         });
     }
     ngOnDestroy() {
@@ -109,12 +116,15 @@ export class ChipListComponent {
             this.clearSelection(chip);
         }
         chip.selected = !chip.selected;
+        const chipEl = chip.element.nativeElement;
+        this.renderer.setAttribute(chipEl, 'aria-selected', `${chip.selected}`);
         this.selectedChange.emit(this.selectedChips());
     }
     clearSelection(chip) {
         this.chips.forEach((c) => {
             if (chip !== c) {
                 c.selected = false;
+                this.renderer.setAttribute(c.element.nativeElement, 'aria-selected', 'false');
             }
         });
     }
@@ -130,7 +140,7 @@ export class ChipListComponent {
     }
 }
 ChipListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
+ChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -157,6 +167,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-chip-list']
+            }], orientation: [{
+                type: HostBinding,
+                args: ['attr.aria-orientation']
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
@@ -175,6 +188,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: HostBinding,
                 args: ['class.k-selection-single']
             }], multiple: [{
+                type: HostBinding,
+                args: ['attr.aria-multiselectable']
+            }, {
                 type: HostBinding,
                 args: ['class.k-selection-multiple']
             }], role: [{

package/esm2015/chip/chip.component.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, HostBinding, Input, Output, EventEmitter, isDevMode } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -135,9 +135,6 @@ export class ChipComponent {
     get themeColor() {
         return this._themeColor;
     }
-    get ariaChecked() {
-        return this.selected;
-    }
     get hasIconClass() {
         return this.icon || this.iconClass || this.avatarClass ? true : false;
     }
@@ -153,10 +150,19 @@ export class ChipComponent {
     ngOnInit() {
         this.subs.add(this.localizationService.changes
             .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
+        this.renderer.setAttribute(this.element.nativeElement, 'role', 'button');
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
+    ngOnChanges(changes) {
+        if (changes && changes['selected']) {
+            const hasAriaSelected = this.element.nativeElement.hasAttribute('aria-selected');
+            if (!hasAriaSelected) {
+                this.renderer.setAttribute(this.element.nativeElement, 'aria-pressed', `${this.selected}`);
+            }
+        }
+    }
     ngAfterViewInit() {
         const chip = this.element.nativeElement;
         const stylingOptions = ['size', 'rounded', 'fillMode'];
@@ -235,6 +241,7 @@ export class ChipComponent {
                     });
                 }
             }));
+            this.subs.add(this.renderer.listen(chip, 'keydown', this.keyDownHandler.bind(this)));
         });
     }
     /**
@@ -273,15 +280,32 @@ export class ChipComponent {
             }
         }
     }
+    keyDownHandler(e) {
+        const isEnterOrSpace = e.keyCode === Keys.Enter || e.keyCode === Keys.Space;
+        const isDeleteOrBackspace = e.keyCode === Keys.Delete || e.keyCode === Keys.Backspace;
+        if (this.disabled) {
+            return;
+        }
+        if (isEnterOrSpace) {
+            this.ngZone.run(() => {
+                this.contentClick.emit({ sender: this, originalEvent: e });
+            });
+        }
+        else if (isDeleteOrBackspace && this.removable) {
+            this.ngZone.run(() => {
+                this.remove.emit({ sender: this, originalEvent: e });
+            });
+        }
+    }
 }
 ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipComponent, selector: "kendo-chip", inputs: { label: "label", icon: "icon", iconClass: "iconClass", avatarClass: "avatarClass", selected: "selected", removable: "removable", removeIcon: "removeIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.aria-checked": "this.ariaChecked", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
+ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipComponent, selector: "kendo-chip", inputs: { label: "label", icon: "icon", iconClass: "iconClass", avatarClass: "avatarClass", selected: "selected", removable: "removable", removeIcon: "removeIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.chip'
         }
-    ], ngImport: i0, template: `
+    ], usesOnChanges: true, ngImport: i0, template: `
         <span
             *ngIf="icon"
             class="k-chip-icon k-icon"
@@ -408,9 +432,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
-            }], ariaChecked: [{
-                type: HostBinding,
-                args: ['attr.aria-checked']
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-chip']

package/esm2015/floatingactionbutton/floatingactionbutton.component.js

@@ -127,6 +127,10 @@ export class FloatingActionButtonComponent {
          * @hidden
          */
         this.id = `k-${guid()}`;
+        /**
+         * @hidden
+         */
+        this.dialListId = `k-dial-list-${guid()}`;
         this._themeColor = DEFAULT_THEME_COLOR;
         this._size = DEFAULT_SIZE;
         this._rounded = DEFAULT_ROUNDED;
@@ -313,20 +317,20 @@ export class FloatingActionButtonComponent {
     /**
      * @hidden
      */
-    get role() {
-        return (this.dialItems && this.dialItems.length) ? 'menubutton' : 'button';
+    get ariaExpanded() {
+        return this.hasDialItems ? this.isOpen : null;
     }
     /**
      * @hidden
      */
-    get ariaExpanded() {
-        return isPresent(this.isOpen);
+    get ariaHasPopup() {
+        return this.hasDialItems ? 'menu' : null;
     }
     /**
      * @hidden
      */
-    get ariaHasPopup() {
-        return isPresent(this.isOpen);
+    get ariaControls() {
+        return this.hasDialItems ? this.dialListId : null;
     }
     /**
      * @hidden
@@ -381,6 +385,15 @@ export class FloatingActionButtonComponent {
             action !== NavigationAction.Tab) {
             event.preventDefault();
         }
+        if (action === NavigationAction.EnterUp && !this.hasDialItems) {
+            this.button.nativeElement.click();
+        }
+        else if (action === NavigationAction.Open || action === NavigationAction.Close) {
+            const toggleDial = action === NavigationAction.Open;
+            this.ngZone.run(() => {
+                this.toggleDialWithEvents(toggleDial);
+            });
+        }
     }
     /**
      * @hidden
@@ -542,6 +555,7 @@ export class FloatingActionButtonComponent {
         if (this.dialItemAnimation && this.isValidAnimation()) {
             this.playAnimation(true);
         }
+        this.renderer.setAttribute(this.button.nativeElement, 'aria-expanded', 'true');
     }
     closeDial() {
         if (this.dialItemAnimation && this.isValidAnimation()) {
@@ -551,6 +565,7 @@ export class FloatingActionButtonComponent {
         else {
             this.closePopup();
         }
+        this.renderer.setAttribute(this.button.nativeElement, 'aria-expanded', 'false');
     }
     isValidAnimation() {
         const animation = this.dialItemAnimation;
@@ -563,6 +578,9 @@ export class FloatingActionButtonComponent {
         if (this.dialItemTemplate) {
             return;
         }
+        if (!this.popupRef) {
+            return;
+        }
         const fab = this.element.nativeElement;
         const fabWidth = fab.getBoundingClientRect().width;
         const popupEl = this.popupRef.popupElement;
@@ -682,7 +700,6 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
         <button
             #button
             [attr.id]="id"
-            [attr.role]="role"
             [tabIndex]="componentTabIndex"
             type="button"
             class="k-fab k-fab-solid"
@@ -692,6 +709,7 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             [attr.aria-disabled]="disabled"
             [attr.aria-expanded]="ariaExpanded"
             [attr.aria-haspopup]="ariaHasPopup"
+            [attr.aria-controls]="ariaControls"
             (focus)="focusHandler()"
             (blur)="blurHandler()"
             [kendoEventsOutsideAngular]="{
@@ -714,6 +732,8 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
         <ng-template #popupTemplate>
             <ul
                 kendoDialList
+                role="menu"
+                [id]="dialListId"
                 [ngClass]="dialClass"
                 [dialItems]="dialItems"
                 [dialItemTemplate]='dialItemTemplate?.templateRef'
@@ -742,7 +762,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <button
             #button
             [attr.id]="id"
-            [attr.role]="role"
             [tabIndex]="componentTabIndex"
             type="button"
             class="k-fab k-fab-solid"
@@ -752,6 +771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [attr.aria-disabled]="disabled"
             [attr.aria-expanded]="ariaExpanded"
             [attr.aria-haspopup]="ariaHasPopup"
+            [attr.aria-controls]="ariaControls"
             (focus)="focusHandler()"
             (blur)="blurHandler()"
             [kendoEventsOutsideAngular]="{
@@ -774,6 +794,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-template #popupTemplate>
             <ul
                 kendoDialList
+                role="menu"
+                [id]="dialListId"
                 [ngClass]="dialClass"
                 [dialItems]="dialItems"
                 [dialItemTemplate]='dialItemTemplate?.templateRef'

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1662712402,
+    publishDate: 1666090512,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/fesm2015/kendo-angular-buttons.js

@@ -26,7 +26,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1662712402,
+    publishDate: 1666090512,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -3397,9 +3397,6 @@ class ChipComponent {
     get themeColor() {
         return this._themeColor;
     }
-    get ariaChecked() {
-        return this.selected;
-    }
     get hasIconClass() {
         return this.icon || this.iconClass || this.avatarClass ? true : false;
     }
@@ -3415,10 +3412,19 @@ class ChipComponent {
     ngOnInit() {
         this.subs.add(this.localizationService.changes
             .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
+        this.renderer.setAttribute(this.element.nativeElement, 'role', 'button');
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
+    ngOnChanges(changes) {
+        if (changes && changes['selected']) {
+            const hasAriaSelected = this.element.nativeElement.hasAttribute('aria-selected');
+            if (!hasAriaSelected) {
+                this.renderer.setAttribute(this.element.nativeElement, 'aria-pressed', `${this.selected}`);
+            }
+        }
+    }
     ngAfterViewInit() {
         const chip = this.element.nativeElement;
         const stylingOptions = ['size', 'rounded', 'fillMode'];
@@ -3497,6 +3503,7 @@ class ChipComponent {
                     });
                 }
             }));
+            this.subs.add(this.renderer.listen(chip, 'keydown', this.keyDownHandler.bind(this)));
         });
     }
     /**
@@ -3535,15 +3542,32 @@ class ChipComponent {
             }
         }
     }
+    keyDownHandler(e) {
+        const isEnterOrSpace = e.keyCode === Keys.Enter || e.keyCode === Keys.Space;
+        const isDeleteOrBackspace = e.keyCode === Keys.Delete || e.keyCode === Keys.Backspace;
+        if (this.disabled) {
+            return;
+        }
+        if (isEnterOrSpace) {
+            this.ngZone.run(() => {
+                this.contentClick.emit({ sender: this, originalEvent: e });
+            });
+        }
+        else if (isDeleteOrBackspace && this.removable) {
+            this.ngZone.run(() => {
+                this.remove.emit({ sender: this, originalEvent: e });
+            });
+        }
+    }
 }
 ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipComponent, selector: "kendo-chip", inputs: { label: "label", icon: "icon", iconClass: "iconClass", avatarClass: "avatarClass", selected: "selected", removable: "removable", removeIcon: "removeIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.aria-checked": "this.ariaChecked", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
+ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipComponent, selector: "kendo-chip", inputs: { label: "label", icon: "icon", iconClass: "iconClass", avatarClass: "avatarClass", selected: "selected", removable: "removable", removeIcon: "removeIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.chip'
         }
-    ], ngImport: i0, template: `
+    ], usesOnChanges: true, ngImport: i0, template: `
         <span
             *ngIf="icon"
             class="k-chip-icon k-icon"
@@ -3670,9 +3694,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
-            }], ariaChecked: [{
-                type: HostBinding,
-                args: ['attr.aria-checked']
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-chip']
@@ -3702,6 +3723,7 @@ class ChipListComponent {
         this.renderer = renderer;
         this.element = element;
         this.hostClass = true;
+        this.orientation = 'horizontal';
         /**
          * Sets the selection mode of the ChipList.
          *
@@ -3776,7 +3798,13 @@ class ChipListComponent {
     }
     ngAfterContentInit() {
         this.chips.forEach((chip) => {
-            this.renderer.setAttribute(chip.element.nativeElement, 'role', 'option');
+            const chipEl = chip.element.nativeElement;
+            this.renderer.setAttribute(chipEl, 'role', 'option');
+            if (chip.removable) {
+                this.renderer.setAttribute(chipEl, 'aria-keyshortcuts', 'Enter Delete');
+            }
+            this.renderer.removeAttribute(chipEl, 'aria-pressed');
+            this.renderer.setAttribute(chipEl, 'aria-selected', `${chip.selected}`);
         });
     }
     ngOnDestroy() {
@@ -3795,12 +3823,15 @@ class ChipListComponent {
             this.clearSelection(chip);
         }
         chip.selected = !chip.selected;
+        const chipEl = chip.element.nativeElement;
+        this.renderer.setAttribute(chipEl, 'aria-selected', `${chip.selected}`);
         this.selectedChange.emit(this.selectedChips());
     }
     clearSelection(chip) {
         this.chips.forEach((c) => {
             if (chip !== c) {
                 c.selected = false;
+                this.renderer.setAttribute(c.element.nativeElement, 'aria-selected', 'false');
             }
         });
     }
@@ -3816,7 +3847,7 @@ class ChipListComponent {
     }
 }
 ChipListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
+ChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -3843,6 +3874,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-chip-list']
+            }], orientation: [{
+                type: HostBinding,
+                args: ['attr.aria-orientation']
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
@@ -3861,6 +3895,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: HostBinding,
                 args: ['class.k-selection-single']
             }], multiple: [{
+                type: HostBinding,
+                args: ['attr.aria-multiselectable']
+            }, {
                 type: HostBinding,
                 args: ['class.k-selection-multiple']
             }], role: [{
@@ -4329,6 +4366,10 @@ class FloatingActionButtonComponent {
          * @hidden
          */
         this.id = `k-${guid()}`;
+        /**
+         * @hidden
+         */
+        this.dialListId = `k-dial-list-${guid()}`;
         this._themeColor = DEFAULT_THEME_COLOR;
         this._size = DEFAULT_SIZE;
         this._rounded = DEFAULT_ROUNDED;
@@ -4515,20 +4556,20 @@ class FloatingActionButtonComponent {
     /**
      * @hidden
      */
-    get role() {
-        return (this.dialItems && this.dialItems.length) ? 'menubutton' : 'button';
+    get ariaExpanded() {
+        return this.hasDialItems ? this.isOpen : null;
     }
     /**
      * @hidden
      */
-    get ariaExpanded() {
-        return isPresent(this.isOpen);
+    get ariaHasPopup() {
+        return this.hasDialItems ? 'menu' : null;
     }
     /**
      * @hidden
      */
-    get ariaHasPopup() {
-        return isPresent(this.isOpen);
+    get ariaControls() {
+        return this.hasDialItems ? this.dialListId : null;
     }
     /**
      * @hidden
@@ -4583,6 +4624,15 @@ class FloatingActionButtonComponent {
             action !== NavigationAction.Tab) {
             event.preventDefault();
         }
+        if (action === NavigationAction.EnterUp && !this.hasDialItems) {
+            this.button.nativeElement.click();
+        }
+        else if (action === NavigationAction.Open || action === NavigationAction.Close) {
+            const toggleDial = action === NavigationAction.Open;
+            this.ngZone.run(() => {
+                this.toggleDialWithEvents(toggleDial);
+            });
+        }
     }
     /**
      * @hidden
@@ -4744,6 +4794,7 @@ class FloatingActionButtonComponent {
         if (this.dialItemAnimation && this.isValidAnimation()) {
             this.playAnimation(true);
         }
+        this.renderer.setAttribute(this.button.nativeElement, 'aria-expanded', 'true');
     }
     closeDial() {
         if (this.dialItemAnimation && this.isValidAnimation()) {
@@ -4753,6 +4804,7 @@ class FloatingActionButtonComponent {
         else {
             this.closePopup();
         }
+        this.renderer.setAttribute(this.button.nativeElement, 'aria-expanded', 'false');
     }
     isValidAnimation() {
         const animation = this.dialItemAnimation;
@@ -4765,6 +4817,9 @@ class FloatingActionButtonComponent {
         if (this.dialItemTemplate) {
             return;
         }
+        if (!this.popupRef) {
+            return;
+        }
         const fab = this.element.nativeElement;
         const fabWidth = fab.getBoundingClientRect().width;
         const popupEl = this.popupRef.popupElement;
@@ -4884,7 +4939,6 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
         <button
             #button
             [attr.id]="id"
-            [attr.role]="role"
             [tabIndex]="componentTabIndex"
             type="button"
             class="k-fab k-fab-solid"
@@ -4894,6 +4948,7 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             [attr.aria-disabled]="disabled"
             [attr.aria-expanded]="ariaExpanded"
             [attr.aria-haspopup]="ariaHasPopup"
+            [attr.aria-controls]="ariaControls"
             (focus)="focusHandler()"
             (blur)="blurHandler()"
             [kendoEventsOutsideAngular]="{
@@ -4916,6 +4971,8 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
         <ng-template #popupTemplate>
             <ul
                 kendoDialList
+                role="menu"
+                [id]="dialListId"
                 [ngClass]="dialClass"
                 [dialItems]="dialItems"
                 [dialItemTemplate]='dialItemTemplate?.templateRef'
@@ -4944,7 +5001,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <button
             #button
             [attr.id]="id"
-            [attr.role]="role"
             [tabIndex]="componentTabIndex"
             type="button"
             class="k-fab k-fab-solid"
@@ -4954,6 +5010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [attr.aria-disabled]="disabled"
             [attr.aria-expanded]="ariaExpanded"
             [attr.aria-haspopup]="ariaHasPopup"
+            [attr.aria-controls]="ariaControls"
             (focus)="focusHandler()"
             (blur)="blurHandler()"
             [kendoEventsOutsideAngular]="{
@@ -4976,6 +5033,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-template #popupTemplate>
             <ul
                 kendoDialList
+                role="menu"
+                [id]="dialListId"
                 [ngClass]="dialClass"
                 [dialItems]="dialItems"
                 [dialItemTemplate]='dialItemTemplate?.templateRef'