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

package/dist/es/columnMenu/GridColumnMenuFilter.js

@@ -37,6 +37,7 @@ import { messages, filterClearButton, filterSubmitButton, filterTitle } from '..
 import { GridColumnMenuFilterCell } from './GridColumnMenuFilterCell';
 import { ColumnMenuFilterOperators } from './GridColumnMenuFilterOperators';
 import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { filterIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -352,9 +353,11 @@ var GridColumnMenuFilterVue2 = {
           title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
           attrs: _this2.v3 ? undefined : {
             title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
-            iconClass: 'k-i-filter'
+            icon: 'filter',
+            svgIcon: filterIcon
           },
-          iconClass: 'k-i-filter',
+          icon: 'filter',
+          svgIcon: filterIcon,
           onMenuitemclick: _this2.onFilterExpand,
           on: _this2.v3 ? undefined : {
             "menuitemclick": _this2.onFilterExpand
@@ -641,9 +644,11 @@ var GridColumnMenuFilterVue2 = {
         title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
         attrs: _this2.v3 ? undefined : {
           title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
-          iconClass: 'k-i-filter'
+          icon: 'filter',
+          svgIcon: filterIcon
         },
-        iconClass: 'k-i-filter',
+        icon: 'filter',
+        svgIcon: filterIcon,
         onMenuitemclick: _this2.onFilterExpand,
         on: _this2.v3 ? undefined : {
           "menuitemclick": _this2.onFilterExpand

package/dist/es/columnMenu/GridColumnMenuItem.d.ts

@@ -3,6 +3,7 @@ declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
 };
+import { SVGIcon } from '@progress/kendo-svg-icons';
 /**
  * The props of the GridColumnMenuItem component.
  */
@@ -19,6 +20,14 @@ export interface GridColumnMenuItemProps {
      * The class of the icon rendered next to the title.
      */
     iconClass: string;
+    /**
+     * Defines the name for the icon.
+     */
+    icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * The selected state of the component.
      */

package/dist/es/columnMenu/GridColumnMenuItem.js

@@ -11,6 +11,8 @@ var GridColumnMenuItemVue2 = {
   props: {
     title: String,
     iconClass: String,
+    icon: String,
+    svgIcon: Object,
     selected: Boolean
   },
   methods: {
@@ -36,7 +38,9 @@ var GridColumnMenuItemVue2 = {
     var _a = this.$props,
       title = _a.title,
       iconClass = _a.iconClass,
-      selected = _a.selected;
+      selected = _a.selected,
+      icon = _a.icon,
+      svgIcon = _a.svgIcon;
     return h("div", {
       tabindex: 0,
       attrs: this.v3 ? undefined : {
@@ -50,7 +54,14 @@ var GridColumnMenuItemVue2 = {
       onClick: this.onClick,
       "class": "k-columnmenu-item ".concat(selected ? 'k-selected' : '')
     }, [iconClass && h(Icon, {
-      "class": "iconClass"
+      "class": iconClass
+    }), (icon || svgIcon) && h(Icon, {
+      name: icon,
+      attrs: this.v3 ? undefined : {
+        name: icon,
+        svg: svgIcon
+      },
+      svg: svgIcon
     }), title]);
   }
 };

package/dist/es/columnMenu/GridColumnMenuSort.js

@@ -9,6 +9,7 @@ import { GridColumnMenuItemGroup } from './GridColumnMenuItemGroup';
 import { normalize } from '../interfaces/GridSortSettings';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, sortAscending, sortDescending } from '../messages/main';
+import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 import { hasListener } from '@progress/kendo-vue-common';
 /**
  * @hidden
@@ -166,10 +167,12 @@ var GridColumnMenuSortVue2 = {
           title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
           attrs: _this.v3 ? undefined : {
             title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
-            iconClass: 'k-i-sort-asc-sm',
+            icon: 'sort-asc-small',
+            svgIcon: sortAscSmallIcon,
             selected: sortedAsc(currentSortIndex, sort)
           },
-          iconClass: 'k-i-sort-asc-sm',
+          icon: 'sort-asc-small',
+          svgIcon: sortAscSmallIcon,
           selected: sortedAsc(currentSortIndex, sort),
           onMenuitemclick: _this.onAscClick,
           on: _this.v3 ? undefined : {
@@ -181,10 +184,12 @@ var GridColumnMenuSortVue2 = {
           title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
           attrs: _this.v3 ? undefined : {
             title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
-            iconClass: 'k-i-sort-desc-sm',
+            icon: 'sort-desc-small',
+            svgIcon: sortDescSmallIcon,
             selected: sortedDesc(currentSortIndex, sort)
           },
-          iconClass: 'k-i-sort-desc-sm',
+          icon: 'sort-desc-small',
+          svgIcon: sortDescSmallIcon,
           selected: sortedDesc(currentSortIndex, sort),
           onMenuitemclick: _this.onDescClick,
           on: _this.v3 ? undefined : {
@@ -195,10 +200,12 @@ var GridColumnMenuSortVue2 = {
         title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
         attrs: _this.v3 ? undefined : {
           title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
-          iconClass: 'k-i-sort-asc-sm',
+          icon: 'sort-asc-small',
+          svgIcon: sortAscSmallIcon,
           selected: sortedAsc(currentSortIndex, sort)
         },
-        iconClass: 'k-i-sort-asc-sm',
+        icon: 'sort-asc-small',
+        svgIcon: sortAscSmallIcon,
         selected: sortedAsc(currentSortIndex, sort),
         onMenuitemclick: _this.onAscClick,
         on: _this.v3 ? undefined : {
@@ -208,10 +215,12 @@ var GridColumnMenuSortVue2 = {
         title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
         attrs: _this.v3 ? undefined : {
           title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
-          iconClass: 'k-i-sort-desc-sm',
+          icon: 'sort-desc-small',
+          svgIcon: sortDescSmallIcon,
           selected: sortedDesc(currentSortIndex, sort)
         },
-        iconClass: 'k-i-sort-desc-sm',
+        icon: 'sort-desc-small',
+        svgIcon: sortDescSmallIcon,
         selected: sortedDesc(currentSortIndex, sort),
         onMenuitemclick: _this.onDescClick,
         on: _this.v3 ? undefined : {

package/dist/es/drag/ColumnDraggable.js

@@ -42,6 +42,7 @@ var ColumnDraggableVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
+    var _this = this;
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
     return (
@@ -57,8 +58,20 @@ var ColumnDraggableVue2 = {
         onRelease: this.onRelease,
         ref: 'draggable'
       }, this.v3 ? function () {
-        return [h("tr", [defaultSlot])];
-      } : [h("tr", [defaultSlot])])
+        return [h("tr", {
+          "class": 'k-table-row',
+          role: 'row',
+          attrs: _this.v3 ? undefined : {
+            role: 'row'
+          }
+        }, [defaultSlot])];
+      } : [h("tr", {
+        "class": 'k-table-row',
+        role: 'row',
+        attrs: _this.v3 ? undefined : {
+          role: 'row'
+        }
+      }, [defaultSlot])])
     );
   }
 };

package/dist/es/drag/CommonDragLogic.d.ts

@@ -28,6 +28,7 @@ export declare class CommonDragLogic {
     dragHandler: (event: any, element: HTMLElement) => void;
     releaseHandler: (event: any) => void;
     private getColumnIndex;
+    private isTargetGroupingContainer;
     private getGroupIndex;
     private isValid;
     private updateDragElementClue;

package/dist/es/drag/CommonDragLogic.js

@@ -16,7 +16,7 @@ var CommonDragLogic = /** @class */ (function () {
         this.currentGroup = -1;
         this.groupPanelDivElement = null;
         this.refGroupPanelDiv = function (e) {
-            _this.groupPanelDivElement = e;
+            _this.groupPanelDivElement = e.children ? e.children[0] : e;
         };
         this.refDropElementClue = function (e) {
             _this.dropElementClue = e;
@@ -52,10 +52,12 @@ var CommonDragLogic = /** @class */ (function () {
                 return;
             }
             _this.currentColumn = _this.getColumnIndex(event, element);
-            _this.currentGroup = _this.getGroupIndex(event);
-            if (_this.groupPanelDivElement && _this.startGroup >= 0) {
-                _this.currentGroup = Math.min(_this.currentGroup, _this.groupPanelDivElement.children.length - 2);
-            }
+            var groupPanelChildren = _this.groupPanelDivElement.children;
+            _this.currentGroup = _this.isTargetGroupingContainer(event)
+                ? groupPanelChildren && groupPanelChildren.length
+                    ? groupPanelChildren.length - 1
+                    : 0
+                : _this.getGroupIndex(event);
             var invalidIndex = !_this.isValid();
             if (invalidIndex) {
                 _this.currentColumn = -1;
@@ -63,7 +65,9 @@ var CommonDragLogic = /** @class */ (function () {
             }
             var targetElement = (_this.currentColumn >= 0) ?
                 element.children[_this.columns[_this.currentColumn].index] :
-                _this.groupPanelDivElement && _this.groupPanelDivElement.children[_this.currentGroup];
+                _this.isTargetGroupingContainer(event)
+                    ? event.originalEvent.target
+                    : _this.groupPanelDivElement && _this.groupPanelDivElement.children[_this.currentGroup];
             _this.updateDragElementClue(event, element, targetElement, invalidIndex);
             _this.updateDropElementClue(event, element, targetElement, invalidIndex);
         };
@@ -118,6 +122,10 @@ var CommonDragLogic = /** @class */ (function () {
         }
         return -1;
     };
+    CommonDragLogic.prototype.isTargetGroupingContainer = function (event) {
+        var target = event.originalEvent.target;
+        return target.className.indexOf('k-grouping-drop-container') !== -1;
+    };
     CommonDragLogic.prototype.getGroupIndex = function (event) {
         return getIndex(event, this.groupPanelDivElement);
     };
@@ -162,15 +170,18 @@ var CommonDragLogic = /** @class */ (function () {
             return;
         }
         var rect = targetElement.getBoundingClientRect();
+        var groupElement = targetElement.closest('.k-grouping-header');
+        var rectParent = (groupElement || targetElement).getBoundingClientRect();
         var left = rect.left + event.pageX - event.clientX - 6;
-        if (this.currentColumn > this.startColumn || this.currentGroup > this.startGroup && this.startGroup !== -1) {
+        if (!this.isTargetGroupingContainer(event) && (this.currentColumn > this.startColumn
+            || this.currentGroup > this.startGroup && this.startGroup !== -1)) {
             left += rect.width;
         }
-        var top = rect.top + event.pageY - event.clientY;
+        var top = rectParent.top + event.pageY - event.clientY;
         this.dropElementClue.visible = true;
         this.dropElementClue.top = top;
         this.dropElementClue.left = left;
-        this.dropElementClue.height = (this.currentColumn >= 0) ? element.clientHeight : rect.height;
+        this.dropElementClue.height = (this.currentColumn >= 0) ? element.clientHeight : rectParent.height;
     };
     return CommonDragLogic;
 }());

package/dist/es/drag/GroupingIndicator.js

@@ -5,6 +5,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 import { Draggable, getRef, Icon, setRef } from '@progress/kendo-vue-common';
+import { sortAscSmallIcon, sortDescSmallIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -73,16 +74,16 @@ var GroupingIndicatorVue2 = {
         ref: 'draggable'
       }, this.v3 ? function () {
         return [h("div", {
-          "class": "k-indicator-container",
+          "class": "k-chip k-chip-md k-chip-solid k-chip-solid-base k-rounded-md",
           ref: setRef(_this, 'indicatorContainer')
-        }, [h("div", {
-          "class": "k-chip k-chip-lg k-rounded-md k-chip-solid k-chip-solid-base"
         }, [h(Icon, {
           name: 'sort-' + _this.$props.dir + '-small',
           attrs: _this.v3 ? undefined : {
-            name: 'sort-' + _this.$props.dir + '-small'
+            name: 'sort-' + _this.$props.dir + '-small',
+            icon: _this.$props.dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon
           },
-          "class": 'k-chip-icon'
+          "class": 'k-chip-icon',
+          icon: _this.$props.dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon
         }), h("span", {
           "class": "k-chip-content",
           tabindex: -1,
@@ -93,9 +94,7 @@ var GroupingIndicatorVue2 = {
           on: _this.v3 ? undefined : {
             "click": _this.sortChange
           }
-        }, [h("span", {
-          "class": "k-chip-text"
-        }, [_this.$props.title])]), h("span", {
+        }, [_this.$props.title]), h("span", {
           "class": "k-chip-actions"
         }, [h("span", {
           "class": "k-chip-action k-chip-remove-action",
@@ -108,22 +107,24 @@ var GroupingIndicatorVue2 = {
             "click": _this.groupRemove
           }
         }, [h(Icon, {
-          name: "x",
+          name: "x-circle",
           attrs: _this.v3 ? undefined : {
-            name: "x"
-          }
-        })])])])])];
+            name: "x-circle",
+            icon: xCircleIcon
+          },
+          icon: xCircleIcon
+        })])])])];
       } : [h("div", {
-        "class": "k-indicator-container",
+        "class": "k-chip k-chip-md k-chip-solid k-chip-solid-base k-rounded-md",
         ref: setRef(_this, 'indicatorContainer')
-      }, [h("div", {
-        "class": "k-chip k-chip-lg k-rounded-md k-chip-solid k-chip-solid-base"
       }, [h(Icon, {
         name: 'sort-' + _this.$props.dir + '-small',
         attrs: _this.v3 ? undefined : {
-          name: 'sort-' + _this.$props.dir + '-small'
+          name: 'sort-' + _this.$props.dir + '-small',
+          icon: _this.$props.dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon
         },
-        "class": 'k-chip-icon'
+        "class": 'k-chip-icon',
+        icon: _this.$props.dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon
       }), h("span", {
         "class": "k-chip-content",
         tabindex: -1,
@@ -134,9 +135,7 @@ var GroupingIndicatorVue2 = {
         on: _this.v3 ? undefined : {
           "click": _this.sortChange
         }
-      }, [h("span", {
-        "class": "k-chip-text"
-      }, [_this.$props.title])]), h("span", {
+      }, [_this.$props.title]), h("span", {
         "class": "k-chip-actions"
       }, [h("span", {
         "class": "k-chip-action k-chip-remove-action",
@@ -149,11 +148,13 @@ var GroupingIndicatorVue2 = {
           "click": _this.groupRemove
         }
       }, [h(Icon, {
-        name: "x",
+        name: "x-circle",
         attrs: _this.v3 ? undefined : {
-          name: "x"
-        }
-      })])])])])])
+          name: "x-circle",
+          icon: xCircleIcon
+        },
+        icon: xCircleIcon
+      })])])])])
     );
   }
 };

package/dist/es/filterCommon.d.ts

@@ -73,3 +73,7 @@ export declare const cellOperatorChange: (operator: any, e: any, value: any) =>
     operator: any;
     event: any;
 };
+/**
+ * @hidden
+ */
+export declare const getAriaLabel: (filterType: 'text' | 'numeric' | 'boolean' | 'date', service: any) => any;

package/dist/es/filterCommon.js

@@ -1,4 +1,4 @@
-import { messages } from './messages/main';
+import { messages, numericFilterAriaLabel, dateFilterAriaLabel, textFilterAriaLabel, booleanFilterAriaLabel } from './messages/main';
 /**
  * @hidden
  */
@@ -154,3 +154,19 @@ export var cellOperatorChange = function (operator, e, value) {
     }
     return { value: value, operator: operator, event: e };
 };
+/**
+ * @hidden
+ */
+export var getAriaLabel = function (filterType, service) {
+    switch (filterType) {
+        case 'text':
+            return service.toLanguageString(textFilterAriaLabel, messages[textFilterAriaLabel]);
+        case 'numeric':
+            return service.toLanguageString(numericFilterAriaLabel, messages[numericFilterAriaLabel]);
+        case 'boolean':
+            return service.toLanguageString(booleanFilterAriaLabel, messages[booleanFilterAriaLabel]);
+        case 'date':
+            return service.toLanguageString(dateFilterAriaLabel, messages[dateFilterAriaLabel]);
+        default: return;
+    }
+};

package/dist/es/footer/Footer.js

@@ -85,7 +85,11 @@ var FooterVue2 = {
     var h = gh || createElement;
     if (!this.$props.staticHeaders) {
       return h("tfoot", {
-        "class": "k-grid-footer"
+        "class": "k-table-tfoot k-grid-footer",
+        role: "rowgroup",
+        attrs: this.v3 ? undefined : {
+          role: "rowgroup"
+        }
       }, [this.$props.row]);
     }
     return h("div", {
@@ -99,7 +103,13 @@ var FooterVue2 = {
       style: this.tableStyle
     }, [h("colgroup", {
       ref: setRef(this, 'colGroupHeader')
-    }, [this.$props.cols]), h("tfoot", [this.$props.row])])])]);
+    }, [this.$props.cols]), h("tfoot", {
+      "class": 'k-table-tfoot',
+      role: "rowgroup",
+      attrs: this.v3 ? undefined : {
+        role: "rowgroup"
+      }
+    }, [this.$props.row])])])]);
   }
 };
 /**

package/dist/es/footer/FooterRow.d.ts

@@ -9,6 +9,7 @@ import { ExtendedColumnProps } from '../interfaces/ExtendedColumnProps';
 export interface FooterRowProps {
     columns: ExtendedColumnProps[];
     isRtl: boolean;
+    rowIndex: number;
 }
 export interface FooterRowMethods {
     [key: string]: any;

package/dist/es/footer/FooterRow.js

@@ -12,7 +12,8 @@ var FooterRowVue2 = {
   name: 'FooterRow',
   props: {
     isRtl: Boolean,
-    columns: Array
+    columns: Array,
+    rowIndex: Number
   },
   methods: {
     columnStyles: function columnStyles(column) {
@@ -38,7 +39,7 @@ var FooterRowVue2 = {
     var renderCell = function renderCell(column, index) {
       var footerCellRendering = null;
       var stickyClassName = column.locked && column.left !== undefined ? 'k-grid-footer-sticky' : '';
-      var tdClassName = column.footerClassName ? "".concat(column.footerClassName, " ").concat(stickyClassName) : stickyClassName;
+      var tdClassName = column.footerClassName ? "k-table-td ".concat(column.footerClassName, " ").concat(stickyClassName) : 'k-table-td' + stickyClassName;
       footerCellRendering = getTemplate.call(this, {
         h: h,
         template: column.footerCell,
@@ -53,17 +54,22 @@ var FooterRowVue2 = {
         key: index,
         colspan: column.colSpan !== 1 ? column.colSpan : undefined,
         attrs: this.v3 ? undefined : {
-          colspan: column.colSpan !== 1 ? column.colSpan : undefined
+          colspan: column.colSpan !== 1 ? column.colSpan : undefined,
+          role: 'gridcell'
         },
         style: this.columnStyles(column),
-        "class": tdClassName
+        "class": tdClassName,
+        role: 'gridcell'
       }, [footerCellRendering]);
     };
     return h("tr", {
+      "class": 'k-table-row',
       role: 'row',
       attrs: this.v3 ? undefined : {
-        role: 'row'
-      }
+        role: 'row',
+        "aria-rowIndex": this.$props.rowIndex
+      },
+      "aria-rowIndex": this.$props.rowIndex
     }, [footerColumns(this.$props.columns).map(renderCell, this)]);
   }
 };

package/dist/es/header/FilterRow.d.ts

@@ -18,6 +18,7 @@ export interface FilterRowProps {
     cellRender?: any;
     isRtl?: boolean;
     ariaRowIndex?: number;
+    size?: null | 'small' | 'medium' | 'large' | string;
 }
 /**
  * @hidden

package/dist/es/header/FilterRow.js

@@ -4,12 +4,11 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
-import { operatorMap, booleanFilterValues, getFilterType } from '../filterCommon';
+import { operatorMap, booleanFilterValues, getFilterType, getAriaLabel } from '../filterCommon';
 import { GridFilterCell } from '../cells/GridFilterCell';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { filterAriaLabel, messages } from '../messages/main';
-import { tableKeyboardNavigationTools as navigationTools, HeaderThElement } from '@progress/kendo-vue-data-tools';
-import { classNames } from '@progress/kendo-vue-common';
+import { tableKeyboardNavigationTools as navigationTools, HeaderTdElement } from '@progress/kendo-vue-data-tools';
 /**
  * @hidden
  */
@@ -23,7 +22,8 @@ var FilterRowVue2 = {
     sort: [Object, Array],
     cellRender: [String, Function, Object],
     isRtl: Boolean,
-    ariaRowIndex: Number
+    ariaRowIndex: Number,
+    size: String
   },
   inject: {
     kendoLocalizationService: {
@@ -32,7 +32,7 @@ var FilterRowVue2 = {
   },
   methods: {
     headerCellClassName: function headerCellClassName(field, locked) {
-      var result = "".concat(locked ? 'k-grid-header-sticky' : '');
+      var result = "k-table-th k-header" + (locked ? ' k-grid-header-sticky' : '');
       if (this.$props.sort && this.$props.sort.filter(function (descriptor) {
         return descriptor.field === field;
       }).length > 0) {
@@ -94,7 +94,6 @@ var FilterRowVue2 = {
       })[0];
       return found ? found.operator : null;
     };
-    var filterCellProps;
     var serviceIndex = 0,
       index = -1;
     var filterCells = this.$props.columns.filter(function (c) {
@@ -105,6 +104,7 @@ var FilterRowVue2 = {
         _this.setFilter(e.value, e.operator, column.field, e);
       };
       var filterType = getFilterType(column.filter);
+      var ariaLabelFilter = column.field + ' ' + getAriaLabel(filterType, intl);
       // @ts-ignore
       var filterRender = h(GridFilterCell, {
         grid: this.$props.grid,
@@ -117,7 +117,9 @@ var FilterRowVue2 = {
           operators: operatorMap(this.$props.filterOperators[filterType] || [], intl),
           booleanValues: operatorMap(booleanFilterValues, intl),
           filterType: filterType,
-          render: column.filterCell || this.$props.cellRender
+          render: column.filterCell || this.$props.cellRender,
+          ariaLabel: ariaLabelFilter,
+          size: this.$props.size
         },
         field: column.field,
         title: column.filterTitle,
@@ -130,7 +132,9 @@ var FilterRowVue2 = {
         on: this.v3 ? undefined : {
           "change": onChangeFn
         },
-        render: column.filterCell || this.$props.cellRender
+        render: column.filterCell || this.$props.cellRender,
+        ariaLabel: ariaLabelFilter,
+        size: this.$props.size
       });
       var key = column.declarationIndex >= 0 ? ++index : --serviceIndex;
       var ariaAttrs = {
@@ -146,43 +150,47 @@ var FilterRowVue2 = {
       } : {};
       var filterCell =
       // @ts-ignore function children
-      h(HeaderThElement, {
+      h(HeaderTdElement, {
         key: key,
-        columnId: navigationTools.getFilterColumnId(column.id),
+        role: 'gridcell',
         attrs: this.v3 ? undefined : {
+          role: 'gridcell',
           columnId: navigationTools.getFilterColumnId(column.id),
           navigatable: column.navigatable,
-          ariaLabel: ariaAttrs.ariaLabel,
-          ariaColumnIndex: ariaAttrs.ariaColumnIndex
+          ariaColumnIndex: ariaAttrs.ariaColumnIndex,
+          ariaLabel: ariaLabelFilter
         },
+        columnId: navigationTools.getFilterColumnId(column.id),
         navigatable: column.navigatable,
         style: style,
-        "class": classNames('k-header', this.headerCellClassName(column.field, column.locked) || undefined),
-        ariaLabel: ariaAttrs.ariaLabel,
-        ariaColumnIndex: ariaAttrs.ariaColumnIndex
+        "class": this.headerCellClassName(column.field, column.locked) || undefined,
+        ariaColumnIndex: ariaAttrs.ariaColumnIndex,
+        ariaLabel: ariaLabelFilter
       }, this.v3 ? function () {
         return [filterRender];
       } : [filterRender]);
       return column.filterable && filterCell ||
       // @ts-ignore function children
-      h(HeaderThElement, {
+      h(HeaderTdElement, {
         key: key,
-        columnId: navigationTools.getFilterColumnId(column.id),
+        role: 'gridcell',
         attrs: this.v3 ? undefined : {
+          role: 'gridcell',
           columnId: navigationTools.getFilterColumnId(column.id),
           navigatable: column.navigatable,
-          ariaLabel: ariaAttrs.ariaLabel,
-          ariaColumnIndex: ariaAttrs.ariaColumnIndex
+          ariaColumnIndex: ariaAttrs.ariaColumnIndex,
+          ariaLabel: ariaLabelFilter
         },
+        columnId: navigationTools.getFilterColumnId(column.id),
         navigatable: column.navigatable,
         style: style,
-        "class": classNames('k-header', this.headerCellClassName(column.field, column.locked) || undefined),
-        ariaLabel: ariaAttrs.ariaLabel,
-        ariaColumnIndex: ariaAttrs.ariaColumnIndex
+        "class": this.headerCellClassName(column.field, column.locked) || undefined,
+        ariaColumnIndex: ariaAttrs.ariaColumnIndex,
+        ariaLabel: ariaLabelFilter
       });
     }, this);
     return h("tr", {
-      "class": "k-filter-row",
+      "class": "k-table-row k-filter-row",
       "aria-rowindex": this.ariaRowIndex,
       attrs: this.v3 ? undefined : {
         "aria-rowindex": this.ariaRowIndex,

package/dist/es/header/GroupPanel.d.ts

@@ -11,6 +11,7 @@ declare type DefaultMethods<V> = {
 export interface GroupPanelProps extends ColumnDraggableProps {
     ref?: any;
     group: GroupDescriptor[];
+    ariaControls: String;
     onGroupChange?: (groups: GroupDescriptor[], event: any) => void;
     resolveTitle: (field: string) => string;
     onPressHandler?: (draggableEvent: any, element: HTMLElement) => void;