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

package/editorManager.js

@@ -3,15 +3,12 @@
 exports.__esModule = true;
 var _unicode = require("./helpers/unicode");
 var _event = require("./helpers/dom/event");
-var _element = require("./helpers/dom/element");
 var _registry = require("./editors/registry");
 var _eventManager = _interopRequireDefault(require("./eventManager"));
 var _mixed = require("./helpers/mixed");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const SHORTCUTS_GROUP_NAVIGATION = 'editorManager.navigation';
 exports.SHORTCUTS_GROUP_NAVIGATION = SHORTCUTS_GROUP_NAVIGATION;
-const SHORTCUTS_GROUP_EDITOR = 'editorManager.handlingEditor';
-exports.SHORTCUTS_GROUP_EDITOR = SHORTCUTS_GROUP_EDITOR;
 class EditorManager {
   /**
    * @param {Core} instance The Handsontable instance.
@@ -74,9 +71,6 @@ class EditorManager {
      * @type {object}
      */
     this.cellProperties = void 0;
-    const shortcutManager = this.instance.getShortcutManager();
-    shortcutManager.addContext('editor');
-    this.registerShortcuts();
     this.instance.addHook('afterDocumentKeyDown', event => this.onAfterDocumentKeyDown(event));
 
     // Open editor when text composition is started (IME editor)
@@ -88,62 +82,6 @@ class EditorManager {
     this.instance.view._wt.update('onCellDblClick', (event, coords, elem) => this.onCellDblClick(event, coords, elem));
   }
 
-  /**
-   * Register shortcuts responsible for handling some actions related to an editor.
-   *
-   * @private
-   */
-  registerShortcuts() {
-    const shortcutManager = this.instance.getShortcutManager();
-    const gridContext = shortcutManager.getContext('grid');
-    const editorContext = shortcutManager.getContext('editor');
-    const config = {
-      group: SHORTCUTS_GROUP_EDITOR
-    };
-    editorContext.addShortcuts([{
-      keys: [['Enter'], ['Enter', 'Shift'], ['Enter', 'Control/Meta'], ['Enter', 'Control/Meta', 'Shift']],
-      callback: (event, keys) => {
-        this.closeEditorAndSaveChanges(shortcutManager.isCtrlPressed());
-        this.moveSelectionAfterEnter(keys.includes('shift'));
-      }
-    }, {
-      keys: [['Escape'], ['Escape', 'Control/Meta']],
-      callback: () => {
-        this.closeEditorAndRestoreOriginalValue(shortcutManager.isCtrlPressed());
-        this.activeEditor.focus();
-      }
-    }], config);
-    gridContext.addShortcuts([{
-      keys: [['F2']],
-      callback: event => {
-        this.openEditor(null, event, true);
-      }
-    }, {
-      keys: [['Backspace'], ['Delete']],
-      callback: () => {
-        this.instance.emptySelectedCells();
-        this.prepareEditor();
-      }
-    }, {
-      keys: [['Enter'], ['Enter', 'Shift']],
-      callback: (event, keys) => {
-        if (this.instance.getSettings().enterBeginsEditing) {
-          if (this.cellProperties.readOnly) {
-            this.moveSelectionAfterEnter();
-          } else {
-            this.openEditor(null, event, true);
-          }
-        } else {
-          this.moveSelectionAfterEnter(keys.includes('shift'));
-        }
-        (0, _event.stopImmediatePropagation)(event); // required by HandsontableEditor
-      }
-    }], {
-      ...config,
-      runOnlyIf: () => (0, _mixed.isDefined)(this.instance.getSelected())
-    });
-  }
-
   /**
    * Lock the editor from being prepared and closed. Locking the editor prevents its closing and
    * reinitialized after selecting the new cell. This feature is necessary for a mobile editor.
@@ -196,10 +134,16 @@ class EditorManager {
       });
       return;
     }
+    const {
+      highlight
+    } = this.instance.getSelectedRangeLast();
+    if (highlight.isHeader()) {
+      return;
+    }
     const {
       row,
       col
-    } = this.instance.getSelectedRangeLast().highlight;
+    } = highlight;
     const modifiedCellCoords = this.instance.runHooks('modifyGetCellCoords', row, col);
     let visualRowToCheck = row;
     let visualColumnToCheck = col;
@@ -209,17 +153,6 @@ class EditorManager {
 
     // Getting values using the modified coordinates.
     this.cellProperties = this.instance.getCellMeta(visualRowToCheck, visualColumnToCheck);
-    const {
-      activeElement
-    } = this.instance.rootDocument;
-
-    // Blurring the `activeElement` removes the unwanted border around the focusable element (#6877)
-    // and resets the `document.activeElement` property. The blurring should happen only when the
-    // previously selected input element has not belonged to the Handsontable editor. If blurring is
-    // triggered for all elements, there is a problem with the disappearing IME editor (#9672).
-    if (activeElement && (0, _element.isOutsideInput)(activeElement)) {
-      activeElement.blur();
-    }
     if (!this.isCellEditable()) {
       this.clearActiveEditor();
       return;
@@ -263,14 +196,7 @@ class EditorManager {
       return;
     }
     if (!this.activeEditor) {
-      const {
-        row,
-        col
-      } = this.instance.getSelectedRangeLast().highlight;
-      const renderableRowIndex = this.instance.rowIndexMapper.getRenderableFromVisualIndex(row);
-      const renderableColumnIndex = this.instance.columnIndexMapper.getRenderableFromVisualIndex(col);
-      this.instance.view.scrollViewport(this.instance._createCellCoords(renderableRowIndex, renderableColumnIndex));
-      this.instance.view.render();
+      this.instance.scrollToFocusedCell();
       this.prepareEditor();
     }
     if (this.activeEditor) {
@@ -334,11 +260,15 @@ class EditorManager {
    * @returns {boolean}
    */
   isCellEditable() {
+    const selection = this.instance.getSelectedRangeLast();
+    if (!selection) {
+      return false;
+    }
     const editorClass = this.instance.getCellEditor(this.cellProperties);
     const {
       row,
       col
-    } = this.instance.getSelectedRangeLast().highlight;
+    } = selection.highlight;
     const {
       rowIndexMapper,
       columnIndexMapper
@@ -374,15 +304,13 @@ class EditorManager {
    * @param {KeyboardEvent} event The keyboard event object.
    */
   onAfterDocumentKeyDown(event) {
-    if (!this.instance.isListening()) {
+    const selection = this.instance.getSelectedRangeLast();
+    if (!this.instance.isListening() || !selection || selection.highlight.isHeader() || (0, _event.isImmediatePropagationStopped)(event)) {
       return;
     }
     const {
       keyCode
     } = event;
-    if (!this.selection.isSelected()) {
-      return;
-    }
 
     // catch CTRL but not right ALT (which in some systems triggers ALT+CTRL)
     const isCtrlPressed = (event.ctrlKey || event.metaKey) && !event.altKey;

package/editorManager.mjs

@@ -1,11 +1,9 @@
 import { isFunctionKey, isCtrlMetaKey } from "./helpers/unicode.mjs";
-import { stopImmediatePropagation } from "./helpers/dom/event.mjs";
-import { isOutsideInput } from "./helpers/dom/element.mjs";
+import { isImmediatePropagationStopped } from "./helpers/dom/event.mjs";
 import { getEditorInstance } from "./editors/registry.mjs";
 import EventManager from "./eventManager.mjs";
 import { isDefined } from "./helpers/mixed.mjs";
 export const SHORTCUTS_GROUP_NAVIGATION = 'editorManager.navigation';
-export const SHORTCUTS_GROUP_EDITOR = 'editorManager.handlingEditor';
 class EditorManager {
   /**
    * @param {Core} instance The Handsontable instance.
@@ -68,9 +66,6 @@ class EditorManager {
      * @type {object}
      */
     this.cellProperties = void 0;
-    const shortcutManager = this.instance.getShortcutManager();
-    shortcutManager.addContext('editor');
-    this.registerShortcuts();
     this.instance.addHook('afterDocumentKeyDown', event => this.onAfterDocumentKeyDown(event));
 
     // Open editor when text composition is started (IME editor)
@@ -82,62 +77,6 @@ class EditorManager {
     this.instance.view._wt.update('onCellDblClick', (event, coords, elem) => this.onCellDblClick(event, coords, elem));
   }
 
-  /**
-   * Register shortcuts responsible for handling some actions related to an editor.
-   *
-   * @private
-   */
-  registerShortcuts() {
-    const shortcutManager = this.instance.getShortcutManager();
-    const gridContext = shortcutManager.getContext('grid');
-    const editorContext = shortcutManager.getContext('editor');
-    const config = {
-      group: SHORTCUTS_GROUP_EDITOR
-    };
-    editorContext.addShortcuts([{
-      keys: [['Enter'], ['Enter', 'Shift'], ['Enter', 'Control/Meta'], ['Enter', 'Control/Meta', 'Shift']],
-      callback: (event, keys) => {
-        this.closeEditorAndSaveChanges(shortcutManager.isCtrlPressed());
-        this.moveSelectionAfterEnter(keys.includes('shift'));
-      }
-    }, {
-      keys: [['Escape'], ['Escape', 'Control/Meta']],
-      callback: () => {
-        this.closeEditorAndRestoreOriginalValue(shortcutManager.isCtrlPressed());
-        this.activeEditor.focus();
-      }
-    }], config);
-    gridContext.addShortcuts([{
-      keys: [['F2']],
-      callback: event => {
-        this.openEditor(null, event, true);
-      }
-    }, {
-      keys: [['Backspace'], ['Delete']],
-      callback: () => {
-        this.instance.emptySelectedCells();
-        this.prepareEditor();
-      }
-    }, {
-      keys: [['Enter'], ['Enter', 'Shift']],
-      callback: (event, keys) => {
-        if (this.instance.getSettings().enterBeginsEditing) {
-          if (this.cellProperties.readOnly) {
-            this.moveSelectionAfterEnter();
-          } else {
-            this.openEditor(null, event, true);
-          }
-        } else {
-          this.moveSelectionAfterEnter(keys.includes('shift'));
-        }
-        stopImmediatePropagation(event); // required by HandsontableEditor
-      }
-    }], {
-      ...config,
-      runOnlyIf: () => isDefined(this.instance.getSelected())
-    });
-  }
-
   /**
    * Lock the editor from being prepared and closed. Locking the editor prevents its closing and
    * reinitialized after selecting the new cell. This feature is necessary for a mobile editor.
@@ -190,10 +129,16 @@ class EditorManager {
       });
       return;
     }
+    const {
+      highlight
+    } = this.instance.getSelectedRangeLast();
+    if (highlight.isHeader()) {
+      return;
+    }
     const {
       row,
       col
-    } = this.instance.getSelectedRangeLast().highlight;
+    } = highlight;
     const modifiedCellCoords = this.instance.runHooks('modifyGetCellCoords', row, col);
     let visualRowToCheck = row;
     let visualColumnToCheck = col;
@@ -203,17 +148,6 @@ class EditorManager {
 
     // Getting values using the modified coordinates.
     this.cellProperties = this.instance.getCellMeta(visualRowToCheck, visualColumnToCheck);
-    const {
-      activeElement
-    } = this.instance.rootDocument;
-
-    // Blurring the `activeElement` removes the unwanted border around the focusable element (#6877)
-    // and resets the `document.activeElement` property. The blurring should happen only when the
-    // previously selected input element has not belonged to the Handsontable editor. If blurring is
-    // triggered for all elements, there is a problem with the disappearing IME editor (#9672).
-    if (activeElement && isOutsideInput(activeElement)) {
-      activeElement.blur();
-    }
     if (!this.isCellEditable()) {
       this.clearActiveEditor();
       return;
@@ -257,14 +191,7 @@ class EditorManager {
       return;
     }
     if (!this.activeEditor) {
-      const {
-        row,
-        col
-      } = this.instance.getSelectedRangeLast().highlight;
-      const renderableRowIndex = this.instance.rowIndexMapper.getRenderableFromVisualIndex(row);
-      const renderableColumnIndex = this.instance.columnIndexMapper.getRenderableFromVisualIndex(col);
-      this.instance.view.scrollViewport(this.instance._createCellCoords(renderableRowIndex, renderableColumnIndex));
-      this.instance.view.render();
+      this.instance.scrollToFocusedCell();
       this.prepareEditor();
     }
     if (this.activeEditor) {
@@ -328,11 +255,15 @@ class EditorManager {
    * @returns {boolean}
    */
   isCellEditable() {
+    const selection = this.instance.getSelectedRangeLast();
+    if (!selection) {
+      return false;
+    }
     const editorClass = this.instance.getCellEditor(this.cellProperties);
     const {
       row,
       col
-    } = this.instance.getSelectedRangeLast().highlight;
+    } = selection.highlight;
     const {
       rowIndexMapper,
       columnIndexMapper
@@ -368,15 +299,13 @@ class EditorManager {
    * @param {KeyboardEvent} event The keyboard event object.
    */
   onAfterDocumentKeyDown(event) {
-    if (!this.instance.isListening()) {
+    const selection = this.instance.getSelectedRangeLast();
+    if (!this.instance.isListening() || !selection || selection.highlight.isHeader() || isImmediatePropagationStopped(event)) {
       return;
     }
     const {
       keyCode
     } = event;
-    if (!this.selection.isSelected()) {
-      return;
-    }
 
     // catch CTRL but not right ALT (which in some systems triggers ALT+CTRL)
     const isCtrlPressed = (event.ctrlKey || event.metaKey) && !event.altKey;

package/editors/autocompleteEditor/autocompleteEditor.js

@@ -10,6 +10,7 @@ var _mixed = require("../../helpers/mixed");
 var _string = require("../../helpers/string");
 var _unicode = require("../../helpers/unicode");
 var _textRenderer = require("../../renderers/textRenderer");
+var _a11y = require("../../helpers/a11y");
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 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); }
@@ -113,7 +114,8 @@ class AutocompleteEditor extends _handsontableEditor.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)
     });
   }
 
@@ -140,6 +142,27 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
     super.createElements();
     (0, _element.addClass)(this.htContainer, 'autocompleteEditor');
     (0, _element.addClass)(this.htContainer, this.hot.rootWindow.navigator.platform.indexOf('Mac') === -1 ? '' : 'htMacScroll');
+    if (this.hot.getSettings().ariaTags) {
+      (0, _element.setAttribute)(this.TEXTAREA, [(0, _a11y.A11Y_TEXT)(), (0, _a11y.A11Y_COMBOBOX)(), (0, _a11y.A11Y_HASPOPUP)('listbox'), (0, _a11y.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) {
+      (0, _element.setAttribute)(this.TEXTAREA, [(0, _a11y.A11Y_EXPANDED)('false'), (0, _a11y.A11Y_CONTROLS)(`${priv.idPrefix}-listbox-${row}-${col}`)]);
+    }
   }
 
   /**
@@ -149,6 +172,13 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
     const priv = privatePool.get(this);
     super.open();
     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 = (0, _element.getScrollbarWidth)();
@@ -160,6 +190,7 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
     this.htEditor.updateSettings({
       colWidths: trimDropdown ? [(0, _element.outerWidth)(this.TEXTAREA) - 2] : void 0,
       width: trimDropdown ? (0, _element.outerWidth)(this.TEXTAREA) + scrollbarWidth : void 0,
+      autoColumnSize: true,
       renderer: (instance, TD, row, col, prop, value, cellProperties) => {
         (0, _textRenderer.textRenderer)(instance, TD, row, col, prop, value, cellProperties);
         const {
@@ -178,10 +209,27 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
             cellValue = cellValue.replace(match, `<strong>${match}</strong>`);
           }
         }
+        if (rootInstanceAriaTagsEnabled) {
+          (0, _element.setAttribute)(TD, [(0, _a11y.A11Y_OPTION)(),
+          // Add `setsize` and `posinset` only if the source is an array.
+          ...(sourceArray ? [(0, _a11y.A11Y_SETSIZE)(sourceSize)] : []), ...(sourceArray ? [(0, _a11y.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);
+          (0, _element.setAttribute)(TD, [(0, _a11y.A11Y_SELECTED)()]);
+          (0, _element.setAttribute)(this.TEXTAREA, ...(0, _a11y.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.
+      (0, _element.setAttribute)(this.htEditor.view._wt.wtOverlays.wtTable.TABLE, ...(0, _a11y.A11Y_PRESENTATION)());
+      (0, _element.setAttribute)(this.htEditor.rootElement, [(0, _a11y.A11Y_LISTBOX)(), (0, _a11y.A11Y_LIVE)('polite'), (0, _a11y.A11Y_RELEVANT)('text'), ['id', `${priv.idPrefix}-listbox-${rowIndex}-${colIndex}`]]);
+      (0, _element.setAttribute)(this.TEXTAREA, ...(0, _a11y.A11Y_EXPANDED)('true'));
+    }
     if (priv.skipOne) {
       priv.skipOne = false;
     }
@@ -196,6 +244,9 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
   close() {
     this.removeHooksByKey('beforeKeyDown');
     super.close();
+    if (this.hot.getSettings().ariaTags) {
+      (0, _element.setAttribute)(this.TEXTAREA, [(0, _a11y.A11Y_EXPANDED)('false')]);
+    }
   }
 
   /**

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}`)]);
+    }
   }
 
   /**
@@ -145,6 +168,13 @@ export class AutocompleteEditor extends HandsontableEditor {
     const priv = privatePool.get(this);
     super.open();
     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();
@@ -156,6 +186,7 @@ export class AutocompleteEditor extends HandsontableEditor {
     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 {
@@ -174,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;
     }
@@ -192,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')]);
+    }
   }
 
   /**

package/editors/dateEditor/dateEditor.js

@@ -7,6 +7,7 @@ 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 }; }
@@ -44,7 +45,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 +70,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 +125,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 +150,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 +173,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 +189,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 +268,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();
       }