@urbanos/react-discovery-ui 2.1.49 → 2.1.50

package/lib/components/data-view/data-view.js

@@ -142,6 +142,9 @@ var DataTable = function DataTable(_ref) {
       col: col
     });
   };
+  var dataRows = table.getRowModel().rows;
+  var pageIndex = pagination.pageIndex;
+  var pageSize = pagination.pageSize;
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: '400px',
@@ -149,51 +152,68 @@ var DataTable = function DataTable(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement("table", {
     ref: tableRef,
+    role: "grid",
+    "aria-rowcount": dataRows.length + 1,
+    "aria-colcount": columns.length,
     style: {
       minWidth: "".concat(columns.length * 120, "px")
     }
   }, /*#__PURE__*/_react.default.createElement("caption", null, datasetName ? "".concat(datasetName, " Dataset Preview") : 'Dataset Preview'), /*#__PURE__*/_react.default.createElement("thead", null, table.getHeaderGroups().map(function (headerGroup) {
     return /*#__PURE__*/_react.default.createElement("tr", {
-      key: headerGroup.id
+      key: headerGroup.id,
+      role: "row",
+      "aria-rowindex": 1
     }, headerGroup.headers.map(function (header, colIndex) {
       var _header$column$column;
       return /*#__PURE__*/_react.default.createElement("th", {
         key: header.id,
+        role: "columnheader",
         scope: "col",
         tabIndex: tabIndex(0, colIndex),
         "data-row": 0,
         "data-col": colIndex,
+        "aria-colindex": colIndex + 1,
         onFocus: function onFocus() {
           return onCellFocus(0, colIndex);
         },
         className: ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.headerClassName) || 'table-header'
       }, header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()));
     }));
-  })), /*#__PURE__*/_react.default.createElement("tbody", null, table.getRowModel().rows.length === 0 ? /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+  })), /*#__PURE__*/_react.default.createElement("tbody", null, dataRows.length === 0 ? /*#__PURE__*/_react.default.createElement("tr", {
+    role: "row"
+  }, /*#__PURE__*/_react.default.createElement("td", {
+    role: "gridcell",
     colSpan: columns.length,
     className: "no-data-message"
-  }, "No rows found")) : table.getRowModel().rows.map(function (row, rowIndex) {
+  }, "No rows found")) : dataRows.map(function (row, rowIndex) {
     var tableRow = rowIndex + 1;
+    var ariaRowIndex = pageIndex * pageSize + rowIndex + 2; // +1 for header, +1 for 1-based
     return /*#__PURE__*/_react.default.createElement("tr", {
       key: row.id,
+      role: "row",
+      "aria-rowindex": ariaRowIndex,
       className: rowIndex % 2 === 0 ? 'striped-row' : ''
     }, row.getVisibleCells().map(function (cell, colIndex) {
       var content = (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
       return colIndex === 0 ? /*#__PURE__*/_react.default.createElement("th", {
         key: cell.id,
+        role: "rowheader",
         scope: "row",
         tabIndex: tabIndex(tableRow, colIndex),
         "data-row": tableRow,
         "data-col": colIndex,
+        "aria-colindex": 1,
         onFocus: function onFocus() {
           return onCellFocus(tableRow, colIndex);
         },
         className: "row-header"
       }, content) : /*#__PURE__*/_react.default.createElement("td", {
         key: cell.id,
+        role: "gridcell",
         tabIndex: tabIndex(tableRow, colIndex),
         "data-row": tableRow,
         "data-col": colIndex,
+        "aria-colindex": colIndex + 1,
         onFocus: function onFocus() {
           return onCellFocus(tableRow, colIndex);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbanos/react-discovery-ui",
-  "version": "2.1.49",
+  "version": "2.1.50",
   "description": "React component for dataset discovery UI",
   "main": "./lib/ReactDiscoveryUI.js",
   "repository": {