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

package/dist/npm/drag/GroupingIndicator.js

@@ -11,6 +11,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -79,16 +80,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: (0, kendo_vue_common_1.setRef)(_this, 'indicatorContainer')
-        }, [h("div", {
-          "class": "k-chip k-chip-lg k-rounded-md k-chip-solid k-chip-solid-base"
         }, [h(kendo_vue_common_1.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' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.sortDescSmallIcon
           },
-          "class": 'k-chip-icon'
+          "class": 'k-chip-icon',
+          icon: _this.$props.dir === 'asc' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.sortDescSmallIcon
         }), h("span", {
           "class": "k-chip-content",
           tabindex: -1,
@@ -99,9 +100,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",
@@ -114,22 +113,24 @@ var GroupingIndicatorVue2 = {
             "click": _this.groupRemove
           }
         }, [h(kendo_vue_common_1.Icon, {
-          name: "x",
+          name: "x-circle",
           attrs: _this.v3 ? undefined : {
-            name: "x"
-          }
-        })])])])])];
+            name: "x-circle",
+            icon: kendo_svg_icons_1.xCircleIcon
+          },
+          icon: kendo_svg_icons_1.xCircleIcon
+        })])])])];
       } : [h("div", {
-        "class": "k-indicator-container",
+        "class": "k-chip k-chip-md k-chip-solid k-chip-solid-base k-rounded-md",
         ref: (0, kendo_vue_common_1.setRef)(_this, 'indicatorContainer')
-      }, [h("div", {
-        "class": "k-chip k-chip-lg k-rounded-md k-chip-solid k-chip-solid-base"
       }, [h(kendo_vue_common_1.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' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.sortDescSmallIcon
         },
-        "class": 'k-chip-icon'
+        "class": 'k-chip-icon',
+        icon: _this.$props.dir === 'asc' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.sortDescSmallIcon
       }), h("span", {
         "class": "k-chip-content",
         tabindex: -1,
@@ -140,9 +141,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",
@@ -155,11 +154,13 @@ var GroupingIndicatorVue2 = {
           "click": _this.groupRemove
         }
       }, [h(kendo_vue_common_1.Icon, {
-        name: "x",
+        name: "x-circle",
         attrs: _this.v3 ? undefined : {
-          name: "x"
-        }
-      })])])])])])
+          name: "x-circle",
+          icon: kendo_svg_icons_1.xCircleIcon
+        },
+        icon: kendo_svg_icons_1.xCircleIcon
+      })])])])])
     );
   }
 };

package/dist/npm/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/npm/filterCommon.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cellOperatorChange = exports.cellBoolDropdownChange = exports.getFilterType = exports.getDefaultOperator = exports.cellInputChange = exports.defaultHideSecondFilter = exports.booleanFilterValues = exports.defaultBooleanOperator = exports.operatorMap = exports.IsUnaryFilter = exports.operators = exports.filterLogicList = void 0;
+exports.getAriaLabel = exports.cellOperatorChange = exports.cellBoolDropdownChange = exports.getFilterType = exports.getDefaultOperator = exports.cellInputChange = exports.defaultHideSecondFilter = exports.booleanFilterValues = exports.defaultBooleanOperator = exports.operatorMap = exports.IsUnaryFilter = exports.operators = exports.filterLogicList = void 0;
 var main_1 = require("./messages/main");
 /**
  * @hidden
@@ -164,3 +164,20 @@ var cellOperatorChange = function (operator, e, value) {
     return { value: value, operator: operator, event: e };
 };
 exports.cellOperatorChange = cellOperatorChange;
+/**
+ * @hidden
+ */
+var getAriaLabel = function (filterType, service) {
+    switch (filterType) {
+        case 'text':
+            return service.toLanguageString(main_1.textFilterAriaLabel, main_1.messages[main_1.textFilterAriaLabel]);
+        case 'numeric':
+            return service.toLanguageString(main_1.numericFilterAriaLabel, main_1.messages[main_1.numericFilterAriaLabel]);
+        case 'boolean':
+            return service.toLanguageString(main_1.booleanFilterAriaLabel, main_1.messages[main_1.booleanFilterAriaLabel]);
+        case 'date':
+            return service.toLanguageString(main_1.dateFilterAriaLabel, main_1.messages[main_1.dateFilterAriaLabel]);
+        default: return;
+    }
+};
+exports.getAriaLabel = getAriaLabel;

package/dist/npm/footer/Footer.js

@@ -91,7 +91,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", {
@@ -105,7 +109,13 @@ var FooterVue2 = {
       style: this.tableStyle
     }, [h("colgroup", {
       ref: (0, kendo_vue_common_1.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])])])]);
   }
 };
 exports.FooterVue2 = FooterVue2;

package/dist/npm/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/npm/footer/FooterRow.js

@@ -18,7 +18,8 @@ var FooterRowVue2 = {
   name: 'FooterRow',
   props: {
     isRtl: Boolean,
-    columns: Array
+    columns: Array,
+    rowIndex: Number
   },
   methods: {
     columnStyles: function columnStyles(column) {
@@ -44,7 +45,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 = kendo_vue_common_1.getTemplate.call(this, {
         h: h,
         template: column.footerCell,
@@ -59,17 +60,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
     }, [(0, main_1.footerColumns)(this.$props.columns).map(renderCell, this)]);
   }
 };

package/dist/npm/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/npm/header/FilterRow.js

@@ -29,7 +29,8 @@ var FilterRowVue2 = {
     sort: [Object, Array],
     cellRender: [String, Function, Object],
     isRtl: Boolean,
-    ariaRowIndex: Number
+    ariaRowIndex: Number,
+    size: String
   },
   inject: {
     kendoLocalizationService: {
@@ -37,15 +38,6 @@ var FilterRowVue2 = {
     }
   },
   methods: {
-    headerCellClassName: function headerCellClassName(field, locked) {
-      var result = "".concat(locked ? 'k-grid-header-sticky' : '');
-      if (this.$props.sort && this.$props.sort.filter(function (descriptor) {
-        return descriptor.field === field;
-      }).length > 0) {
-        result += ' k-sorted';
-      }
-      return result;
-    },
     setFilter: function setFilter(value, operator, field, e) {
       var filters = [];
       if (value !== '' && value !== null || operator !== '') {
@@ -100,7 +92,6 @@ var FilterRowVue2 = {
       })[0];
       return found ? found.operator : null;
     };
-    var filterCellProps;
     var serviceIndex = 0,
       index = -1;
     var filterCells = this.$props.columns.filter(function (c) {
@@ -111,6 +102,7 @@ var FilterRowVue2 = {
         _this.setFilter(e.value, e.operator, column.field, e);
       };
       var filterType = (0, filterCommon_1.getFilterType)(column.filter);
+      var ariaLabelFilter = column.field + ' ' + (0, filterCommon_1.getAriaLabel)(filterType, intl);
       // @ts-ignore
       var filterRender = h(GridFilterCell_1.GridFilterCell, {
         grid: this.$props.grid,
@@ -123,7 +115,9 @@ var FilterRowVue2 = {
           operators: (0, filterCommon_1.operatorMap)(this.$props.filterOperators[filterType] || [], intl),
           booleanValues: (0, filterCommon_1.operatorMap)(filterCommon_1.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,
@@ -136,7 +130,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 = {
@@ -152,43 +148,47 @@ var FilterRowVue2 = {
       } : {};
       var filterCell =
       // @ts-ignore function children
-      h(kendo_vue_data_tools_1.HeaderThElement, {
+      h(kendo_vue_data_tools_1.HeaderTdElement, {
         key: key,
-        columnId: kendo_vue_data_tools_1.tableKeyboardNavigationTools.getFilterColumnId(column.id),
+        role: 'gridcell',
         attrs: this.v3 ? undefined : {
+          role: 'gridcell',
           columnId: kendo_vue_data_tools_1.tableKeyboardNavigationTools.getFilterColumnId(column.id),
           navigatable: column.navigatable,
-          ariaLabel: ariaAttrs.ariaLabel,
-          ariaColumnIndex: ariaAttrs.ariaColumnIndex
+          ariaColumnIndex: ariaAttrs.ariaColumnIndex,
+          ariaLabel: ariaLabelFilter
         },
+        columnId: kendo_vue_data_tools_1.tableKeyboardNavigationTools.getFilterColumnId(column.id),
         navigatable: column.navigatable,
         style: style,
-        "class": (0, kendo_vue_common_1.classNames)('k-header', this.headerCellClassName(column.field, column.locked) || undefined),
-        ariaLabel: ariaAttrs.ariaLabel,
-        ariaColumnIndex: ariaAttrs.ariaColumnIndex
+        "class": (0, kendo_vue_common_1.classNames)('k-table-th', 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(kendo_vue_data_tools_1.HeaderThElement, {
+      h(kendo_vue_data_tools_1.HeaderTdElement, {
         key: key,
-        columnId: kendo_vue_data_tools_1.tableKeyboardNavigationTools.getFilterColumnId(column.id),
+        role: 'gridcell',
         attrs: this.v3 ? undefined : {
+          role: 'gridcell',
           columnId: kendo_vue_data_tools_1.tableKeyboardNavigationTools.getFilterColumnId(column.id),
           navigatable: column.navigatable,
-          ariaLabel: ariaAttrs.ariaLabel,
-          ariaColumnIndex: ariaAttrs.ariaColumnIndex
+          ariaColumnIndex: ariaAttrs.ariaColumnIndex,
+          ariaLabel: ariaLabelFilter
         },
+        columnId: kendo_vue_data_tools_1.tableKeyboardNavigationTools.getFilterColumnId(column.id),
         navigatable: column.navigatable,
         style: style,
-        "class": (0, kendo_vue_common_1.classNames)('k-header', this.headerCellClassName(column.field, column.locked) || undefined),
-        ariaLabel: ariaAttrs.ariaLabel,
-        ariaColumnIndex: ariaAttrs.ariaColumnIndex
+        "class": (0, kendo_vue_common_1.classNames)('k-table-th', 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/npm/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;

package/dist/npm/header/GroupPanel.js

@@ -19,7 +19,8 @@ var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var GroupPanelVue2 = {
   props: {
     group: Array,
-    resolveTitle: Function
+    resolveTitle: Function,
+    ariaControls: String
   },
   inject: {
     kendoLocalizationService: {
@@ -63,6 +64,7 @@ var GroupPanelVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var groupsProp = this.$props.group || [];
+    var ariaControls = this.$props.ariaControls;
     var groups = groupsProp.map(function (groupDesc, index) {
       var _this = this;
       return (
@@ -98,10 +100,21 @@ var GroupPanelVue2 = {
         })
       );
     }, this);
+    var groupHeaderAriaLabelValue = (0, kendo_vue_intl_1.provideLocalizationService)(this).toLanguageString(main_1.groupHeaderAriaLabel, main_1.messages[main_1.groupHeaderAriaLabel]);
     return h("div", {
-      "class": "k-grouping-header k-grouping-header-flex"
-    }, [groups, h("div", {
-      "class": "k-indicator-container"
+      "class": "k-grouping-header",
+      role: 'toolbar',
+      attrs: this.v3 ? undefined : {
+        role: 'toolbar',
+        "aria-label": groupHeaderAriaLabelValue,
+        "aria-controls": ariaControls
+      },
+      "aria-label": groupHeaderAriaLabelValue,
+      "aria-controls": ariaControls
+    }, [!!groups.length && h("div", {
+      "class": "k-chip-list k-chip-list-md"
+    }, [groups]), h("div", {
+      "class": "k-grouping-drop-container"
     }, [!groups.length && (0, kendo_vue_intl_1.provideLocalizationService)(this).toLanguageString(main_1.groupPanelEmpty, main_1.messages[main_1.groupPanelEmpty])])]);
   }
 };

package/dist/npm/header/Header.js

@@ -98,24 +98,16 @@ var HeaderVue2 = {
     }
     return h("div", {
       "class": this.wrapperClass,
-      style: this.divStyle,
-      role: "presentation",
-      attrs: this.v3 ? undefined : {
-        role: "presentation"
-      }
+      style: this.divStyle
     }, [h("div", {
       ref: (0, kendo_vue_common_1.setRef)(this, 'headerWrap'),
-      "class": "k-grid-header-wrap",
-      role: "presentation",
-      attrs: this.v3 ? undefined : {
-        role: "presentation"
-      }
+      "class": "k-grid-header-wrap"
     }, [h("table", {
       "class": this.tableClass,
       ref: (0, kendo_vue_common_1.setRef)(this, 'table'),
-      role: "presentation",
+      role: "none",
       attrs: this.v3 ? undefined : {
-        role: "presentation"
+        role: "none"
       }
     }, [h("colgroup", {
       ref: (0, kendo_vue_common_1.setRef)(this, 'colGroupHeader')

package/dist/npm/header/HeaderRow.d.ts

@@ -35,6 +35,8 @@ export interface HeaderRowProps extends ColumnDraggableProps {
     columnMenuAnimate?: boolean | PopupAnimation;
     onFilterChange?: Function;
     isRtl?: boolean;
+    isColCountDefined?: boolean;
+    columnsInitial?: ExtendedColumnProps[];
 }
 /**
  * @hidden

package/dist/npm/header/HeaderRow.js

@@ -16,6 +16,9 @@ var GridHeaderCell_1 = require("./GridHeaderCell");
 var ColumnMenu_1 = require("../columnMenu/ColumnMenu");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var kendo_vue_data_tools_1 = require("@progress/kendo-vue-data-tools"); // from '../../../datatools/src/main';
+var main_1 = require("../messages/main");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -68,11 +71,18 @@ var HeaderRowVue2 = {
         return true;
       }
     },
-    isRtl: Boolean
+    isRtl: Boolean,
+    isColCountDefined: Boolean,
+    // columnsInitial prop: 
+    // Needed for hidden column scenarios. By this value we can define correct aria-colindex attribute
+    columnsInitial: Array
   },
   inject: {
     onNavFocus: {
       default: kendo_vue_common_1.noop
+    },
+    kendoLocalizationService: {
+      default: null
     }
   },
   data: function data() {
@@ -133,7 +143,7 @@ var HeaderRowVue2 = {
     },
     cellClass: function cellClass(field, headerClassName, locked) {
       var customClass = headerClassName ? ' ' + headerClassName : '';
-      var result = "k-header ".concat(locked ? 'k-grid-header-sticky' : '') + customClass;
+      var result = "k-header" + (locked ? ' k-grid-header-sticky' : '') + customClass;
       if (this.$props.sort && this.$props.sort.filter(function (descriptor) {
         return descriptor.field === field;
       }).length > 0) {
@@ -173,6 +183,7 @@ var HeaderRowVue2 = {
     theadClasses: {
       get: function get() {
         return {
+          'k-table-thead': true,
           'k-grid-header': true
         };
       }
@@ -188,6 +199,10 @@ var HeaderRowVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
+    var localizationService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
+    var ariaLabelSortableColumn = localizationService.toLanguageString(main_1.sortableColumnAriaLabel, main_1.messages[main_1.sortableColumnAriaLabel]);
+    var ariaLabelAscendingSort = localizationService.toLanguageString(main_1.sortableColumnAscendingAriaLabel, main_1.messages[main_1.sortableColumnAscendingAriaLabel]);
+    var ariaLabelDescendingSort = localizationService.toLanguageString(main_1.sortableColumnDescendingAriaLabel, main_1.messages[main_1.sortableColumnDescendingAriaLabel]);
     this.serviceIndex = 0;
     this.index = -1;
     var cells = function cells(rowIndexes) {
@@ -204,14 +219,17 @@ var HeaderRowVue2 = {
           if (!this.$props.sort) {
             return null;
           }
+          var currentDir = iconSortIndex >= 0 ? this.$props.sort[iconSortIndex].dir : '';
           return iconSortIndex >= 0 && [h("span", {
             key: 1,
             "class": 'k-sort-icon'
           }, [h(kendo_vue_common_1.Icon, {
-            name: 'sort-' + this.$props.sort[iconSortIndex].dir + '-small',
+            name: 'sort-' + currentDir + '-small',
             attrs: this.v3 ? undefined : {
-              name: 'sort-' + this.$props.sort[iconSortIndex].dir + '-small'
-            }
+              name: 'sort-' + currentDir + '-small',
+              icon: currentDir === 'asc' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.sortDescSmallIcon
+            },
+            icon: currentDir === 'asc' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.sortDescSmallIcon
           })]), this.$props.sort.length > 1 && h("span", {
             key: 2,
             "class": 'k-sort-icon'
@@ -220,8 +238,8 @@ var HeaderRowVue2 = {
           }, [iconSortIndex + 1])])];
         };
         var sortIcon = sortIconRenderer.call(this, sortIndex);
-        var className = (column.kFirst ? 'k-first ' : '') + this.cellClass(column.field, column.headerClassName, column.locked);
         var columnMenu = column.columnMenu || column.columnMenu === false ? column.columnMenu : this.$props.columnMenu;
+        var className = (column.kFirst ? 'k-first ' : '') + this.cellClass(column.field, column.headerClassName, column.locked) + (columnMenu ? ' k-filterable' : '');
         var columnMenuRender = !columnMenu || typeof columnMenu === 'boolean' ? !!columnMenu : this.getTemplate(columnMenu);
         var style = column.left !== undefined ? !this.$props.isRtl ? {
           left: column.left + 'px',
@@ -230,32 +248,41 @@ var HeaderRowVue2 = {
           left: column.right + 'px',
           right: column.left + 'px'
         } : {};
+        var getAriaLabel = ariaSortMap[sortDir] === 'none' ? ariaLabelSortableColumn : ariaSortMap[sortDir] === 'ascending' ? ariaLabelAscendingSort : ariaLabelDescendingSort;
         var ariaAttrs = column.isAccessible ? {
           ariaSort: ariaSortMap[sortDir],
+          ariaLabel: getAriaLabel,
           role: 'columnheader',
-          ariaColumnIndex: column.ariaColumnIndex,
-          ariaSelected: false
+          ariaColumnIndex: this.$props.isColCountDefined ? this.$props.columnsInitial.findIndex(function (col) {
+            return col.field === column.field;
+          }) + 1 : undefined,
+          ariaSelected: false,
+          ariaHaspopup: columnMenu ? 'menu' : this.$props.filterable && column.filterable ? 'dialog' : undefined
         } : {
-          'role': 'presentation'
+          role: 'columnheader'
         };
         var key = column.declarationIndex >= 0 ? ++this.index : --this.serviceIndex;
         return (
           // @ts-ignore function children
           h(kendo_vue_data_tools_1.HeaderThElement, {
-            ariaSort: ariaAttrs.ariaSort,
+            ariaSort: sortable ? ariaAttrs.ariaSort : undefined,
             attrs: this.v3 ? undefined : {
-              ariaSort: ariaAttrs.ariaSort,
+              ariaSort: sortable ? ariaAttrs.ariaSort : undefined,
+              ariaLabel: sortable ? ariaAttrs.ariaLabel : undefined,
               role: ariaAttrs.role,
               ariaColumnIndex: ariaAttrs.ariaColumnIndex,
               ariaSelected: ariaAttrs.ariaSelected,
+              ariaHaspopup: ariaAttrs.ariaHaspopup,
               colSpan: column.colSpan,
               rowSpan: column.rowSpan,
               columnId: column.id,
               navigatable: column.navigatable
             },
+            ariaLabel: sortable ? ariaAttrs.ariaLabel : undefined,
             role: ariaAttrs.role,
             ariaColumnIndex: ariaAttrs.ariaColumnIndex,
             ariaSelected: ariaAttrs.ariaSelected,
+            ariaHaspopup: ariaAttrs.ariaHaspopup,
             key: key,
             colSpan: column.colSpan,
             rowSpan: column.rowSpan,
@@ -486,9 +513,9 @@ var HeaderRowVue2 = {
       }, this);
     };
     return h("thead", {
-      role: "presentation",
+      role: "rowgroup",
       attrs: this.v3 ? undefined : {
-        role: "presentation",
+        role: "rowgroup",
         "data-keyboardnavheader": true
       },
       "class": this.theadClasses,
@@ -510,10 +537,13 @@ var HeaderRowVue2 = {
       }, this.v3 ? function () {
         return [cells.call(_this3, rowIndexes)];
       } : [cells.call(_this3, rowIndexes)]) || h("tr", {
+        "class": 'k-table-row',
         role: 'row',
         attrs: this.v3 ? undefined : {
-          role: 'row'
-        }
+          role: 'row',
+          "aria-rowindex": this.columnsMap.length
+        },
+        "aria-rowindex": this.columnsMap.length
       }, [cells.call(this, rowIndexes)]);
     }, this), this.$props.filterRow]);
   }

package/dist/npm/interfaces/GridFilterCellProps.d.ts

@@ -65,4 +65,16 @@ export interface GridFilterCellProps {
      * The ariaLabel of the filter editor.
      */
     ariaLabel?: string;
+    /**
+     * Configures the `size` of the cell.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
 }