@progress/kendo-angular-sortable 11.2.0-develop.9 → 11.2.0

package/fesm2015/progress-kendo-angular-sortable.mjs

@@ -3,9 +3,9 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, HostBinding, EventEmitter, forwardRef, TemplateRef, Component, ContentChildren, ViewChildren, ViewChild, Output, NgModule } from '@angular/core';
+import { Injectable, Directive, Input, HostBinding, QueryList, EventEmitter, forwardRef, TemplateRef, Component, ContentChildren, ViewChildren, ViewChild, Output, NgModule } from '@angular/core';
 import { Subject, merge } from 'rxjs';
-import { isDocumentAvailable, isChanged } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, focusableSelector, isChanged, Keys } from '@progress/kendo-angular-common';
 import { filter, tap, take, switchMap } from 'rxjs/operators';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -85,6 +85,38 @@ const draggableFromEvent = (event, sortable) => {
     // TODO: refactor sortable. Add draggable getter
     return sortable.draggables.toArray()[target ? target.index : -1];
 };
+/**
+ * @hidden
+ */
+const getAllFocusableChildren = (parent) => {
+    return Array.from(parent.querySelectorAll(focusableSelector)).filter((element) => element.offsetParent !== null);
+};
+/**
+ * @hidden
+ */
+const getFirstAndLastFocusable = (parent) => {
+    const all = getAllFocusableChildren(parent);
+    const firstFocusable = all.length > 0 ? all[0] : parent;
+    const lastFocusable = all.length > 0 ? all[all.length - 1] : parent;
+    return [firstFocusable, lastFocusable];
+};
+/**
+ * @hidden
+ */
+const keepFocusWithinComponent = (event, wrapper) => {
+    const [firstFocusable, lastFocusable] = getFirstAndLastFocusable(wrapper);
+    const tabAfterLastFocusable = !event.shiftKey && event.target === lastFocusable;
+    const shiftTabAfterFirstFocusable = event.shiftKey && event.target === firstFocusable;
+    if (tabAfterLastFocusable) {
+        event.preventDefault();
+        firstFocusable.focus();
+        wrapper.blur();
+    }
+    if (shiftTabAfterFirstFocusable) {
+        event.preventDefault();
+        lastFocusable.focus();
+    }
+};
 /**
  * @hidden
  */
@@ -157,8 +189,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-sortable',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1675778125,
-    version: '11.2.0-develop.9',
+    publishDate: 1676453551,
+    version: '11.2.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -167,9 +199,9 @@ const packageMetadata = {
  */
 class SortableContainer {
 }
-SortableContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SortableContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableContainer });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableContainer, decorators: [{
+SortableContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortableContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SortableContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortableContainer });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortableContainer, decorators: [{
             type: Injectable
         }] });
 
@@ -217,9 +249,9 @@ class DraggableDirective {
         this.renderer.setStyle(this.el.nativeElement, 'display', this.display);
     }
 }
-DraggableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DraggableDirective, deps: [{ token: SortableContainer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-DraggableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DraggableDirective, selector: "[kendoDraggable]", inputs: { index: "index", disabled: "disabled", hidden: "hidden" }, host: { properties: { "class.k-focus": "this._focused", "attr.aria-disabled": "this._disabled" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DraggableDirective, decorators: [{
+DraggableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DraggableDirective, deps: [{ token: SortableContainer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+DraggableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DraggableDirective, selector: "[kendoDraggable]", inputs: { index: "index", disabled: "disabled", hidden: "hidden" }, host: { properties: { "class.k-focus": "this._focused", "attr.aria-disabled": "this._disabled" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DraggableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDraggable]'
@@ -247,9 +279,9 @@ class ItemTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ItemTemplateDirective, selector: "[kendoSortableItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemTemplateDirective, decorators: [{
+ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ItemTemplateDirective, selector: "[kendoSortableItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSortableItemTemplate]'
@@ -263,9 +295,9 @@ class PlaceholderTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-PlaceholderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-PlaceholderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PlaceholderTemplateDirective, selector: "[kendoSortablePlaceholderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaceholderTemplateDirective, decorators: [{
+PlaceholderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+PlaceholderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: PlaceholderTemplateDirective, selector: "[kendoSortablePlaceholderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PlaceholderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSortablePlaceholderTemplate]'
@@ -574,12 +606,14 @@ class SortableService {
         });
     }
 }
-SortableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-SortableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableService, decorators: [{
+SortableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortableService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SortableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortableService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortableService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const KEY_SHORTCUTS = 'Control+ArrowLeft Control+ArrowRight Meta+ArrowLeft Meta+ArrowRight';
 /**
  * Represents the [Kendo UI Sortable component for Angular]({% slug overview_sortable %}).
  *
@@ -593,10 +627,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Represents the Kendo UI Sortable component for Angular.
  */
 class SortableComponent {
-    constructor(ngZone, localization, changeDetector, wrapper, sortableService) {
+    constructor(ngZone, renderer, changeDetector, localization, wrapper, sortableService) {
         this.ngZone = ngZone;
-        this.localization = localization;
+        this.renderer = renderer;
         this.changeDetector = changeDetector;
+        this.localization = localization;
         /**
          * Specifies the tab index of the Sortable component.
          */
@@ -722,7 +757,7 @@ class SortableComponent {
          * @hidden
          */
         this.placeholderTemplateDirectiveRef = null;
-        this.itemWrappers = null;
+        this.itemWrappers = new QueryList();
         /**
          * Fires when the dragging of an item is started.
          */
@@ -760,6 +795,7 @@ class SortableComponent {
          * If no item is focused, set to `-1`.
          */
         this.activeIndex = -1;
+        this.hostRole = 'list';
         /**
          * Flag indicating if the component is currently playing animations.
          * @hidden
@@ -782,10 +818,16 @@ class SortableComponent {
          */
         this.hintLocation = null;
         this._localData = [];
+        /**
+         * @hidden
+         */
+        this.ariaKeyShortcuts = KEY_SHORTCUTS;
+        this.focusableItems = [];
         this.animationDuration = 300;
         this.afterKeyPress = false;
         this.sortableService = null;
         this._hideActiveItem = false;
+        this.prevActiveIndex = 0;
         validatePackage(packageMetadata);
         this.wrapper = wrapper.nativeElement;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -866,6 +908,18 @@ class SortableComponent {
             });
         }
     }
+    ngAfterViewInit() {
+        if (this.navigable) {
+            this.setInitialItemTabindex();
+            this.setFocusableChildren();
+        }
+        this.childrenTabindexSubscription = this.itemWrappers.changes.subscribe(() => {
+            if (this.navigable) {
+                this.setInitialItemTabindex();
+                this.setFocusableChildren();
+            }
+        });
+    }
     ngOnChanges(changes) {
         if (this.data && isChanged('disabledIndexes', changes, false)) {
             this.cacheData();
@@ -883,16 +937,35 @@ class SortableComponent {
         this.placeholderTemplateRef = this.placeholderTemplateDirectiveRef.first || this.defaultTemplateRef.first;
     }
     ngAfterViewChecked() {
-        if (this.afterKeyPress) {
-            if (this.itemWrappers) {
+        if (this.navigable) {
+            if (this.afterKeyPress) {
                 const elems = this.itemWrappers.toArray();
                 if (elems && elems.length > 0 && this.activeIndex > -1) {
-                    elems[this.activeIndex].nativeElement.focus();
+                    const currentItem = elems[this.activeIndex].nativeElement;
+                    const prevItem = elems[this.prevActiveIndex].nativeElement;
+                    this.renderer.setAttribute(prevItem, 'tabindex', '-1');
+                    this.renderer.setAttribute(currentItem, 'tabindex', '0');
+                    currentItem.focus();
                 }
             }
             this.afterKeyPress = false;
         }
     }
+    /**
+     * @hidden
+     */
+    setFocusableChildren() {
+        this.itemWrappers.toArray().forEach((item) => {
+            const itemEl = item.nativeElement;
+            const focusableChildren = getAllFocusableChildren(itemEl);
+            if (focusableChildren.length > 0) {
+                this.focusableItems.push(focusableChildren);
+                focusableChildren.forEach(focusableChild => {
+                    this.renderer.setAttribute(focusableChild, 'tabindex', '-1');
+                });
+            }
+        });
+    }
     /**
      * @hidden
      */
@@ -922,6 +995,21 @@ class SortableComponent {
         }
         return prevented;
     }
+    /**
+     * @hidden
+     */
+    setInitialItemTabindex() {
+        this.itemWrappers.toArray().forEach((item, index) => {
+            if (this.itemEnabled(index)) {
+                const isFirstItem = index === 0 ? 0 : -1;
+                const tabIndexValue = `${this.navigable ? this.tabIndex || isFirstItem : this.tabIndex}`;
+                const hasItemTabindex = item.nativeElement.getAttribute('tabindex');
+                if (!hasItemTabindex) {
+                    this.renderer.setAttribute(item.nativeElement, 'tabindex', tabIndexValue);
+                }
+            }
+        });
+    }
     /**
      * @hidden
      */
@@ -1037,44 +1125,85 @@ class SortableComponent {
      */
     blurHandler() {
         if (this.navigable && !this.afterKeyPress) {
+            this.prevActiveIndex = this.activeIndex;
             this.activeIndex = -1;
         }
     }
     /**
      * @hidden
      */
-    keydownHandler(event) {
-        const code = event.keyCode;
-        const navigate = this.navigable && code >= 37 && code <= 40;
-        const hasFocus = this.activeIndex !== -1;
-        if (!navigate || !hasFocus) {
-            return;
-        }
-        const leftKey = this.direction === 'rtl' ? 39 : 37;
-        const dir = code === 38 || code === leftKey ? -1 : 1;
+    onArrowHandler(event, keyCode) {
+        const leftKey = this.direction === 'rtl' ? Keys.ArrowRight : Keys.ArrowLeft;
+        const dir = keyCode === Keys.ArrowUp || keyCode === leftKey ? -1 : 1;
         const limit = this.data.length - 1;
         let targetIndex = this.activeIndex + dir;
         while (!this.itemEnabled(targetIndex) && targetIndex <= limit) {
             targetIndex += dir;
         }
         targetIndex = Math.min(Math.max(targetIndex, 0), limit);
+        this.prevActiveIndex = this.activeIndex;
         if (!this.itemEnabled(targetIndex)) {
             return;
         }
-        if (navigate) {
-            const ctrl = event.ctrlKey || event.metaKey;
-            const navigateEvent = new NavigateEvent({ index: targetIndex, oldIndex: this.activeIndex, ctrlKey: ctrl });
-            this.navigate.emit(navigateEvent);
-            if (!navigateEvent.isDefaultPrevented()) {
-                this.activeIndex = targetIndex;
-            }
-            this.dragIndex = -1;
-            this.dragOverIndex = -1;
+        const ctrl = event.ctrlKey || event.metaKey;
+        const navigateEvent = new NavigateEvent({ index: targetIndex, oldIndex: this.activeIndex, ctrlKey: ctrl });
+        this.navigate.emit(navigateEvent);
+        if (!navigateEvent.isDefaultPrevented()) {
+            this.activeIndex = targetIndex;
         }
+        this.dragIndex = -1;
+        this.dragOverIndex = -1;
         event.stopPropagation();
         event.preventDefault();
         this.afterKeyPress = true;
     }
+    /**
+     * @hidden
+     */
+    onEnterHandler(item) {
+        const focusableItems = this.focusableItems[this.activeIndex];
+        focusableItems.forEach(focusableItem => {
+            this.renderer.setAttribute(focusableItem, 'tabindex', '0');
+        });
+        this.renderer.setAttribute(item, 'tabindex', '-1');
+        focusableItems[0].focus();
+    }
+    /**
+     * @hidden
+     */
+    onEscapeHandler() {
+        const focusableItems = this.focusableItems[this.prevActiveIndex];
+        const item = this.itemWrappers.toArray()[this.prevActiveIndex].nativeElement;
+        focusableItems.forEach(focusableItem => {
+            this.renderer.setAttribute(focusableItem, 'tabindex', '-1');
+        });
+        this.renderer.setAttribute(item, 'tabindex', '0');
+        item.focus();
+    }
+    /**
+     * @hidden
+     */
+    keydownHandler(event) {
+        const index = this.activeIndex === -1 ? this.prevActiveIndex : this.activeIndex;
+        const item = this.itemWrappers.toArray()[index].nativeElement;
+        const isItemFocused = document.activeElement === item;
+        const hasFocus = this.activeIndex !== -1;
+        const keyCode = event.keyCode;
+        if (this.navigable && hasFocus) {
+            if (keyCode >= Keys.ArrowLeft && keyCode <= Keys.ArrowDown) {
+                this.onArrowHandler(event, keyCode);
+            }
+            if (keyCode === Keys.Enter && isItemFocused && this.focusableItems.length > 0) {
+                this.onEnterHandler(item);
+            }
+        }
+        if (keyCode === Keys.Tab && !isItemFocused) {
+            keepFocusWithinComponent(event, item);
+        }
+        if (keyCode === Keys.Escape && this.focusableItems.length > 0 && this.activeIndex === -1) {
+            this.onEscapeHandler();
+        }
+    }
     /**
      * Removes the currently active item from the Data collection that the Sortable uses.
      */
@@ -1192,6 +1321,9 @@ class SortableComponent {
         this.dragIndex = dragIndex;
         this.dragOverIndex = dragIndex;
         this.activeIndex = dragIndex;
+        if (this.focusableItems.length > 0) {
+            this.swapFocusableChildren(fromIndex, toIndex);
+        }
         if (this.animation) {
             setTimeout(() => {
                 toAnimate.push({ next: originalIndexAnimate, prev: dragIndex });
@@ -1276,6 +1408,12 @@ class SortableComponent {
     reflow(element) {
         return element.offsetWidth;
     }
+    /**
+     * @hidden
+     */
+    swapFocusableChildren(firstItemIndex, secondItemIndex) {
+        [this.focusableItems[firstItemIndex], this.focusableItems[secondItemIndex]] = [this.focusableItems[secondItemIndex], this.focusableItems[firstItemIndex]];
+    }
     /**
      * @hidden
      */
@@ -1390,6 +1528,9 @@ class SortableComponent {
         if (this.localizationChangeSubscription) {
             this.localizationChangeSubscription.unsubscribe();
         }
+        if (this.childrenTabindexSubscription) {
+            this.childrenTabindexSubscription.unsubscribe();
+        }
         this.dragStartSubscription.unsubscribe();
         this.dragOverSubscription.unsubscribe();
         this.dragEndSubscription.unsubscribe();
@@ -1429,8 +1570,8 @@ class SortableComponent {
         }
     }
 }
-SortableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SortableService }], target: i0.ɵɵFactoryTarget.Component });
-SortableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SortableComponent, selector: "kendo-sortable", inputs: { tabIndex: "tabIndex", data: "data", navigable: "navigable", navigatable: "navigatable", animation: "animation", disabledIndexes: "disabledIndexes", zone: "zone", acceptZones: "acceptZones", itemStyle: "itemStyle", emptyItemStyle: "emptyItemStyle", activeItemStyle: "activeItemStyle", disabledItemStyle: "disabledItemStyle", itemClass: "itemClass", activeItemClass: "activeItemClass", emptyItemClass: "emptyItemClass", disabledItemClass: "disabledItemClass", emptyText: "emptyText", activeIndex: "activeIndex" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", dragOver: "dragOver", dragLeave: "dragLeave", dataMove: "dataMove", dataAdd: "dataAdd", dataRemove: "dataRemove", navigate: "navigate" }, host: { properties: { "style.touch-action": "this.touchAction", "attr.dir": "this.dir" } }, providers: [
+SortableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortableComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: SortableService }], target: i0.ɵɵFactoryTarget.Component });
+SortableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SortableComponent, selector: "kendo-sortable", inputs: { tabIndex: "tabIndex", data: "data", navigable: "navigable", navigatable: "navigatable", animation: "animation", disabledIndexes: "disabledIndexes", zone: "zone", acceptZones: "acceptZones", itemStyle: "itemStyle", emptyItemStyle: "emptyItemStyle", activeItemStyle: "activeItemStyle", disabledItemStyle: "disabledItemStyle", itemClass: "itemClass", activeItemClass: "activeItemClass", emptyItemClass: "emptyItemClass", disabledItemClass: "disabledItemClass", emptyText: "emptyText", activeIndex: "activeIndex" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", dragOver: "dragOver", dragLeave: "dragLeave", dataMove: "dataMove", dataAdd: "dataAdd", dataRemove: "dataRemove", navigate: "navigate" }, host: { properties: { "style.touch-action": "this.touchAction", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -1443,8 +1584,10 @@ SortableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
     ], queries: [{ propertyName: "defaultTemplateRef", predicate: TemplateRef }, { propertyName: "itemTemplateDirectiveRef", predicate: ItemTemplateDirective, read: TemplateRef }, { propertyName: "placeholderTemplateDirectiveRef", predicate: PlaceholderTemplateDirective, read: TemplateRef }], viewQueries: [{ propertyName: "noDataContainer", first: true, predicate: ["noDataRef"], descendants: true }, { propertyName: "hint", first: true, predicate: ["hint"], descendants: true }, { propertyName: "itemWrappers", predicate: ["itemWrapper"], descendants: true }, { propertyName: "draggables", predicate: DraggableDirective, descendants: true }], exportAs: ["kendoSortable"], usesOnChanges: true, ngImport: i0, template: `
     <div #itemWrapper *ngFor="let item of _localData;let i=index"
         kendoDraggable
-        [attr.tabIndex]="itemEnabled(i)?(navigable?tabIndex||0:tabIndex):null"
+        role="listitem"
         [attr.aria-grabbed]="i===dragIndex"
+        [attr.aria-disabled]="!itemEnabled(i)"
+        [attr.aria-keyshortcuts]="navigable ? ariaKeyShortcuts : ''"
         [attr.aria-dropeffect]="ariaDropEffect(i)"
         [attr.data-sortable-item] = "true"
         [attr.data-sortable-index]="i"
@@ -1459,11 +1602,11 @@ SortableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         (blur)="blurHandler()"
         (keydown)="keydownHandler($event)"
     >
-          <ng-container *ngIf="itemTemplateRef"
+        <ng-container *ngIf="itemTemplateRef"
             [ngTemplateOutlet]="itemTemplate(i)"
             [ngTemplateOutletContext]="item">
-          </ng-container>
-      <ng-container *ngIf="!itemTemplateRef">{{item.item}}</ng-container>
+        </ng-container>
+        <ng-container *ngIf="!itemTemplateRef">{{item.item}}</ng-container>
     </div>
 
     <ng-container #noDataRef *ngIf="!_data.length || _localData.length === 1 && _localData[0].hidden">
@@ -1477,15 +1620,15 @@ SortableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         [ngClass]="currentItemClass(-1)"
         >{{emptyText}}</div>
     </ng-container>
-     <div *ngIf="hintVisible()" [ngStyle]="hintStyle()" [ngClass]="currentItemClass(dragIndex)">
-         <ng-container *ngIf="itemTemplateRef"
-             [ngTemplateOutlet]="itemTemplateRef"
-             [ngTemplateOutletContext]="{item: _localData[dragIndex].item}">
-         </ng-container>
-         <ng-container *ngIf="!itemTemplateRef">{{_localData[dragIndex].item}}</ng-container>
-     </div>
+    <div *ngIf="hintVisible()" [ngStyle]="hintStyle()" [ngClass]="currentItemClass(dragIndex)">
+        <ng-container *ngIf="itemTemplateRef"
+            [ngTemplateOutlet]="itemTemplateRef"
+            [ngTemplateOutletContext]="{item: _localData[dragIndex].item}">
+        </ng-container>
+        <ng-container *ngIf="!itemTemplateRef">{{_localData[dragIndex].item}}</ng-container>
+    </div>
   `, isInline: true, directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["index", "disabled", "hidden"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortableComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSortable',
@@ -1504,8 +1647,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     template: `
     <div #itemWrapper *ngFor="let item of _localData;let i=index"
         kendoDraggable
-        [attr.tabIndex]="itemEnabled(i)?(navigable?tabIndex||0:tabIndex):null"
+        role="listitem"
         [attr.aria-grabbed]="i===dragIndex"
+        [attr.aria-disabled]="!itemEnabled(i)"
+        [attr.aria-keyshortcuts]="navigable ? ariaKeyShortcuts : ''"
         [attr.aria-dropeffect]="ariaDropEffect(i)"
         [attr.data-sortable-item] = "true"
         [attr.data-sortable-index]="i"
@@ -1520,11 +1665,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         (blur)="blurHandler()"
         (keydown)="keydownHandler($event)"
     >
-          <ng-container *ngIf="itemTemplateRef"
+        <ng-container *ngIf="itemTemplateRef"
             [ngTemplateOutlet]="itemTemplate(i)"
             [ngTemplateOutletContext]="item">
-          </ng-container>
-      <ng-container *ngIf="!itemTemplateRef">{{item.item}}</ng-container>
+        </ng-container>
+        <ng-container *ngIf="!itemTemplateRef">{{item.item}}</ng-container>
     </div>
 
     <ng-container #noDataRef *ngIf="!_data.length || _localData.length === 1 && _localData[0].hidden">
@@ -1538,16 +1683,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         [ngClass]="currentItemClass(-1)"
         >{{emptyText}}</div>
     </ng-container>
-     <div *ngIf="hintVisible()" [ngStyle]="hintStyle()" [ngClass]="currentItemClass(dragIndex)">
-         <ng-container *ngIf="itemTemplateRef"
-             [ngTemplateOutlet]="itemTemplateRef"
-             [ngTemplateOutletContext]="{item: _localData[dragIndex].item}">
-         </ng-container>
-         <ng-container *ngIf="!itemTemplateRef">{{_localData[dragIndex].item}}</ng-container>
-     </div>
+    <div *ngIf="hintVisible()" [ngStyle]="hintStyle()" [ngClass]="currentItemClass(dragIndex)">
+        <ng-container *ngIf="itemTemplateRef"
+            [ngTemplateOutlet]="itemTemplateRef"
+            [ngTemplateOutletContext]="{item: _localData[dragIndex].item}">
+        </ng-container>
+        <ng-container *ngIf="!itemTemplateRef">{{_localData[dragIndex].item}}</ng-container>
+    </div>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SortableService }]; }, propDecorators: { tabIndex: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: SortableService }]; }, propDecorators: { tabIndex: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -1598,10 +1743,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: [DraggableDirective]
             }], noDataContainer: [{
                 type: ViewChild,
-                args: ['noDataRef', { static: false }]
+                args: ['noDataRef']
             }], hint: [{
                 type: ViewChild,
-                args: ['hint', { static: false }]
+                args: ['hint']
             }], dragStart: [{
                 type: Output
             }], dragEnd: [{
@@ -1626,6 +1771,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
             }] } });
 
 /**
@@ -1816,9 +1964,9 @@ class SortableBindingDirective {
         }
     }
 }
-SortableBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableBindingDirective, deps: [{ token: SortableComponent }, { token: SortableService }], target: i0.ɵɵFactoryTarget.Directive });
-SortableBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: SortableBindingDirective, selector: "[kendoSortableBinding]", inputs: { data: ["kendoSortableBinding", "data"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableBindingDirective, decorators: [{
+SortableBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortableBindingDirective, deps: [{ token: SortableComponent }, { token: SortableService }], target: i0.ɵɵFactoryTarget.Directive });
+SortableBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SortableBindingDirective, selector: "[kendoSortableBinding]", inputs: { data: ["kendoSortableBinding", "data"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortableBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSortableBinding]'
@@ -1867,8 +2015,8 @@ const COMPONENT_DIRECTIVES = [
  */
 class SortableModule {
 }
-SortableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SortableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableModule, declarations: [SortableComponent,
+SortableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SortableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortableModule, declarations: [SortableComponent,
         DraggableDirective,
         PlaceholderTemplateDirective,
         ItemTemplateDirective,
@@ -1877,8 +2025,8 @@ SortableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         PlaceholderTemplateDirective,
         ItemTemplateDirective,
         SortableBindingDirective] });
-SortableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableModule, providers: [SortableService], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableModule, decorators: [{
+SortableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortableModule, providers: [SortableService], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENT_DIRECTIVES],