wcs-core 4.2.0 → 5.0.0

package/dist/cjs/wcs-grid.cjs.entry.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
-const gridPagination = require('./grid-pagination-4b55c908.js');
-const isEqual = require('./isEqual-9ea7ee49.js');
+const index = require('./index-749d999e.js');
+const gridPagination = require('./grid-pagination-3511fdfa.js');
+const keyboardEvent = require('./keyboard-event-1cad4036.js');
+require('./helpers-6280db6e.js');
 
 function getSortOrderInteger(sortOrder) {
   switch (sortOrder) {
@@ -111,7 +112,7 @@ var symbolTag$2 = '[object Symbol]';
  */
 function isSymbol(value) {
   return typeof value == 'symbol' ||
-    (isEqual.isObjectLike(value) && isEqual.baseGetTag(value) == symbolTag$2);
+    (keyboardEvent.isObjectLike(value) && keyboardEvent.baseGetTag(value) == symbolTag$2);
 }
 
 /**
@@ -138,7 +139,7 @@ function arrayMap(array, iteratee) {
 var INFINITY$1 = 1 / 0;
 
 /** Used to convert symbols to primitives and strings. */
-var symbolProto$1 = isEqual.Symbol ? isEqual.Symbol.prototype : undefined,
+var symbolProto$1 = keyboardEvent.Symbol ? keyboardEvent.Symbol.prototype : undefined,
     symbolToString = symbolProto$1 ? symbolProto$1.toString : undefined;
 
 /**
@@ -154,7 +155,7 @@ function baseToString(value) {
   if (typeof value == 'string') {
     return value;
   }
-  if (isEqual.isArray(value)) {
+  if (keyboardEvent.isArray(value)) {
     // Recursively convert values (susceptible to call stack limits).
     return arrayMap(value, baseToString) + '';
   }
@@ -179,7 +180,7 @@ var objectCreate = Object.create;
 var baseCreate = (function() {
   function object() {}
   return function(proto) {
-    if (!isEqual.isObject(proto)) {
+    if (!keyboardEvent.isObject(proto)) {
       return {};
     }
     if (objectCreate) {
@@ -213,7 +214,7 @@ function copyArray(source, array) {
 
 var defineProperty = (function() {
   try {
-    var func = isEqual.getNative(Object, 'defineProperty');
+    var func = keyboardEvent.getNative(Object, 'defineProperty');
     func({}, '', {});
     return func;
   } catch (e) {}
@@ -280,7 +281,7 @@ var hasOwnProperty$2 = objectProto$2.hasOwnProperty;
  */
 function assignValue(object, key, value) {
   var objValue = object[key];
-  if (!(hasOwnProperty$2.call(object, key) && isEqual.eq(objValue, value)) ||
+  if (!(hasOwnProperty$2.call(object, key) && keyboardEvent.eq(objValue, value)) ||
       (value === undefined && !(key in object))) {
     baseAssignValue(object, key, value);
   }
@@ -355,10 +356,10 @@ var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
  * @returns {Array} Returns the array of property names.
  */
 function baseKeysIn(object) {
-  if (!isEqual.isObject(object)) {
+  if (!keyboardEvent.isObject(object)) {
     return nativeKeysIn(object);
   }
-  var isProto = isEqual.isPrototype(object),
+  var isProto = keyboardEvent.isPrototype(object),
       result = [];
 
   for (var key in object) {
@@ -393,7 +394,7 @@ function baseKeysIn(object) {
  * // => ['a', 'b', 'c'] (iteration order is not guaranteed)
  */
 function keysIn(object) {
-  return isEqual.isArrayLike(object) ? isEqual.arrayLikeKeys(object, true) : baseKeysIn(object);
+  return keyboardEvent.isArrayLike(object) ? keyboardEvent.arrayLikeKeys(object, true) : baseKeysIn(object);
 }
 
 /** Used to match property names within property paths. */
@@ -409,7 +410,7 @@ var reIsDeepProp = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,
  * @returns {boolean} Returns `true` if `value` is a property name, else `false`.
  */
 function isKey(value, object) {
-  if (isEqual.isArray(value)) {
+  if (keyboardEvent.isArray(value)) {
     return false;
   }
   var type = typeof value;
@@ -484,12 +485,12 @@ function memoize(func, resolver) {
     memoized.cache = cache.set(key, result) || cache;
     return result;
   };
-  memoized.cache = new (memoize.Cache || isEqual.MapCache);
+  memoized.cache = new (memoize.Cache || keyboardEvent.MapCache);
   return memoized;
 }
 
 // Expose `MapCache`.
-memoize.Cache = isEqual.MapCache;
+memoize.Cache = keyboardEvent.MapCache;
 
 /** Used as the maximum memoize cache size. */
 var MAX_MEMOIZE_SIZE = 500;
@@ -572,7 +573,7 @@ function toString(value) {
  * @returns {Array} Returns the cast property path array.
  */
 function castPath(value, object) {
-  if (isEqual.isArray(value)) {
+  if (keyboardEvent.isArray(value)) {
     return value;
   }
   return isKey(value, object) ? [value] : stringToPath(toString(value));
@@ -647,7 +648,7 @@ function get(object, path, defaultValue) {
 }
 
 /** Built-in value references. */
-var getPrototype = isEqual.overArg(Object.getPrototypeOf, Object);
+var getPrototype = keyboardEvent.overArg(Object.getPrototypeOf, Object);
 
 /**
  * The base implementation of `_.assign` without support for multiple sources
@@ -659,7 +660,7 @@ var getPrototype = isEqual.overArg(Object.getPrototypeOf, Object);
  * @returns {Object} Returns `object`.
  */
 function baseAssign(object, source) {
-  return object && copyObject(source, isEqual.keys(source), object);
+  return object && copyObject(source, keyboardEvent.keys(source), object);
 }
 
 /**
@@ -685,7 +686,7 @@ var freeModule = freeExports && typeof module == 'object' && module && !module.n
 var moduleExports = freeModule && freeModule.exports === freeExports;
 
 /** Built-in value references. */
-var Buffer = moduleExports ? isEqual.root.Buffer : undefined,
+var Buffer = moduleExports ? keyboardEvent.root.Buffer : undefined,
     allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined;
 
 /**
@@ -716,7 +717,7 @@ function cloneBuffer(buffer, isDeep) {
  * @returns {Object} Returns `object`.
  */
 function copySymbols(source, object) {
-  return copyObject(source, isEqual.getSymbols(source), object);
+  return copyObject(source, keyboardEvent.getSymbols(source), object);
 }
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
@@ -729,10 +730,10 @@ var nativeGetSymbols = Object.getOwnPropertySymbols;
  * @param {Object} object The object to query.
  * @returns {Array} Returns the array of symbols.
  */
-var getSymbolsIn = !nativeGetSymbols ? isEqual.stubArray : function(object) {
+var getSymbolsIn = !nativeGetSymbols ? keyboardEvent.stubArray : function(object) {
   var result = [];
   while (object) {
-    isEqual.arrayPush(result, isEqual.getSymbols(object));
+    keyboardEvent.arrayPush(result, keyboardEvent.getSymbols(object));
     object = getPrototype(object);
   }
   return result;
@@ -759,7 +760,7 @@ function copySymbolsIn(source, object) {
  * @returns {Array} Returns the array of property names and symbols.
  */
 function getAllKeysIn(object) {
-  return isEqual.baseGetAllKeys(object, keysIn, getSymbolsIn);
+  return keyboardEvent.baseGetAllKeys(object, keysIn, getSymbolsIn);
 }
 
 /** Used for built-in method references. */
@@ -796,7 +797,7 @@ function initCloneArray(array) {
  */
 function cloneArrayBuffer(arrayBuffer) {
   var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
-  new isEqual.Uint8Array(result).set(new isEqual.Uint8Array(arrayBuffer));
+  new keyboardEvent.Uint8Array(result).set(new keyboardEvent.Uint8Array(arrayBuffer));
   return result;
 }
 
@@ -830,7 +831,7 @@ function cloneRegExp(regexp) {
 }
 
 /** Used to convert symbols to primitives and strings. */
-var symbolProto = isEqual.Symbol ? isEqual.Symbol.prototype : undefined,
+var symbolProto = keyboardEvent.Symbol ? keyboardEvent.Symbol.prototype : undefined,
     symbolValueOf = symbolProto ? symbolProto.valueOf : undefined;
 
 /**
@@ -935,7 +936,7 @@ function initCloneByTag(object, tag, isDeep) {
  * @returns {Object} Returns the initialized clone.
  */
 function initCloneObject(object) {
-  return (typeof object.constructor == 'function' && !isEqual.isPrototype(object))
+  return (typeof object.constructor == 'function' && !keyboardEvent.isPrototype(object))
     ? baseCreate(getPrototype(object))
     : {};
 }
@@ -951,11 +952,11 @@ var mapTag$1 = '[object Map]';
  * @returns {boolean} Returns `true` if `value` is a map, else `false`.
  */
 function baseIsMap(value) {
-  return isEqual.isObjectLike(value) && isEqual.getTag(value) == mapTag$1;
+  return keyboardEvent.isObjectLike(value) && keyboardEvent.getTag(value) == mapTag$1;
 }
 
 /* Node.js helper references. */
-var nodeIsMap = isEqual.nodeUtil && isEqual.nodeUtil.isMap;
+var nodeIsMap = keyboardEvent.nodeUtil && keyboardEvent.nodeUtil.isMap;
 
 /**
  * Checks if `value` is classified as a `Map` object.
@@ -974,7 +975,7 @@ var nodeIsMap = isEqual.nodeUtil && isEqual.nodeUtil.isMap;
  * _.isMap(new WeakMap);
  * // => false
  */
-var isMap = nodeIsMap ? isEqual.baseUnary(nodeIsMap) : baseIsMap;
+var isMap = nodeIsMap ? keyboardEvent.baseUnary(nodeIsMap) : baseIsMap;
 
 /** `Object#toString` result references. */
 var setTag$1 = '[object Set]';
@@ -987,11 +988,11 @@ var setTag$1 = '[object Set]';
  * @returns {boolean} Returns `true` if `value` is a set, else `false`.
  */
 function baseIsSet(value) {
-  return isEqual.isObjectLike(value) && isEqual.getTag(value) == setTag$1;
+  return keyboardEvent.isObjectLike(value) && keyboardEvent.getTag(value) == setTag$1;
 }
 
 /* Node.js helper references. */
-var nodeIsSet = isEqual.nodeUtil && isEqual.nodeUtil.isSet;
+var nodeIsSet = keyboardEvent.nodeUtil && keyboardEvent.nodeUtil.isSet;
 
 /**
  * Checks if `value` is classified as a `Set` object.
@@ -1010,7 +1011,7 @@ var nodeIsSet = isEqual.nodeUtil && isEqual.nodeUtil.isSet;
  * _.isSet(new WeakSet);
  * // => false
  */
-var isSet = nodeIsSet ? isEqual.baseUnary(nodeIsSet) : baseIsSet;
+var isSet = nodeIsSet ? keyboardEvent.baseUnary(nodeIsSet) : baseIsSet;
 
 /** Used to compose bitmasks for cloning. */
 var CLONE_DEEP_FLAG$1 = 1,
@@ -1090,20 +1091,20 @@ function baseClone(value, bitmask, customizer, key, object, stack) {
   if (result !== undefined) {
     return result;
   }
-  if (!isEqual.isObject(value)) {
+  if (!keyboardEvent.isObject(value)) {
     return value;
   }
-  var isArr = isEqual.isArray(value);
+  var isArr = keyboardEvent.isArray(value);
   if (isArr) {
     result = initCloneArray(value);
     if (!isDeep) {
       return copyArray(value, result);
     }
   } else {
-    var tag = isEqual.getTag(value),
+    var tag = keyboardEvent.getTag(value),
         isFunc = tag == funcTag || tag == genTag;
 
-    if (isEqual.isBuffer(value)) {
+    if (keyboardEvent.isBuffer(value)) {
       return cloneBuffer(value, isDeep);
     }
     if (tag == objectTag || tag == argsTag || (isFunc && !object)) {
@@ -1121,7 +1122,7 @@ function baseClone(value, bitmask, customizer, key, object, stack) {
     }
   }
   // Check for circular references and return its corresponding clone.
-  stack || (stack = new isEqual.Stack);
+  stack || (stack = new keyboardEvent.Stack);
   var stacked = stack.get(value);
   if (stacked) {
     return stacked;
@@ -1139,8 +1140,8 @@ function baseClone(value, bitmask, customizer, key, object, stack) {
   }
 
   var keysFunc = isFull
-    ? (isFlat ? getAllKeysIn : isEqual.getAllKeys)
-    : (isFlat ? keysIn : isEqual.keys);
+    ? (isFlat ? getAllKeysIn : keyboardEvent.getAllKeys)
+    : (isFlat ? keysIn : keyboardEvent.keys);
 
   var props = isArr ? undefined : keysFunc(value);
   arrayEach(props || value, function(subValue, key) {
@@ -1180,7 +1181,51 @@ function cloneDeep(value) {
   return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);
 }
 
-const gridCss = ":host{display:block;--wcs-grid-highlight-color:var(--wcs-light)}:host th{background-color:var(--wcs-light)}:host th:not(:first-child){border-left:solid 1px var(--wcs-text-light)}:host ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:none}:host table{width:100%;border-spacing:0}:host td{color:var(--wcs-gray-light);margin:0;padding:calc(var(--wcs-padding) / 2) var(--wcs-padding)}:host tr:not(:last-child) td{border-bottom:solid 1px var(--wcs-text-light)}:host .wcs-grid-selection-column{padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);width:40px}:host tr.selected{background-color:var(--wcs-grid-highlight-color)}:host .loading{text-align:center}:host([selection]) ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:solid 1px var(--wcs-text-light) !important}";
+/**
+ * We follow this https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+ * @param event
+ * @param type
+ */
+function getActionForKeyboardEvent(event, type) {
+  const keyboardShortcut = keyboardEvent.keyboardShortcutFromKeyboardEvent(event);
+  if (keyboardShortcut === 'UNKNOWN') {
+    return [];
+  }
+  switch (keyboardShortcut) {
+    case "UP_ARROW":
+      return [{ kind: 'FocusCell', target: 'up' }];
+    case "DOWN_ARROW":
+      return [{ kind: 'FocusCell', target: 'down' }];
+    case "LEFT_ARROW":
+      return [{ kind: 'FocusCell', target: 'left' }];
+    case "RIGHT_ARROW":
+      return [{ kind: 'FocusCell', target: 'right' }];
+    case "HOME":
+      return [{ kind: 'FocusCell', target: 'first_of_row' }];
+    case "END":
+      return [{ kind: 'FocusCell', target: 'last_of_row' }];
+    case "MAJ+SPACE":
+      switch (type) {
+        case "grid_selection_single":
+        case "grid_selection_multiple":
+          return [{ kind: 'SelectRow', target: 'one' }];
+      }
+      break;
+    case "CTRL+A":
+      switch (type) {
+        case "grid_selection_multiple":
+          return [{ kind: 'SelectRow', target: 'all' }];
+      }
+      break;
+    case "CTRL+HOME":
+      return [{ kind: 'FocusCell', target: 'first_of_grid' }];
+    case "CTRL+END":
+      return [{ kind: 'FocusCell', target: 'last_of_grid' }];
+  }
+  return [];
+}
+
+const gridCss = ":host{display:block;--wcs-grid-highlight-color:var(--wcs-light)}:host th{background-color:var(--wcs-light)}:host th:not(:first-child){border-left:solid 1px var(--wcs-text-light)}:host ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:none}:host table{width:100%;border-spacing:0}:host td{color:var(--wcs-gray-light);margin:0;padding:calc(var(--wcs-padding) / 2) var(--wcs-padding)}:host td:focus-visible{outline:2px dashed var(--wcs-primary);outline-offset:0;border-radius:0.1rem}:host tr:not(:last-child) td{border-bottom:solid 1px var(--wcs-text-light)}:host .wcs-grid-selection-column{padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);width:40px}:host tr.selected{background-color:var(--wcs-grid-highlight-color)}:host .loading{text-align:center}:host([selection]) ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:solid 1px var(--wcs-text-light) !important}";
 
 const Grid = class {
   constructor(hostRef) {
@@ -1197,6 +1242,11 @@ const Grid = class {
     this.columns = undefined;
     this.paginationEl = undefined;
     this.rows = [];
+    this.cursorPosition = { col: 0, row: 1 };
+  }
+  onCursorPositionChange(newValue) {
+    // Notify all grid columns that the cursorPosition has changed
+    this.getGridColumnsFromTemplate().forEach(g => g.cursorPosition = newValue);
   }
   onDataChange(newValue) {
     this.updateGridRows(newValue);
@@ -1205,16 +1255,147 @@ const Grid = class {
   onSelectedItemsPropertyChange(newValue) {
     this.updateSelectionWithValues(newValue);
   }
+  onFocus() {
+    var _a;
+    (_a = this.getElementToFocusAtCursorPosition()) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  /**
+   * If selectionConfig is different from `none`, that means that an extra column for radio or checkbox is rendered
+   * in the table.
+   */
+  hasSelectionColumn() {
+    return this.selectionConfig !== 'none';
+  }
+  /**
+   * Returns the element to focus at the current cursor position : it can be a cell (td, th) to focus or a nested
+   * checkbox / radio element if the selection mode is single or multiple
+   */
+  getElementToFocusAtCursorPosition() {
+    var _a, _b;
+    const el = (_a = this.gridElementsWithCoordinates.find(cell => { var _a, _b; return cell.col === ((_a = this.cursorPosition) === null || _a === void 0 ? void 0 : _a.col) && cell.row === ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.row); })) === null || _a === void 0 ? void 0 : _a.el;
+    return this.hasSelectionColumn()
+      ? (_b = el.querySelector('wcs-checkbox,wcs-radio')) !== null && _b !== void 0 ? _b : el
+      : el;
+  }
+  moveCursorPosition(directionX, directionY) {
+    var _a;
+    this.cursorPosition = {
+      col: directionX === 'first' ? 0 :
+        directionX === 'last' ? this.totalDisplayedColumnCount() - 1 :
+          Math.min(Math.max(this.cursorPosition.col + directionX, 0), this.totalDisplayedColumnCount() - 1),
+      row: directionY === 'first' ? 0 :
+        directionY === 'last' ? this.getRowsForCurrentPage().length :
+          Math.min(Math.max(this.cursorPosition.row + directionY, 0), this.getRowsForCurrentPage().length)
+    };
+    this.handleCursorPositionOnEmptyTh();
+    (_a = this.getElementToFocusAtCursorPosition()) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  /**
+   * When the grid has selectionConfig single, an empty th appears at col=0, row=0.
+   * It should not be focusable so the cursor navigates to col=1, row=0 instead.
+   */
+  handleCursorPositionOnEmptyTh() {
+    if (this.selectionConfig === 'single' && this.cursorPosition.col === 0 && this.cursorPosition.row === 0) {
+      this.cursorPosition = {
+        col: 1,
+        row: 0
+      };
+    }
+  }
   onHiddenColumnChange() {
     // We use forceUpdate because the fact of hiding a column or not does not modify the internal structure of the grid (WcsGridRow).
     // Hide a column only impacts the way it is rendered but the grid-column remains in the dom and in our internal model.
     index.forceUpdate(this);
+    this.cursorPosition = { col: 0, row: 1 };
+  }
+  onKeyDown(_event) {
+    var _a;
+    if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName) === 'WCS-GRID-PAGINATION') {
+      return;
+    }
+    let type;
+    switch (this.selectionConfig) {
+      case "multiple":
+        type = 'grid_selection_multiple';
+        break;
+      case "single":
+        type = 'grid_selection_single';
+        break;
+      case "none":
+        type = 'grid_no_selection';
+        break;
+    }
+    const actionsFromKeyboardEvents = getActionForKeyboardEvent(_event, type);
+    // If we have at least one associated actions, we prevent the default behavior of the event. 
+    // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)
+    if (actionsFromKeyboardEvents.length != 0) {
+      _event.preventDefault();
+    }
+    for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {
+      this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent, _event);
+    }
+  }
+  doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent, event) {
+    switch (actionFromKeyboardEvent.kind) {
+      case "FocusCell":
+        switch (actionFromKeyboardEvent.target) {
+          case "up":
+            this.moveCursorPosition(0, -1);
+            break;
+          case "down":
+            this.moveCursorPosition(0, 1);
+            break;
+          case "left":
+            this.moveCursorPosition(-1, 0);
+            break;
+          case "right":
+            this.moveCursorPosition(1, 0);
+            break;
+          case "first_of_row":
+            this.moveCursorPosition('first', 0);
+            break;
+          case "last_of_row":
+            this.moveCursorPosition('last', 0);
+            break;
+          case "first_of_grid":
+            this.moveCursorPosition('first', 'first');
+            break;
+          case "last_of_grid":
+            this.moveCursorPosition('last', 'last');
+            break;
+        }
+      case "SelectRow":
+        switch (actionFromKeyboardEvent.target) {
+          case "one":
+            event.preventDefault();
+            if (this.cursorPosition.row > 0) {
+              this.onRowSelection(this.rows[this.cursorPosition.row - 1]);
+            }
+            break;
+          case "all":
+            this.selectAllRows();
+            break;
+        }
+        break;
+      default:
+        throw new Error("Internal error");
+    }
+  }
+  onClick(_event) {
+    const clickedGridElement = _event.composedPath()
+      .filter(x => ['TD', 'TH']
+      .includes(x.nodeName))[0];
+    const clickedGridElementWithCoordinates = this.gridElementsWithCoordinates.find(e => e.el === clickedGridElement);
+    this.cursorPosition = {
+      col: clickedGridElementWithCoordinates.col,
+      row: clickedGridElementWithCoordinates.row,
+    };
   }
   updateSelectionWithValues(values) {
     if (this.selectionConfig === 'single') {
       this.rows.map(r => r.selected = false);
       for (const row of this.rows) {
-        if (isEqual.isEqual(row.data, values)) {
+        if (keyboardEvent.isEqual(row.data, values)) {
           row.selected = true;
           break; // only one line can be selected
         }
@@ -1223,7 +1404,7 @@ const Grid = class {
     else if (this.selectionConfig === 'multiple') {
       this.rows.map(r => r.selected = false);
       for (const row of this.rows) {
-        if (values.find(x => isEqual.isEqual(x, row.data))) {
+        if (values.find(x => keyboardEvent.isEqual(x, row.data))) {
           row.selected = true;
         }
       }
@@ -1244,7 +1425,10 @@ const Grid = class {
           selected: false,
           cells: []
         };
+        let index = 0;
         for (const column of this.columns) {
+          column.columnPosition = index + (this.hasSelectionColumn() ? 1 : 0);
+          index++;
           row.cells.push({
             content: get(data[i], column.path),
             column,
@@ -1272,14 +1456,14 @@ const Grid = class {
    * Handle existing column's filters (defined before the grid is instantiated)
    * @private
    */
-  refreshSort(refreshOthersColmumnsSortOrderState) {
+  refreshSort(refreshOthersColumnsSortOrderState) {
     //fixme: why the column property can be null or undefined?
     if (this.columns) {
       const [first, ...other] = this.columns.filter(c => c.sortOrder !== 'none');
       if (first && !this.serverMode) {
         this.sortBy(first);
       }
-      refreshOthersColmumnsSortOrderState && this.disableSortOrderForColumns(other);
+      refreshOthersColumnsSortOrderState && this.disableSortOrderForColumns(other);
     }
   }
   disableSortOrderForColumns(columns) {
@@ -1293,6 +1477,34 @@ const Grid = class {
     const slotted = this.el.shadowRoot.querySelector('slot[name="grid-pagination"]');
     return slotted.assignedElements();
   }
+  get gridElementsWithCoordinates() {
+    const gridElements = [];
+    // If selection multiple, the first cell should be added to the list
+    if (this.selectionConfig === 'multiple') {
+      gridElements.push({
+        el: this.el.shadowRoot.querySelector('th'),
+        row: 0,
+        col: 0
+      });
+    }
+    this.getGridColumnsFromTemplate()
+      .filter(col => !col.hidden)
+      .forEach((col, index) => {
+      gridElements.push({
+        el: col.shadowRoot.querySelector('th'),
+        row: 0,
+        col: index + (this.hasSelectionColumn() ? 1 : 0),
+      });
+    });
+    this.el.shadowRoot.querySelectorAll('td').forEach((cell, index) => {
+      gridElements.push({
+        el: cell,
+        row: 1 + Math.floor(index / this.totalDisplayedColumnCount()),
+        col: index % this.totalDisplayedColumnCount(),
+      });
+    });
+    return gridElements;
+  }
   sortChangeEventHandler(event) {
     if (event.detail.order === 'none')
       return;
@@ -1305,19 +1517,19 @@ const Grid = class {
   }
   /**
    * Sorts the grid rows according to the given column's configuration
-   * @param colmun Column from which to extract the sorting configuration
+   * @param column Column from which to extract the sorting configuration
    * @private
    */
-  sortBy(colmun) {
-    if (colmun.sortFn) {
+  sortBy(column) {
+    if (column.sortFn) {
       this.rows = cloneDeep(this.rows)
-        .sort((a, b) => colmun.sortFn(a.data, b.data, colmun) * getSortOrderInteger(colmun.sortOrder));
+        .sort((a, b) => column.sortFn(a.data, b.data, column) * getSortOrderInteger(column.sortOrder));
     }
     else {
       this.rows = cloneDeep(this.rows)
         .sort((a, b) => {
-        const path = colmun.path;
-        return ((get(a.data, path) < get(b.data, path)) ? -1 : (get(a.data, path) > get(b.data, path)) ? 1 : 0) * getSortOrderInteger(colmun.sortOrder);
+        const path = column.path;
+        return ((get(a.data, path) < get(b.data, path)) ? -1 : (get(a.data, path) > get(b.data, path)) ? 1 : 0) * getSortOrderInteger(column.sortOrder);
       });
     }
   }
@@ -1358,15 +1570,25 @@ const Grid = class {
     }
     row.selected = !row.selected;
     if (this.selectionConfig !== 'single' || row.selected) {
-      this.wcsGridSelectionChange.emit({ row: this.wcsGridRowToWcsGridRowData(row) });
+      this.wcsGridSelectionChange.emit({
+        selectedRows: this.selectedRows.map(row => this.wcsGridRowToWcsGridRowData(row)),
+        changedRow: this.wcsGridRowToWcsGridRowData(row)
+      });
     }
     this.rows = cloneDeep(this.rows);
   }
+  get selectedRows() {
+    return this.rows.filter(r => r.selected);
+  }
   selectAllRows() {
     const rows = this.getRowsForCurrentPage();
     const selected = !this.allRowsAreSelected();
     rows.map(r => r.selected = selected);
     this.wcsGridAllSelectionChange.emit({ rows: selected ? rows.map(row => this.wcsGridRowToWcsGridRowData(row)) : [] });
+    this.wcsGridSelectionChange.emit({
+      selectedRows: this.selectedRows.map(row => this.wcsGridRowToWcsGridRowData(row)),
+      changedRow: 'allCheckbox'
+    });
     this.rows = cloneDeep(this.rows);
   }
   allRowsAreSelected() {
@@ -1379,14 +1601,15 @@ const Grid = class {
     }
     return this.rows;
   }
-  renderSelectionColumn(row) {
+  renderSelectionColumn(row, rowIndex) {
+    var _a, _b, _c, _d;
     switch (this.selectionConfig) {
       case 'none':
         return;
       case 'single':
-        return index.h("td", null, index.h("wcs-radio", { checked: row.selected, onWcsRadioClick: this.onRowSelection.bind(this, row) }));
+        return index.h("td", { "aria-colindex": this.atLeastOneColumnHidden() ? 1 : null, tabIndex: ((_a = this.cursorPosition) === null || _a === void 0 ? void 0 : _a.col) === 0 && rowIndex + 1 === ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.row) ? 0 : -1 }, index.h("wcs-radio", { tabIndex: -1, checked: row.selected, onWcsRadioClick: this.onRowSelection.bind(this, row) }));
       case 'multiple':
-        return index.h("td", null, index.h("wcs-checkbox", { checked: row.selected, onWcsChange: this.onRowSelection.bind(this, row) }));
+        return index.h("td", { "aria-colindex": this.atLeastOneColumnHidden() ? 1 : null, tabIndex: ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.col) === 0 && rowIndex + 1 === ((_d = this.cursorPosition) === null || _d === void 0 ? void 0 : _d.row) ? 0 : -1 }, index.h("wcs-checkbox", { tabIndex: -1, checked: row.selected, onWcsChange: this.onRowSelection.bind(this, row) }));
     }
   }
   getCellContent(row, cell) {
@@ -1395,34 +1618,66 @@ const Grid = class {
     }
     return cell.content;
   }
+  /**
+   * Returns the total number of columns
+   * @private
+   */
   totalColumnCount() {
     if (!this.columns) {
       return 0;
     }
-    return this.columns.length + (this.selectionConfig === 'none' ? 0 : 1);
+    return this.columns.length + (this.hasSelectionColumn() ? 1 : 0);
+  }
+  /**
+   * Returns the total number of columns that are not hidden
+   * @private
+   */
+  totalDisplayedColumnCount() {
+    var _a, _b;
+    return (_b = this.totalColumnCount() - ((_a = this.columns) === null || _a === void 0 ? void 0 : _a.filter(col => col.hidden).length)) !== null && _b !== void 0 ? _b : 0;
+  }
+  /**
+   * Returns true if at least one column is hidden from the table
+   * @private
+   */
+  atLeastOneColumnHidden() {
+    return this.totalDisplayedColumnCount() !== this.totalColumnCount();
   }
   render() {
-    var _a;
-    return (index.h(index.Host, null, index.h("table", null, index.h("thead", null, this.selectionConfig === 'none' ? ''
+    var _a, _b, _c, _d;
+    return (index.h(index.Host, null, index.h("table", { role: "grid", "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, index.h("thead", null, index.h("tr", { "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
       : index.h("th", { class: "wcs-grid-selection-column" }, this.selectionConfig === 'single' ? '' :
-        index.h("wcs-checkbox", { checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), index.h("slot", { name: "grid-column" })), index.h("tbody", null, this.loading
-      ? index.h("tr", null, index.h("td", { colSpan: this.totalColumnCount(), class: "loading" }, index.h("wcs-spinner", null)))
-      : (_a = this.rows) === null || _a === void 0 ? void 0 : _a.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map(row => this.renderRow(row)))), index.h("slot", { name: "grid-pagination" })));
+        index.h("wcs-checkbox", { tabIndex: ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.col) === 0
+            && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), index.h("slot", { name: "grid-column" }))), index.h("tbody", null, this.loading
+      ? index.h("tr", { "aria-busy": "true" }, index.h("td", { colSpan: this.totalColumnCount(), class: "loading" }, index.h("wcs-spinner", null)))
+      : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), index.h("slot", { name: "grid-pagination" })));
   }
-  renderRow(row) {
+  /**
+   * Returns the row with all mapped cells inside.
+   * The aria-rowindex here starts at 2 because the header row starts at index 1.
+   * @private
+   */
+  renderRow(row, rowIndex) {
     var _a;
-    return index.h("tr", { class: row.selected ? 'selected' : '' }, this.renderSelectionColumn(row), (_a = row.cells) === null || _a === void 0 ? void 0 :
-      _a.map(cell => {
+    let hiddenColumnCount = 0;
+    return index.h("tr", { class: row.selected ? 'selected' : '', "aria-selected": row.selected ? 'true' : null, "aria-rowindex": rowIndex + 2 }, this.renderSelectionColumn(row, rowIndex), (_a = row.cells) === null || _a === void 0 ? void 0 :
+      _a.map((cell, cellIndex) => {
+        var _a, _b;
         if (cell.column.hidden) {
+          hiddenColumnCount++;
           return;
         }
+        const nonHiddenColumnIndex = cellIndex - hiddenColumnCount + 1 + (this.hasSelectionColumn() ? 1 : 0);
+        const cursorIsOnCell = nonHiddenColumnIndex - 1 === ((_a = this.cursorPosition) === null || _a === void 0 ? void 0 : _a.col)
+          && rowIndex + 1 === ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.row);
         return cell.column.customCells
-          ? (index.h("td", null, index.h("slot", { name: cell.column.id + '-' + row.data[this.rowIdPath] })))
-          : (index.h("td", { part: cell.column.path + '-column' }, this.getCellContent(row, cell)));
+          ? (index.h("td", { tabIndex: cursorIsOnCell ? 0 : -1, "aria-colindex": this.atLeastOneColumnHidden() ? nonHiddenColumnIndex : null }, index.h("slot", { name: cell.column.id + '-' + row.data[this.rowIdPath] })))
+          : (index.h("td", { tabIndex: cursorIsOnCell ? 0 : -1, "aria-colindex": this.atLeastOneColumnHidden() ? nonHiddenColumnIndex : null, part: cell.column.path + '-column' }, this.getCellContent(row, cell)));
       }));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
+    "cursorPosition": ["onCursorPositionChange"],
     "data": ["onDataChange"],
     "selectedItems": ["onSelectedItemsPropertyChange"]
   }; }