handsontable 0.0.0-next-010265d-20231005 → 0.0.0-next-9379dd1-20231020

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);
   }

package/renderers/checkboxRenderer/checkboxRenderer.mjs

@@ -1,10 +1,12 @@
 import "core-js/modules/es.array.push.js";
 import { baseRenderer } from "../baseRenderer/index.mjs";
 import EventManager from "../../eventManager.mjs";
-import { empty, addClass } from "../../helpers/dom/element.mjs";
+import { empty, addClass, setAttribute } from "../../helpers/dom/element.mjs";
 import { isEmpty, stringify } from "../../helpers/mixed.mjs";
-import { SHORTCUTS_GROUP_EDITOR } from "../../editorManager.mjs";
+import { EDITOR_EDIT_GROUP as SHORTCUTS_GROUP_EDITOR } from "../../shortcutContexts/index.mjs";
 import Hooks from "../../pluginHooks.mjs";
+import { A11Y_CHECKBOX, A11Y_CHECKED, A11Y_LABEL } from "../../helpers/a11y.mjs";
+import { CHECKBOX_CHECKED, CHECKBOX_UNCHECKED } from "../../i18n/constants.mjs";
 const isListeningKeyDownEvent = new WeakMap();
 const isCheckboxListenerAdded = new WeakMap();
 const BAD_VALUE_CLASS = 'htBadValue';
@@ -55,6 +57,7 @@ export function checkboxRenderer(instance, TD, row, col, prop, value, cellProper
   const {
     rootDocument
   } = instance;
+  const ariaEnabled = instance.getSettings().ariaTags;
   baseRenderer.apply(this, [instance, TD, row, col, prop, value, cellProperties]);
   registerEvents(instance);
   let input = createInput(rootDocument);
@@ -80,8 +83,10 @@ export function checkboxRenderer(instance, TD, row, col, prop, value, cellProper
     addClass(input, BAD_VALUE_CLASS);
     badValue = true;
   }
-  input.setAttribute(ATTR_ROW, row);
-  input.setAttribute(ATTR_COLUMN, col);
+  setAttribute(input, [[ATTR_ROW, row], [ATTR_COLUMN, col]]);
+  if (ariaEnabled) {
+    setAttribute(input, [A11Y_LABEL(input.checked ? instance.getTranslatedPhrase(CHECKBOX_CHECKED) : instance.getTranslatedPhrase(CHECKBOX_UNCHECKED)), A11Y_CHECKED(input.checked), A11Y_CHECKBOX()]);
+  }
   if (!badValue && labelOptions) {
     let labelText = '';
     if (labelOptions.value) {

package/renderers/dateRenderer/dateRenderer.d.ts

@@ -0,0 +1,5 @@
+import Core from '../../core';
+import { CellProperties } from '../../settings';
+
+export const RENDERER_TYPE: 'date';
+export function dateRenderer(instance: Core, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: any, cellProperties: CellProperties): void;

package/renderers/dateRenderer/dateRenderer.js

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.dateRenderer = dateRenderer;
+var _autocompleteRenderer = require("../autocompleteRenderer");
+var _a11y = require("../../helpers/a11y");
+var _element = require("../../helpers/dom/element");
+const RENDERER_TYPE = 'date';
+
+/**
+ * Handsontable renderer.
+ *
+ * @private
+ * @param {Core} instance The Handsontable instance.
+ * @param {HTMLTableCellElement} TD The rendered cell element.
+ * @param {number} row The visual row index.
+ * @param {number} col The visual column index.
+ * @param {number|string} prop The column property (passed when datasource is an array of objects).
+ * @param {*} value The rendered value.
+ * @param {object} cellProperties The cell meta object ({@see Core#getCellMeta}).
+ */
+exports.RENDERER_TYPE = RENDERER_TYPE;
+function dateRenderer(instance, TD, row, col, prop, value, cellProperties) {
+  _autocompleteRenderer.autocompleteRenderer.apply(this, [instance, TD, row, col, prop, value, cellProperties]);
+  if (instance.getSettings().ariaTags) {
+    (0, _element.setAttribute)(TD, [(0, _a11y.A11Y_HASPOPUP)('dialog'), (0, _a11y.A11Y_EXPANDED)('false')]);
+  }
+}
+dateRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/dateRenderer/dateRenderer.mjs

@@ -0,0 +1,24 @@
+import { autocompleteRenderer } from "../autocompleteRenderer/index.mjs";
+import { A11Y_EXPANDED, A11Y_HASPOPUP } from "../../helpers/a11y.mjs";
+import { setAttribute } from "../../helpers/dom/element.mjs";
+export const RENDERER_TYPE = 'date';
+
+/**
+ * Handsontable renderer.
+ *
+ * @private
+ * @param {Core} instance The Handsontable instance.
+ * @param {HTMLTableCellElement} TD The rendered cell element.
+ * @param {number} row The visual row index.
+ * @param {number} col The visual column index.
+ * @param {number|string} prop The column property (passed when datasource is an array of objects).
+ * @param {*} value The rendered value.
+ * @param {object} cellProperties The cell meta object ({@see Core#getCellMeta}).
+ */
+export function dateRenderer(instance, TD, row, col, prop, value, cellProperties) {
+  autocompleteRenderer.apply(this, [instance, TD, row, col, prop, value, cellProperties]);
+  if (instance.getSettings().ariaTags) {
+    setAttribute(TD, [A11Y_HASPOPUP('dialog'), A11Y_EXPANDED('false')]);
+  }
+}
+dateRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/dateRenderer/index.d.ts

@@ -0,0 +1 @@
+export { RENDERER_TYPE, dateRenderer } from './dateRenderer';

package/renderers/dateRenderer/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+exports.__esModule = true;
+var _dateRenderer = require("./dateRenderer");
+exports.RENDERER_TYPE = _dateRenderer.RENDERER_TYPE;
+exports.dateRenderer = _dateRenderer.dateRenderer;

package/renderers/dateRenderer/index.mjs

@@ -0,0 +1 @@
+export { RENDERER_TYPE, dateRenderer } from "./dateRenderer.mjs";

package/renderers/handsontableRenderer/handsontableRenderer.d.ts

@@ -0,0 +1,5 @@
+import Core from '../../core';
+import { CellProperties } from '../../settings';
+
+export const RENDERER_TYPE: 'handsontable';
+export function handsontableRenderer(instance: Core, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: any, cellProperties: CellProperties): void;

package/renderers/handsontableRenderer/handsontableRenderer.js

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.handsontableRenderer = handsontableRenderer;
+var _autocompleteRenderer = require("../autocompleteRenderer");
+var _a11y = require("../../helpers/a11y");
+var _element = require("../../helpers/dom/element");
+const RENDERER_TYPE = 'handsontable';
+
+/**
+ * Handsontable renderer.
+ *
+ * @private
+ * @param {Core} instance The Handsontable instance.
+ * @param {HTMLTableCellElement} TD The rendered cell element.
+ * @param {number} row The visual row index.
+ * @param {number} col The visual column index.
+ * @param {number|string} prop The column property (passed when datasource is an array of objects).
+ * @param {*} value The rendered value.
+ * @param {object} cellProperties The cell meta object ({@see Core#getCellMeta}).
+ */
+exports.RENDERER_TYPE = RENDERER_TYPE;
+function handsontableRenderer(instance, TD, row, col, prop, value, cellProperties) {
+  _autocompleteRenderer.autocompleteRenderer.apply(this, [instance, TD, row, col, prop, value, cellProperties]);
+  if (instance.getSettings().ariaTags) {
+    (0, _element.setAttribute)(TD, [(0, _a11y.A11Y_HASPOPUP)('true'), (0, _a11y.A11Y_EXPANDED)('false')]);
+  }
+}
+handsontableRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/handsontableRenderer/handsontableRenderer.mjs

@@ -0,0 +1,24 @@
+import { autocompleteRenderer } from "../autocompleteRenderer/index.mjs";
+import { A11Y_EXPANDED, A11Y_HASPOPUP } from "../../helpers/a11y.mjs";
+import { setAttribute } from "../../helpers/dom/element.mjs";
+export const RENDERER_TYPE = 'handsontable';
+
+/**
+ * Handsontable renderer.
+ *
+ * @private
+ * @param {Core} instance The Handsontable instance.
+ * @param {HTMLTableCellElement} TD The rendered cell element.
+ * @param {number} row The visual row index.
+ * @param {number} col The visual column index.
+ * @param {number|string} prop The column property (passed when datasource is an array of objects).
+ * @param {*} value The rendered value.
+ * @param {object} cellProperties The cell meta object ({@see Core#getCellMeta}).
+ */
+export function handsontableRenderer(instance, TD, row, col, prop, value, cellProperties) {
+  autocompleteRenderer.apply(this, [instance, TD, row, col, prop, value, cellProperties]);
+  if (instance.getSettings().ariaTags) {
+    setAttribute(TD, [A11Y_HASPOPUP('true'), A11Y_EXPANDED('false')]);
+  }
+}
+handsontableRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/handsontableRenderer/index.d.ts

@@ -0,0 +1 @@
+export { RENDERER_TYPE, handsontableRenderer } from './handsontableRenderer';

package/renderers/handsontableRenderer/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+exports.__esModule = true;
+var _handsontableRenderer = require("./handsontableRenderer");
+exports.RENDERER_TYPE = _handsontableRenderer.RENDERER_TYPE;
+exports.handsontableRenderer = _handsontableRenderer.handsontableRenderer;

package/renderers/handsontableRenderer/index.mjs

@@ -0,0 +1 @@
+export { RENDERER_TYPE, handsontableRenderer } from "./handsontableRenderer.mjs";

package/renderers/index.d.ts

@@ -1,9 +1,12 @@
 import { autocompleteRenderer, RENDERER_TYPE as AUTOCOMPLETE_RENDERER } from './autocompleteRenderer';
 import { baseRenderer, RENDERER_TYPE as BASE_RENDERER } from './baseRenderer';
+import { dateRenderer, RENDERER_TYPE as DATE_RENDERER } from './dateRenderer';
 import { checkboxRenderer, RENDERER_TYPE as CHECKBOX_RENDERER } from './checkboxRenderer';
+import { handsontableRenderer, RENDERER_TYPE as HANDSONTABLE_RENDERER } from "./handsontableRenderer";
 import { htmlRenderer, RENDERER_TYPE as HTML_RENDERER } from './htmlRenderer';
 import { numericRenderer, RENDERER_TYPE as NUMERIC_RENDERER } from './numericRenderer';
 import { passwordRenderer, RENDERER_TYPE as PASSWORD_RENDERER } from './passwordRenderer';
+import { selectRenderer, RENDERER_TYPE as SELECT_RENDERER } from './selectRenderer';
 import { textRenderer, RENDERER_TYPE as TEXT_RENDERER } from './textRenderer';
 import { timeRenderer, RENDERER_TYPE as TIME_RENDERER } from './timeRenderer';
 
@@ -13,9 +16,12 @@ export interface Renderers {
   autocomplete: typeof autocompleteRenderer;
   base: typeof baseRenderer;
   checkbox: typeof checkboxRenderer;
+  date: typeof dateRenderer;
+  handsontable: typeof handsontableRenderer;
   html: typeof htmlRenderer;
   numeric: typeof numericRenderer;
   password: typeof passwordRenderer;
+  select: typeof selectRenderer;
   text: typeof textRenderer;
   time: typeof timeRenderer;
 }
@@ -29,9 +35,12 @@ export {
   autocompleteRenderer, AUTOCOMPLETE_RENDERER,
   baseRenderer, BASE_RENDERER,
   checkboxRenderer, CHECKBOX_RENDERER,
+  dateRenderer, DATE_RENDERER,
+  handsontableRenderer, HANDSONTABLE_RENDERER,
   htmlRenderer, HTML_RENDERER,
   numericRenderer, NUMERIC_RENDERER,
   passwordRenderer, PASSWORD_RENDERER,
+  selectRenderer, SELECT_RENDERER,
   textRenderer, TEXT_RENDERER,
   timeRenderer, TIME_RENDERER
 };

package/renderers/selectRenderer/index.d.ts

@@ -0,0 +1 @@
+export { RENDERER_TYPE, selectRenderer } from './selectRenderer';

package/renderers/selectRenderer/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+exports.__esModule = true;
+var _selectRenderer = require("./selectRenderer");
+exports.RENDERER_TYPE = _selectRenderer.RENDERER_TYPE;
+exports.selectRenderer = _selectRenderer.selectRenderer;

package/renderers/selectRenderer/index.mjs

@@ -0,0 +1 @@
+export { RENDERER_TYPE, selectRenderer } from "./selectRenderer.mjs";

package/renderers/selectRenderer/selectRenderer.d.ts

@@ -0,0 +1,5 @@
+import Core from '../../core';
+import { CellProperties } from '../../settings';
+
+export const RENDERER_TYPE: 'select';
+export function selectRenderer(instance: Core, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: any, cellProperties: CellProperties): void;

package/renderers/selectRenderer/selectRenderer.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.selectRenderer = selectRenderer;
+var _textRenderer = require("../textRenderer");
+var _a11y = require("../../helpers/a11y");
+var _element = require("../../helpers/dom/element");
+const RENDERER_TYPE = 'select';
+
+/**
+ * @private
+ * @param {Core} instance The Handsontable instance.
+ * @param {HTMLTableCellElement} TD The rendered cell element.
+ * @param {number} row The visual row index.
+ * @param {number} col The visual column index.
+ * @param {number|string} prop The column property (passed when datasource is an array of objects).
+ * @param {*} value The rendered value.
+ * @param {object} cellProperties The cell meta object ({@see Core#getCellMeta}).
+ */
+exports.RENDERER_TYPE = RENDERER_TYPE;
+function selectRenderer(instance, TD, row, col, prop, value, cellProperties) {
+  _textRenderer.textRenderer.apply(this, [instance, TD, row, col, prop, value, cellProperties]);
+  if (instance.getSettings().ariaTags) {
+    (0, _element.setAttribute)(TD, ...(0, _a11y.A11Y_HASPOPUP)('listbox'));
+  }
+}
+selectRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/selectRenderer/selectRenderer.mjs

@@ -0,0 +1,22 @@
+import { textRenderer } from "../textRenderer/index.mjs";
+import { A11Y_HASPOPUP } from "../../helpers/a11y.mjs";
+import { setAttribute } from "../../helpers/dom/element.mjs";
+export const RENDERER_TYPE = 'select';
+
+/**
+ * @private
+ * @param {Core} instance The Handsontable instance.
+ * @param {HTMLTableCellElement} TD The rendered cell element.
+ * @param {number} row The visual row index.
+ * @param {number} col The visual column index.
+ * @param {number|string} prop The column property (passed when datasource is an array of objects).
+ * @param {*} value The rendered value.
+ * @param {object} cellProperties The cell meta object ({@see Core#getCellMeta}).
+ */
+export function selectRenderer(instance, TD, row, col, prop, value, cellProperties) {
+  textRenderer.apply(this, [instance, TD, row, col, prop, value, cellProperties]);
+  if (instance.getSettings().ariaTags) {
+    setAttribute(TD, ...A11Y_HASPOPUP('listbox'));
+  }
+}
+selectRenderer.RENDERER_TYPE = RENDERER_TYPE;