@progress/kendo-vue-layout 3.7.4-dev.202212300853 → 3.7.4-dev.202301120847

package/dist/npm/drawer/DrawerItem.js

@@ -22,6 +22,8 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var main_1 = require("../messages/main");
 /**
  * @hidden
  */
@@ -43,6 +45,9 @@ var DrawerItemVue2 = {
   inject: {
     kendoDrawer: {
       default: null
+    },
+    kendoLocalizationService: {
+      default: null
     }
   },
   computed: {
@@ -79,22 +84,27 @@ var DrawerItemVue2 = {
       expanded = _b.expanded,
       mini = _b.mini,
       item = _b.item;
+    var ariaLabelSeparator = (0, kendo_vue_intl_1.provideLocalizationService)(this).toLanguageString(main_1.separatorAriaMessage, main_1.messages[main_1.separatorAriaMessage]);
     return separator ? h("li", {
       "class": 'k-drawer-item k-drawer-separator',
-      role: "presentation",
+      role: "separator",
       attrs: this.v3 ? undefined : {
-        role: "presentation"
-      }
+        role: "separator",
+        "aria-label": ariaLabelSeparator
+      },
+      "aria-label": ariaLabelSeparator
     }) : h("li", {
       "class": this.itemClassNames,
-      role: "option",
+      role: "menuitem",
       attrs: this.v3 ? undefined : {
-        role: "option",
-        "aria-selected": selected,
+        role: "menuitem",
+        "aria-label": text,
+        "aria-current": selected,
         "aria-disabled": disabled,
         tabindex: (0, kendo_vue_common_1.getTabIndex)(tabIndex, disabled)
       },
-      "aria-selected": selected,
+      "aria-label": text,
+      "aria-current": selected,
       "aria-disabled": disabled,
       onClick: this.handleClick,
       on: this.v3 ? undefined : {

package/dist/npm/drawer/DrawerNavigation.js

@@ -131,9 +131,9 @@ var DrawerNavigationVue2 = {
     var drawerAnimation = expanded ? mode === 'push' ? expandPush : expandOverlay : mode === 'push' ? collapsePush : dir === 'ltr' && position === 'start' || dir === 'rtl' && position === 'end' ? mini ? collapseOverlayMini : collapseOverlay : mini ? collapseOverlayMini : collapseOverlayRtl;
     var drawerItems = items && h("ul", {
       "class": 'k-drawer-items',
-      role: "listbox",
+      role: "menu",
       attrs: this.v3 ? undefined : {
-        role: "listbox",
+        role: "menu",
         title: "drawer-list",
         "aria-expanded": expanded
       },

package/dist/npm/menu/components/MenuItemArrow.js

@@ -9,7 +9,6 @@ var Vue = require("vue");
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var misc_1 = require("../utils/misc");
 /**
  * @hidden
@@ -43,11 +42,16 @@ var MenuItemArrowVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     return h("span", {
-      "class": "k-menu-expand-arrow"
-    }, [h(kendo_vue_common_1.Icon, {
-      name: this.getArrowName(),
+      "class": "k-menu-expand-arrow",
+      "aria-hidden": "true",
       attrs: this.v3 ? undefined : {
-        name: this.getArrowName()
+        "aria-hidden": "true"
+      }
+    }, [h("span", {
+      "class": this.getArrowName(),
+      role: "presentation",
+      attrs: this.v3 ? undefined : {
+        role: "presentation"
       }
     })]);
   },

package/dist/npm/messages/main.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @hidden
+ */
+export declare const separatorAriaMessage = "drawer.separatorAriaMessage";
+/**
+ * @hidden
+ */
+export declare const splitterPaneLabel = "splitter.splitterPaneLabel";
+/**
+ * @hidden
+ */
+export declare const messages: {
+    "drawer.separatorAriaMessage": string;
+    "splitter.splitterPaneLabel": string;
+};

package/dist/npm/messages/main.js

@@ -0,0 +1,19 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.messages = exports.splitterPaneLabel = exports.separatorAriaMessage = void 0;
+/**
+ * @hidden
+ */
+exports.separatorAriaMessage = 'drawer.separatorAriaMessage';
+/**
+ * @hidden
+ */
+exports.splitterPaneLabel = 'splitter.splitterPaneLabel';
+/**
+ * @hidden
+ */
+exports.messages = (_a = {},
+    _a[exports.separatorAriaMessage] = 'Separator',
+    _a[exports.splitterPaneLabel] = 'Splitter pane',
+    _a);

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1672389706,
+    publishDate: 1673512228,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/panelbar/PanelBarItem.js

@@ -22,6 +22,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var PanelBarGroup_1 = require("./PanelBarGroup");
 /**
  * @hidden
@@ -101,6 +102,7 @@ var PanelBarItemVue2 = {
     }, headerClassName);
     var panelBarItemArrowClassName = (0, kendo_vue_common_1.classNames)('k-panelbar-toggle', (_a = {}, _a['k-panelbar-collapse'] = expanded && hasContent, _a['k-panelbar-expand'] = !expanded && hasContent, _a));
     var itemIconName = expanded ? 'chevron-up' : 'chevron-down';
+    var itemIconSVG = expanded ? kendo_svg_icons_1.chevronUpIcon : kendo_svg_icons_1.chevronDownIcon;
     var iconElement = function iconElement() {
       if (this.imageUrl) {
         return h("img", {
@@ -131,8 +133,10 @@ var PanelBarItemVue2 = {
     var arrow = !disabled && (items || content) ? h(kendo_vue_common_1.Icon, {
       name: itemIconName,
       attrs: this.v3 ? undefined : {
-        name: itemIconName
+        name: itemIconName,
+        icon: itemIconSVG
       },
+      icon: itemIconSVG,
       "class": panelBarItemArrowClassName
     }) : null;
     var group = items || content ? h(PanelBarGroup_1.PanelBarGroup, {

package/dist/npm/splitter/SplitterBar.js

@@ -10,6 +10,9 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var main_1 = require("../messages/main");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -57,6 +60,11 @@ var SplitterBarVue2 = {
       return this.$props.orientation === 'horizontal';
     }
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   data: function data() {
     return {
       focused: false
@@ -85,7 +93,10 @@ var SplitterBarVue2 = {
     var isHorizontal = this.isHorizontal;
     var barClasses = (0, kendo_vue_common_1.classNames)('k-splitbar', (_a = {}, _a['k-focus'] = this.focused, _a['k-splitbar-horizontal'] = isHorizontal, _a['k-splitbar-vertical'] = !isHorizontal, _a['k-splitbar-draggable-horizontal'] = isHorizontal && isDraggable, _a['k-splitbar-draggable-vertical'] = !isHorizontal && isDraggable, _a['k-splitbar-static-horizontal'] = isHorizontal && isStatic, _a['k-splitbar-static-vertical'] = !isHorizontal && isStatic, _a));
     var previousArrowName = this.previousArrowName(isHorizontal);
+    var previousArrowSVG = this.previousArrowSVG(isHorizontal);
     var nextArrowName = this.nextArrowName(isHorizontal);
+    var nextArrowSVG = this.nextArrowSVG(isHorizontal);
+    var paneLabel = (0, kendo_vue_intl_1.provideLocalizationService)(this).toLanguageString(main_1.splitterPaneLabel, main_1.messages[main_1.splitterPaneLabel]);
     return (
       // @ts-ignore  function children
       h(kendo_vue_common_1.Draggable, {
@@ -115,7 +126,9 @@ var SplitterBarVue2 = {
           tabindex: isStatic ? -1 : 0,
           attrs: _this2.v3 ? undefined : {
             tabindex: isStatic ? -1 : 0,
-            role: 'separator'
+            role: 'separator',
+            ariaLabel: paneLabel,
+            ariaOrientation: _this2.isHorizontal ? 'vertical' : 'horizontal'
           },
           role: 'separator',
           "class": barClasses,
@@ -131,7 +144,9 @@ var SplitterBarVue2 = {
           },
           onFocusout: _this2.onBlur,
           onDblclick: _this2.onToggle,
-          onKeydown: _this2.onKeyDown
+          onKeydown: _this2.onKeyDown,
+          ariaLabel: paneLabel,
+          ariaOrientation: _this2.isHorizontal ? 'vertical' : 'horizontal'
         }, [_this2.prev.collapsible && h("span", {
           "class": 'k-collapse-prev',
           onClick: _this2.onPrevToggle,
@@ -141,8 +156,10 @@ var SplitterBarVue2 = {
         }, [h(kendo_vue_common_1.Icon, {
           name: previousArrowName,
           attrs: _this2.v3 ? undefined : {
-            name: previousArrowName
-          }
+            name: previousArrowName,
+            icon: previousArrowSVG
+          },
+          icon: previousArrowSVG
         })]), h("div", {
           "class": 'k-resize-handle'
         }), _this2.next.collapsible && h("span", {
@@ -154,14 +171,18 @@ var SplitterBarVue2 = {
         }, [h(kendo_vue_common_1.Icon, {
           name: nextArrowName,
           attrs: _this2.v3 ? undefined : {
-            name: nextArrowName
-          }
+            name: nextArrowName,
+            icon: nextArrowSVG
+          },
+          icon: nextArrowSVG
         })])])];
       } : [h("div", {
         tabindex: isStatic ? -1 : 0,
         attrs: _this2.v3 ? undefined : {
           tabindex: isStatic ? -1 : 0,
-          role: 'separator'
+          role: 'separator',
+          ariaLabel: paneLabel,
+          ariaOrientation: _this2.isHorizontal ? 'vertical' : 'horizontal'
         },
         role: 'separator',
         "class": barClasses,
@@ -177,7 +198,9 @@ var SplitterBarVue2 = {
         },
         onFocusout: _this2.onBlur,
         onDblclick: _this2.onToggle,
-        onKeydown: _this2.onKeyDown
+        onKeydown: _this2.onKeyDown,
+        ariaLabel: paneLabel,
+        ariaOrientation: _this2.isHorizontal ? 'vertical' : 'horizontal'
       }, [_this2.prev.collapsible && h("span", {
         "class": 'k-collapse-prev',
         onClick: _this2.onPrevToggle,
@@ -187,8 +210,10 @@ var SplitterBarVue2 = {
       }, [h(kendo_vue_common_1.Icon, {
         name: previousArrowName,
         attrs: _this2.v3 ? undefined : {
-          name: previousArrowName
-        }
+          name: previousArrowName,
+          icon: previousArrowSVG
+        },
+        icon: previousArrowSVG
       })]), h("div", {
         "class": 'k-resize-handle'
       }), _this2.next.collapsible && h("span", {
@@ -200,8 +225,10 @@ var SplitterBarVue2 = {
       }, [h(kendo_vue_common_1.Icon, {
         name: nextArrowName,
         attrs: _this2.v3 ? undefined : {
-          name: nextArrowName
-        }
+          name: nextArrowName,
+          icon: nextArrowSVG
+        },
+        icon: nextArrowSVG
       })])])])
     );
   },
@@ -281,10 +308,20 @@ var SplitterBarVue2 = {
       var isCollapsed = prev.collapsed;
       return isHorizontal && !isCollapsed ? 'caret-alt-left' : isHorizontal && isCollapsed ? 'caret-alt-right' : !isHorizontal && !isCollapsed ? 'caret-alt-up' : !isHorizontal && isCollapsed ? 'caret-alt-down' : '';
     },
+    previousArrowSVG: function previousArrowSVG(isHorizontal) {
+      var prev = this.$props.prev;
+      var isCollapsed = prev.collapsed;
+      return isHorizontal && !isCollapsed ? kendo_svg_icons_1.caretAltLeftIcon : isHorizontal && isCollapsed ? kendo_svg_icons_1.caretAltRightIcon : !isHorizontal && !isCollapsed ? kendo_svg_icons_1.caretAltUpIcon : !isHorizontal && isCollapsed ? kendo_svg_icons_1.caretAltDownIcon : undefined;
+    },
     nextArrowName: function nextArrowName(isHorizontal) {
       var next = this.$props.next;
       var isCollapsed = next.collapsed;
       return isHorizontal && !isCollapsed ? 'caret-alt-right' : isHorizontal && isCollapsed ? 'caret-alt-left' : !isHorizontal && !isCollapsed ? 'caret-alt-down' : !isHorizontal && isCollapsed ? 'caret-alt-up' : '';
+    },
+    nextArrowSVG: function nextArrowSVG(isHorizontal) {
+      var next = this.$props.next;
+      var isCollapsed = next.collapsed;
+      return isHorizontal && !isCollapsed ? kendo_svg_icons_1.caretAltRightIcon : isHorizontal && isCollapsed ? kendo_svg_icons_1.caretAltLeftIcon : !isHorizontal && !isCollapsed ? kendo_svg_icons_1.caretAltDownIcon : !isHorizontal && isCollapsed ? kendo_svg_icons_1.caretAltUpIcon : undefined;
     }
   }
 };

package/dist/npm/splitter/SplitterPane.js

@@ -69,7 +69,11 @@ var SplitterPaneVue2 = {
     });
     return h("div", {
       style: style,
-      "class": paneClasses
+      "class": paneClasses,
+      role: 'group',
+      attrs: this.v3 ? undefined : {
+        role: 'group'
+      }
     }, [!collapsed || keepMounted ? content : undefined, overlay ? h("div", {
       "class": 'k-splitter-overlay k-overlay'
     }) : undefined]);

package/dist/npm/stepper/Step.js

@@ -168,8 +168,8 @@ var StepVue2 = {
       title: label ? label : undefined,
       attrs: this.v3 ? undefined : {
         title: label ? label : undefined,
-        tabindex: focused ? tabIndex : -1,
-        "aria-current": current ? 'step' : undefined,
+        tabIndex: tabIndex ? tabIndex : current ? 0 : -1,
+        "aria-current": current ? true : undefined,
         "aria-disabled": disabled || !allowClick || undefined,
         "aria-invalid": isValid !== undefined && !isValid || undefined
       },
@@ -179,8 +179,8 @@ var StepVue2 = {
         "focusin": this.handleFocus
       },
       onFocusin: this.handleFocus,
-      tabindex: focused ? tabIndex : -1,
-      "aria-current": current ? 'step' : undefined,
+      tabIndex: tabIndex ? tabIndex : current ? 0 : -1,
+      "aria-current": current ? true : undefined,
       "aria-disabled": disabled || !allowClick || undefined,
       "aria-invalid": isValid !== undefined && !isValid || undefined
     }, [!item ? [stepIndicator.call(this), stepLabel.call(this)] : defaultSlots])]);

package/dist/npm/stepper/Stepper.js

@@ -27,6 +27,8 @@ var kendo_vue_progressbars_1 = require("@progress/kendo-vue-progressbars");
 var contants_1 = require("./contants");
 var kendo_vue_common_2 = require("@progress/kendo-vue-common");
 var package_metadata_1 = require("../package-metadata");
+var main_1 = require("./messages/main");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 /**
  * @hidden
  */
@@ -35,6 +37,11 @@ var StepperVue2 = {
   model: {
     event: 'changemodel'
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   props: {
     animationDuration: {
       type: [Boolean, Number],
@@ -156,6 +163,8 @@ var StepperVue2 = {
       orientation = _a.orientation;
     var value = this.computedValue;
     var animation = typeof animationDuration === 'number' ? animationDuration : animationDuration !== false ? contants_1.DEFAULT_ANIMATION_DURATION : contants_1.NO_ANIMATION;
+    var localizationService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
+    var progressbarAriaLabelMessage = localizationService.toLanguageString(main_1.ariaLabel, main_1.messages[main_1.ariaLabel]);
     var steps = items && items.map(function (element, index) {
       var step = this.$props.item ? kendo_vue_common_2.templateRendering.call(this, this.$props.item, kendo_vue_common_2.getListeners.call(this)) : undefined;
       var stepDefaultRendering =
@@ -260,6 +269,7 @@ var StepperVue2 = {
           duration: animation
         },
         "aria-hidden": true,
+        "aria-label": progressbarAriaLabelMessage,
         max: this.numOfSteps - 1,
         labelVisible: false,
         orientation: orientation,
@@ -269,6 +279,7 @@ var StepperVue2 = {
         tabIndex: -1
       },
       "aria-hidden": true,
+      "aria-label": progressbarAriaLabelMessage,
       max: this.numOfSteps - 1,
       labelVisible: false,
       orientation: orientation,

package/dist/npm/stepper/messages/main.d.ts

@@ -2,9 +2,14 @@
  * @hidden
  */
 export declare const optionalText = "stepper.optionalText";
+/**
+ * @hidden
+ */
+export declare const ariaLabel = "stepper.ariaLabel";
 /**
  * @hidden
  */
 export declare const messages: {
     "stepper.optionalText": string;
+    "stepper.ariaLabel": string;
 };

package/dist/npm/stepper/messages/main.js

@@ -1,14 +1,19 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.messages = exports.optionalText = void 0;
+exports.messages = exports.ariaLabel = exports.optionalText = void 0;
 /**
  * @hidden
  */
 exports.optionalText = 'stepper.optionalText';
+/**
+ * @hidden
+ */
+exports.ariaLabel = 'stepper.ariaLabel';
 /**
  * @hidden
  */
 exports.messages = (_a = {},
     _a[exports.optionalText] = '(Optional)',
+    _a[exports.ariaLabel] = 'Progressbar',
     _a);

package/dist/npm/tilelayout/Tile.d.ts

@@ -12,6 +12,8 @@ export interface TileProps extends TileLayoutItem {
     index: number;
     defaultPosition: TileStrictPosition;
     ignoreDrag?: (event: any) => boolean;
+    tabIndex: number;
+    ariaDescribedBy: string;
 }
 /**
  * @hidden

package/dist/npm/tilelayout/Tile.js

@@ -52,7 +52,12 @@ var TileVue2 = {
     reorderable: {
       type: Boolean,
       default: true
-    }
+    },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    ariaDescribedBy: String
   },
   created: function created() {
     this.oldSize = {};
@@ -85,7 +90,8 @@ var TileVue2 = {
   },
   data: function data() {
     return {
-      rtl: false
+      rtl: false,
+      grabbed: false
     };
   },
   mounted: function mounted() {
@@ -198,7 +204,21 @@ var TileVue2 = {
       "class": this.wrapperClass,
       style: {
         height: '100%'
-      }
+      },
+      role: 'listitem',
+      attrs: this.v3 ? undefined : {
+        role: 'listitem',
+        tabIndex: this.$props.tabIndex,
+        "aria-keyshortcuts": 'Enter',
+        "aria-dropeffect": 'execute',
+        "aria-grabbed": this.grabbed ? true : false,
+        "aria-ariaDescribedBy": this.$props.ariaDescribedBy
+      },
+      tabIndex: this.$props.tabIndex,
+      "aria-keyshortcuts": 'Enter',
+      "aria-dropeffect": 'execute',
+      "aria-grabbed": this.grabbed ? true : false,
+      "aria-ariaDescribedBy": this.$props.ariaDescribedBy
     }, [defaultSlots, resizable && resizable !== 'vertical' && h(ResizeHandlers_1.ResizeHandlers, {
       onPress: this.handlePress,
       on: this.v3 ? undefined : {
@@ -324,6 +344,7 @@ var TileVue2 = {
       }
       dragElement.classList.remove('k-cursor-grab');
       dragElement.classList.add('k-cursor-grabbing');
+      this.grabbed = true;
       var rec = dragElement.getBoundingClientRect();
       this.pressXY = {
         x: e.clientX,
@@ -392,6 +413,7 @@ var TileVue2 = {
         dragElement.style.height = '100%';
         dragElement.classList.remove('k-cursor-grabbing');
         dragElement.classList.add('k-cursor-grab');
+        this.grabbed = false;
       }
     }
   }

package/dist/npm/tilelayout/TileLayout.js

@@ -120,12 +120,16 @@ var TileLayoutVue2 = {
       dir: this.$props.dir,
       attrs: this.v3 ? undefined : {
         dir: this.$props.dir,
-        id: this.$props.id
+        id: this.$props.id,
+        role: 'list'
       },
       "class": this.wrapperClass,
       style: tileLayoutStyles,
-      id: this.$props.id
+      id: this.$props.id,
+      role: 'list'
     }, [items.map(function (tile, index) {
+      var _this = this;
+      var tileTitleId = tile && tile.id || (0, kendo_vue_common_1.guid)();
       var item = kendo_vue_common_1.templateRendering.call(this, tile.item, kendo_vue_common_1.getListeners.call(this));
       var itemContent = kendo_vue_common_1.getTemplate.call(this, {
         h: h,
@@ -136,13 +140,20 @@ var TileLayoutVue2 = {
       var headerContent = kendo_vue_common_1.getTemplate.call(this, {
         h: h,
         template: header,
-        defaultRendering: null
+        defaultRendering: null,
+        additionalProps: {
+          id: tileTitleId,
+          headerText: tile.headerText
+        }
       });
       var body = kendo_vue_common_1.templateRendering.call(this, tile.body, kendo_vue_common_1.getListeners.call(this));
       var bodyContent = kendo_vue_common_1.getTemplate.call(this, {
         h: h,
         template: body,
-        defaultRendering: null
+        defaultRendering: null,
+        additionalProps: {
+          bodyText: tile.bodyText
+        }
       });
       return (
         // @ts-ignore function children
@@ -160,7 +171,9 @@ var TileLayoutVue2 = {
             reorderable: tile.reorderable,
             hintClass: tile.hintClass,
             hintStyle: tile.hintStyle,
-            ignoreDrag: this.$props.ignoreDrag
+            ignoreDrag: this.$props.ignoreDrag,
+            "aria-describedby": tileTitleId,
+            "tab-index": tile.tabIndex
           },
           index: index,
           resizable: tile.resizable,
@@ -169,19 +182,29 @@ var TileLayoutVue2 = {
           "class": tile.class,
           hintClass: tile.hintClass,
           hintStyle: tile.hintStyle,
-          ignoreDrag: this.$props.ignoreDrag
+          ignoreDrag: this.$props.ignoreDrag,
+          "aria-describedby": tileTitleId,
+          "tab-index": tile.tabIndex
         }, this.v3 ? function () {
           return [tile.item ? itemContent : [h("div", {
             "class": "k-tilelayout-item-header k-card-header"
           }, [tile.header ? headerContent : h("h5", {
-            "class": 'k-card-title'
+            "class": 'k-card-title',
+            id: tileTitleId,
+            attrs: _this.v3 ? undefined : {
+              id: tileTitleId
+            }
           }, [tile.headerText])]), h("div", {
             "class": 'k-tilelayout-item-body k-card-body'
           }, [tile.body ? bodyContent : tile.bodyText])]];
         } : [tile.item ? itemContent : [h("div", {
           "class": "k-tilelayout-item-header k-card-header"
         }, [tile.header ? headerContent : h("h5", {
-          "class": 'k-card-title'
+          "class": 'k-card-title',
+          id: tileTitleId,
+          attrs: _this.v3 ? undefined : {
+            id: tileTitleId
+          }
         }, [tile.headerText])]), h("div", {
           "class": 'k-tilelayout-item-body k-card-body'
         }, [tile.body ? bodyContent : tile.bodyText])]])

package/dist/npm/tilelayout/interfaces/main.d.ts

@@ -48,6 +48,10 @@ export interface TileLayoutItem {
      * ([see example]({% slug tiles_tilelayout %}#toc-custom-rendering)).
      */
     item?: any;
+    /**
+     * Specifies the id of each Tile if needed to be user-defined. By default the id is automatically generated.
+     */
+    id?: any;
     /**
      * Specifies if the user is allowed to resize the TileLayoutItem and in which direction
      * ([see example]({% slug tiles_tilelayout %}#toc-resizing)).
@@ -60,6 +64,10 @@ export interface TileLayoutItem {
      * If `reorderable` is not specified, the dragging functionality of the TileLayoutItem will be enabled.
      */
     reorderable?: boolean;
+    /**
+     * Specifies if the tabIndex of each TileLayout tile if the scenario requires it. Defaults to `0`.
+     */
+    tabIndex?: number;
 }
 /**
  * Specifies the position of each tile.