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

package/dist/npm/Grid.js

@@ -180,7 +180,9 @@ var GridVue2 = {
     this._footer = null;
     this.forceUpdateTimeout = undefined;
     this._gridId = (0, kendo_vue_common_1.guid)();
+    this._gridRoleElementId = (0, kendo_vue_common_1.guid)(); // Needed for aria-control accessibility attribute
   },
+
   mounted: function mounted() {
     this.setRefs();
     var rtl = (0, kendo_vue_common_1.isRtl)(this._element);
@@ -248,6 +250,38 @@ var GridVue2 = {
         }
       }
       return newCollapsed;
+    },
+    // Calculates the value of the ariaRowcount attribute. 
+    getAriaRowCount: function getAriaRowCount() {
+      var dataItems = this.$props.dataItems;
+      var totalRecords = this.$props.total !== undefined && this.$props.total || dataItems !== undefined && dataItems.total !== undefined && dataItems.total || dataItems !== undefined && dataItems.length !== undefined && dataItems.length;
+      if (this.$props.detail) {
+        return this._columnsMap.length + (this.$props.filterable ? 1 : 0) + totalRecords * 2 + (this._columns.some(function (c) {
+          return Boolean(c.footerCell);
+        }) ? 1 : 0);
+      } else if (!this.$props.pageable && this.$props.scrollable === 'scrollable') {
+        return undefined;
+      } else if (this.$props.groupable) {
+        return -1;
+      } else {
+        return this._columnsMap.length + (this.$props.filterable ? 1 : 0) + totalRecords + (this._columns.some(function (c) {
+          return Boolean(c.footerCell);
+        }) ? 1 : 0);
+      }
+    },
+    // Calculates the value of the ariaColcount attribute. 
+    // Based on the result of this method the ariaColIndex is rendered or not in the HeaderRow TH elements
+    getAriaColCount: function getAriaColCount() {
+      var columns = this.$props.columns;
+      var columnVirtualization = this.$props.columnVirtualization;
+      var columnsHasHiddenProperty = columns && columns.filter(function (col) {
+        return col.hidden !== undefined;
+      }).length !== 0;
+      if (columnVirtualization || columnsHasHiddenProperty) {
+        return columns.length !== 0 ? columns.length : -1;
+      } else {
+        return undefined;
+      }
     }
   },
   methods: {
@@ -664,7 +698,7 @@ var GridVue2 = {
         // position: 'sticky',
         index: 0,
         rightBorder: false,
-        ariaColumnIndex: 0,
+        ariaColumnIndex: 1,
         isAccessible: true
       };
       var columnIndexOffset = 0;
@@ -851,8 +885,10 @@ var GridVue2 = {
       group: this.$props.group || [],
       attrs: this.v3 ? undefined : {
         group: this.$props.group || [],
+        ariaControls: this._gridRoleElementId,
         resolveTitle: this.resolveTitle
       },
+      ariaControls: this._gridRoleElementId,
       onGroupChange: this.groupChangeHandler,
       on: this.v3 ? undefined : {
         "groupChange": this.groupChangeHandler,
@@ -901,16 +937,19 @@ var GridVue2 = {
             columnMenu: this.$props.columnMenu,
             columnMenuAnimate: this.$props.columnMenuAnimate,
             columns: this._columns,
+            columnsInitial: this.$props.columns,
             columnResize: this.columnResize,
             columnsMap: this._columnsMap,
             cellRender: this.$props.headerCellRender,
             isRtl: this.isRtl,
+            isColCountDefined: this.getAriaColCount !== undefined,
             filterRow: this.$props.filterable
             // @ts-ignore    
             && h(FilterRow_1.FilterRow, {
               grid: this,
               attrs: this.v3 ? undefined : {
                 grid: this,
+                size: this.$props.size,
                 columns: this._columns,
                 filter: this.$props.filter,
                 filterOperators: this.$props.filterOperators || filterCommon_1.operators,
@@ -919,6 +958,7 @@ var GridVue2 = {
                 isRtl: this.isRtl,
                 ariaRowIndex: this._columnsMap.length + 1
               },
+              size: this.$props.size,
               columns: this._columns,
               filter: this.$props.filter,
               filterOperators: this.$props.filterOperators || filterCommon_1.operators,
@@ -953,6 +993,7 @@ var GridVue2 = {
           columnMenuAnimate: this.$props.columnMenuAnimate,
           onSelectionchange: this.onHeaderSelectionChangeHandler,
           columns: this._columns,
+          columnsInitial: this.$props.columns,
           columnResize: this.columnResize,
           onPressHandler: this.dragLogic.pressHandler,
           onDragHandler: this.dragLogic.dragHandler,
@@ -960,10 +1001,12 @@ var GridVue2 = {
           columnsMap: this._columnsMap,
           cellRender: this.$props.headerCellRender,
           isRtl: this.isRtl,
+          isColCountDefined: this.getAriaColCount !== undefined,
           filterRow: this.$props.filterable && h(FilterRow_1.FilterRow, {
             grid: this,
             attrs: this.v3 ? undefined : {
               grid: this,
+              size: this.$props.size,
               columns: this._columns,
               filter: this.$props.filter,
               filterOperators: this.$props.filterOperators || filterCommon_1.operators,
@@ -972,6 +1015,7 @@ var GridVue2 = {
               isRtl: this.isRtl,
               ariaRowIndex: this._columnsMap.length + 1
             },
+            size: this.$props.size,
             columns: this._columns,
             filter: this.$props.filter,
             filterOperators: this.$props.filterOperators || filterCommon_1.operators,
@@ -1014,14 +1058,17 @@ var GridVue2 = {
           columnMenu: this.$props.columnMenu,
           columnMenuAnimate: this.$props.columnMenuAnimate,
           columns: this._columns,
+          columnsInitial: this.$props.columns,
           columnResize: this.columnResize,
           columnsMap: this._columnsMap,
           cellRender: this.$props.headerCellRender,
           isRtl: this.isRtl,
+          isColCountDefined: this.getAriaColCount !== undefined,
           filterRow: this.$props.filterable && h(FilterRow_1.FilterRow, {
             grid: this,
             attrs: this.v3 ? undefined : {
               grid: this,
+              size: this.$props.size,
               columns: this._columns,
               filter: this.$props.filter,
               filterOperators: this.$props.filterOperators || filterCommon_1.operators,
@@ -1030,6 +1077,7 @@ var GridVue2 = {
               isRtl: this.isRtl,
               ariaRowIndex: this._columnsMap.length + 1
             },
+            size: this.$props.size,
             columns: this._columns,
             filter: this.$props.filter,
             filterOperators: this.$props.filterOperators || filterCommon_1.operators,
@@ -1064,6 +1112,7 @@ var GridVue2 = {
         columnMenuAnimate: this.$props.columnMenuAnimate,
         onSelectionchange: this.onHeaderSelectionChangeHandler,
         columns: this._columns,
+        columnsInitial: this.$props.columns,
         columnResize: this.columnResize,
         onPressHandler: this.dragLogic.pressHandler,
         onDragHandler: this.dragLogic.dragHandler,
@@ -1071,10 +1120,12 @@ var GridVue2 = {
         columnsMap: this._columnsMap,
         cellRender: this.$props.headerCellRender,
         isRtl: this.isRtl,
+        isColCountDefined: this.getAriaColCount !== undefined,
         filterRow: this.$props.filterable && h(FilterRow_1.FilterRow, {
           grid: this,
           attrs: this.v3 ? undefined : {
             grid: this,
+            size: this.$props.size,
             columns: this._columns,
             filter: this.$props.filter,
             filterOperators: this.$props.filterOperators || filterCommon_1.operators,
@@ -1083,6 +1134,7 @@ var GridVue2 = {
             isRtl: this.isRtl,
             ariaRowIndex: this._columnsMap.length + 1
           },
+          size: this.$props.size,
           columns: this._columns,
           filter: this.$props.filter,
           filterOperators: this.$props.filterOperators || filterCommon_1.operators,
@@ -1122,12 +1174,14 @@ var GridVue2 = {
           isRtl: this.isRtl,
           attrs: this.v3 ? undefined : {
             isRtl: this.isRtl,
+            rowIndex: this.getAriaRowCount + 1,
             columns: this._columns.map(function (col) {
               return __assign(__assign({}, col), {
                 footerCell: kendo_vue_common_1.templateRendering.call(this, col.footerCell, kendo_vue_common_1.getListeners.call(this))
               });
             }, this)
           },
+          rowIndex: this.getAriaRowCount + 1,
           columns: this._columns.map(function (col) {
             return __assign(__assign({}, col), {
               footerCell: kendo_vue_common_1.templateRendering.call(this, col.footerCell, kendo_vue_common_1.getListeners.call(this))
@@ -1153,12 +1207,14 @@ var GridVue2 = {
         isRtl: this.isRtl,
         attrs: this.v3 ? undefined : {
           isRtl: this.isRtl,
+          rowIndex: this.getAriaRowCount + 1,
           columns: this._columns.map(function (col) {
             return __assign(__assign({}, col), {
               footerCell: kendo_vue_common_1.templateRendering.call(this, col.footerCell, kendo_vue_common_1.getListeners.call(this))
             });
           }, this)
         },
+        rowIndex: this.getAriaRowCount + 1,
         columns: this._columns.map(function (col) {
           return __assign(__assign({}, col), {
             footerCell: kendo_vue_common_1.templateRendering.call(this, col.footerCell, kendo_vue_common_1.getListeners.call(this))
@@ -1601,6 +1657,9 @@ var GridVue2 = {
         detailRowCount++;
         currentAriaRowIndex = absoluteIndex + rowIndexStart + detailRowCount;
       }
+      // The RowIndexes when in Detail Row template
+      var masterRowIndex = rowIndex * 2 + rowIndexStart;
+      var detailRowIndex = rowIndex * 2 + rowIndexStart + 1;
       return [
       // @ts-ignore function children
       h(GridRow_1.GridRow, {
@@ -1614,7 +1673,7 @@ var GridVue2 = {
           selectedField: this.$props.selectedField,
           rowHeight: this.$props.rowHeight,
           render: rowRenderFunction,
-          ariaRowIndex: currentAriaRowIndex,
+          ariaRowIndex: this.$props.detail ? masterRowIndex : currentAriaRowIndex,
           dataIndex: dataIndex
         },
         isAltRow: isAlt,
@@ -1637,23 +1696,23 @@ var GridVue2 = {
         selectedField: this.$props.selectedField,
         rowHeight: this.$props.rowHeight,
         render: rowRenderFunction,
-        ariaRowIndex: currentAriaRowIndex,
+        ariaRowIndex: this.$props.detail ? masterRowIndex : currentAriaRowIndex,
         dataIndex: dataIndex,
         "class": this.$props.rowClass ? this.$props.rowClass(item) : ''
       }, this.v3 ? function () {
         return [dataRow.call(_this2, item, rowId, dataIndex).row];
       } : [dataRow.call(_this2, item, rowId, dataIndex).row]), this.$props.detail && item.rowType === 'data' && item.expanded && h("tr", {
         key: detailRowId,
-        "class": isAlt ? 'k-detail-row k-alt' : 'k-detail-row',
+        "class": isAlt ? 'k-table-row k-table-alt-row k-detail-row k-alt' : 'k-table-row k-detail-row',
         style: {
           visibility: hidden(rowIndex) ? 'hidden' : ''
         },
         role: "row",
         attrs: this.v3 ? undefined : {
           role: "row",
-          "aria-rowindex": currentAriaRowIndex
+          ariaRowIndex: this.$props.detail ? detailRowIndex : currentAriaRowIndex
         },
-        "aria-rowindex": currentAriaRowIndex
+        ariaRowIndex: this.$props.detail ? detailRowIndex : currentAriaRowIndex
       }, [this.$props.group && this.$props.group.map(function (group, idx) {
         // @ts-ignore
         return h(GridGroupCell_1.GridGroupCell, {
@@ -1695,8 +1754,9 @@ var GridVue2 = {
         id: kendo_vue_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId("".concat(detailRowId, "-dcell"), idPrefix)
       })])];
     }, this) || h("tr", {
-      "class": "k-grid-norecords"
+      "class": "k-table-row k-grid-norecords"
     }, [h("td", {
+      "class": 'k-table-td',
       colspan: this._columns.filter(function (c) {
         return !c.children.length;
       }).length,
@@ -1718,14 +1778,16 @@ var GridVue2 = {
         "pagechange": this.pageChangeHandler
       },
       onPagechange: this.pageChangeHandler,
-      total: total,
+      size: this.$props.size,
       attrs: this.v3 ? undefined : {
+        size: this.$props.size,
         total: total,
         skip: this.vs.propsSkip || 0,
         pageSize: (this.$props.take !== undefined ? this.$props.take : this.$props.pageSize) || 10,
         messagesMap: main_2.pagerMessagesMap,
         settings: (0, kendo_vue_data_tools_1.normalize)(this.$props.pageable || {})
       },
+      total: total,
       skip: this.vs.propsSkip || 0,
       pageSize: (this.$props.take !== undefined ? this.$props.take : this.$props.pageSize) || 10,
       messagesMap: main_2.pagerMessagesMap,
@@ -1804,66 +1866,134 @@ var GridVue2 = {
             } : 'gridNav',
             currentData: _this3.currentData,
             attrs: _this3.v3 ? undefined : {
-              currentData: _this3.currentData,
-              role: "grid"
+              currentData: _this3.currentData
             },
             style: wrapperStyle,
-            role: "grid",
             "class": _this3.nonscrollableWrapperClass
           }, _this3.v3 ? function () {
-            return [toolbar, groupingPanel, h("table", {
+            return [toolbar, groupingPanel, h("div", {
+              role: "grid",
+              attrs: _this3.v3 ? undefined : {
+                role: "grid",
+                id: _this3._gridRoleElementId,
+                "aria-colcount": _this3.getAriaColCount,
+                "aria-rowcount": _this3.getAriaRowCount
+              },
+              "class": "k-grid-aria-root",
+              id: _this3._gridRoleElementId,
+              "aria-colcount": _this3.getAriaColCount,
+              "aria-rowcount": _this3.getAriaRowCount
+            }, [h("table", {
+              "class": 'k-table',
               style: {
                 tableLayout: 'fixed'
+              },
+              role: "none",
+              attrs: _this3.v3 ? undefined : {
+                role: "none"
               }
             }, [colGroups, header, h("tbody", {
+              "class": 'k-table-tbody',
               "data-keyboardnavbody": true,
               attrs: _this3.v3 ? undefined : {
                 "data-keyboardnavbody": true
               }
-            }, [body, loader]), footer]), pager, clues];
-          } : [toolbar, groupingPanel, h("table", {
+            }, [body, loader]), footer])]), pager, clues];
+          } : [toolbar, groupingPanel, h("div", {
+            role: "grid",
+            attrs: _this3.v3 ? undefined : {
+              role: "grid",
+              id: _this3._gridRoleElementId,
+              "aria-colcount": _this3.getAriaColCount,
+              "aria-rowcount": _this3.getAriaRowCount
+            },
+            "class": "k-grid-aria-root",
+            id: _this3._gridRoleElementId,
+            "aria-colcount": _this3.getAriaColCount,
+            "aria-rowcount": _this3.getAriaRowCount
+          }, [h("table", {
+            "class": 'k-table',
             style: {
               tableLayout: 'fixed'
+            },
+            role: "none",
+            attrs: _this3.v3 ? undefined : {
+              role: "none"
             }
           }, [colGroups, header, h("tbody", {
+            "class": 'k-table-tbody',
             "data-keyboardnavbody": true,
             attrs: _this3.v3 ? undefined : {
               "data-keyboardnavbody": true
             }
-          }, [body, loader]), footer]), pager, clues])];
+          }, [body, loader]), footer])]), pager, clues])];
         } : [h(GridNav_1.GridNav, {
           ref: _this3.v3 ? function (el) {
             _this.gridNavRef = el;
           } : 'gridNav',
           currentData: _this3.currentData,
           attrs: _this3.v3 ? undefined : {
-            currentData: _this3.currentData,
-            role: "grid"
+            currentData: _this3.currentData
           },
           style: wrapperStyle,
-          role: "grid",
           "class": _this3.nonscrollableWrapperClass
         }, _this3.v3 ? function () {
-          return [toolbar, groupingPanel, h("table", {
+          return [toolbar, groupingPanel, h("div", {
+            role: "grid",
+            attrs: _this3.v3 ? undefined : {
+              role: "grid",
+              id: _this3._gridRoleElementId,
+              "aria-colcount": _this3.getAriaColCount,
+              "aria-rowcount": _this3.getAriaRowCount
+            },
+            "class": "k-grid-aria-root",
+            id: _this3._gridRoleElementId,
+            "aria-colcount": _this3.getAriaColCount,
+            "aria-rowcount": _this3.getAriaRowCount
+          }, [h("table", {
+            "class": 'k-table',
             style: {
               tableLayout: 'fixed'
+            },
+            role: "none",
+            attrs: _this3.v3 ? undefined : {
+              role: "none"
             }
           }, [colGroups, header, h("tbody", {
+            "class": 'k-table-tbody',
             "data-keyboardnavbody": true,
             attrs: _this3.v3 ? undefined : {
               "data-keyboardnavbody": true
             }
-          }, [body, loader]), footer]), pager, clues];
-        } : [toolbar, groupingPanel, h("table", {
+          }, [body, loader]), footer])]), pager, clues];
+        } : [toolbar, groupingPanel, h("div", {
+          role: "grid",
+          attrs: _this3.v3 ? undefined : {
+            role: "grid",
+            id: _this3._gridRoleElementId,
+            "aria-colcount": _this3.getAriaColCount,
+            "aria-rowcount": _this3.getAriaRowCount
+          },
+          "class": "k-grid-aria-root",
+          id: _this3._gridRoleElementId,
+          "aria-colcount": _this3.getAriaColCount,
+          "aria-rowcount": _this3.getAriaRowCount
+        }, [h("table", {
+          "class": 'k-table',
           style: {
             tableLayout: 'fixed'
+          },
+          role: "none",
+          attrs: _this3.v3 ? undefined : {
+            role: "none"
           }
         }, [colGroups, header, h("tbody", {
+          "class": 'k-table-tbody',
           "data-keyboardnavbody": true,
           attrs: _this3.v3 ? undefined : {
             "data-keyboardnavbody": true
           }
-        }, [body, loader]), footer]), pager, clues])])
+        }, [body, loader]), footer])]), pager, clues])])
       );
     }
     return (
@@ -1885,14 +2015,24 @@ var GridVue2 = {
           } : 'gridNav',
           currentData: _this3.currentData,
           attrs: _this3.v3 ? undefined : {
-            currentData: _this3.currentData,
-            role: "grid"
+            currentData: _this3.currentData
           },
           style: wrapperStyle,
-          role: "grid",
           "class": _this3.scrollableWrapperClass
         }, _this3.v3 ? function () {
-          return [toolbar, groupingPanel, header, h("div", {
+          return [toolbar, groupingPanel, h("div", {
+            role: "grid",
+            attrs: _this3.v3 ? undefined : {
+              role: "grid",
+              id: _this3._gridRoleElementId,
+              "aria-colcount": _this3.getAriaColCount,
+              "aria-rowcount": _this3.getAriaRowCount
+            },
+            "class": "k-grid-aria-root",
+            id: _this3._gridRoleElementId,
+            "aria-colcount": _this3.getAriaColCount,
+            "aria-rowcount": _this3.getAriaRowCount
+          }, [header, h("div", {
             "class": "k-grid-container",
             role: "presentation",
             attrs: _this3.v3 ? undefined : {
@@ -1909,28 +2049,23 @@ var GridVue2 = {
             on: _this3.v3 ? undefined : {
               "scroll": _this3.scrollHandler
             }
-          }, [h("div", {
-            style: {
-              'position': 'relative'
-            }
           }, [h("table", {
-            role: "presentation",
+            role: "none",
             attrs: _this3.v3 ? undefined : {
-              role: "presentation",
-              tabindex: -1
+              role: "none"
             },
-            tabindex: -1,
             "class": _this3.gridTableClass,
             ref: (0, kendo_vue_common_1.setRef)(_this3, 'scrollTable')
           }, [colGroups, h("tbody", {
-            role: "presentation",
+            "class": 'k-table-tbody',
+            role: "rowgroup",
             attrs: _this3.v3 ? undefined : {
-              role: "presentation",
+              role: "rowgroup",
               "data-keyboardnavbody": true
             },
             "data-keyboardnavbody": true,
             ref: (0, kendo_vue_common_1.setRef)(_this3, 'scrollTableBody')
-          }, [body])])]), h("div", {
+          }, [body])]), h("div", {
             "class": "k-height-container",
             role: "presentation",
             attrs: _this3.v3 ? undefined : {
@@ -1940,8 +2075,20 @@ var GridVue2 = {
             style: _this3.$props.scrollable === 'virtual' ? {
               'height': _this3.vs.containerHeight + 'px'
             } : {}
-          })])]), loader]), footer, pager, clues];
-        } : [toolbar, groupingPanel, header, h("div", {
+          })])]), loader]), footer]), pager, clues];
+        } : [toolbar, groupingPanel, h("div", {
+          role: "grid",
+          attrs: _this3.v3 ? undefined : {
+            role: "grid",
+            id: _this3._gridRoleElementId,
+            "aria-colcount": _this3.getAriaColCount,
+            "aria-rowcount": _this3.getAriaRowCount
+          },
+          "class": "k-grid-aria-root",
+          id: _this3._gridRoleElementId,
+          "aria-colcount": _this3.getAriaColCount,
+          "aria-rowcount": _this3.getAriaRowCount
+        }, [header, h("div", {
           "class": "k-grid-container",
           role: "presentation",
           attrs: _this3.v3 ? undefined : {
@@ -1958,28 +2105,23 @@ var GridVue2 = {
           on: _this3.v3 ? undefined : {
             "scroll": _this3.scrollHandler
           }
-        }, [h("div", {
-          style: {
-            'position': 'relative'
-          }
         }, [h("table", {
-          role: "presentation",
+          role: "none",
           attrs: _this3.v3 ? undefined : {
-            role: "presentation",
-            tabindex: -1
+            role: "none"
           },
-          tabindex: -1,
           "class": _this3.gridTableClass,
           ref: (0, kendo_vue_common_1.setRef)(_this3, 'scrollTable')
         }, [colGroups, h("tbody", {
-          role: "presentation",
+          "class": 'k-table-tbody',
+          role: "rowgroup",
           attrs: _this3.v3 ? undefined : {
-            role: "presentation",
+            role: "rowgroup",
             "data-keyboardnavbody": true
           },
           "data-keyboardnavbody": true,
           ref: (0, kendo_vue_common_1.setRef)(_this3, 'scrollTableBody')
-        }, [body])])]), h("div", {
+        }, [body])]), h("div", {
           "class": "k-height-container",
           role: "presentation",
           attrs: _this3.v3 ? undefined : {
@@ -1989,21 +2131,31 @@ var GridVue2 = {
           style: _this3.$props.scrollable === 'virtual' ? {
             'height': _this3.vs.containerHeight + 'px'
           } : {}
-        })])]), loader]), footer, pager, clues])];
+        })])]), loader]), footer]), pager, clues])];
       } : [h(GridNav_1.GridNav, {
         ref: _this3.v3 ? function (el) {
           _this.gridNavRef = el;
         } : 'gridNav',
         currentData: _this3.currentData,
         attrs: _this3.v3 ? undefined : {
-          currentData: _this3.currentData,
-          role: "grid"
+          currentData: _this3.currentData
         },
         style: wrapperStyle,
-        role: "grid",
         "class": _this3.scrollableWrapperClass
       }, _this3.v3 ? function () {
-        return [toolbar, groupingPanel, header, h("div", {
+        return [toolbar, groupingPanel, h("div", {
+          role: "grid",
+          attrs: _this3.v3 ? undefined : {
+            role: "grid",
+            id: _this3._gridRoleElementId,
+            "aria-colcount": _this3.getAriaColCount,
+            "aria-rowcount": _this3.getAriaRowCount
+          },
+          "class": "k-grid-aria-root",
+          id: _this3._gridRoleElementId,
+          "aria-colcount": _this3.getAriaColCount,
+          "aria-rowcount": _this3.getAriaRowCount
+        }, [header, h("div", {
           "class": "k-grid-container",
           role: "presentation",
           attrs: _this3.v3 ? undefined : {
@@ -2020,28 +2172,23 @@ var GridVue2 = {
           on: _this3.v3 ? undefined : {
             "scroll": _this3.scrollHandler
           }
-        }, [h("div", {
-          style: {
-            'position': 'relative'
-          }
         }, [h("table", {
-          role: "presentation",
+          role: "none",
           attrs: _this3.v3 ? undefined : {
-            role: "presentation",
-            tabindex: -1
+            role: "none"
           },
-          tabindex: -1,
           "class": _this3.gridTableClass,
           ref: (0, kendo_vue_common_1.setRef)(_this3, 'scrollTable')
         }, [colGroups, h("tbody", {
-          role: "presentation",
+          "class": 'k-table-tbody',
+          role: "rowgroup",
           attrs: _this3.v3 ? undefined : {
-            role: "presentation",
+            role: "rowgroup",
             "data-keyboardnavbody": true
           },
           "data-keyboardnavbody": true,
           ref: (0, kendo_vue_common_1.setRef)(_this3, 'scrollTableBody')
-        }, [body])])]), h("div", {
+        }, [body])]), h("div", {
           "class": "k-height-container",
           role: "presentation",
           attrs: _this3.v3 ? undefined : {
@@ -2051,8 +2198,20 @@ var GridVue2 = {
           style: _this3.$props.scrollable === 'virtual' ? {
             'height': _this3.vs.containerHeight + 'px'
           } : {}
-        })])]), loader]), footer, pager, clues];
-      } : [toolbar, groupingPanel, header, h("div", {
+        })])]), loader]), footer]), pager, clues];
+      } : [toolbar, groupingPanel, h("div", {
+        role: "grid",
+        attrs: _this3.v3 ? undefined : {
+          role: "grid",
+          id: _this3._gridRoleElementId,
+          "aria-colcount": _this3.getAriaColCount,
+          "aria-rowcount": _this3.getAriaRowCount
+        },
+        "class": "k-grid-aria-root",
+        id: _this3._gridRoleElementId,
+        "aria-colcount": _this3.getAriaColCount,
+        "aria-rowcount": _this3.getAriaRowCount
+      }, [header, h("div", {
         "class": "k-grid-container",
         role: "presentation",
         attrs: _this3.v3 ? undefined : {
@@ -2069,28 +2228,23 @@ var GridVue2 = {
         on: _this3.v3 ? undefined : {
           "scroll": _this3.scrollHandler
         }
-      }, [h("div", {
-        style: {
-          'position': 'relative'
-        }
       }, [h("table", {
-        role: "presentation",
+        role: "none",
         attrs: _this3.v3 ? undefined : {
-          role: "presentation",
-          tabindex: -1
+          role: "none"
         },
-        tabindex: -1,
         "class": _this3.gridTableClass,
         ref: (0, kendo_vue_common_1.setRef)(_this3, 'scrollTable')
       }, [colGroups, h("tbody", {
-        role: "presentation",
+        "class": 'k-table-tbody',
+        role: "rowgroup",
         attrs: _this3.v3 ? undefined : {
-          role: "presentation",
+          role: "rowgroup",
           "data-keyboardnavbody": true
         },
         "data-keyboardnavbody": true,
         ref: (0, kendo_vue_common_1.setRef)(_this3, 'scrollTableBody')
-      }, [body])])]), h("div", {
+      }, [body])]), h("div", {
         "class": "k-height-container",
         role: "presentation",
         attrs: _this3.v3 ? undefined : {
@@ -2100,7 +2254,7 @@ var GridVue2 = {
         style: _this3.$props.scrollable === 'virtual' ? {
           'height': _this3.vs.containerHeight + 'px'
         } : {}
-      })])]), loader]), footer, pager, clues])])
+      })])]), loader]), footer]), pager, clues])])
     );
   }
 };