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

package/esm2020/binding.directive.mjs

@@ -161,9 +161,9 @@ export class SortableBindingDirective {
         }
     }
 }
-SortableBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortableBindingDirective, deps: [{ token: i1.SortableComponent }, { token: i2.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: i1.SortableComponent }, { token: i2.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]'

package/esm2020/draggable.directive.mjs

@@ -50,9 +50,9 @@ export 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: i1.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: i1.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]'

package/esm2020/item-template.directive.mjs

@@ -13,9 +13,9 @@ export 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]'
@@ -29,9 +29,9 @@ export 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]'

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export 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/'
 };

package/esm2020/sortable-container.mjs

@@ -9,8 +9,8 @@ import * as i0 from "@angular/core";
  */
 export 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
         }] });

package/esm2020/sortable.component.mjs

@@ -2,10 +2,11 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, Output, QueryList, ContentChildren, ViewChild, ViewChildren, TemplateRef, ElementRef, EventEmitter, HostBinding, NgZone, ChangeDetectorRef, forwardRef } from '@angular/core';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Input, Output, QueryList, ContentChildren, ViewChild, ViewChildren, TemplateRef, ElementRef, EventEmitter, HostBinding, NgZone, ChangeDetectorRef, forwardRef, Renderer2 } from '@angular/core';
 import { Subject, merge } from 'rxjs';
-import { isDocumentAvailable, isChanged } from '@progress/kendo-angular-common';
-import { relativeContextElement } from './util';
+import { isDocumentAvailable, isChanged, Keys } from '@progress/kendo-angular-common';
+import { getAllFocusableChildren, keepFocusWithinComponent, relativeContextElement } from './util';
 import { filter, take } from 'rxjs/operators';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -23,6 +24,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./sortable.service";
 import * as i3 from "@angular/common";
 import * as i4 from "./draggable.directive";
+const KEY_SHORTCUTS = 'Control+ArrowLeft Control+ArrowRight Meta+ArrowLeft Meta+ArrowRight';
 /**
  * Represents the [Kendo UI Sortable component for Angular]({% slug overview_sortable %}).
  *
@@ -36,10 +38,11 @@ import * as i4 from "./draggable.directive";
  * Represents the Kendo UI Sortable component for Angular.
  */
 export 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.
          */
@@ -165,7 +168,7 @@ export class SortableComponent {
          * @hidden
          */
         this.placeholderTemplateDirectiveRef = null;
-        this.itemWrappers = null;
+        this.itemWrappers = new QueryList();
         /**
          * Fires when the dragging of an item is started.
          */
@@ -203,6 +206,7 @@ export 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
@@ -225,10 +229,16 @@ export 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';
@@ -309,6 +319,18 @@ export 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();
@@ -326,16 +348,35 @@ export 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
      */
@@ -365,6 +406,21 @@ export 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
      */
@@ -480,44 +536,85 @@ export 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.
      */
@@ -635,6 +732,9 @@ export 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 });
@@ -719,6 +819,12 @@ export class SortableComponent {
     reflow(element) {
         return element.offsetWidth;
     }
+    /**
+     * @hidden
+     */
+    swapFocusableChildren(firstItemIndex, secondItemIndex) {
+        [this.focusableItems[firstItemIndex], this.focusableItems[secondItemIndex]] = [this.focusableItems[secondItemIndex], this.focusableItems[firstItemIndex]];
+    }
     /**
      * @hidden
      */
@@ -833,6 +939,9 @@ export class SortableComponent {
         if (this.localizationChangeSubscription) {
             this.localizationChangeSubscription.unsubscribe();
         }
+        if (this.childrenTabindexSubscription) {
+            this.childrenTabindexSubscription.unsubscribe();
+        }
         this.dragStartSubscription.unsubscribe();
         this.dragOverSubscription.unsubscribe();
         this.dragEndSubscription.unsubscribe();
@@ -872,8 +981,8 @@ export 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: i2.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: i2.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,
@@ -886,8 +995,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"
@@ -902,11 +1013,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">
@@ -920,15 +1031,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: i4.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',
@@ -947,8 +1058,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"
@@ -963,11 +1076,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">
@@ -981,16 +1094,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: i2.SortableService }]; }, propDecorators: { tabIndex: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i2.SortableService }]; }, propDecorators: { tabIndex: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -1041,10 +1154,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: [{
@@ -1069,4 +1182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
             }] } });

package/esm2020/sortable.module.mjs

@@ -50,8 +50,8 @@ const COMPONENT_DIRECTIVES = [
  */
 export 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,
@@ -60,8 +60,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],

package/esm2020/sortable.service.mjs

@@ -217,8 +217,8 @@ export 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 }]; } });

package/esm2020/util.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { focusableSelector, isDocumentAvailable } from '@progress/kendo-angular-common';
 const NODE_NAME_PREDICATES = {};
 const NODE_ATTR_PREDICATES = {};
 const focusableRegex = /^(?:a|input|select|option|textarea|button|object)$/i;
@@ -74,6 +74,38 @@ export const draggableFromEvent = (event, sortable) => {
     // TODO: refactor sortable. Add draggable getter
     return sortable.draggables.toArray()[target ? target.index : -1];
 };
+/**
+ * @hidden
+ */
+export const getAllFocusableChildren = (parent) => {
+    return Array.from(parent.querySelectorAll(focusableSelector)).filter((element) => element.offsetParent !== null);
+};
+/**
+ * @hidden
+ */
+export 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
+ */
+export 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
  */