handsontable 0.0.0-next-0306a1a-20240826 → 0.0.0-next-1dfe61f-20240910

package/editors/autocompleteEditor/autocompleteEditor.d.ts

@@ -17,7 +17,7 @@ export class AutocompleteEditor extends HandsontableEditor {
   limitDropdownIfNeeded(spaceAvailable: number, dropdownHeight: number): void;
   flipDropdown(dropdownHeight: number): void;
   unflipDropdown(): void;
-  updateDropdownHeight(): void;
+  updateDropdownDimensions(): void;
   setDropdownHeight(height: number): void;
   highlightBestMatchingChoice(index?: number): void;
   getDropdownHeight(): number;

package/helpers/a11y.js

@@ -21,6 +21,8 @@ const A11Y_MENU = () => ['role', 'menu'];
 exports.A11Y_MENU = A11Y_MENU;
 const A11Y_MENU_ITEM = () => ['role', 'menuitem'];
 exports.A11Y_MENU_ITEM = A11Y_MENU_ITEM;
+const A11Y_MENU_ITEM_CHECKBOX = () => ['role', 'menuitemcheckbox'];
+exports.A11Y_MENU_ITEM_CHECKBOX = A11Y_MENU_ITEM_CHECKBOX;
 const A11Y_COMBOBOX = () => ['role', 'combobox'];
 exports.A11Y_COMBOBOX = A11Y_COMBOBOX;
 const A11Y_LISTBOX = () => ['role', 'listbox'];

package/helpers/a11y.mjs

@@ -8,6 +8,7 @@ export const A11Y_COLUMNHEADER = () => ['role', 'columnheader'];
 export const A11Y_ROW = () => ['role', 'row'];
 export const A11Y_MENU = () => ['role', 'menu'];
 export const A11Y_MENU_ITEM = () => ['role', 'menuitem'];
+export const A11Y_MENU_ITEM_CHECKBOX = () => ['role', 'menuitemcheckbox'];
 export const A11Y_COMBOBOX = () => ['role', 'combobox'];
 export const A11Y_LISTBOX = () => ['role', 'listbox'];
 export const A11Y_OPTION = () => ['role', 'option'];

package/helpers/mixed.js

@@ -134,7 +134,7 @@ const domMessages = {
 function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-0306a1a-20240826";
+  const hotVersion = "0.0.0-next-1dfe61f-20240910";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -142,7 +142,7 @@ function _injectProductInfo(key, element) {
   const schemaValidity = _checkKeySchema(key);
   if (hasValidType || isNonCommercial || schemaValidity) {
     if (schemaValidity) {
-      const releaseDate = (0, _moment.default)("11/06/2024", 'DD/MM/YYYY');
+      const releaseDate = (0, _moment.default)("30/07/2024", 'DD/MM/YYYY');
       const releaseDays = Math.floor(releaseDate.toDate().getTime() / 8.64e7);
       const keyValidityDays = _extractTime(key);
       keyValidityDate = (0, _moment.default)((keyValidityDays + 1) * 8.64e7, 'x').format('MMMM DD, YYYY');

package/helpers/mixed.mjs

@@ -124,7 +124,7 @@ const domMessages = {
 export function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-0306a1a-20240826";
+  const hotVersion = "0.0.0-next-1dfe61f-20240910";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -132,7 +132,7 @@ export function _injectProductInfo(key, element) {
   const schemaValidity = _checkKeySchema(key);
   if (hasValidType || isNonCommercial || schemaValidity) {
     if (schemaValidity) {
-      const releaseDate = moment("11/06/2024", 'DD/MM/YYYY');
+      const releaseDate = moment("30/07/2024", 'DD/MM/YYYY');
       const releaseDays = Math.floor(releaseDate.toDate().getTime() / 8.64e7);
       const keyValidityDays = _extractTime(key);
       keyValidityDate = moment((keyValidityDays + 1) * 8.64e7, 'x').format('MMMM DD, YYYY');

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/handsontable/handsontable/issues"
   },
   "author": "Handsoncode <hello@handsontable.com>",
-  "version": "0.0.0-next-0306a1a-20240826",
+  "version": "0.0.0-next-1dfe61f-20240910",
   "main": "index",
   "module": "index.mjs",
   "jsnext:main": "index.mjs",

package/pluginHooks.d.ts

@@ -180,7 +180,7 @@ export interface Events {
   beforeDrawBorders?: (corners: number[], borderClassName: 'current' | 'area' | 'highlight' | undefined) => void;
   beforeDropdownMenuSetItems?: (menuItems: ContextMenuMenuItemConfig[]) => void;
   beforeDropdownMenuShow?: (instance: DropdownMenu) => void;
-  beforeFilter?: (conditionsStack: FiltersColumnConditions[]) => void | boolean;
+  beforeFilter?: (conditionsStack: FiltersColumnConditions[], previousConditionsStack: FiltersColumnConditions[]) => void | boolean;
   beforeGetCellMeta?: (row: number, column: number, cellProperties: CellProperties) => void;
   beforeHideColumns?: (currentHideConfig: number[], destinationHideConfig: number[], actionPossible: boolean) => void | boolean;
   beforeHideRows?: (currentHideConfig: number[], destinationHideConfig: number[], actionPossible: boolean) => void | boolean;

package/pluginHooks.js

@@ -609,7 +609,6 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  * @param {object} preventScrolling A reference to the observable object with the `value` property.
  *                                  Property `preventScrolling.value` expects a boolean value that
  *                                  Handsontable uses to control scroll behavior after selection.
- * @param {object} preventScrolling Object with `value` property where its value change will be observed.
  * @param {number} selectionLayerLevel The number which indicates what selection layer is currently modified.
  * @example
  * ::: only-for javascript
@@ -2005,6 +2004,7 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  *
  * @event Hooks#beforeFilter
  * @param {object[]} conditionsStack An array of objects with your [column filters](@/api/filters.md#addcondition).
+ * @param {object[]|null} previousConditionsStack An array of objects with your previous [column filters](@/api/filters.md#addcondition). It can also be `null` if there was no previous filters applied or the conditions did not change between performing the `filter` action.
  * @returns {boolean} To perform server-side filtering (i.e., to not apply filtering to Handsontable's UI), return `false`.
  */
 'beforeFilter',

package/pluginHooks.mjs

@@ -605,7 +605,6 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  * @param {object} preventScrolling A reference to the observable object with the `value` property.
  *                                  Property `preventScrolling.value` expects a boolean value that
  *                                  Handsontable uses to control scroll behavior after selection.
- * @param {object} preventScrolling Object with `value` property where its value change will be observed.
  * @param {number} selectionLayerLevel The number which indicates what selection layer is currently modified.
  * @example
  * ::: only-for javascript
@@ -2001,6 +2000,7 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  *
  * @event Hooks#beforeFilter
  * @param {object[]} conditionsStack An array of objects with your [column filters](@/api/filters.md#addcondition).
+ * @param {object[]|null} previousConditionsStack An array of objects with your previous [column filters](@/api/filters.md#addcondition). It can also be `null` if there was no previous filters applied or the conditions did not change between performing the `filter` action.
  * @returns {boolean} To perform server-side filtering (i.e., to not apply filtering to Handsontable's UI), return `false`.
  */
 'beforeFilter',

package/plugins/autoColumnSize/autoColumnSize.js

@@ -482,7 +482,7 @@ class AutoColumnSize extends _base.BasePlugin {
     if (width === undefined) {
       width = this.columnWidthsMap.getValueAtIndex(this.hot.toPhysicalColumn(column));
       if (keepMinimum && typeof width === 'number') {
-        width = Math.max(width, _src.ViewportColumnsCalculator.DEFAULT_WIDTH);
+        width = Math.max(width, _src.DEFAULT_COLUMN_WIDTH);
       }
     }
     return width;

package/plugins/autoColumnSize/autoColumnSize.mjs

@@ -17,7 +17,7 @@ import { isObject, hasOwnProperty } from "../../helpers/object.mjs";
 import { valueAccordingPercent, rangeEach } from "../../helpers/number.mjs";
 import SamplesGenerator from "../../utils/samplesGenerator.mjs";
 import { isPercentValue } from "../../helpers/string.mjs";
-import { ViewportColumnsCalculator } from "../../3rdparty/walkontable/src/index.mjs";
+import { DEFAULT_COLUMN_WIDTH } from "../../3rdparty/walkontable/src/index.mjs";
 import { PhysicalIndexToValueMap as IndexToValueMap } from "../../translations/index.mjs";
 Hooks.getSingleton().register('modifyAutoColumnSizeSeed');
 export const PLUGIN_KEY = 'autoColumnSize';
@@ -478,7 +478,7 @@ export class AutoColumnSize extends BasePlugin {
     if (width === undefined) {
       width = this.columnWidthsMap.getValueAtIndex(this.hot.toPhysicalColumn(column));
       if (keepMinimum && typeof width === 'number') {
-        width = Math.max(width, ViewportColumnsCalculator.DEFAULT_WIDTH);
+        width = Math.max(width, DEFAULT_COLUMN_WIDTH);
       }
     }
     return width;

package/plugins/autoRowSize/autoRowSize.js

@@ -37,8 +37,7 @@ const ROW_WIDTHS_MAP_NAME = 'autoRowSize';
  * resize the rows accordingly.
  * If you experience problems with the performance, try turning this feature off and declaring the row heights manually.
  *
- * But, to display Handsontable's [scrollbar](https://handsontable.com/docs/8.0.0/demo-scrolling.html)
- * in a proper size, you need to enable the `AutoRowSize` plugin,
+ * But, to display Handsontable's scrollbar in a proper size, you need to enable the `AutoRowSize` plugin,
  * by setting the [`autoRowSize`](@/api/options.md#autoRowSize) option to `true`.
  *
  * Row height calculations are divided into sync and async part. Each of this parts has their own advantages and

package/plugins/autoRowSize/autoRowSize.mjs

@@ -33,8 +33,7 @@ const ROW_WIDTHS_MAP_NAME = 'autoRowSize';
  * resize the rows accordingly.
  * If you experience problems with the performance, try turning this feature off and declaring the row heights manually.
  *
- * But, to display Handsontable's [scrollbar](https://handsontable.com/docs/8.0.0/demo-scrolling.html)
- * in a proper size, you need to enable the `AutoRowSize` plugin,
+ * But, to display Handsontable's scrollbar in a proper size, you need to enable the `AutoRowSize` plugin,
  * by setting the [`autoRowSize`](@/api/options.md#autoRowSize) option to `true`.
  *
  * Row height calculations are divided into sync and async part. Each of this parts has their own advantages and

package/plugins/columnSorting/columnSorting.js

@@ -722,7 +722,16 @@ class ColumnSorting extends _base.BasePlugin {
         this.hot.deselectCell();
         this.hot.selectColumns(coords.col);
       }
-      this.sort(this.getColumnNextConfig(coords.col));
+      const activeEditor = this.hot.getActiveEditor();
+      const nextConfig = this.getColumnNextConfig(coords.col);
+      if (activeEditor !== null && activeEditor !== void 0 && activeEditor.isOpened() && this.hot.getCellValidator(activeEditor.row, activeEditor.col)) {
+        // Postpone sorting until the cell's value is validated and saved.
+        this.hot.addHookOnce('postAfterValidate', () => {
+          this.sort(nextConfig);
+        });
+      } else {
+        this.sort(nextConfig);
+      }
     }
   }
 

package/plugins/columnSorting/columnSorting.mjs

@@ -718,7 +718,16 @@ export class ColumnSorting extends BasePlugin {
         this.hot.deselectCell();
         this.hot.selectColumns(coords.col);
       }
-      this.sort(this.getColumnNextConfig(coords.col));
+      const activeEditor = this.hot.getActiveEditor();
+      const nextConfig = this.getColumnNextConfig(coords.col);
+      if (activeEditor !== null && activeEditor !== void 0 && activeEditor.isOpened() && this.hot.getCellValidator(activeEditor.row, activeEditor.col)) {
+        // Postpone sorting until the cell's value is validated and saved.
+        this.hot.addHookOnce('postAfterValidate', () => {
+          this.sort(nextConfig);
+        });
+      } else {
+        this.sort(nextConfig);
+      }
     }
   }
 

package/plugins/contextMenu/menu/menuItemRenderer.js

@@ -25,17 +25,16 @@ function createMenuItemRenderer(mainTableHot) {
    * @param {string} value The cell value.
    */
   return (menuHot, TD, row, col, prop, value) => {
-    if (TD.hasAttribute('ghost-table')) {
-      return;
-    }
     const item = menuHot.getSourceDataAtRow(row);
     const wrapper = mainTableHot.rootDocument.createElement('div');
     const itemValue = typeof value === 'function' ? value.call(mainTableHot) : value;
+    const ariaLabel = typeof item.ariaLabel === 'function' ? item.ariaLabel.call(mainTableHot) : item.ariaLabel;
+    const ariaChecked = typeof item.ariaChecked === 'function' ? item.ariaChecked.call(mainTableHot) : item.ariaChecked;
     (0, _element.empty)(TD);
     (0, _element.addClass)(wrapper, 'htItemWrapper');
     if (mainTableHot.getSettings().ariaTags) {
       const isFocusable = !(0, _utils.isItemDisabled)(item, mainTableHot) && !(0, _utils.isItemSelectionDisabled)(item) && !(0, _utils.isItemSeparator)(item);
-      (0, _element.setAttribute)(TD, [(0, _a11y.A11Y_MENU_ITEM)(), (0, _a11y.A11Y_LABEL)(itemValue), ...(isFocusable ? [(0, _a11y.A11Y_TABINDEX)(-1)] : []), ...((0, _utils.isItemDisabled)(item, mainTableHot) ? [(0, _a11y.A11Y_DISABLED)()] : []), ...((0, _utils.isItemSubMenu)(item) ? [(0, _a11y.A11Y_EXPANDED)(false)] : [])]);
+      (0, _element.setAttribute)(TD, [...((0, _utils.isItemCheckable)(item) ? [(0, _a11y.A11Y_MENU_ITEM_CHECKBOX)(), (0, _a11y.A11Y_LABEL)(ariaLabel), (0, _a11y.A11Y_CHECKED)(ariaChecked)] : [(0, _a11y.A11Y_MENU_ITEM)(), (0, _a11y.A11Y_LABEL)(itemValue)]), ...(isFocusable ? [(0, _a11y.A11Y_TABINDEX)(-1)] : []), ...((0, _utils.isItemDisabled)(item, mainTableHot) ? [(0, _a11y.A11Y_DISABLED)()] : []), ...((0, _utils.isItemSubMenu)(item) ? [(0, _a11y.A11Y_EXPANDED)(false)] : [])]);
     }
     TD.className = '';
     TD.appendChild(wrapper);

package/plugins/contextMenu/menu/menuItemRenderer.mjs

@@ -1,6 +1,6 @@
-import { isItemSubMenu, isItemDisabled, isItemSelectionDisabled, isItemSeparator } from "./utils.mjs";
+import { isItemSubMenu, isItemDisabled, isItemSelectionDisabled, isItemSeparator, isItemCheckable } from "./utils.mjs";
 import { addClass, empty, fastInnerHTML, setAttribute } from "../../../helpers/dom/element.mjs";
-import { A11Y_DISABLED, A11Y_EXPANDED, A11Y_LABEL, A11Y_MENU_ITEM, A11Y_TABINDEX } from "../../../helpers/a11y.mjs";
+import { A11Y_MENU_ITEM_CHECKBOX, A11Y_DISABLED, A11Y_EXPANDED, A11Y_LABEL, A11Y_MENU_ITEM, A11Y_TABINDEX, A11Y_CHECKED } from "../../../helpers/a11y.mjs";
 /**
  * Creates the menu renderer function.
  *
@@ -21,17 +21,16 @@ export function createMenuItemRenderer(mainTableHot) {
    * @param {string} value The cell value.
    */
   return (menuHot, TD, row, col, prop, value) => {
-    if (TD.hasAttribute('ghost-table')) {
-      return;
-    }
     const item = menuHot.getSourceDataAtRow(row);
     const wrapper = mainTableHot.rootDocument.createElement('div');
     const itemValue = typeof value === 'function' ? value.call(mainTableHot) : value;
+    const ariaLabel = typeof item.ariaLabel === 'function' ? item.ariaLabel.call(mainTableHot) : item.ariaLabel;
+    const ariaChecked = typeof item.ariaChecked === 'function' ? item.ariaChecked.call(mainTableHot) : item.ariaChecked;
     empty(TD);
     addClass(wrapper, 'htItemWrapper');
     if (mainTableHot.getSettings().ariaTags) {
       const isFocusable = !isItemDisabled(item, mainTableHot) && !isItemSelectionDisabled(item) && !isItemSeparator(item);
-      setAttribute(TD, [A11Y_MENU_ITEM(), A11Y_LABEL(itemValue), ...(isFocusable ? [A11Y_TABINDEX(-1)] : []), ...(isItemDisabled(item, mainTableHot) ? [A11Y_DISABLED()] : []), ...(isItemSubMenu(item) ? [A11Y_EXPANDED(false)] : [])]);
+      setAttribute(TD, [...(isItemCheckable(item) ? [A11Y_MENU_ITEM_CHECKBOX(), A11Y_LABEL(ariaLabel), A11Y_CHECKED(ariaChecked)] : [A11Y_MENU_ITEM(), A11Y_LABEL(itemValue)]), ...(isFocusable ? [A11Y_TABINDEX(-1)] : []), ...(isItemDisabled(item, mainTableHot) ? [A11Y_DISABLED()] : []), ...(isItemSubMenu(item) ? [A11Y_EXPANDED(false)] : [])]);
     }
     TD.className = '';
     TD.appendChild(wrapper);

package/plugins/contextMenu/menu/positioner.js

@@ -165,12 +165,8 @@ class Positioner {
   setPositionOnRightOfCursor() {
     let left = _classPrivateFieldGet(_cursor, this).left;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      const {
-        right: parentMenuRight
-      } = _classPrivateFieldGet(_parentContainer, this).getBoundingClientRect();
-
-      // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
-      left += _classPrivateFieldGet(_cursor, this).cellWidth + parentMenuRight - (_classPrivateFieldGet(_cursor, this).left + _classPrivateFieldGet(_cursor, this).cellWidth);
+      const borderRightWidth = Number.parseInt(getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.htCore')).borderRightWidth, 10);
+      left += _classPrivateFieldGet(_cursor, this).cellWidth + borderRightWidth;
     } else {
       left += _classPrivateFieldGet(_offset, this).right;
     }
@@ -183,12 +179,8 @@ class Positioner {
   setPositionOnLeftOfCursor() {
     let left = _classPrivateFieldGet(_offset, this).left + _classPrivateFieldGet(_cursor, this).left - _classPrivateFieldGet(_container, this).offsetWidth;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      const {
-        left: parentMenuLeft
-      } = _classPrivateFieldGet(_parentContainer, this).getBoundingClientRect();
-
-      // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
-      left -= _classPrivateFieldGet(_cursor, this).left - parentMenuLeft;
+      const borderLeftWidth = Number.parseInt(getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.htCore')).borderLeftWidth, 10);
+      left -= borderLeftWidth;
     }
     _classPrivateFieldGet(_container, this).style.left = `${left}px`;
   }

package/plugins/contextMenu/menu/positioner.mjs

@@ -162,12 +162,8 @@ export class Positioner {
   setPositionOnRightOfCursor() {
     let left = _classPrivateFieldGet(_cursor, this).left;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      const {
-        right: parentMenuRight
-      } = _classPrivateFieldGet(_parentContainer, this).getBoundingClientRect();
-
-      // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
-      left += _classPrivateFieldGet(_cursor, this).cellWidth + parentMenuRight - (_classPrivateFieldGet(_cursor, this).left + _classPrivateFieldGet(_cursor, this).cellWidth);
+      const borderRightWidth = Number.parseInt(getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.htCore')).borderRightWidth, 10);
+      left += _classPrivateFieldGet(_cursor, this).cellWidth + borderRightWidth;
     } else {
       left += _classPrivateFieldGet(_offset, this).right;
     }
@@ -180,12 +176,8 @@ export class Positioner {
   setPositionOnLeftOfCursor() {
     let left = _classPrivateFieldGet(_offset, this).left + _classPrivateFieldGet(_cursor, this).left - _classPrivateFieldGet(_container, this).offsetWidth;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      const {
-        left: parentMenuLeft
-      } = _classPrivateFieldGet(_parentContainer, this).getBoundingClientRect();
-
-      // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
-      left -= _classPrivateFieldGet(_cursor, this).left - parentMenuLeft;
+      const borderLeftWidth = Number.parseInt(getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.htCore')).borderLeftWidth, 10);
+      left -= borderLeftWidth;
     }
     _classPrivateFieldGet(_container, this).style.left = `${left}px`;
   }

package/plugins/contextMenu/menu/utils.js

@@ -4,6 +4,7 @@ exports.__esModule = true;
 exports.filterSeparators = filterSeparators;
 exports.hasSubMenu = hasSubMenu;
 exports.isDisabled = isDisabled;
+exports.isItemCheckable = isItemCheckable;
 exports.isItemDisabled = isItemDisabled;
 exports.isItemHidden = isItemHidden;
 exports.isItemSelectionDisabled = isItemSelectionDisabled;
@@ -174,4 +175,14 @@ function filterSeparators(items) {
   result = popSeparators(result, separator);
   result = removeDuplicatedSeparators(result);
   return result;
+}
+
+/**
+ * Check if the provided element presents the checkboxable menu item.
+ *
+ * @param {object} itemToTest Item element.
+ * @returns {boolean}
+ */
+function isItemCheckable(itemToTest) {
+  return itemToTest.checkable === true;
 }

package/plugins/contextMenu/menu/utils.mjs

@@ -160,4 +160,14 @@ export function filterSeparators(items) {
   result = popSeparators(result, separator);
   result = removeDuplicatedSeparators(result);
   return result;
+}
+
+/**
+ * Check if the provided element presents the checkboxable menu item.
+ *
+ * @param {object} itemToTest Item element.
+ * @returns {boolean}
+ */
+export function isItemCheckable(itemToTest) {
+  return itemToTest.checkable === true;
 }

package/plugins/contextMenu/predefinedItems/alignment.js

@@ -9,6 +9,17 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const KEY = exports.KEY = 'alignment';
 
+/**
+ * @param {object} hot The current Handsontable instance.
+ * @param {string} rawName The raw name of the menu item.
+ * @param {string} htClassName The class name to check.
+ * @returns {string} The value of aria-label parameter.
+ */
+function ariaLabel(hot, rawName, htClassName) {
+  const checkboxState = (0, _utils.hasSelectionAClass)(hot, htClassName) ? hot.getTranslatedPhrase(C.CHECKBOX_CHECKED) : hot.getTranslatedPhrase(C.CHECKBOX_UNCHECKED);
+  return `${rawName} ${checkboxState.toLowerCase()}`;
+}
+
 /**
  * @returns {object}
  */
@@ -34,15 +45,16 @@ function alignmentItem() {
     submenu: {
       items: [{
         key: `${KEY}:left`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT), 'htLeft');
+        },
+        ariaChecked() {
+          return (0, _utils.hasSelectionAClass)(this, 'htLeft');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT);
-          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htLeft') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if ((0, _utils.hasSelectionAClass)(this, 'htLeft')) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -59,15 +71,16 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:center`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER), 'htCenter');
+        },
+        ariaChecked() {
+          return (0, _utils.hasSelectionAClass)(this, 'htCenter');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER);
-          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htCenter') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if ((0, _utils.hasSelectionAClass)(this, 'htCenter')) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -84,15 +97,16 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:right`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT), 'htRight');
+        },
+        ariaChecked() {
+          return (0, _utils.hasSelectionAClass)(this, 'htRight');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT);
-          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htRight') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if ((0, _utils.hasSelectionAClass)(this, 'htRight')) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -109,15 +123,16 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:justify`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY), 'htJustify');
+        },
+        ariaChecked() {
+          return (0, _utils.hasSelectionAClass)(this, 'htJustify');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY);
-          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htJustify') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if ((0, _utils.hasSelectionAClass)(this, 'htJustify')) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -136,15 +151,16 @@ function alignmentItem() {
         name: _separator.KEY
       }, {
         key: `${KEY}:top`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP), 'htTop');
+        },
+        ariaChecked() {
+          return (0, _utils.hasSelectionAClass)(this, 'htTop');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP);
-          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htTop') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if ((0, _utils.hasSelectionAClass)(this, 'htTop')) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -161,15 +177,16 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:middle`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE), 'htMiddle');
+        },
+        ariaChecked() {
+          return (0, _utils.hasSelectionAClass)(this, 'htMiddle');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE);
-          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htMiddle') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if ((0, _utils.hasSelectionAClass)(this, 'htMiddle')) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -186,15 +203,16 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:bottom`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM), 'htBottom');
+        },
+        ariaChecked() {
+          return (0, _utils.hasSelectionAClass)(this, 'htBottom');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM);
-          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htBottom') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if ((0, _utils.hasSelectionAClass)(this, 'htBottom')) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;