handsontable 13.1.0 → 14.0.0-next-d97b156-20231027

package/editors/autocompleteEditor/autocompleteEditor.mjs

@@ -5,11 +5,12 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { HandsontableEditor } from "../handsontableEditor/index.mjs";
 import { arrayMap, pivot } from "../../helpers/array.mjs";
-import { addClass, getCaretPosition, getScrollbarWidth, getSelectionEndPosition, getTrimmingContainer, offset, outerHeight, outerWidth, setCaretPosition } from "../../helpers/dom/element.mjs";
+import { addClass, getCaretPosition, getScrollbarWidth, getSelectionEndPosition, getTrimmingContainer, offset, outerHeight, outerWidth, setAttribute, setCaretPosition } from "../../helpers/dom/element.mjs";
 import { isDefined, stringify } from "../../helpers/mixed.mjs";
 import { stripTags } from "../../helpers/string.mjs";
 import { KEY_CODES, isPrintableChar } from "../../helpers/unicode.mjs";
 import { textRenderer } from "../../renderers/textRenderer/index.mjs";
+import { A11Y_ACTIVEDESCENDANT, A11Y_AUTOCOMPLETE, A11Y_COMBOBOX, A11Y_CONTROLS, A11Y_EXPANDED, A11Y_HASPOPUP, A11Y_LISTBOX, A11Y_LIVE, A11Y_OPTION, A11Y_POSINSET, A11Y_PRESENTATION, A11Y_RELEVANT, A11Y_SELECTED, A11Y_SETSIZE, A11Y_TEXT } from "../../helpers/a11y.mjs";
 const privatePool = new WeakMap();
 export const EDITOR_TYPE = 'autocomplete';
 
@@ -109,7 +110,8 @@ export class AutocompleteEditor extends HandsontableEditor {
     this.rawChoices = [];
     privatePool.set(this, {
       skipOne: false,
-      isMacOS: this.hot.rootWindow.navigator.platform.indexOf('Mac') > -1
+      isMacOS: this.hot.rootWindow.navigator.platform.indexOf('Mac') > -1,
+      idPrefix: instance.guid.slice(0, 9)
     });
   }
 
@@ -136,6 +138,27 @@ export class AutocompleteEditor extends HandsontableEditor {
     super.createElements();
     addClass(this.htContainer, 'autocompleteEditor');
     addClass(this.htContainer, this.hot.rootWindow.navigator.platform.indexOf('Mac') === -1 ? '' : 'htMacScroll');
+    if (this.hot.getSettings().ariaTags) {
+      setAttribute(this.TEXTAREA, [A11Y_TEXT(), A11Y_COMBOBOX(), A11Y_HASPOPUP('listbox'), A11Y_AUTOCOMPLETE()]);
+    }
+  }
+
+  /**
+   * Prepares editor's metadata and configuration of the internal Handsontable's instance.
+   *
+   * @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 {HTMLTableCellElement} td The rendered cell element.
+   * @param {*} value The rendered value.
+   * @param {object} cellProperties The cell meta object ({@see Core#getCellMeta}).
+   */
+  prepare(row, col, prop, td, value, cellProperties) {
+    const priv = privatePool.get(this);
+    super.prepare(row, col, prop, td, value, cellProperties);
+    if (this.hot.getSettings().ariaTags) {
+      setAttribute(this.TEXTAREA, [A11Y_EXPANDED('false'), A11Y_CONTROLS(`${priv.idPrefix}-listbox-${row}-${col}`)]);
+    }
   }
 
   /**
@@ -144,8 +167,14 @@ export class AutocompleteEditor extends HandsontableEditor {
   open() {
     const priv = privatePool.get(this);
     super.open();
-    const choicesListHot = this.htEditor.getInstance();
     const trimDropdown = this.cellProperties.trimDropdown === void 0 ? true : this.cellProperties.trimDropdown;
+    const rootInstanceAriaTagsEnabled = this.hot.getSettings().ariaTags;
+    const sourceArray = Array.isArray(this.cellProperties.source) ? this.cellProperties.source : null;
+    const sourceSize = sourceArray === null || sourceArray === void 0 ? void 0 : sourceArray.length;
+    const {
+      row: rowIndex,
+      col: colIndex
+    } = this;
     this.showEditableElement();
     this.focus();
     let scrollbarWidth = getScrollbarWidth();
@@ -154,9 +183,10 @@ export class AutocompleteEditor extends HandsontableEditor {
     }
 
     this.addHook('beforeKeyDown', event => this.onBeforeKeyDown(event));
-    choicesListHot.updateSettings({
+    this.htEditor.updateSettings({
       colWidths: trimDropdown ? [outerWidth(this.TEXTAREA) - 2] : void 0,
       width: trimDropdown ? outerWidth(this.TEXTAREA) + scrollbarWidth : void 0,
+      autoColumnSize: true,
       renderer: (instance, TD, row, col, prop, value, cellProperties) => {
         textRenderer(instance, TD, row, col, prop, value, cellProperties);
         const {
@@ -175,10 +205,27 @@ export class AutocompleteEditor extends HandsontableEditor {
             cellValue = cellValue.replace(match, `<strong>${match}</strong>`);
           }
         }
+        if (rootInstanceAriaTagsEnabled) {
+          setAttribute(TD, [A11Y_OPTION(),
+          // Add `setsize` and `posinset` only if the source is an array.
+          ...(sourceArray ? [A11Y_SETSIZE(sourceSize)] : []), ...(sourceArray ? [A11Y_POSINSET(sourceArray.indexOf(value) + 1)] : []), ['id', `${this.htEditor.rootElement.id}_${row}-${col}`]]);
+        }
         TD.innerHTML = cellValue;
       },
-      autoColumnSize: true
+      afterSelection: (startRow, startCol) => {
+        if (rootInstanceAriaTagsEnabled) {
+          const TD = this.htEditor.getCell(startRow, startCol, true);
+          setAttribute(TD, [A11Y_SELECTED()]);
+          setAttribute(this.TEXTAREA, ...A11Y_ACTIVEDESCENDANT(TD.id));
+        }
+      }
     });
+    if (rootInstanceAriaTagsEnabled) {
+      // Add `role=presentation` to the main table to prevent the readers from treating the option list as a table.
+      setAttribute(this.htEditor.view._wt.wtOverlays.wtTable.TABLE, ...A11Y_PRESENTATION());
+      setAttribute(this.htEditor.rootElement, [A11Y_LISTBOX(), A11Y_LIVE('polite'), A11Y_RELEVANT('text'), ['id', `${priv.idPrefix}-listbox-${rowIndex}-${colIndex}`]]);
+      setAttribute(this.TEXTAREA, ...A11Y_EXPANDED('true'));
+    }
     if (priv.skipOne) {
       priv.skipOne = false;
     }
@@ -193,6 +240,9 @@ export class AutocompleteEditor extends HandsontableEditor {
   close() {
     this.removeHooksByKey('beforeKeyDown');
     super.close();
+    if (this.hot.getSettings().ariaTags) {
+      setAttribute(this.TEXTAREA, [A11Y_EXPANDED('false')]);
+    }
   }
 
   /**
@@ -267,10 +317,15 @@ export class AutocompleteEditor extends HandsontableEditor {
     }
     this.strippedChoices = choices;
     this.htEditor.loadData(pivot([choices]));
-    this.updateDropdownHeight();
-    this.flipDropdownIfNeeded();
-    if (this.cellProperties.strict === true) {
-      this.highlightBestMatchingChoice(highlightIndex);
+    if (choices.length === 0) {
+      this.htEditor.rootElement.style.display = 'none';
+    } else {
+      this.htEditor.rootElement.style.display = '';
+      this.updateDropdownHeight();
+      this.flipDropdownIfNeeded();
+      if (this.cellProperties.strict === true) {
+        this.highlightBestMatchingChoice(highlightIndex);
+      }
     }
     this.hot.listen();
     setCaretPosition(this.TEXTAREA, pos, pos === endPos ? void 0 : endPos);
@@ -407,7 +462,7 @@ export class AutocompleteEditor extends HandsontableEditor {
    * @returns {number}
    */
   getDropdownHeight() {
-    const firstRowHeight = this.htEditor.getInstance().getRowHeight(0) || 23;
+    const firstRowHeight = this.htEditor.getRowHeight(0) || 23;
     const visibleRows = this.cellProperties.visibleRows;
     return this.strippedChoices.length >= visibleRows ? visibleRows * firstRowHeight : this.strippedChoices.length * firstRowHeight + 8; // eslint-disable-line max-len
   }

package/editors/baseEditor/baseEditor.js

@@ -8,9 +8,8 @@ var _editorManager = require("../../editorManager");
 var _hooksRefRegisterer = _interopRequireDefault(require("../../mixins/hooksRefRegisterer"));
 var _element = require("../../helpers/dom/element");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const EDITOR_TYPE = 'base';
-exports.EDITOR_TYPE = EDITOR_TYPE;
-const EDITOR_STATE = Object.freeze({
+const EDITOR_TYPE = exports.EDITOR_TYPE = 'base';
+const EDITOR_STATE = exports.EDITOR_STATE = Object.freeze({
   VIRGIN: 'STATE_VIRGIN',
   // before editing
   EDITING: 'STATE_EDITING',
@@ -18,13 +17,11 @@ const EDITOR_STATE = Object.freeze({
   // waiting for async validation
   FINISHED: 'STATE_FINISHED'
 });
-exports.EDITOR_STATE = EDITOR_STATE;
-const SHORTCUTS_GROUP_EDITOR = 'baseEditor';
+const SHORTCUTS_GROUP_EDITOR = exports.SHORTCUTS_GROUP_EDITOR = 'baseEditor';
 
 /**
  * @class BaseEditor
  */
-exports.SHORTCUTS_GROUP_EDITOR = SHORTCUTS_GROUP_EDITOR;
 class BaseEditor {
   static get EDITOR_TYPE() {
     return EDITOR_TYPE;
@@ -492,21 +489,30 @@ class BaseEditor {
     const horizontalScrollPosition = Math.abs(wtOverlays.inlineStartOverlay.getScrollPosition());
     const verticalScrollPosition = wtOverlays.topOverlay.getScrollPosition();
     const scrollbarWidth = (0, _element.getScrollbarWidth)(this.hot.rootDocument);
-    const cellTopOffset = TD.offsetTop + firstRowOffset - verticalScrollPosition;
-    let cellStartOffset = 0;
+    let cellTopOffset = TD.offsetTop;
+    if (['inline_start', 'master'].includes(overlayName)) {
+      cellTopOffset += firstRowOffset - verticalScrollPosition;
+    }
+    if (['bottom', 'bottom_inline_start_corner'].includes(overlayName)) {
+      const {
+        wtViewport: bottomWtViewport,
+        wtTable: bottomWtTable
+      } = wtOverlays.bottomOverlay.clone;
+      cellTopOffset += bottomWtViewport.getWorkspaceHeight() - bottomWtTable.getHeight() - scrollbarWidth;
+    }
+    let cellStartOffset = TD.offsetLeft;
     if (this.hot.isRtl()) {
-      const cellOffset = TD.offsetLeft;
-      if (cellOffset >= 0) {
+      if (cellStartOffset >= 0) {
         cellStartOffset = overlayTable.getWidth() - TD.offsetLeft;
       } else {
         // The `offsetLeft` returns negative values when the parent offset element has position relative
         // (it happens when on the cell the selection is applied - the `area` CSS class).
         // When it happens the `offsetLeft` value is calculated from the right edge of the parent element.
-        cellStartOffset = Math.abs(cellOffset);
+        cellStartOffset = Math.abs(cellStartOffset);
       }
       cellStartOffset += firstColumnOffset - horizontalScrollPosition - cellWidth;
-    } else {
-      cellStartOffset = TD.offsetLeft + firstColumnOffset - horizontalScrollPosition;
+    } else if (['top', 'master', 'bottom'].includes(overlayName)) {
+      cellStartOffset += firstColumnOffset - horizontalScrollPosition;
     }
     const cellComputedStyle = (0, _element.getComputedStyle)(this.TD, this.hot.rootWindow);
     const borderPhysicalWidthProp = this.hot.isRtl() ? 'borderRightWidth' : 'borderLeftWidth';

package/editors/baseEditor/baseEditor.mjs

@@ -485,21 +485,30 @@ export class BaseEditor {
     const horizontalScrollPosition = Math.abs(wtOverlays.inlineStartOverlay.getScrollPosition());
     const verticalScrollPosition = wtOverlays.topOverlay.getScrollPosition();
     const scrollbarWidth = getScrollbarWidth(this.hot.rootDocument);
-    const cellTopOffset = TD.offsetTop + firstRowOffset - verticalScrollPosition;
-    let cellStartOffset = 0;
+    let cellTopOffset = TD.offsetTop;
+    if (['inline_start', 'master'].includes(overlayName)) {
+      cellTopOffset += firstRowOffset - verticalScrollPosition;
+    }
+    if (['bottom', 'bottom_inline_start_corner'].includes(overlayName)) {
+      const {
+        wtViewport: bottomWtViewport,
+        wtTable: bottomWtTable
+      } = wtOverlays.bottomOverlay.clone;
+      cellTopOffset += bottomWtViewport.getWorkspaceHeight() - bottomWtTable.getHeight() - scrollbarWidth;
+    }
+    let cellStartOffset = TD.offsetLeft;
     if (this.hot.isRtl()) {
-      const cellOffset = TD.offsetLeft;
-      if (cellOffset >= 0) {
+      if (cellStartOffset >= 0) {
         cellStartOffset = overlayTable.getWidth() - TD.offsetLeft;
       } else {
         // The `offsetLeft` returns negative values when the parent offset element has position relative
         // (it happens when on the cell the selection is applied - the `area` CSS class).
         // When it happens the `offsetLeft` value is calculated from the right edge of the parent element.
-        cellStartOffset = Math.abs(cellOffset);
+        cellStartOffset = Math.abs(cellStartOffset);
       }
       cellStartOffset += firstColumnOffset - horizontalScrollPosition - cellWidth;
-    } else {
-      cellStartOffset = TD.offsetLeft + firstColumnOffset - horizontalScrollPosition;
+    } else if (['top', 'master', 'bottom'].includes(overlayName)) {
+      cellStartOffset += firstColumnOffset - horizontalScrollPosition;
     }
     const cellComputedStyle = getComputedStyle(this.TD, this.hot.rootWindow);
     const borderPhysicalWidthProp = this.hot.isRtl() ? 'borderRightWidth' : 'borderLeftWidth';

package/editors/checkboxEditor/checkboxEditor.js

@@ -3,13 +3,12 @@
 exports.__esModule = true;
 var _baseEditor = require("../baseEditor");
 var _element = require("../../helpers/dom/element");
-const EDITOR_TYPE = 'checkbox';
+const EDITOR_TYPE = exports.EDITOR_TYPE = 'checkbox';
 
 /**
  * @private
  * @class CheckboxEditor
  */
-exports.EDITOR_TYPE = EDITOR_TYPE;
 class CheckboxEditor extends _baseEditor.BaseEditor {
   static get EDITOR_TYPE() {
     return EDITOR_TYPE;

package/editors/dateEditor/dateEditor.js

@@ -7,11 +7,11 @@ var _pikaday = _interopRequireDefault(require("pikaday"));
 var _textEditor = require("../textEditor");
 var _eventManager = _interopRequireDefault(require("../../eventManager"));
 var _element = require("../../helpers/dom/element");
+var _a11y = require("../../helpers/a11y");
 var _object = require("../../helpers/object");
 var _unicode = require("../../helpers/unicode");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const EDITOR_TYPE = 'date';
-exports.EDITOR_TYPE = EDITOR_TYPE;
+const EDITOR_TYPE = exports.EDITOR_TYPE = 'date';
 const SHORTCUTS_GROUP_EDITOR = 'dateEditor';
 
 /**
@@ -44,7 +44,7 @@ class DateEditor extends _textEditor.TextEditor {
       throw new Error('You need to include Pikaday to your project.');
     }
     super.init();
-    this.instance.addHook('afterDestroy', () => {
+    this.hot.addHook('afterDestroy', () => {
       this.parentDestroyed = true;
       this.destroyElements();
     });
@@ -69,7 +69,21 @@ class DateEditor extends _textEditor.TextEditor {
     /**
      * Prevent recognizing clicking on datepicker as clicking outside of table.
      */
-    eventManager.addEventListener(this.datePicker, 'mousedown', event => event.stopPropagation());
+    eventManager.addEventListener(this.datePicker, 'mousedown', event => {
+      if ((0, _element.hasClass)(event.target, 'pika-day')) {
+        this.hideDatepicker();
+      }
+      event.stopPropagation();
+    });
+
+    /**
+     * Prevent caret movement in the TEXTAREA when navigating over the date picker.
+     */
+    eventManager.addEventListener(this.TEXTAREA, 'keydown', event => {
+      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.code)) {
+        event.preventDefault();
+      }
+    });
   }
 
   /**
@@ -110,6 +124,9 @@ class DateEditor extends _textEditor.TextEditor {
     const editorContext = shortcutManager.getContext('editor');
     super.open();
     this.showDatepicker(event);
+    if (this.hot.getSettings().ariaTags) {
+      (0, _element.setAttribute)(this.TD, [(0, _a11y.A11Y_EXPANDED)('true')]);
+    }
     editorContext.addShortcut({
       keys: [['Enter']],
       callback: keyboardEvent => {
@@ -132,9 +149,12 @@ class DateEditor extends _textEditor.TextEditor {
     if ((_this$$datePicker = this.$datePicker) !== null && _this$$datePicker !== void 0 && _this$$datePicker.destroy) {
       this.$datePicker.destroy();
     }
-    this.instance._registerTimeout(() => {
-      this.instance._refreshBorders();
+    this.hot._registerTimeout(() => {
+      this.hot._refreshBorders();
     });
+    if (this.TD && this.hot.getSettings().ariaTags) {
+      (0, _element.setAttribute)(this.TD, [(0, _a11y.A11Y_EXPANDED)('false')]);
+    }
     const shortcutManager = this.hot.getShortcutManager();
     const editorContext = shortcutManager.getContext('editor');
     editorContext.removeShortcutsByGroup(SHORTCUTS_GROUP_EDITOR);
@@ -152,7 +172,6 @@ class DateEditor extends _textEditor.TextEditor {
     let ctrlDown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     if (restoreOriginalValue) {
       // pressed ESC, restore original value
-      // var value = this.instance.getDataAtCell(this.row, this.col);
       const value = this.originalValue;
       if (value !== void 0) {
         this.setValue(value);
@@ -169,7 +188,7 @@ class DateEditor extends _textEditor.TextEditor {
   showDatepicker(event) {
     const offset = this.TD.getBoundingClientRect();
     const dateFormat = this.cellProperties.dateFormat || this.defaultDateFormat;
-    const isMouseDown = this.instance.view.isMouseDown();
+    const isMouseDown = this.hot.view.isMouseDown();
     const isMeta = event ? (0, _unicode.isFunctionKey)(event.keyCode) : false;
     let dateStr;
     this.datePicker.style.display = 'block';
@@ -248,7 +267,6 @@ class DateEditor extends _textEditor.TextEditor {
         dateStr = (0, _moment.default)(dateStr).format(this.cellProperties.dateFormat || this.defaultDateFormat);
       }
       this.setValue(dateStr);
-      this.hideDatepicker();
       if (origOnSelect) {
         origOnSelect();
       }

package/editors/dateEditor/dateEditor.mjs

@@ -3,7 +3,8 @@ import moment from 'moment';
 import Pikaday from 'pikaday';
 import { TextEditor } from "../textEditor/index.mjs";
 import EventManager from "../../eventManager.mjs";
-import { addClass, outerHeight, outerWidth } from "../../helpers/dom/element.mjs";
+import { addClass, hasClass, outerHeight, outerWidth, setAttribute } from "../../helpers/dom/element.mjs";
+import { A11Y_EXPANDED } from "../../helpers/a11y.mjs";
 import { deepExtend } from "../../helpers/object.mjs";
 import { isFunctionKey } from "../../helpers/unicode.mjs";
 export const EDITOR_TYPE = 'date';
@@ -39,7 +40,7 @@ export class DateEditor extends TextEditor {
       throw new Error('You need to include Pikaday to your project.');
     }
     super.init();
-    this.instance.addHook('afterDestroy', () => {
+    this.hot.addHook('afterDestroy', () => {
       this.parentDestroyed = true;
       this.destroyElements();
     });
@@ -64,7 +65,21 @@ export class DateEditor extends TextEditor {
     /**
      * Prevent recognizing clicking on datepicker as clicking outside of table.
      */
-    eventManager.addEventListener(this.datePicker, 'mousedown', event => event.stopPropagation());
+    eventManager.addEventListener(this.datePicker, 'mousedown', event => {
+      if (hasClass(event.target, 'pika-day')) {
+        this.hideDatepicker();
+      }
+      event.stopPropagation();
+    });
+
+    /**
+     * Prevent caret movement in the TEXTAREA when navigating over the date picker.
+     */
+    eventManager.addEventListener(this.TEXTAREA, 'keydown', event => {
+      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.code)) {
+        event.preventDefault();
+      }
+    });
   }
 
   /**
@@ -105,6 +120,9 @@ export class DateEditor extends TextEditor {
     const editorContext = shortcutManager.getContext('editor');
     super.open();
     this.showDatepicker(event);
+    if (this.hot.getSettings().ariaTags) {
+      setAttribute(this.TD, [A11Y_EXPANDED('true')]);
+    }
     editorContext.addShortcut({
       keys: [['Enter']],
       callback: keyboardEvent => {
@@ -127,9 +145,12 @@ export class DateEditor extends TextEditor {
     if ((_this$$datePicker = this.$datePicker) !== null && _this$$datePicker !== void 0 && _this$$datePicker.destroy) {
       this.$datePicker.destroy();
     }
-    this.instance._registerTimeout(() => {
-      this.instance._refreshBorders();
+    this.hot._registerTimeout(() => {
+      this.hot._refreshBorders();
     });
+    if (this.TD && this.hot.getSettings().ariaTags) {
+      setAttribute(this.TD, [A11Y_EXPANDED('false')]);
+    }
     const shortcutManager = this.hot.getShortcutManager();
     const editorContext = shortcutManager.getContext('editor');
     editorContext.removeShortcutsByGroup(SHORTCUTS_GROUP_EDITOR);
@@ -147,7 +168,6 @@ export class DateEditor extends TextEditor {
     let ctrlDown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     if (restoreOriginalValue) {
       // pressed ESC, restore original value
-      // var value = this.instance.getDataAtCell(this.row, this.col);
       const value = this.originalValue;
       if (value !== void 0) {
         this.setValue(value);
@@ -164,7 +184,7 @@ export class DateEditor extends TextEditor {
   showDatepicker(event) {
     const offset = this.TD.getBoundingClientRect();
     const dateFormat = this.cellProperties.dateFormat || this.defaultDateFormat;
-    const isMouseDown = this.instance.view.isMouseDown();
+    const isMouseDown = this.hot.view.isMouseDown();
     const isMeta = event ? isFunctionKey(event.keyCode) : false;
     let dateStr;
     this.datePicker.style.display = 'block';
@@ -243,7 +263,6 @@ export class DateEditor extends TextEditor {
         dateStr = moment(dateStr).format(this.cellProperties.dateFormat || this.defaultDateFormat);
       }
       this.setValue(dateStr);
-      this.hideDatepicker();
       if (origOnSelect) {
         origOnSelect();
       }

package/editors/dropdownEditor/dropdownEditor.js

@@ -4,13 +4,12 @@ exports.__esModule = true;
 var _autocompleteEditor = require("../autocompleteEditor");
 var _pluginHooks = _interopRequireDefault(require("../../pluginHooks"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const EDITOR_TYPE = 'dropdown';
+const EDITOR_TYPE = exports.EDITOR_TYPE = 'dropdown';
 
 /**
  * @private
  * @class DropdownEditor
  */
-exports.EDITOR_TYPE = EDITOR_TYPE;
 class DropdownEditor extends _autocompleteEditor.AutocompleteEditor {
   static get EDITOR_TYPE() {
     return EDITOR_TYPE;

package/editors/handsontableEditor/handsontableEditor.js

@@ -6,14 +6,14 @@ var _element = require("../../helpers/dom/element");
 var _event = require("../../helpers/dom/event");
 var _object = require("../../helpers/object");
 var _editorManager = require("../../editorManager");
+var _a11y = require("../../helpers/a11y");
 const SHORTCUTS_GROUP = 'handsontableEditor';
-const EDITOR_TYPE = 'handsontable';
+const EDITOR_TYPE = exports.EDITOR_TYPE = 'handsontable';
 
 /**
  * @private
  * @class HandsontableEditor
  */
-exports.EDITOR_TYPE = EDITOR_TYPE;
 class HandsontableEditor extends _textEditor.TextEditor {
   static get EDITOR_TYPE() {
     return EDITOR_TYPE;
@@ -42,6 +42,9 @@ class HandsontableEditor extends _textEditor.TextEditor {
     }
     (0, _element.setCaretPosition)(this.TEXTAREA, 0, this.TEXTAREA.value.length);
     this.refreshDimensions();
+    if (this.hot.getSettings().ariaTags) {
+      (0, _element.setAttribute)(this.TD, [(0, _a11y.A11Y_EXPANDED)('true')]);
+    }
   }
 
   /**
@@ -53,6 +56,9 @@ class HandsontableEditor extends _textEditor.TextEditor {
     }
     this.removeHooksByKey('beforeKeyDown');
     super.close();
+    if (this.hot.getSettings().ariaTags) {
+      (0, _element.setAttribute)(this.TD, [(0, _a11y.A11Y_EXPANDED)('false')]);
+    }
   }
 
   /**
@@ -81,6 +87,7 @@ class HandsontableEditor extends _textEditor.TextEditor {
       fillHandle: false,
       autoWrapCol: false,
       autoWrapRow: false,
+      ariaTags: false,
       afterOnCellMouseDown(_, coords) {
         const sourceValue = this.getSourceData(coords.row, coords.col);
 
@@ -139,7 +146,7 @@ class HandsontableEditor extends _textEditor.TextEditor {
     }
 
     if (this.htEditor && this.htEditor.getSelectedLast()) {
-      const value = this.htEditor.getInstance().getValue();
+      const value = this.htEditor.getValue();
       if (value !== void 0) {
         // if the value is undefined then it means we don't want to set the value
         this.setValue(value);
@@ -149,7 +156,7 @@ class HandsontableEditor extends _textEditor.TextEditor {
   }
 
   /**
-   * Assings afterDestroy callback to prevent memory leaks.
+   * Assigns afterDestroy callback to prevent memory leaks.
    *
    * @private
    */
@@ -176,7 +183,7 @@ class HandsontableEditor extends _textEditor.TextEditor {
       position: 'before'
     };
     const action = (rowToSelect, event) => {
-      const innerHOT = this.htEditor.getInstance();
+      const innerHOT = this.htEditor;
       if (rowToSelect !== void 0) {
         if (rowToSelect < 0 || innerHOT.flipped && rowToSelect > innerHOT.countRows() - 1) {
           innerHOT.deselectCell();
@@ -195,7 +202,7 @@ class HandsontableEditor extends _textEditor.TextEditor {
     editorContext.addShortcuts([{
       keys: [['ArrowUp']],
       callback: event => {
-        const innerHOT = this.htEditor.getInstance();
+        const innerHOT = this.htEditor;
         let rowToSelect;
         let selectedRow;
         if (!innerHOT.getSelectedLast() && innerHOT.flipped) {
@@ -215,7 +222,7 @@ class HandsontableEditor extends _textEditor.TextEditor {
     }, {
       keys: [['ArrowDown']],
       callback: event => {
-        const innerHOT = this.htEditor.getInstance();
+        const innerHOT = this.htEditor;
         let rowToSelect;
         let selectedRow;
         if (!innerHOT.getSelectedLast() && !innerHOT.flipped) {

package/editors/handsontableEditor/handsontableEditor.mjs

@@ -1,8 +1,9 @@
 import { TextEditor } from "../textEditor/index.mjs";
-import { setCaretPosition } from "../../helpers/dom/element.mjs";
+import { setAttribute, setCaretPosition } from "../../helpers/dom/element.mjs";
 import { stopImmediatePropagation } from "../../helpers/dom/event.mjs";
 import { extend } from "../../helpers/object.mjs";
 import { SHORTCUTS_GROUP_NAVIGATION } from "../../editorManager.mjs";
+import { A11Y_EXPANDED } from "../../helpers/a11y.mjs";
 const SHORTCUTS_GROUP = 'handsontableEditor';
 export const EDITOR_TYPE = 'handsontable';
 
@@ -38,6 +39,9 @@ export class HandsontableEditor extends TextEditor {
     }
     setCaretPosition(this.TEXTAREA, 0, this.TEXTAREA.value.length);
     this.refreshDimensions();
+    if (this.hot.getSettings().ariaTags) {
+      setAttribute(this.TD, [A11Y_EXPANDED('true')]);
+    }
   }
 
   /**
@@ -49,6 +53,9 @@ export class HandsontableEditor extends TextEditor {
     }
     this.removeHooksByKey('beforeKeyDown');
     super.close();
+    if (this.hot.getSettings().ariaTags) {
+      setAttribute(this.TD, [A11Y_EXPANDED('false')]);
+    }
   }
 
   /**
@@ -77,6 +84,7 @@ export class HandsontableEditor extends TextEditor {
       fillHandle: false,
       autoWrapCol: false,
       autoWrapRow: false,
+      ariaTags: false,
       afterOnCellMouseDown(_, coords) {
         const sourceValue = this.getSourceData(coords.row, coords.col);
 
@@ -135,7 +143,7 @@ export class HandsontableEditor extends TextEditor {
     }
 
     if (this.htEditor && this.htEditor.getSelectedLast()) {
-      const value = this.htEditor.getInstance().getValue();
+      const value = this.htEditor.getValue();
       if (value !== void 0) {
         // if the value is undefined then it means we don't want to set the value
         this.setValue(value);
@@ -145,7 +153,7 @@ export class HandsontableEditor extends TextEditor {
   }
 
   /**
-   * Assings afterDestroy callback to prevent memory leaks.
+   * Assigns afterDestroy callback to prevent memory leaks.
    *
    * @private
    */
@@ -172,7 +180,7 @@ export class HandsontableEditor extends TextEditor {
       position: 'before'
     };
     const action = (rowToSelect, event) => {
-      const innerHOT = this.htEditor.getInstance();
+      const innerHOT = this.htEditor;
       if (rowToSelect !== void 0) {
         if (rowToSelect < 0 || innerHOT.flipped && rowToSelect > innerHOT.countRows() - 1) {
           innerHOT.deselectCell();
@@ -191,7 +199,7 @@ export class HandsontableEditor extends TextEditor {
     editorContext.addShortcuts([{
       keys: [['ArrowUp']],
       callback: event => {
-        const innerHOT = this.htEditor.getInstance();
+        const innerHOT = this.htEditor;
         let rowToSelect;
         let selectedRow;
         if (!innerHOT.getSelectedLast() && innerHOT.flipped) {
@@ -211,7 +219,7 @@ export class HandsontableEditor extends TextEditor {
     }, {
       keys: [['ArrowDown']],
       callback: event => {
-        const innerHOT = this.htEditor.getInstance();
+        const innerHOT = this.htEditor;
         let rowToSelect;
         let selectedRow;
         if (!innerHOT.getSelectedLast() && !innerHOT.flipped) {

package/editors/numericEditor/numericEditor.js

@@ -2,13 +2,12 @@
 
 exports.__esModule = true;
 var _textEditor = require("../textEditor");
-const EDITOR_TYPE = 'numeric';
+const EDITOR_TYPE = exports.EDITOR_TYPE = 'numeric';
 
 /**
  * @private
  * @class NumericEditor
  */
-exports.EDITOR_TYPE = EDITOR_TYPE;
 class NumericEditor extends _textEditor.TextEditor {
   static get EDITOR_TYPE() {
     return EDITOR_TYPE;

package/editors/passwordEditor/passwordEditor.js

@@ -3,13 +3,12 @@
 exports.__esModule = true;
 var _textEditor = require("../textEditor");
 var _element = require("../../helpers/dom/element");
-const EDITOR_TYPE = 'password';
+const EDITOR_TYPE = exports.EDITOR_TYPE = 'password';
 
 /**
  * @private
  * @class PasswordEditor
  */
-exports.EDITOR_TYPE = EDITOR_TYPE;
 class PasswordEditor extends _textEditor.TextEditor {
   static get EDITOR_TYPE() {
     return EDITOR_TYPE;