@progress/kendo-angular-layout 7.1.5-dev.202210210934 → 7.1.5-dev.202210241150

package/drawer/drawer.service.d.ts

@@ -16,10 +16,12 @@ export declare class DrawerService {
     owner: any;
     selectedIndices: Array<number>;
     viewData: Set<DrawerViewItem>;
+    focusIndex: number;
     private originalItems;
     private idxCounter;
     init(): void;
     get view(): Array<DrawerViewItem>;
+    changeFocusedItem(items: any, keyName: any, renderer: any): void;
     private populateViewData;
     private resetViewData;
     private loadChildren;

package/drawer/item.component.d.ts

@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export declare class DrawerItemComponent implements AfterViewInit {
-    drawer: DrawerService;
+    drawerService: DrawerService;
     private element;
     private renderer;
     viewItem: DrawerViewItem;
@@ -24,7 +24,7 @@ export declare class DrawerItemComponent implements AfterViewInit {
     get disabledClass(): boolean;
     get selectedClass(): boolean;
     get label(): boolean;
-    constructor(drawer: DrawerService, element: ElementRef, renderer: Renderer2);
+    constructor(drawerService: DrawerService, element: ElementRef, renderer: Renderer2);
     ngAfterViewInit(): void;
     get iconClasses(): string[];
     get item(): any;

package/drawer/list.component.d.ts

@@ -2,10 +2,11 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, NgZone, OnDestroy, OnInit, Renderer2, TemplateRef, EventEmitter } from "@angular/core";
+import { ElementRef, NgZone, OnDestroy, OnInit, Renderer2, TemplateRef, EventEmitter, QueryList } from "@angular/core";
 import { DrawerService } from './drawer.service';
 import { DrawerListSelectEvent } from './events/drawer-list-select.event';
 import { DrawerViewItem } from './models/drawer-view-item.interface';
+import { DrawerItemComponent } from './item.component';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -20,6 +21,7 @@ export declare class DrawerListComponent implements OnInit, OnDestroy {
     expanded: boolean;
     view: DrawerViewItem[];
     select: EventEmitter<DrawerListSelectEvent>;
+    items: QueryList<DrawerItemComponent>;
     private subscriptions;
     constructor(drawerService: DrawerService, renderer: Renderer2, ngZone: NgZone, element: ElementRef);
     ngOnInit(): void;
@@ -27,7 +29,7 @@ export declare class DrawerListComponent implements OnInit, OnDestroy {
     identifyItem(_index: number, viewItem: DrawerViewItem): any;
     private initDomEvents;
     private clickHandler;
-    private keyDownHandler;
+    private onEnterOrSpaceKeyDown;
     private getDrawerItemIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<DrawerListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DrawerListComponent, "[kendoDrawerList]", never, { "itemTemplate": "itemTemplate"; "mini": "mini"; "expanded": "expanded"; "view": "view"; }, { "select": "select"; }, never, never>;

package/esm2015/drawer/drawer-container.component.js

@@ -105,5 +105,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['attr.dir']
             }], drawer: [{
                 type: ContentChild,
-                args: [DrawerComponent, { static: false }]
+                args: [DrawerComponent]
             }] } });

package/esm2015/drawer/drawer.component.js

@@ -273,7 +273,7 @@ export class DrawerComponent {
     }
 }
 DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }, { token: i1.AnimationBuilder }, { token: i2.LocalizationService }, { token: i3.DrawerService }], target: i0.ɵɵFactoryTarget.Component });
-DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DrawerComponent, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "style.transform": "this.overlayTransofrmStyles", "style.flexBasis.px": "this.flexStyles", "attr.dir": "this.direction" } }, providers: [
+DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DrawerComponent, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "style.transform": "this.overlayTransofrmStyles", "style.flexBasis.px": "this.flexStyles", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         DrawerService,
         {
@@ -288,6 +288,8 @@ DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 </ng-template>
 
                 <ul kendoDrawerList
+                    role="menubar"
+                    orientation="vertical"
                     (select)="onSelect($event)"
                     [mini]="mini"
                     [expanded]="expanded"
@@ -327,6 +329,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 </ng-template>
 
                 <ul kendoDrawerList
+                    role="menubar"
+                    orientation="vertical"
                     (select)="onSelect($event)"
                     [mini]="mini"
                     [expanded]="expanded"
@@ -347,9 +351,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
     `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.AnimationBuilder }, { type: i2.LocalizationService }, { type: i3.DrawerService }]; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-widget']
-            }, {
                 type: HostBinding,
                 args: ['class.k-drawer']
             }], startPositionClass: [{
@@ -397,14 +398,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], drawerTemplate: [{
                 type: ContentChild,
-                args: [DrawerTemplateDirective, { static: false }]
+                args: [DrawerTemplateDirective]
             }], footerTemplate: [{
                 type: ContentChild,
-                args: [DrawerFooterTemplateDirective, { static: false }]
+                args: [DrawerFooterTemplateDirective]
             }], headerTemplate: [{
                 type: ContentChild,
-                args: [DrawerHeaderTemplateDirective, { static: false }]
+                args: [DrawerHeaderTemplateDirective]
             }], itemTemplate: [{
                 type: ContentChild,
-                args: [DrawerItemTemplateDirective, { static: false }]
+                args: [DrawerItemTemplateDirective]
             }] } });

package/esm2015/drawer/drawer.service.js

@@ -15,6 +15,7 @@ export const defaultIsItemExpanded = (_item) => false;
 export class DrawerService {
     constructor() {
         this.selectedIndices = [];
+        this.focusIndex = 0;
         this.originalItems = [];
         this.idxCounter = 0;
         this.isItemExpanded = defaultIsItemExpanded;
@@ -28,6 +29,33 @@ export class DrawerService {
     get view() {
         return Array.from(this.viewData);
     }
+    changeFocusedItem(items, keyName, renderer) {
+        const currentItem = items.get(this.focusIndex);
+        let nextItem;
+        if (keyName === 'arrowUp') {
+            if (this.focusIndex === 0) {
+                nextItem = items.get(items.length - 1);
+                this.focusIndex = items.length - 1;
+            }
+            else {
+                nextItem = items.get(this.focusIndex - 1);
+                this.focusIndex = this.focusIndex - 1;
+            }
+        }
+        else if (keyName === 'arrowDown') {
+            if (this.focusIndex === items.length - 1) {
+                nextItem = items.get(0);
+                this.focusIndex = 0;
+            }
+            else {
+                nextItem = items.get(this.focusIndex + 1);
+                this.focusIndex = this.focusIndex + 1;
+            }
+        }
+        renderer.setAttribute(currentItem.nativeElement, 'tabindex', '-1');
+        renderer.setAttribute(nextItem.nativeElement, 'tabindex', '0');
+        nextItem.nativeElement.focus();
+    }
     populateViewData(items, level = 0) {
         items.forEach((item) => {
             this.setSelection(item);

package/esm2015/drawer/item.component.js

@@ -11,8 +11,8 @@ import * as i2 from "@angular/common";
  * @hidden
  */
 export class DrawerItemComponent {
-    constructor(drawer, element, renderer) {
-        this.drawer = drawer;
+    constructor(drawerService, element, renderer) {
+        this.drawerService = drawerService;
         this.element = element;
         this.renderer = renderer;
     }
@@ -20,7 +20,7 @@ export class DrawerItemComponent {
         return this.item.disabled;
     }
     get selectedClass() {
-        return this.drawer.selectedIndices.indexOf(this.index) >= 0;
+        return this.drawerService.selectedIndices.indexOf(this.index) >= 0;
     }
     get label() {
         return this.item.text ? this.item.text : null;

package/esm2015/drawer/list.component.js

@@ -3,12 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Subscription } from 'rxjs';
-import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { Component, ElementRef, Input, Output, EventEmitter, ViewChildren } from "@angular/core";
 import { closestItem, itemIndex } from '../common/dom-queries';
 import { DRAWER_ITEM_INDEX } from './models/constants';
 import { Keys } from '@progress/kendo-angular-common';
 import { ACTIVE_NESTED_LINK_SELECTOR, nestedLink } from './util';
 import { DrawerListSelectEvent } from './events/drawer-list-select.event';
+import { DrawerItemComponent } from './item.component';
 import * as i0 from "@angular/core";
 import * as i1 from "./drawer.service";
 import * as i2 from "./item.component";
@@ -43,12 +44,26 @@ export class DrawerListComponent {
         this.ngZone.runOutsideAngular(() => {
             const nativeElement = this.element.nativeElement;
             this.subscriptions.add(this.renderer.listen(nativeElement, 'click', this.clickHandler.bind(this)));
-            this.subscriptions.add(this.renderer.listen(nativeElement, 'keydown', this.keyDownHandler.bind(this)));
+            this.subscriptions.add(this.renderer.listen(nativeElement, 'keydown', (e) => {
+                const isEnterOrSpace = e.keyCode === Keys.Enter || e.keyCode === Keys.Space;
+                const isArrowUpOrDown = e.keyCode === Keys.ArrowUp || e.keyCode === Keys.ArrowDown;
+                if (isEnterOrSpace) {
+                    this.onEnterOrSpaceKeyDown(e);
+                }
+                else if (isArrowUpOrDown) {
+                    if (e.target.classList.contains('k-drawer-item')) {
+                        const keyName = e.keyCode === Keys.ArrowUp ? 'arrowUp' : 'arrowDown';
+                        this.drawerService.changeFocusedItem(this.items, keyName, this.renderer);
+                    }
+                }
+            }));
         });
     }
     clickHandler(e) {
         const viewItemIdx = this.getDrawerItemIndex(e.target);
         const viewItem = this.view[viewItemIdx];
+        const filterItems = this.view.filter(items => !items.item.separator);
+        const selectedItemIndex = filterItems.findIndex(item => item.index === viewItemIdx);
         if (!viewItem) {
             return;
         }
@@ -65,17 +80,14 @@ export class DrawerListComponent {
             const event = new DrawerListSelectEvent(args);
             this.select.emit(event);
             if (!event.isDefaultPrevented()) {
+                this.drawerService.focusIndex = selectedItemIndex;
                 this.drawerService.onSelect(viewItemIdx);
                 this.drawerService.init();
                 this.view = this.drawerService.view;
             }
         });
     }
-    keyDownHandler(e) {
-        const isEnterOrSpace = e.keyCode === Keys.Enter || e.keyCode === Keys.Space;
-        if (!isEnterOrSpace) {
-            return;
-        }
+    onEnterOrSpaceKeyDown(e) {
         this.clickHandler(e);
         const link = nestedLink(this.element.nativeElement, ACTIVE_NESTED_LINK_SELECTOR);
         if (link) {
@@ -91,7 +103,7 @@ export class DrawerListComponent {
     }
 }
 DrawerListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerListComponent, deps: [{ token: i1.DrawerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DrawerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, ngImport: i0, template: "\n        <ng-container *ngFor=\"let v of view; trackBy:identifyItem; let idx = index\">\n            <li *ngIf=\"!v.item.separator\" kendoDrawerItem\n                class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n                [viewItem]=\"v\"\n                [index]=\"idx\"\n                [mini]=\"mini\"\n                [expanded]=\"expanded\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-drawer-index]=\"v.index\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\"\n                tabindex=\"0\">\n            </li>\n\n            <li *ngIf=\"v.item.separator\"\n                class=\"k-drawer-item k-drawer-separator\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\">\n                &nbsp;\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: i2.DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+DrawerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "items", predicate: DrawerItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "\n        <ng-container *ngFor=\"let v of view; trackBy:identifyItem; let idx = index\">\n            <li *ngIf=\"!v.item.separator\" kendoDrawerItem\n                class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n                role=\"menuitem\"\n                [viewItem]=\"v\"\n                [index]=\"idx\"\n                [mini]=\"mini\"\n                [expanded]=\"expanded\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-drawer-index]=\"v.index\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\"\n                [tabindex]=\"v.item.id === 0 ? '0' : '-1'\">\n            </li>\n\n            <li *ngIf=\"v.item.separator\"\n                role=\"separator\"\n                class=\"k-drawer-item k-drawer-separator\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\">\n                &nbsp;\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: i2.DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerListComponent, decorators: [{
             type: Component,
             args: [{
@@ -101,6 +113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container *ngFor="let v of view; trackBy:identifyItem; let idx = index">
             <li *ngIf="!v.item.separator" kendoDrawerItem
                 class="k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}"
+                role="menuitem"
                 [viewItem]="v"
                 [index]="idx"
                 [mini]="mini"
@@ -109,10 +122,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [attr.${DRAWER_ITEM_INDEX}]="v.index"
                 [ngClass]="v.item.cssClass"
                 [ngStyle]="v.item.cssStyle"
-                tabindex="0">
+                [tabindex]="v.item.id === 0 ? '0' : '-1'">
             </li>
 
             <li *ngIf="v.item.separator"
+                role="separator"
                 class="k-drawer-item k-drawer-separator"
                 [ngClass]="v.item.cssClass"
                 [ngStyle]="v.item.cssStyle">
@@ -131,4 +145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], select: [{
                 type: Output
+            }], items: [{
+                type: ViewChildren,
+                args: [DrawerItemComponent, { read: ElementRef }]
             }] } });

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1666344829,
+    publishDate: 1666612185,
     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-layout.js

@@ -26,7 +26,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1666344829,
+    publishDate: 1666612185,
     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'
 };
@@ -3997,6 +3997,7 @@ const defaultIsItemExpanded = (_item) => false;
 class DrawerService {
     constructor() {
         this.selectedIndices = [];
+        this.focusIndex = 0;
         this.originalItems = [];
         this.idxCounter = 0;
         this.isItemExpanded = defaultIsItemExpanded;
@@ -4010,6 +4011,33 @@ class DrawerService {
     get view() {
         return Array.from(this.viewData);
     }
+    changeFocusedItem(items, keyName, renderer) {
+        const currentItem = items.get(this.focusIndex);
+        let nextItem;
+        if (keyName === 'arrowUp') {
+            if (this.focusIndex === 0) {
+                nextItem = items.get(items.length - 1);
+                this.focusIndex = items.length - 1;
+            }
+            else {
+                nextItem = items.get(this.focusIndex - 1);
+                this.focusIndex = this.focusIndex - 1;
+            }
+        }
+        else if (keyName === 'arrowDown') {
+            if (this.focusIndex === items.length - 1) {
+                nextItem = items.get(0);
+                this.focusIndex = 0;
+            }
+            else {
+                nextItem = items.get(this.focusIndex + 1);
+                this.focusIndex = this.focusIndex + 1;
+            }
+        }
+        renderer.setAttribute(currentItem.nativeElement, 'tabindex', '-1');
+        renderer.setAttribute(nextItem.nativeElement, 'tabindex', '0');
+        nextItem.nativeElement.focus();
+    }
     populateViewData(items, level = 0) {
         items.forEach((item) => {
             this.setSelection(item);
@@ -4235,8 +4263,8 @@ class DrawerListSelectEvent extends PreventableEvent$1 {
  * @hidden
  */
 class DrawerItemComponent {
-    constructor(drawer, element, renderer) {
-        this.drawer = drawer;
+    constructor(drawerService, element, renderer) {
+        this.drawerService = drawerService;
         this.element = element;
         this.renderer = renderer;
     }
@@ -4244,7 +4272,7 @@ class DrawerItemComponent {
         return this.item.disabled;
     }
     get selectedClass() {
-        return this.drawer.selectedIndices.indexOf(this.index) >= 0;
+        return this.drawerService.selectedIndices.indexOf(this.index) >= 0;
     }
     get label() {
         return this.item.text ? this.item.text : null;
@@ -4392,12 +4420,26 @@ class DrawerListComponent {
         this.ngZone.runOutsideAngular(() => {
             const nativeElement = this.element.nativeElement;
             this.subscriptions.add(this.renderer.listen(nativeElement, 'click', this.clickHandler.bind(this)));
-            this.subscriptions.add(this.renderer.listen(nativeElement, 'keydown', this.keyDownHandler.bind(this)));
+            this.subscriptions.add(this.renderer.listen(nativeElement, 'keydown', (e) => {
+                const isEnterOrSpace = e.keyCode === Keys.Enter || e.keyCode === Keys.Space;
+                const isArrowUpOrDown = e.keyCode === Keys.ArrowUp || e.keyCode === Keys.ArrowDown;
+                if (isEnterOrSpace) {
+                    this.onEnterOrSpaceKeyDown(e);
+                }
+                else if (isArrowUpOrDown) {
+                    if (e.target.classList.contains('k-drawer-item')) {
+                        const keyName = e.keyCode === Keys.ArrowUp ? 'arrowUp' : 'arrowDown';
+                        this.drawerService.changeFocusedItem(this.items, keyName, this.renderer);
+                    }
+                }
+            }));
         });
     }
     clickHandler(e) {
         const viewItemIdx = this.getDrawerItemIndex(e.target);
         const viewItem = this.view[viewItemIdx];
+        const filterItems = this.view.filter(items => !items.item.separator);
+        const selectedItemIndex = filterItems.findIndex(item => item.index === viewItemIdx);
         if (!viewItem) {
             return;
         }
@@ -4414,17 +4456,14 @@ class DrawerListComponent {
             const event = new DrawerListSelectEvent(args);
             this.select.emit(event);
             if (!event.isDefaultPrevented()) {
+                this.drawerService.focusIndex = selectedItemIndex;
                 this.drawerService.onSelect(viewItemIdx);
                 this.drawerService.init();
                 this.view = this.drawerService.view;
             }
         });
     }
-    keyDownHandler(e) {
-        const isEnterOrSpace = e.keyCode === Keys.Enter || e.keyCode === Keys.Space;
-        if (!isEnterOrSpace) {
-            return;
-        }
+    onEnterOrSpaceKeyDown(e) {
         this.clickHandler(e);
         const link = nestedLink(this.element.nativeElement, ACTIVE_NESTED_LINK_SELECTOR);
         if (link) {
@@ -4440,7 +4479,7 @@ class DrawerListComponent {
     }
 }
 DrawerListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerListComponent, deps: [{ token: DrawerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DrawerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, ngImport: i0, template: "\n        <ng-container *ngFor=\"let v of view; trackBy:identifyItem; let idx = index\">\n            <li *ngIf=\"!v.item.separator\" kendoDrawerItem\n                class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n                [viewItem]=\"v\"\n                [index]=\"idx\"\n                [mini]=\"mini\"\n                [expanded]=\"expanded\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-drawer-index]=\"v.index\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\"\n                tabindex=\"0\">\n            </li>\n\n            <li *ngIf=\"v.item.separator\"\n                class=\"k-drawer-item k-drawer-separator\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\">\n                &nbsp;\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+DrawerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "items", predicate: DrawerItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "\n        <ng-container *ngFor=\"let v of view; trackBy:identifyItem; let idx = index\">\n            <li *ngIf=\"!v.item.separator\" kendoDrawerItem\n                class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n                role=\"menuitem\"\n                [viewItem]=\"v\"\n                [index]=\"idx\"\n                [mini]=\"mini\"\n                [expanded]=\"expanded\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-drawer-index]=\"v.index\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\"\n                [tabindex]=\"v.item.id === 0 ? '0' : '-1'\">\n            </li>\n\n            <li *ngIf=\"v.item.separator\"\n                role=\"separator\"\n                class=\"k-drawer-item k-drawer-separator\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\">\n                &nbsp;\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerListComponent, decorators: [{
             type: Component,
             args: [{
@@ -4450,6 +4489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container *ngFor="let v of view; trackBy:identifyItem; let idx = index">
             <li *ngIf="!v.item.separator" kendoDrawerItem
                 class="k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}"
+                role="menuitem"
                 [viewItem]="v"
                 [index]="idx"
                 [mini]="mini"
@@ -4458,10 +4498,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [attr.${DRAWER_ITEM_INDEX}]="v.index"
                 [ngClass]="v.item.cssClass"
                 [ngStyle]="v.item.cssStyle"
-                tabindex="0">
+                [tabindex]="v.item.id === 0 ? '0' : '-1'">
             </li>
 
             <li *ngIf="v.item.separator"
+                role="separator"
                 class="k-drawer-item k-drawer-separator"
                 [ngClass]="v.item.cssClass"
                 [ngStyle]="v.item.cssStyle">
@@ -4480,6 +4521,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], select: [{
                 type: Output
+            }], items: [{
+                type: ViewChildren,
+                args: [DrawerItemComponent, { read: ElementRef }]
             }] } });
 
 const DEFAULT_ANIMATION = { type: 'slide', duration: 200 };
@@ -4738,7 +4782,7 @@ class DrawerComponent {
     }
 }
 DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AnimationBuilder }, { token: i1.LocalizationService }, { token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
-DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DrawerComponent, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "style.transform": "this.overlayTransofrmStyles", "style.flexBasis.px": "this.flexStyles", "attr.dir": "this.direction" } }, providers: [
+DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DrawerComponent, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "style.transform": "this.overlayTransofrmStyles", "style.flexBasis.px": "this.flexStyles", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         DrawerService,
         {
@@ -4753,6 +4797,8 @@ DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 </ng-template>
 
                 <ul kendoDrawerList
+                    role="menubar"
+                    orientation="vertical"
                     (select)="onSelect($event)"
                     [mini]="mini"
                     [expanded]="expanded"
@@ -4792,6 +4838,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 </ng-template>
 
                 <ul kendoDrawerList
+                    role="menubar"
+                    orientation="vertical"
                     (select)="onSelect($event)"
                     [mini]="mini"
                     [expanded]="expanded"
@@ -4812,9 +4860,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
     `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.AnimationBuilder }, { type: i1.LocalizationService }, { type: DrawerService }]; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-widget']
-            }, {
                 type: HostBinding,
                 args: ['class.k-drawer']
             }], startPositionClass: [{
@@ -4862,16 +4907,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], drawerTemplate: [{
                 type: ContentChild,
-                args: [DrawerTemplateDirective, { static: false }]
+                args: [DrawerTemplateDirective]
             }], footerTemplate: [{
                 type: ContentChild,
-                args: [DrawerFooterTemplateDirective, { static: false }]
+                args: [DrawerFooterTemplateDirective]
             }], headerTemplate: [{
                 type: ContentChild,
-                args: [DrawerHeaderTemplateDirective, { static: false }]
+                args: [DrawerHeaderTemplateDirective]
             }], itemTemplate: [{
                 type: ContentChild,
-                args: [DrawerItemTemplateDirective, { static: false }]
+                args: [DrawerItemTemplateDirective]
             }] } });
 
 /**
@@ -4970,7 +5015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['attr.dir']
             }], drawer: [{
                 type: ContentChild,
-                args: [DrawerComponent, { static: false }]
+                args: [DrawerComponent]
             }] } });
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "7.1.5-dev.202210210934",
+  "version": "7.1.5-dev.202210241150",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",