handsontable 0.0.0-next-9059914-20231025 → 0.0.0-next-21d91d0-20231025

package/plugins/nestedHeaders/stateManager/index.js

@@ -8,6 +8,7 @@ var _sourceSettings2 = _interopRequireDefault(require("./sourceSettings"));
 var _headersTree2 = _interopRequireDefault(require("./headersTree"));
 var _nodeModifiers = require("./nodeModifiers");
 var _matrixGenerator = require("./matrixGenerator");
+var _tree = require("../../../utils/dataStructures/tree");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
@@ -317,6 +318,23 @@ class StateManager {
    * @returns {object|null}
    */
   getHeaderTreeNodeData(headerLevel, columnIndex) {
+    const node = this.getHeaderTreeNode(headerLevel, columnIndex);
+    if (!node) {
+      return null;
+    }
+    return {
+      ...node.data
+    };
+  }
+
+  /**
+   * Gets tree node that is connected to the column header.
+   *
+   * @param {number} headerLevel Header level (there is support for negative and positive values).
+   * @param {number} columnIndex A visual column index.
+   * @returns {TreeNode|null}
+   */
+  getHeaderTreeNode(headerLevel, columnIndex) {
     if (headerLevel < 0) {
       headerLevel = this.rowCoordsToLevel(headerLevel);
     }
@@ -327,9 +345,53 @@ class StateManager {
     if (!node) {
       return null;
     }
-    return {
-      ...node.data
-    };
+    return node;
+  }
+
+  /**
+   * Finds the most top header level of the column header that is rendered entirely within
+   * the passed visual columns range. If multiple columns headers are found within the range the
+   * most top header level value will be returned.
+   *
+   * @param {number} columnIndexFrom A visual column index.
+   * @param {number} [columnIndexTo] A visual column index.
+   * @returns {number} Returns a header level in format -1 to -N.
+   */
+  findTopMostEntireHeaderLevel(columnIndexFrom) {
+    var _headerLevel;
+    let columnIndexTo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : columnIndexFrom;
+    const columnsWidth = columnIndexTo - columnIndexFrom + 1;
+    let atLeastOneRootFound = false;
+    let headerLevel = null;
+    for (let columnIndex = columnIndexFrom; columnIndex <= columnIndexTo; columnIndex++) {
+      const rootNode = _classPrivateFieldGet(this, _headersTree).getRootByColumn(columnIndex);
+      if (!rootNode) {
+        break;
+      }
+      atLeastOneRootFound = true;
+
+      // eslint-disable-next-line
+      rootNode.walkDown(node => {
+        const {
+          columnIndex: nodeColumnIndex,
+          headerLevel: nodeHeaderLevel,
+          origColspan,
+          isHidden
+        } = node.data;
+        if (isHidden) {
+          return;
+        }
+
+        // if the header fits entirely within the columns range get and save the node header level
+        if (origColspan <= columnsWidth && nodeColumnIndex >= columnIndexFrom && nodeColumnIndex + origColspan - 1 <= columnIndexTo && (headerLevel === null || nodeHeaderLevel < headerLevel)) {
+          headerLevel = nodeHeaderLevel;
+        }
+      }, _tree.TRAVERSAL_DF_PRE);
+    }
+    if (atLeastOneRootFound && headerLevel === null) {
+      return -1;
+    }
+    return this.levelToRowCoords((_headerLevel = headerLevel) !== null && _headerLevel !== void 0 ? _headerLevel : 0);
   }
 
   /**
@@ -367,6 +429,43 @@ class StateManager {
     return stepBackColumn;
   }
 
+  /**
+   * The method is helpful in cases where the column index targets in-between currently
+   * collapsed column. In that case, the method returns the right-most column index
+   * where the nested header ends.
+   *
+   * @param {number} headerLevel Header level (there is support for negative and positive values).
+   * @param {number} columnIndex A visual column index.
+   * @returns {number}
+   */
+  findRightMostColumnIndex(headerLevel, columnIndex) {
+    var _this$getHeaderSettin3;
+    const {
+      isRoot,
+      origColspan
+    } = (_this$getHeaderSettin3 = this.getHeaderSettings(headerLevel, columnIndex)) !== null && _this$getHeaderSettin3 !== void 0 ? _this$getHeaderSettin3 : {
+      isRoot: true,
+      origColspan: 1
+    };
+    if (isRoot) {
+      return columnIndex + origColspan - 1;
+    }
+    let stepForthColumn = columnIndex + 1;
+    while (stepForthColumn < this.getColumnsCount()) {
+      var _this$getHeaderSettin4;
+      const {
+        isRoot: isRootNode
+      } = (_this$getHeaderSettin4 = this.getHeaderSettings(headerLevel, stepForthColumn)) !== null && _this$getHeaderSettin4 !== void 0 ? _this$getHeaderSettin4 : {
+        isRoot: true
+      };
+      if (isRootNode) {
+        break;
+      }
+      stepForthColumn += 1;
+    }
+    return stepForthColumn - 1;
+  }
+
   /**
    * Gets a total number of headers levels.
    *

package/plugins/nestedHeaders/stateManager/index.mjs

@@ -12,6 +12,7 @@ import SourceSettings from "./sourceSettings.mjs";
 import HeadersTree from "./headersTree.mjs";
 import { triggerNodeModification } from "./nodeModifiers/index.mjs";
 import { generateMatrix } from "./matrixGenerator.mjs";
+import { TRAVERSAL_DF_PRE } from "../../../utils/dataStructures/tree.mjs";
 /**
  * The state manager is a source of truth for nested headers configuration.
  * The state generation process is divided into three stages.
@@ -313,6 +314,23 @@ export default class StateManager {
    * @returns {object|null}
    */
   getHeaderTreeNodeData(headerLevel, columnIndex) {
+    const node = this.getHeaderTreeNode(headerLevel, columnIndex);
+    if (!node) {
+      return null;
+    }
+    return {
+      ...node.data
+    };
+  }
+
+  /**
+   * Gets tree node that is connected to the column header.
+   *
+   * @param {number} headerLevel Header level (there is support for negative and positive values).
+   * @param {number} columnIndex A visual column index.
+   * @returns {TreeNode|null}
+   */
+  getHeaderTreeNode(headerLevel, columnIndex) {
     if (headerLevel < 0) {
       headerLevel = this.rowCoordsToLevel(headerLevel);
     }
@@ -323,9 +341,53 @@ export default class StateManager {
     if (!node) {
       return null;
     }
-    return {
-      ...node.data
-    };
+    return node;
+  }
+
+  /**
+   * Finds the most top header level of the column header that is rendered entirely within
+   * the passed visual columns range. If multiple columns headers are found within the range the
+   * most top header level value will be returned.
+   *
+   * @param {number} columnIndexFrom A visual column index.
+   * @param {number} [columnIndexTo] A visual column index.
+   * @returns {number} Returns a header level in format -1 to -N.
+   */
+  findTopMostEntireHeaderLevel(columnIndexFrom) {
+    var _headerLevel;
+    let columnIndexTo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : columnIndexFrom;
+    const columnsWidth = columnIndexTo - columnIndexFrom + 1;
+    let atLeastOneRootFound = false;
+    let headerLevel = null;
+    for (let columnIndex = columnIndexFrom; columnIndex <= columnIndexTo; columnIndex++) {
+      const rootNode = _classPrivateFieldGet(this, _headersTree).getRootByColumn(columnIndex);
+      if (!rootNode) {
+        break;
+      }
+      atLeastOneRootFound = true;
+
+      // eslint-disable-next-line
+      rootNode.walkDown(node => {
+        const {
+          columnIndex: nodeColumnIndex,
+          headerLevel: nodeHeaderLevel,
+          origColspan,
+          isHidden
+        } = node.data;
+        if (isHidden) {
+          return;
+        }
+
+        // if the header fits entirely within the columns range get and save the node header level
+        if (origColspan <= columnsWidth && nodeColumnIndex >= columnIndexFrom && nodeColumnIndex + origColspan - 1 <= columnIndexTo && (headerLevel === null || nodeHeaderLevel < headerLevel)) {
+          headerLevel = nodeHeaderLevel;
+        }
+      }, TRAVERSAL_DF_PRE);
+    }
+    if (atLeastOneRootFound && headerLevel === null) {
+      return -1;
+    }
+    return this.levelToRowCoords((_headerLevel = headerLevel) !== null && _headerLevel !== void 0 ? _headerLevel : 0);
   }
 
   /**
@@ -363,6 +425,43 @@ export default class StateManager {
     return stepBackColumn;
   }
 
+  /**
+   * The method is helpful in cases where the column index targets in-between currently
+   * collapsed column. In that case, the method returns the right-most column index
+   * where the nested header ends.
+   *
+   * @param {number} headerLevel Header level (there is support for negative and positive values).
+   * @param {number} columnIndex A visual column index.
+   * @returns {number}
+   */
+  findRightMostColumnIndex(headerLevel, columnIndex) {
+    var _this$getHeaderSettin3;
+    const {
+      isRoot,
+      origColspan
+    } = (_this$getHeaderSettin3 = this.getHeaderSettings(headerLevel, columnIndex)) !== null && _this$getHeaderSettin3 !== void 0 ? _this$getHeaderSettin3 : {
+      isRoot: true,
+      origColspan: 1
+    };
+    if (isRoot) {
+      return columnIndex + origColspan - 1;
+    }
+    let stepForthColumn = columnIndex + 1;
+    while (stepForthColumn < this.getColumnsCount()) {
+      var _this$getHeaderSettin4;
+      const {
+        isRoot: isRootNode
+      } = (_this$getHeaderSettin4 = this.getHeaderSettings(headerLevel, stepForthColumn)) !== null && _this$getHeaderSettin4 !== void 0 ? _this$getHeaderSettin4 : {
+        isRoot: true
+      };
+      if (isRootNode) {
+        break;
+      }
+      stepForthColumn += 1;
+    }
+    return stepForthColumn - 1;
+  }
+
   /**
    * Gets a total number of headers levels.
    *

package/plugins/nestedRows/nestedRows.js

@@ -16,6 +16,7 @@ const PLUGIN_KEY = 'nestedRows';
 exports.PLUGIN_KEY = PLUGIN_KEY;
 const PLUGIN_PRIORITY = 300;
 exports.PLUGIN_PRIORITY = PLUGIN_PRIORITY;
+const SHORTCUTS_GROUP = PLUGIN_KEY;
 const privatePool = new WeakMap();
 
 /* eslint-disable jsdoc/require-description-complete-sentence */
@@ -150,6 +151,7 @@ class NestedRows extends _base.BasePlugin {
     });
     this.addHook('beforeLoadData', data => this.onBeforeLoadData(data));
     this.addHook('beforeUpdateData', data => this.onBeforeLoadData(data));
+    this.registerShortcuts();
     super.enablePlugin();
   }
 
@@ -158,6 +160,7 @@ class NestedRows extends _base.BasePlugin {
    */
   disablePlugin() {
     this.hot.rowIndexMapper.unregisterMap('nestedRows');
+    this.unregisterShortcuts();
     super.disablePlugin();
   }
 
@@ -179,6 +182,44 @@ class NestedRows extends _base.BasePlugin {
     super.updatePlugin();
   }
 
+  /**
+   * Register shortcuts responsible for toggling collapsible columns.
+   *
+   * @private
+   */
+  registerShortcuts() {
+    this.hot.getShortcutManager().getContext('grid').addShortcut({
+      keys: [['Enter']],
+      callback: () => {
+        const {
+          highlight
+        } = this.hot.getSelectedRangeLast();
+        if (highlight.col === -1 && highlight.row >= 0) {
+          const row = this.collapsingUI.translateTrimmedRow(highlight.row);
+          if (this.collapsingUI.areChildrenCollapsed(row)) {
+            this.collapsingUI.expandChildren(row);
+          } else {
+            this.collapsingUI.collapseChildren(row);
+          }
+        }
+      },
+      runOnlyIf: () => {
+        var _this$hot$getSelected;
+        return (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight.isHeader();
+      },
+      group: SHORTCUTS_GROUP
+    });
+  }
+
+  /**
+   * Unregister shortcuts responsible for toggling collapsible columns.
+   *
+   * @private
+   */
+  unregisterShortcuts() {
+    this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+  }
+
   /**
    * `beforeRowMove` hook callback.
    *

package/plugins/nestedRows/nestedRows.mjs

@@ -10,6 +10,7 @@ import { TrimmingMap } from "../../translations/index.mjs";
 import RowMoveController from "./utils/rowMoveController.mjs";
 export const PLUGIN_KEY = 'nestedRows';
 export const PLUGIN_PRIORITY = 300;
+const SHORTCUTS_GROUP = PLUGIN_KEY;
 const privatePool = new WeakMap();
 
 /* eslint-disable jsdoc/require-description-complete-sentence */
@@ -144,6 +145,7 @@ export class NestedRows extends BasePlugin {
     });
     this.addHook('beforeLoadData', data => this.onBeforeLoadData(data));
     this.addHook('beforeUpdateData', data => this.onBeforeLoadData(data));
+    this.registerShortcuts();
     super.enablePlugin();
   }
 
@@ -152,6 +154,7 @@ export class NestedRows extends BasePlugin {
    */
   disablePlugin() {
     this.hot.rowIndexMapper.unregisterMap('nestedRows');
+    this.unregisterShortcuts();
     super.disablePlugin();
   }
 
@@ -173,6 +176,44 @@ export class NestedRows extends BasePlugin {
     super.updatePlugin();
   }
 
+  /**
+   * Register shortcuts responsible for toggling collapsible columns.
+   *
+   * @private
+   */
+  registerShortcuts() {
+    this.hot.getShortcutManager().getContext('grid').addShortcut({
+      keys: [['Enter']],
+      callback: () => {
+        const {
+          highlight
+        } = this.hot.getSelectedRangeLast();
+        if (highlight.col === -1 && highlight.row >= 0) {
+          const row = this.collapsingUI.translateTrimmedRow(highlight.row);
+          if (this.collapsingUI.areChildrenCollapsed(row)) {
+            this.collapsingUI.expandChildren(row);
+          } else {
+            this.collapsingUI.collapseChildren(row);
+          }
+        }
+      },
+      runOnlyIf: () => {
+        var _this$hot$getSelected;
+        return (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight.isHeader();
+      },
+      group: SHORTCUTS_GROUP
+    });
+  }
+
+  /**
+   * Unregister shortcuts responsible for toggling collapsible columns.
+   *
+   * @private
+   */
+  unregisterShortcuts() {
+    this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+  }
+
   /**
    * `beforeRowMove` hook callback.
    *

package/plugins/nestedRows/ui/headers.js

@@ -5,6 +5,7 @@ var _array = require("../../../helpers/array");
 var _number = require("../../../helpers/number");
 var _element = require("../../../helpers/dom/element");
 var _base = _interopRequireDefault(require("./_base"));
+var _a11y = require("../../../helpers/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Class responsible for the UI in the Nested Rows' row headers.
@@ -72,6 +73,7 @@ class HeadersUI extends _base.default {
     const innerDiv = TH.getElementsByTagName('DIV')[0];
     const innerSpan = innerDiv.querySelector('span.rowHeader');
     const previousIndicators = innerDiv.querySelectorAll('[class^="ht_nesting"]');
+    const ariaEnabled = this.hot.getSettings().ariaTags;
     (0, _array.arrayEach)(previousIndicators, elem => {
       if (elem) {
         innerDiv.removeChild(elem);
@@ -93,11 +95,20 @@ class HeadersUI extends _base.default {
     }
     if (this.dataManager.hasChildren(rowObject)) {
       const buttonsContainer = this.hot.rootDocument.createElement('DIV');
+      if (ariaEnabled) {
+        (0, _element.setAttribute)(buttonsContainer, [(0, _a11y.A11Y_HIDDEN)()]);
+      }
       (0, _element.addClass)(TH, HeadersUI.CSS_CLASSES.parent);
       if (this.collapsingUI.areChildrenCollapsed(rowIndex)) {
         (0, _element.addClass)(buttonsContainer, `${HeadersUI.CSS_CLASSES.button} ${HeadersUI.CSS_CLASSES.expandButton}`);
+        if (ariaEnabled) {
+          (0, _element.setAttribute)(TH, [(0, _a11y.A11Y_EXPANDED)(false)]);
+        }
       } else {
         (0, _element.addClass)(buttonsContainer, `${HeadersUI.CSS_CLASSES.button} ${HeadersUI.CSS_CLASSES.collapseButton}`);
+        if (ariaEnabled) {
+          (0, _element.setAttribute)(TH, [(0, _a11y.A11Y_EXPANDED)(true)]);
+        }
       }
       innerDiv.appendChild(buttonsContainer);
     }

package/plugins/nestedRows/ui/headers.mjs

@@ -1,7 +1,8 @@
 import { arrayEach } from "../../../helpers/array.mjs";
 import { rangeEach } from "../../../helpers/number.mjs";
-import { addClass } from "../../../helpers/dom/element.mjs";
+import { addClass, setAttribute } from "../../../helpers/dom/element.mjs";
 import BaseUI from "./_base.mjs";
+import { A11Y_EXPANDED, A11Y_HIDDEN } from "../../../helpers/a11y.mjs";
 /**
  * Class responsible for the UI in the Nested Rows' row headers.
  *
@@ -68,6 +69,7 @@ class HeadersUI extends BaseUI {
     const innerDiv = TH.getElementsByTagName('DIV')[0];
     const innerSpan = innerDiv.querySelector('span.rowHeader');
     const previousIndicators = innerDiv.querySelectorAll('[class^="ht_nesting"]');
+    const ariaEnabled = this.hot.getSettings().ariaTags;
     arrayEach(previousIndicators, elem => {
       if (elem) {
         innerDiv.removeChild(elem);
@@ -89,11 +91,20 @@ class HeadersUI extends BaseUI {
     }
     if (this.dataManager.hasChildren(rowObject)) {
       const buttonsContainer = this.hot.rootDocument.createElement('DIV');
+      if (ariaEnabled) {
+        setAttribute(buttonsContainer, [A11Y_HIDDEN()]);
+      }
       addClass(TH, HeadersUI.CSS_CLASSES.parent);
       if (this.collapsingUI.areChildrenCollapsed(rowIndex)) {
         addClass(buttonsContainer, `${HeadersUI.CSS_CLASSES.button} ${HeadersUI.CSS_CLASSES.expandButton}`);
+        if (ariaEnabled) {
+          setAttribute(TH, [A11Y_EXPANDED(false)]);
+        }
       } else {
         addClass(buttonsContainer, `${HeadersUI.CSS_CLASSES.button} ${HeadersUI.CSS_CLASSES.collapseButton}`);
+        if (ariaEnabled) {
+          setAttribute(TH, [A11Y_EXPANDED(true)]);
+        }
       }
       innerDiv.appendChild(buttonsContainer);
     }

package/renderers/autocompleteRenderer/autocompleteRenderer.js

@@ -6,6 +6,7 @@ var _htmlRenderer = require("../htmlRenderer");
 var _textRenderer = require("../textRenderer");
 var _eventManager = _interopRequireDefault(require("../../eventManager"));
 var _element = require("../../helpers/dom/element");
+var _a11y = require("../../helpers/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const RENDERER_TYPE = 'autocomplete';
 
@@ -28,7 +29,11 @@ function autocompleteRenderer(instance, TD, row, col, prop, value, cellPropertie
   } = instance;
   const rendererFunc = cellProperties.allowHtml ? _htmlRenderer.htmlRenderer : _textRenderer.textRenderer;
   const ARROW = rootDocument.createElement('DIV');
+  const isAriaEnabled = instance.getSettings().ariaTags;
   ARROW.className = 'htAutocompleteArrow';
+  if (isAriaEnabled) {
+    ARROW.setAttribute(...(0, _a11y.A11Y_HIDDEN)());
+  }
   ARROW.appendChild(rootDocument.createTextNode(String.fromCharCode(9660)));
   rendererFunc.apply(this, [instance, TD, row, col, prop, value, cellProperties]);
   if (!TD.firstChild) {
@@ -40,6 +45,9 @@ function autocompleteRenderer(instance, TD, row, col, prop, value, cellPropertie
 
   TD.insertBefore(ARROW, TD.firstChild);
   (0, _element.addClass)(TD, 'htAutocomplete');
+  if (isAriaEnabled) {
+    TD.setAttribute(...(0, _a11y.A11Y_HASPOPUP)('listbox'));
+  }
   if (!instance.acArrowListener) {
     const eventManager = new _eventManager.default(instance);
 

package/renderers/autocompleteRenderer/autocompleteRenderer.mjs

@@ -2,6 +2,7 @@ import { htmlRenderer } from "../htmlRenderer/index.mjs";
 import { textRenderer } from "../textRenderer/index.mjs";
 import EventManager from "../../eventManager.mjs";
 import { addClass, hasClass } from "../../helpers/dom/element.mjs";
+import { A11Y_HASPOPUP, A11Y_HIDDEN } from "../../helpers/a11y.mjs";
 export const RENDERER_TYPE = 'autocomplete';
 
 /**
@@ -22,7 +23,11 @@ export function autocompleteRenderer(instance, TD, row, col, prop, value, cellPr
   } = instance;
   const rendererFunc = cellProperties.allowHtml ? htmlRenderer : textRenderer;
   const ARROW = rootDocument.createElement('DIV');
+  const isAriaEnabled = instance.getSettings().ariaTags;
   ARROW.className = 'htAutocompleteArrow';
+  if (isAriaEnabled) {
+    ARROW.setAttribute(...A11Y_HIDDEN());
+  }
   ARROW.appendChild(rootDocument.createTextNode(String.fromCharCode(9660)));
   rendererFunc.apply(this, [instance, TD, row, col, prop, value, cellProperties]);
   if (!TD.firstChild) {
@@ -34,6 +39,9 @@ export function autocompleteRenderer(instance, TD, row, col, prop, value, cellPr
 
   TD.insertBefore(ARROW, TD.firstChild);
   addClass(TD, 'htAutocomplete');
+  if (isAriaEnabled) {
+    TD.setAttribute(...A11Y_HASPOPUP('listbox'));
+  }
   if (!instance.acArrowListener) {
     const eventManager = new EventManager(instance);
 

package/renderers/baseRenderer/baseRenderer.js

@@ -4,6 +4,7 @@ exports.__esModule = true;
 exports.baseRenderer = baseRenderer;
 require("core-js/modules/es.array.push.js");
 var _element = require("../../helpers/dom/element");
+var _a11y = require("../../helpers/a11y");
 /**
  * Adds appropriate CSS class to table cell, based on cellProperties.
  */
@@ -21,18 +22,32 @@ const RENDERER_TYPE = 'base';
  */
 exports.RENDERER_TYPE = RENDERER_TYPE;
 function baseRenderer(instance, TD, row, col, prop, value, cellProperties) {
+  const ariaEnabled = cellProperties.ariaTags;
   const classesToAdd = [];
   const classesToRemove = [];
+  const attributesToRemove = [];
+  const attributesToAdd = [];
   if (cellProperties.className) {
     (0, _element.addClass)(TD, cellProperties.className);
   }
   if (cellProperties.readOnly) {
     classesToAdd.push(cellProperties.readOnlyCellClassName);
+    if (ariaEnabled) {
+      attributesToAdd.push((0, _a11y.A11Y_READONLY)());
+    }
+  } else if (ariaEnabled) {
+    attributesToRemove.push((0, _a11y.A11Y_READONLY)()[0]);
   }
   if (cellProperties.valid === false && cellProperties.invalidCellClassName) {
     classesToAdd.push(cellProperties.invalidCellClassName);
+    if (ariaEnabled) {
+      attributesToAdd.push((0, _a11y.A11Y_INVALID)());
+    }
   } else {
     classesToRemove.push(cellProperties.invalidCellClassName);
+    if (ariaEnabled) {
+      attributesToRemove.push((0, _a11y.A11Y_INVALID)()[0]);
+    }
   }
   if (cellProperties.wordWrap === false && cellProperties.noWordWrapClassName) {
     classesToAdd.push(cellProperties.noWordWrapClassName);
@@ -42,5 +57,7 @@ function baseRenderer(instance, TD, row, col, prop, value, cellProperties) {
   }
   (0, _element.removeClass)(TD, classesToRemove);
   (0, _element.addClass)(TD, classesToAdd);
+  (0, _element.removeAttribute)(TD, attributesToRemove);
+  (0, _element.setAttribute)(TD, attributesToAdd);
 }
 baseRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/baseRenderer/baseRenderer.mjs

@@ -2,7 +2,8 @@ import "core-js/modules/es.array.push.js";
 /**
  * Adds appropriate CSS class to table cell, based on cellProperties.
  */
-import { addClass, removeClass } from "../../helpers/dom/element.mjs";
+import { addClass, removeAttribute, removeClass, setAttribute } from "../../helpers/dom/element.mjs";
+import { A11Y_INVALID, A11Y_READONLY } from "../../helpers/a11y.mjs";
 export const RENDERER_TYPE = 'base';
 
 /**
@@ -15,18 +16,32 @@ export const RENDERER_TYPE = 'base';
  * @param {object} cellProperties The cell meta object ({@see Core#getCellMeta}).
  */
 export function baseRenderer(instance, TD, row, col, prop, value, cellProperties) {
+  const ariaEnabled = cellProperties.ariaTags;
   const classesToAdd = [];
   const classesToRemove = [];
+  const attributesToRemove = [];
+  const attributesToAdd = [];
   if (cellProperties.className) {
     addClass(TD, cellProperties.className);
   }
   if (cellProperties.readOnly) {
     classesToAdd.push(cellProperties.readOnlyCellClassName);
+    if (ariaEnabled) {
+      attributesToAdd.push(A11Y_READONLY());
+    }
+  } else if (ariaEnabled) {
+    attributesToRemove.push(A11Y_READONLY()[0]);
   }
   if (cellProperties.valid === false && cellProperties.invalidCellClassName) {
     classesToAdd.push(cellProperties.invalidCellClassName);
+    if (ariaEnabled) {
+      attributesToAdd.push(A11Y_INVALID());
+    }
   } else {
     classesToRemove.push(cellProperties.invalidCellClassName);
+    if (ariaEnabled) {
+      attributesToRemove.push(A11Y_INVALID()[0]);
+    }
   }
   if (cellProperties.wordWrap === false && cellProperties.noWordWrapClassName) {
     classesToAdd.push(cellProperties.noWordWrapClassName);
@@ -36,5 +51,7 @@ export function baseRenderer(instance, TD, row, col, prop, value, cellProperties
   }
   removeClass(TD, classesToRemove);
   addClass(TD, classesToAdd);
+  removeAttribute(TD, attributesToRemove);
+  setAttribute(TD, attributesToAdd);
 }
 baseRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/checkboxRenderer/checkboxRenderer.js

@@ -7,8 +7,10 @@ var _baseRenderer = require("../baseRenderer");
 var _eventManager = _interopRequireDefault(require("../../eventManager"));
 var _element = require("../../helpers/dom/element");
 var _mixed = require("../../helpers/mixed");
-var _editorManager = require("../../editorManager");
+var _shortcutContexts = require("../../shortcutContexts");
 var _pluginHooks = _interopRequireDefault(require("../../pluginHooks"));
+var _a11y = require("../../helpers/a11y");
+var _constants = require("../../i18n/constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const isListeningKeyDownEvent = new WeakMap();
 const isCheckboxListenerAdded = new WeakMap();
@@ -61,6 +63,7 @@ function checkboxRenderer(instance, TD, row, col, prop, value, cellProperties) {
   const {
     rootDocument
   } = instance;
+  const ariaEnabled = instance.getSettings().ariaTags;
   _baseRenderer.baseRenderer.apply(this, [instance, TD, row, col, prop, value, cellProperties]);
   registerEvents(instance);
   let input = createInput(rootDocument);
@@ -86,8 +89,10 @@ function checkboxRenderer(instance, TD, row, col, prop, value, cellProperties) {
     (0, _element.addClass)(input, BAD_VALUE_CLASS);
     badValue = true;
   }
-  input.setAttribute(ATTR_ROW, row);
-  input.setAttribute(ATTR_COLUMN, col);
+  (0, _element.setAttribute)(input, [[ATTR_ROW, row], [ATTR_COLUMN, col]]);
+  if (ariaEnabled) {
+    (0, _element.setAttribute)(input, [(0, _a11y.A11Y_LABEL)(input.checked ? instance.getTranslatedPhrase(_constants.CHECKBOX_CHECKED) : instance.getTranslatedPhrase(_constants.CHECKBOX_UNCHECKED)), (0, _a11y.A11Y_CHECKED)(input.checked), (0, _a11y.A11Y_CHECKBOX)()]);
+  }
   if (!badValue && labelOptions) {
     let labelText = '';
     if (labelOptions.value) {
@@ -158,7 +163,7 @@ function checkboxRenderer(instance, TD, row, col, prop, value, cellProperties) {
         return !areSelectedCheckboxCells(); // False blocks next action associated with the keyboard shortcut.
       },
 
-      relativeToGroup: _editorManager.SHORTCUTS_GROUP_EDITOR,
+      relativeToGroup: _shortcutContexts.EDITOR_EDIT_GROUP,
       position: 'before'
     }], config);
   }