@progress/kendo-angular-listbox 11.4.0-develop.6 → 11.4.0-develop.8

package/fesm2020/progress-kendo-angular-listbox.mjs

@@ -3,16 +3,17 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Directive, Input, HostBinding, HostListener, isDevMode, Component, ContentChild, Output, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, Directive, Input, HostBinding, HostListener, isDevMode, Component, ContentChild, ViewChild, ViewChildren, Output, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { Subscription } from 'rxjs';
 import { getter } from '@progress/kendo-common';
 import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretDoubleAltRightIcon, caretDoubleAltLeftIcon, xIcon } from '@progress/kendo-svg-icons';
-import * as i2 from '@progress/kendo-angular-buttons';
+import { Keys, isChanged } from '@progress/kendo-angular-common';
+import { take } from 'rxjs/operators';
+import * as i3 from '@progress/kendo-angular-buttons';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
-import * as i3 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { isChanged } from '@progress/kendo-angular-common';
 
 /**
  * @hidden
@@ -21,8 +22,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1678518161,
-    version: '11.4.0-develop.6',
+    publishDate: 1678794094,
+    version: '11.4.0-develop.8',
     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'
 };
 
@@ -34,9 +35,9 @@ class ListBoxSelectionService {
         this.onSelect = new EventEmitter();
         this.selectedIndex = null;
     }
-    select(index) {
+    select(index, dir) {
+        this.onSelect.next({ index: index, prevIndex: this.selectedIndex, dir });
         this.selectedIndex = index;
-        this.onSelect.next({ index: this.selectedIndex });
     }
     isSelected(index) {
         return index === this.selectedIndex;
@@ -106,13 +107,13 @@ const allTools = [
     },
     {
         name: 'transferTo',
-        label: 'Transfer From',
+        label: 'Transfer To',
         icon: 'caret-alt-left',
         svgIcon: caretAltLeftIcon
     },
     {
         name: 'transferFrom',
-        label: 'Transfer To',
+        label: 'Transfer From',
         icon: 'caret-alt-right',
         svgIcon: caretAltRightIcon
     },
@@ -186,6 +187,260 @@ const getTools = (names) => {
     return names.map(tool => allTools.find(meta => meta.name === tool));
 };
 
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+/**
+ * @hidden
+ */
+class KeyboardNavigationService {
+    constructor(renderer, zone) {
+        this.renderer = renderer;
+        this.zone = zone;
+        this.selectedListboxItemIndex = 0;
+        this.focusedListboxItemIndex = 0;
+        this.focusedToolIndex = 0;
+        this.onDeleteEvent = new EventEmitter();
+        this.onSelectionChange = new EventEmitter();
+        this.onMoveSelectedItem = new EventEmitter();
+        this.onTransferAllEvent = new EventEmitter();
+        this.onShiftSelectedItem = new EventEmitter();
+    }
+    onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox) {
+        const target = event.target;
+        const keyCode = event.keyCode;
+        const ctrlOrMetaKey = event.ctrlKey || event.metaKey;
+        const parentListboxToolbar = parentListbox?.selectedTools;
+        const tool = toolsRef.find(elem => elem.element === target);
+        const activeToolbar = toolbar.length > 0 ? toolbar : parentListboxToolbar;
+        if (toolsRef.length > 0 || parentListbox?.tools.toArray().length > 0) {
+            const focusNextTool = (keyCode === Keys.ArrowDown || keyCode === Keys.ArrowRight);
+            const focusPrevTool = (keyCode === Keys.ArrowUp || keyCode === Keys.ArrowLeft);
+            if ((focusNextTool || focusPrevTool) && tool) {
+                const dir = focusPrevTool ? 'up' : 'down';
+                this.handleToolbarArrows(toolsRef, dir);
+            }
+            else if (keyCode === Keys.F10) {
+                event.preventDefault();
+                this.onF10Key(toolsRef);
+            }
+            else if (keyCode === Keys.Delete && activeToolbar.some(tool => tool.name === 'remove')) {
+                this.onDeleteEvent.emit(this.selectedListboxItemIndex);
+            }
+        }
+        const isTargetListboxItem = this.listboxItems.find(elem => elem === target);
+        if (isTargetListboxItem) {
+            let isTransferToolVisible;
+            if (activeToolbar) {
+                isTransferToolVisible = activeToolbar.some(tool => tool.name.startsWith('transfer'));
+            }
+            if ((keyCode === Keys.ArrowRight || keyCode === Keys.ArrowLeft) && ctrlOrMetaKey && isTransferToolVisible) {
+                this.onArrowLeftOrRight(keyCode, parentListbox, childListbox, event);
+            }
+            else if ((keyCode === Keys.ArrowUp || keyCode === Keys.ArrowDown)) {
+                this.onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar);
+            }
+            else if ((event.metaKey && keyCode === Keys.Enter) || (event.ctrlKey && keyCode === Keys.Space)) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                this.onSelectChange();
+            }
+            else if (keyCode === Keys.Space) {
+                if (this.selectedListboxItemIndex !== this.focusedListboxItemIndex) {
+                    const items = this.listboxItems;
+                    this.changeTabindex(items[this.selectedListboxItemIndex], items[this.focusedListboxItemIndex]);
+                    this.selectedListboxItemIndex = this.focusedListboxItemIndex;
+                    this.onSelectionChange.emit(this.selectedListboxItemIndex);
+                }
+            }
+        }
+    }
+    changeTabindex(previousItem, currentItem) {
+        if (previousItem) {
+            this.renderer.setAttribute(previousItem, 'tabindex', '-1');
+            previousItem.blur();
+        }
+        ;
+        if (currentItem) {
+            this.renderer.setAttribute(currentItem, 'tabindex', '0');
+            currentItem.focus();
+        }
+    }
+    onFocusIn() {
+        this.onSelectionChange.emit(this.selectedListboxItemIndex);
+    }
+    handleToolbarArrows(toolsRef, dir) {
+        const topReached = dir === 'up' && this.focusedToolIndex <= 0;
+        const bottomReached = dir === 'down' && this.focusedToolIndex >= toolsRef.length - 1;
+        if (topReached || bottomReached) {
+            return;
+        }
+        const offset = dir === 'up' ? -1 : 1;
+        this.focusedToolIndex += offset;
+        const prevItem = toolsRef[this.focusedToolIndex + (offset * -1)].element;
+        const currentItem = toolsRef[this.focusedToolIndex].element;
+        this.changeTabindex(prevItem, currentItem);
+    }
+    onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar) {
+        event.preventDefault();
+        const dir = keyCode === Keys.ArrowUp ? 'moveUp' : 'moveDown';
+        if (ctrlOrMetaKey) {
+            let isMoveToolVisible;
+            if (activeToolbar) {
+                isMoveToolVisible = activeToolbar.some(tool => tool.name.startsWith('move'));
+            }
+            if (event.shiftKey && isMoveToolVisible) {
+                this.onMoveSelectedItem.emit(dir);
+                return;
+            }
+            this.changeFocusedItem(dir);
+            return;
+        }
+        dir === 'moveUp' ? this.onArrowUp() : this.onArrowDown();
+        this.onSelectionChange.emit(this.selectedListboxItemIndex);
+        this.focusedListboxItemIndex = this.selectedListboxItemIndex;
+    }
+    onArrowLeftOrRight(keyCode, parentListbox, childListbox, event) {
+        event.preventDefault();
+        if (event.shiftKey) {
+            this.transferAllItems(keyCode, childListbox, parentListbox);
+            return;
+        }
+        if (this.selectedListboxItemIndex >= 0) {
+            this.transferItem(keyCode, childListbox, parentListbox);
+        }
+    }
+    onSelectChange() {
+        const canDeslect = (this.selectedListboxItemIndex || this.selectedListboxItemIndex === 0) && this.selectedListboxItemIndex === this.focusedListboxItemIndex;
+        if (canDeslect) {
+            this.selectedListboxItemIndex = null;
+        }
+        else {
+            const items = this.listboxItems;
+            this.changeTabindex(items[this.selectedListboxItemIndex], items[this.focusedListboxItemIndex]);
+            this.selectedListboxItemIndex = this.focusedListboxItemIndex;
+        }
+        this.onSelectionChange.emit(this.selectedListboxItemIndex);
+    }
+    onF10Key(tools) {
+        if (this.focusedToolIndex && this.focusedToolIndex > -1) {
+            if (this.focusedToolIndex >= tools.length) {
+                tools[tools.length - 1].element.focus();
+            }
+            else {
+                tools[this.focusedToolIndex].element.focus();
+            }
+        }
+        else {
+            tools[0].element.focus();
+        }
+    }
+    transferAllItems(keyCode, childListbox, parentListbox) {
+        const isArrowRight = keyCode === Keys.ArrowRight;
+        const actionToPerform = isArrowRight ? 'transferAllTo' : 'transferAllFrom';
+        this.onTransferAllEvent.emit(actionToPerform);
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            const childListboxNav = childListbox?.keyboardNavigationService || parentListbox?.childListbox.keyboardNavigationService;
+            let currentItem;
+            if (isArrowRight) {
+                if (childListbox) {
+                    const childListboxItemsLength = childListboxNav.listboxItems.length - 1;
+                    currentItem = childListboxNav.listboxItems[childListboxItemsLength];
+                    childListboxNav.focusedListboxItemIndex = childListboxItemsLength;
+                    childListboxNav.selectedListboxItemIndex = childListboxItemsLength;
+                    this.focusedListboxItemIndex = 0;
+                    this.selectedListboxItemIndex = 0;
+                }
+            }
+            else {
+                if (parentListbox) {
+                    const parentListboxNav = parentListbox.keyboardNavigationService;
+                    const parentListboxItemsLength = parentListboxNav.listboxItems.length - 1;
+                    currentItem = parentListboxNav.listboxItems[parentListboxItemsLength];
+                    parentListboxNav.focusedListboxItemIndex = parentListboxItemsLength;
+                    parentListboxNav.selectedListboxItemIndex = parentListboxItemsLength;
+                    childListboxNav.focusedListboxItemIndex = 0;
+                    childListboxNav.selectedListboxItemIndex = 0;
+                }
+            }
+            this.changeTabindex(null, currentItem);
+        });
+    }
+    transferItem(keyCode, childListbox, parentListbox) {
+        const isArrowRight = keyCode === Keys.ArrowRight;
+        const actionToPerform = isArrowRight ? 'transferFrom' : 'transferTo';
+        this.onShiftSelectedItem.emit(actionToPerform);
+        const adjustTabindex = (items, firstItem, currentItem) => {
+            items.listboxItems.forEach(item => {
+                if (item.getAttribute('tabindex') === '0') {
+                    this.changeTabindex(item, firstItem);
+                }
+            });
+            this.changeTabindex(null, currentItem);
+        };
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            if (isArrowRight) {
+                if (childListbox) {
+                    const childListboxNav = childListbox.keyboardNavigationService;
+                    const childListboxItemsLength = childListboxNav.listboxItems.length - 1;
+                    const currentItem = childListboxNav.listboxItems[childListboxItemsLength];
+                    const parentListboxFirstItem = this.listboxItems[0];
+                    childListboxNav.focusedListboxItemIndex = childListboxItemsLength;
+                    childListboxNav.selectedListboxItemIndex = childListboxItemsLength;
+                    this.focusedListboxItemIndex = 0;
+                    this.selectedListboxItemIndex = 0;
+                    adjustTabindex(childListboxNav, parentListboxFirstItem, currentItem);
+                }
+            }
+            else {
+                if (parentListbox) {
+                    const childListboxNav = parentListbox.childListbox.keyboardNavigationService;
+                    const parentListboxNav = parentListbox.keyboardNavigationService;
+                    const parentListboxItemsLength = parentListboxNav.listboxItems.length - 1;
+                    const currentItem = parentListboxNav.listboxItems[parentListboxItemsLength];
+                    const childListboxFirstItem = childListboxNav.listboxItems[0];
+                    parentListboxNav.focusedListboxItemIndex = parentListboxItemsLength;
+                    parentListboxNav.selectedListboxItemIndex = parentListboxItemsLength;
+                    childListboxNav.focusedListboxItemIndex = 0;
+                    childListboxNav.selectedListboxItemIndex = 0;
+                    adjustTabindex(parentListboxNav, childListboxFirstItem, currentItem);
+                }
+            }
+        });
+    }
+    changeFocusedItem(dir) {
+        this.listboxItems[this.focusedListboxItemIndex].blur();
+        if (this.focusedListboxItemIndex > 0 && dir === 'moveUp') {
+            this.focusedListboxItemIndex -= 1;
+        }
+        else if (this.focusedListboxItemIndex < this.listboxItems.length - 1 && dir === 'moveDown') {
+            this.focusedListboxItemIndex += 1;
+        }
+        this.listboxItems[this.focusedListboxItemIndex].focus();
+    }
+    onArrowDown() {
+        if (this.selectedListboxItemIndex < this.listboxItems.length - 1) {
+            const offset = this.selectedListboxItemIndex ? this.selectedListboxItemIndex : this.focusedListboxItemIndex;
+            this.selectedListboxItemIndex = offset + 1;
+            const previousItem = this.listboxItems[this.selectedListboxItemIndex - 1];
+            const currentItem = this.listboxItems[this.selectedListboxItemIndex];
+            this.changeTabindex(previousItem, currentItem);
+        }
+    }
+    onArrowUp() {
+        if (this.selectedListboxItemIndex > 0 || this.focusedListboxItemIndex > 0) {
+            const offset = this.selectedListboxItemIndex ? this.selectedListboxItemIndex : this.focusedListboxItemIndex;
+            this.selectedListboxItemIndex = offset - 1;
+            const previousItem = this.listboxItems[this.selectedListboxItemIndex + 1];
+            const currentItem = this.listboxItems[this.selectedListboxItemIndex];
+            this.changeTabindex(previousItem, currentItem);
+        }
+    }
+}
+KeyboardNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: KeyboardNavigationService, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+KeyboardNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: KeyboardNavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: KeyboardNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.NgZone }]; } });
+
 /**
  * @hidden
  */
@@ -218,15 +473,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['click', ['$event']]
             }] } });
 
+/* eslint-disable @typescript-eslint/no-inferrable-types */
 const DEFAULT_SIZE = 'medium';
+let idx = 0;
 /**
  * Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
  */
 class ListBoxComponent {
-    constructor(selectionService, renderer, hostElement) {
+    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone) {
+        this.keyboardNavigationService = keyboardNavigationService;
         this.selectionService = selectionService;
-        this.renderer = renderer;
         this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.zone = zone;
         /**
          * @hidden
          */
@@ -235,6 +494,14 @@ class ListBoxComponent {
          * The data which will be displayed by the ListBox.
          */
         this.data = [];
+        /**
+         * The value of the aria-label attribute of the Listbox element.
+         */
+        this.listboxLabel = 'Listbox';
+        /**
+         * The value of the aria-label attribute of the Listbox toolbar element.
+         */
+        this.listboxToolbarLabel = 'Toolbar';
         /**
          * A function which determines if a specific item is disabled.
          */
@@ -247,18 +514,19 @@ class ListBoxComponent {
          * Fires when the user clicks a ListBox item.
          */
         this.actionClick = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.getChildListbox = new EventEmitter();
         /**
          * @hidden
          */
         this.selectedTools = allTools;
         this._size = DEFAULT_SIZE;
-        this.sub = new Subscription();
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
         this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
         this.setSizingClass(this.size);
-        this.sub.add(this.selectionService.onSelect.subscribe((e) => {
-            this.selectionChange.next(e);
-        }));
     }
     /**
      * Sets the size of the component.
@@ -299,17 +567,52 @@ class ListBoxComponent {
     get listClasses() {
         return `k-list k-list-${sizeClassMap[this.size]}`;
     }
-    /**
-     * @hidden
-     */
+    ngOnInit() {
+        // This event emitter gives us the connectedWith value from the DataBinding directive
+        this.getChildListbox.emit();
+        if (this.childListbox) {
+            // This allows us to know to which parent Listbox the child Listbox is connected to
+            this.childListbox.parentListbox = this;
+        }
+        if (this.selectedIndex) {
+            this.keyboardNavigationService.focusedToolIndex = this.selectedIndex;
+        }
+    }
+    ngAfterViewInit() {
+        const toolsRef = this.tools.toArray();
+        const hostEl = this.hostElement.nativeElement;
+        const navService = this.keyboardNavigationService;
+        navService.listboxItems = Array.from(this.listboxElement.nativeElement.querySelectorAll('li.k-list-item'));
+        this.setIds();
+        this.initSubscriptions(navService, hostEl, toolsRef);
+    }
     ngOnDestroy() {
-        this.sub.unsubscribe();
+        this.subs.unsubscribe();
     }
     /**
      * @hidden
      */
     performAction(actionName) {
-        this.actionClick.next(actionName);
+        const isActionTransferTo = actionName === 'transferTo' || actionName === 'transferAllFrom';
+        const isListboxChild = this.parentListbox && !this.childListbox;
+        const isListboxParentAndChild = !!(this.parentListbox && this.childListbox);
+        const isListboxParent = !!(this.childListbox || (!this.childListbox && !this.parentListbox));
+        if (isListboxChild || (isListboxParentAndChild && isActionTransferTo)) {
+            this.parentListbox.actionClick.next(actionName);
+        }
+        else if (isListboxParent || (isListboxParentAndChild && !isActionTransferTo)) {
+            this.actionClick.next(actionName);
+        }
+        const toolsRef = this.tools.toArray() || this.parentListbox.tools.toArray();
+        const focusedToolIndex = toolsRef.findIndex(elem => elem.nativeElement === document.activeElement);
+        if ((this.selectedTools.length > 0 || this.parentListbox.selectedTools.length > 0) && focusedToolIndex > -1) {
+            const navService = this.keyboardNavigationService || this.parentListbox.keyboardNavigationService;
+            const selectedTools = this.selectedTools || this.parentListbox.selectedTools;
+            const prevTool = toolsRef[navService.focusedToolIndex]?.element;
+            navService.focusedToolIndex = selectedTools.findIndex(tool => tool.name === actionName);
+            const currentTool = toolsRef[navService.focusedToolIndex]?.element;
+            navService.changeTabindex(prevTool, currentTool);
+        }
     }
     /**
      * Programmatically selects a ListBox node.
@@ -329,6 +632,15 @@ class ListBoxComponent {
     get selectedIndex() {
         return this.selectionService.selectedIndex;
     }
+    /**
+     * @hidden
+    */
+    get getListboxId() {
+        const id = ++idx;
+        const listboxId = `k-listbox-${id}`;
+        return listboxId;
+    }
+    ;
     /**
      * @hidden
      */
@@ -338,6 +650,100 @@ class ListBoxComponent {
         }
         return fieldAccessor(dataItem, this.textField);
     }
+    /**
+     * @hidden
+     */
+    updateListboxItems() {
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.keyboardNavigationService.listboxItems = Array.from(this.listboxElement.nativeElement.querySelectorAll('li.k-list-item'));
+        });
+    }
+    /**
+     * @hidden
+     */
+    swapItems(firstItemIndex, secondItemIndex) {
+        const listboxItems = this.keyboardNavigationService.listboxItems;
+        [listboxItems[firstItemIndex], listboxItems[secondItemIndex]] = [listboxItems[secondItemIndex], listboxItems[firstItemIndex]];
+    }
+    onClickEvent(listboxItems, prevIndex, currentIndex, dir) {
+        this.selectionChange.next(currentIndex);
+        this.keyboardNavigationService.selectedListboxItemIndex = currentIndex;
+        this.keyboardNavigationService.focusedListboxItemIndex = currentIndex;
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            if (dir)
+                this.swapItems(prevIndex, currentIndex);
+            const previousItem = prevIndex ? listboxItems[prevIndex] : listboxItems[0];
+            const currentItem = listboxItems[currentIndex];
+            this.keyboardNavigationService.changeTabindex(previousItem, currentItem);
+        });
+    }
+    initSubscriptions(navService, hostEl, toolsRef) {
+        this.subs.add(navService.onDeleteEvent.subscribe((index) => this.onDeleteEvent(index, navService)));
+        this.subs.add(this.renderer.listen(hostEl, 'keydown', event => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox)));
+        this.subs.add(this.renderer.listen(this.listboxElement.nativeElement, 'focusin', () => navService.onFocusIn()));
+        this.subs.add(navService.onShiftSelectedItem.subscribe((actionToPerform) => this.onShiftItems(actionToPerform)));
+        this.subs.add(navService.onTransferAllEvent.subscribe((actionToPerform) => this.onShiftItems(actionToPerform)));
+        this.subs.add(navService.onMoveSelectedItem.subscribe((dir) => this.performAction(dir)));
+        this.subs.add(this.selectionService.onSelect.subscribe((e) => this.onClickEvent(navService.listboxItems, e.prevIndex, e.index, e.dir)));
+        this.subs.add(navService.onSelectionChange.subscribe((index) => {
+            this.selectionService.selectedIndex = index;
+            this.selectionChange.next({ index, prevIndex: null });
+        }));
+    }
+    onShiftItems(actionToPerform) {
+        this.performAction(actionToPerform);
+        if (actionToPerform === 'transferFrom' || actionToPerform === 'transferAllTo') {
+            this.updateListboxItems();
+            this.childListbox?.updateListboxItems();
+        }
+        else {
+            this.updateListboxItems();
+            this.parentListbox?.updateListboxItems();
+        }
+    }
+    setIds() {
+        const listbox = this.listboxElement.nativeElement;
+        this.listboxId = this.getListboxId;
+        this.renderer.setAttribute(listbox, 'id', this.listboxId);
+        if (this.selectedTools.length > 0 || this.parentListbox?.selectedTools.length > 0) {
+            const toolbar = this.toolbarElement?.nativeElement;
+            const parentToolbar = this.parentListbox?.toolbarElement.nativeElement;
+            if (this.parentListbox && this.childListbox) {
+                this.zone.onStable.pipe(take(1)).subscribe(() => {
+                    this.toolbarId = `${this.parentListbox.listboxId} ${this.listboxId} ${this.childListbox.listboxId}`;
+                    this.renderer.setAttribute(toolbar, 'aria-controls', this.toolbarId);
+                });
+            }
+            else if (this.childListbox && !this.parentListbox) {
+                this.zone.onStable.pipe(take(1)).subscribe(() => {
+                    this.toolbarId = this.toolbarId = `${this.listboxId} ${this.childListbox.listboxId}`;
+                    this.renderer.setAttribute(toolbar, 'aria-controls', this.toolbarId);
+                });
+            }
+            else if (this.parentListbox && this.selectedTools.length > 0) {
+                this.toolbarId = `${this.parentListbox.listboxId} ${this.listboxId}`;
+                this.parentListbox.toolbarId = this.toolbarId = `${this.parentListbox.listboxId} ${this.listboxId}`;
+                this.renderer.setAttribute(toolbar, 'aria-controls', this.toolbarId);
+                this.renderer.setAttribute(parentToolbar, 'aria-controls', this.parentListbox.toolbarId);
+            }
+            else if (!this.parentListbox && !this.childListbox) {
+                this.toolbarId = this.listboxId;
+                this.renderer.setAttribute(toolbar, 'aria-controls', this.toolbarId);
+            }
+        }
+    }
+    onDeleteEvent(index, navService) {
+        this.selectionService.selectedIndex = index;
+        this.performAction('remove');
+        this.updateListboxItems();
+        const setIndex = index + 1 === navService.listboxItems.length ?
+            { index: index - 1, tabindex: index - 1 } : { index, tabindex: index + 1 };
+        navService.changeTabindex(null, navService.listboxItems[setIndex['tabindex']]);
+        this.selectionChange.next({ index: setIndex['index'], prevIndex: null });
+        navService.selectedListboxItemIndex = setIndex['index'];
+        navService.focusedListboxItem = setIndex['index'];
+        this.selectionService.selectedIndex = setIndex['index'];
+    }
     setToolbarClass(pos) {
         Object.keys(actionsClasses).forEach((className) => {
             if (pos === className) {
@@ -352,95 +758,140 @@ class ListBoxComponent {
         this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
     }
 }
-ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, deps: [{ token: ListBoxSelectionService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListBoxComponent, selector: "kendo-listbox", inputs: { textField: "textField", data: "data", size: "size", toolbar: "toolbar", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", actionClick: "actionClick" }, host: { properties: { "class.k-listbox": "this.listboxClassName" } }, providers: [ListBoxSelectionService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }], ngImport: i0, template: `
-            <div class="k-listbox-actions" *ngIf="selectedTools.length > 0">
-                <button
-                    *ngFor="let tool of selectedTools"
-                    kendoButton
-                    [size]="this.size"
-                    [icon]="tool.icon"
-                    [svgIcon]="tool.svgIcon"
-                    (click)="performAction(tool.name)"
-                    role="button"
-                ></button>
-            </div>
-            <div class="k-list-scroller k-selectable">
-                <div class="{{ listClasses }}">
-                    <div class="k-list-content">
-                        <ul class="k-list-ul">
-                            <li
-                                class="k-list-item"
-                                *ngFor="let item of data; let i = index;"
-                                kendoListBoxItemSelectable
-                                [index]="i"
-                                [class.k-disabled]="itemDisabled(item)"
-                            >
-                                <ng-template *ngIf="itemTemplate; else defaultItemTemplate"
-                                    [templateContext]="{
-                                        templateRef: itemTemplate.templateRef,
-                                        $implicit: item
-                                    }">
-                                </ng-template>
-                                <ng-template #defaultItemTemplate>
-                                    <span class="k-list-item-text">{{ getText(item) }}</span>
-                                </ng-template>
-                            </li>
-                        </ul>
-                    </div>
+ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, deps: [{ token: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListBoxComponent, selector: "kendo-listbox", inputs: { textField: "textField", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", actionClick: "actionClick", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName" } }, providers: [ListBoxSelectionService, KeyboardNavigationService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "listboxElement", first: true, predicate: ["listbox"], descendants: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "tools", predicate: ["tools"], descendants: true }], ngImport: i0, template: `
+        <div
+            #toolbar
+            class="k-listbox-actions"
+            *ngIf="selectedTools.length > 0"
+            role="toolbar"
+            [attr.aria-label]="listboxToolbarLabel"
+        >
+            <button
+                #tools
+                *ngFor="let tool of selectedTools; let i = index;"
+                kendoButton
+                [attr.tabindex]="i === 0 ? '0' : '-1'"
+                [size]="this.size"
+                [icon]="tool.icon"
+                [svgIcon]="tool.svgIcon"
+                [attr.title]="tool.label"
+                (click)="performAction(tool.name)"
+                role="button"
+            ></button>
+        </div>
+        <div class="k-list-scroller k-selectable">
+            <div class="{{ listClasses }}">
+                <div class="k-list-content">
+                    <ul 
+                        #listbox
+                        class="k-list-ul"
+                        role="listbox"
+                        [attr.aria-label]="listboxLabel"
+                        [attr.aria-multiselectable]="false"
+                    >
+                        <li
+                            *ngFor="let item of data; let i = index;"
+                            kendoListBoxItemSelectable
+                            class="k-list-item"
+                            [attr.tabindex]="i === 0 ? '0' : '-1'"
+                            role="option"
+                            [attr.aria-selected]="selectedIndex === i"
+                            [index]="i"
+                            [class.k-disabled]="itemDisabled(item)"
+                        >
+                            <ng-template *ngIf="itemTemplate; else defaultItemTemplate"
+                                [templateContext]="{
+                                    templateRef: itemTemplate.templateRef,
+                                    $implicit: item
+                                }">
+                            </ng-template>
+                            <ng-template #defaultItemTemplate>
+                                <span class="k-list-item-text">{{ getText(item) }}</span>
+                            </ng-template>
+                        </li>
+                    </ul>
                 </div>
             </div>
-    `, isInline: true, components: [{ type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { type: i2.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+        </div>
+    `, isInline: true, components: [{ type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { type: i3.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-listbox',
-                    providers: [ListBoxSelectionService],
+                    providers: [ListBoxSelectionService, KeyboardNavigationService],
                     template: `
-            <div class="k-listbox-actions" *ngIf="selectedTools.length > 0">
-                <button
-                    *ngFor="let tool of selectedTools"
-                    kendoButton
-                    [size]="this.size"
-                    [icon]="tool.icon"
-                    [svgIcon]="tool.svgIcon"
-                    (click)="performAction(tool.name)"
-                    role="button"
-                ></button>
-            </div>
-            <div class="k-list-scroller k-selectable">
-                <div class="{{ listClasses }}">
-                    <div class="k-list-content">
-                        <ul class="k-list-ul">
-                            <li
-                                class="k-list-item"
-                                *ngFor="let item of data; let i = index;"
-                                kendoListBoxItemSelectable
-                                [index]="i"
-                                [class.k-disabled]="itemDisabled(item)"
-                            >
-                                <ng-template *ngIf="itemTemplate; else defaultItemTemplate"
-                                    [templateContext]="{
-                                        templateRef: itemTemplate.templateRef,
-                                        $implicit: item
-                                    }">
-                                </ng-template>
-                                <ng-template #defaultItemTemplate>
-                                    <span class="k-list-item-text">{{ getText(item) }}</span>
-                                </ng-template>
-                            </li>
-                        </ul>
-                    </div>
+        <div
+            #toolbar
+            class="k-listbox-actions"
+            *ngIf="selectedTools.length > 0"
+            role="toolbar"
+            [attr.aria-label]="listboxToolbarLabel"
+        >
+            <button
+                #tools
+                *ngFor="let tool of selectedTools; let i = index;"
+                kendoButton
+                [attr.tabindex]="i === 0 ? '0' : '-1'"
+                [size]="this.size"
+                [icon]="tool.icon"
+                [svgIcon]="tool.svgIcon"
+                [attr.title]="tool.label"
+                (click)="performAction(tool.name)"
+                role="button"
+            ></button>
+        </div>
+        <div class="k-list-scroller k-selectable">
+            <div class="{{ listClasses }}">
+                <div class="k-list-content">
+                    <ul 
+                        #listbox
+                        class="k-list-ul"
+                        role="listbox"
+                        [attr.aria-label]="listboxLabel"
+                        [attr.aria-multiselectable]="false"
+                    >
+                        <li
+                            *ngFor="let item of data; let i = index;"
+                            kendoListBoxItemSelectable
+                            class="k-list-item"
+                            [attr.tabindex]="i === 0 ? '0' : '-1'"
+                            role="option"
+                            [attr.aria-selected]="selectedIndex === i"
+                            [index]="i"
+                            [class.k-disabled]="itemDisabled(item)"
+                        >
+                            <ng-template *ngIf="itemTemplate; else defaultItemTemplate"
+                                [templateContext]="{
+                                    templateRef: itemTemplate.templateRef,
+                                    $implicit: item
+                                }">
+                            </ng-template>
+                            <ng-template #defaultItemTemplate>
+                                <span class="k-list-item-text">{{ getText(item) }}</span>
+                            </ng-template>
+                        </li>
+                    </ul>
                 </div>
             </div>
+        </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ListBoxSelectionService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { listboxClassName: [{
+        }], ctorParameters: function () { return [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { listboxClassName: [{
                 type: HostBinding,
                 args: ['class.k-listbox']
             }], itemTemplate: [{
                 type: ContentChild,
-                args: [ItemTemplateDirective, { static: false }]
+                args: [ItemTemplateDirective]
+            }], listboxElement: [{
+                type: ViewChild,
+                args: ['listbox']
+            }], toolbarElement: [{
+                type: ViewChild,
+                args: ['toolbar']
+            }], tools: [{
+                type: ViewChildren,
+                args: ['tools']
             }], textField: [{
                 type: Input
             }], data: [{
@@ -449,12 +900,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], toolbar: [{
                 type: Input
+            }], listboxLabel: [{
+                type: Input
+            }], listboxToolbarLabel: [{
+                type: Input
             }], itemDisabled: [{
                 type: Input
             }], selectionChange: [{
                 type: Output
             }], actionClick: [{
                 type: Output
+            }], getChildListbox: [{
+                type: Output
             }] } });
 
 /**
@@ -465,7 +922,11 @@ class DataBindingDirective {
         this.listbox = listbox;
         this.actionClickSub = new Subscription();
         this.selectedBoxSub = new Subscription();
+        this.connectedWithSub = new Subscription();
         this.selectedBox = this.listbox;
+        this.connectedWithSub.add(this.listbox.getChildListbox.subscribe(() => {
+            this.listbox.childListbox = this.connectedWith;
+        }));
         this.actionClickSub.add(this.listbox.actionClick.subscribe((actionName) => {
             switch (actionName) {
                 case 'moveUp': {
@@ -547,7 +1008,7 @@ class DataBindingDirective {
         const newIndex = dir === 'up' ? index - 1 : index + 1;
         // ES6 Destructuring swap
         [this.selectedBox.data[newIndex], this.selectedBox.data[index]] = [this.selectedBox.data[index], this.selectedBox.data[newIndex]];
-        this.selectedBox.selectionService.select(newIndex);
+        this.selectedBox.selectionService.select(newIndex, dir);
     }
     removeItem() {
         const index = this.selectedBox.selectedIndex;