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

package/dist/esm/Grid.js

@@ -174,7 +174,9 @@ var GridVue2 = {
     this._footer = null;
     this.forceUpdateTimeout = undefined;
     this._gridId = guid();
+    this._gridRoleElementId = guid(); // Needed for aria-control accessibility attribute
   },
+
   mounted: function mounted() {
     this.setRefs();
     var rtl = isRtl(this._element);
@@ -242,6 +244,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: {
@@ -658,7 +692,7 @@ var GridVue2 = {
         // position: 'sticky',
         index: 0,
         rightBorder: false,
-        ariaColumnIndex: 0,
+        ariaColumnIndex: 1,
         isAccessible: true
       };
       var columnIndexOffset = 0;
@@ -845,8 +879,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,
@@ -895,16 +931,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, {
               grid: this,
               attrs: this.v3 ? undefined : {
                 grid: this,
+                size: this.$props.size,
                 columns: this._columns,
                 filter: this.$props.filter,
                 filterOperators: this.$props.filterOperators || operators,
@@ -913,6 +952,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 || operators,
@@ -947,6 +987,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,
@@ -954,10 +995,12 @@ var GridVue2 = {
           columnsMap: this._columnsMap,
           cellRender: this.$props.headerCellRender,
           isRtl: this.isRtl,
+          isColCountDefined: this.getAriaColCount !== undefined,
           filterRow: this.$props.filterable && h(FilterRow, {
             grid: this,
             attrs: this.v3 ? undefined : {
               grid: this,
+              size: this.$props.size,
               columns: this._columns,
               filter: this.$props.filter,
               filterOperators: this.$props.filterOperators || operators,
@@ -966,6 +1009,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 || operators,
@@ -1008,14 +1052,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, {
             grid: this,
             attrs: this.v3 ? undefined : {
               grid: this,
+              size: this.$props.size,
               columns: this._columns,
               filter: this.$props.filter,
               filterOperators: this.$props.filterOperators || operators,
@@ -1024,6 +1071,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 || operators,
@@ -1058,6 +1106,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,
@@ -1065,10 +1114,12 @@ var GridVue2 = {
         columnsMap: this._columnsMap,
         cellRender: this.$props.headerCellRender,
         isRtl: this.isRtl,
+        isColCountDefined: this.getAriaColCount !== undefined,
         filterRow: this.$props.filterable && h(FilterRow, {
           grid: this,
           attrs: this.v3 ? undefined : {
             grid: this,
+            size: this.$props.size,
             columns: this._columns,
             filter: this.$props.filter,
             filterOperators: this.$props.filterOperators || operators,
@@ -1077,6 +1128,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 || operators,
@@ -1116,12 +1168,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: templateRendering.call(this, col.footerCell, getListeners.call(this))
               });
             }, this)
           },
+          rowIndex: this.getAriaRowCount + 1,
           columns: this._columns.map(function (col) {
             return __assign(__assign({}, col), {
               footerCell: templateRendering.call(this, col.footerCell, getListeners.call(this))
@@ -1147,12 +1201,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: templateRendering.call(this, col.footerCell, getListeners.call(this))
             });
           }, this)
         },
+        rowIndex: this.getAriaRowCount + 1,
         columns: this._columns.map(function (col) {
           return __assign(__assign({}, col), {
             footerCell: templateRendering.call(this, col.footerCell, getListeners.call(this))
@@ -1595,6 +1651,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, {
@@ -1608,7 +1667,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,
@@ -1631,23 +1690,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, {
@@ -1689,8 +1748,9 @@ var GridVue2 = {
         id: navigationTools.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,
@@ -1712,14 +1772,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: pagerMessagesMap,
         settings: normalize(this.$props.pageable || {})
       },
+      total: total,
       skip: this.vs.propsSkip || 0,
       pageSize: (this.$props.take !== undefined ? this.$props.take : this.$props.pageSize) || 10,
       messagesMap: pagerMessagesMap,
@@ -1798,66 +1860,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, {
           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 (
@@ -1879,14 +2009,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 : {
@@ -1903,28 +2043,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: 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: setRef(_this3, 'scrollTableBody')
-          }, [body])])]), h("div", {
+          }, [body])]), h("div", {
             "class": "k-height-container",
             role: "presentation",
             attrs: _this3.v3 ? undefined : {
@@ -1934,8 +2069,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 : {
@@ -1952,28 +2099,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: 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: setRef(_this3, 'scrollTableBody')
-        }, [body])])]), h("div", {
+        }, [body])]), h("div", {
           "class": "k-height-container",
           role: "presentation",
           attrs: _this3.v3 ? undefined : {
@@ -1983,21 +2125,31 @@ var GridVue2 = {
           style: _this3.$props.scrollable === 'virtual' ? {
             'height': _this3.vs.containerHeight + 'px'
           } : {}
-        })])]), loader]), footer, pager, clues])];
+        })])]), loader]), footer]), pager, clues])];
       } : [h(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 : {
@@ -2014,28 +2166,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: 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: setRef(_this3, 'scrollTableBody')
-        }, [body])])]), h("div", {
+        }, [body])]), h("div", {
           "class": "k-height-container",
           role: "presentation",
           attrs: _this3.v3 ? undefined : {
@@ -2045,8 +2192,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 : {
@@ -2063,28 +2222,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: 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: setRef(_this3, 'scrollTableBody')
-      }, [body])])]), h("div", {
+      }, [body])]), h("div", {
         "class": "k-height-container",
         role: "presentation",
         attrs: _this3.v3 ? undefined : {
@@ -2094,7 +2248,7 @@ var GridVue2 = {
         style: _this3.$props.scrollable === 'virtual' ? {
           'height': _this3.vs.containerHeight + 'px'
         } : {}
-      })])]), loader]), footer, pager, clues])])
+      })])]), loader]), footer]), pager, clues])])
     );
   }
 };