handsontable 0.0.0-next-092f69c-20240806 → 0.0.0-next-bda8d59-20240809

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-092f69c-20240806";
+  const hotVersion = "0.0.0-next-bda8d59-20240809";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';

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-092f69c-20240806";
+  const hotVersion = "0.0.0-next-bda8d59-20240809";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/handsontable/handsontable/issues"
   },
   "author": "Handsoncode <hello@handsontable.com>",
-  "version": "0.0.0-next-092f69c-20240806",
+  "version": "0.0.0-next-bda8d59-20240809",
   "main": "index",
   "module": "index.mjs",
   "jsnext:main": "index.mjs",

package/plugins/contextMenu/menu/menuItemRenderer.js

@@ -31,11 +31,13 @@ function createMenuItemRenderer(mainTableHot) {
     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.
  *
@@ -27,11 +27,13 @@ export function createMenuItemRenderer(mainTableHot) {
     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/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;

package/plugins/contextMenu/predefinedItems/alignment.mjs

@@ -1,8 +1,19 @@
-import { align, getAlignmentClasses, checkSelectionConsistency, markLabelAsSelected } from "../utils.mjs";
+import { align, getAlignmentClasses, markLabelAsSelected, hasSelectionAClass } from "../utils.mjs";
 import { KEY as SEPARATOR } from "./separator.mjs";
 import * as C from "../../../i18n/constants.mjs";
 export const 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 = hasSelectionAClass(hot, htClassName) ? hot.getTranslatedPhrase(C.CHECKBOX_CHECKED) : hot.getTranslatedPhrase(C.CHECKBOX_UNCHECKED);
+  return `${rawName} ${checkboxState.toLowerCase()}`;
+}
+
 /**
  * @returns {object}
  */
@@ -28,15 +39,16 @@ export default function alignmentItem() {
     submenu: {
       items: [{
         key: `${KEY}:left`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT), 'htLeft');
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htLeft');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htLeft') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htLeft')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -53,15 +65,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:center`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER), 'htCenter');
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htCenter');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htCenter') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htCenter')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -78,15 +91,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:right`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT), 'htRight');
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htRight');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htRight') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htRight')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -103,15 +117,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:justify`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY), 'htJustify');
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htJustify');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htJustify') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htJustify')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -130,15 +145,16 @@ export default function alignmentItem() {
         name: SEPARATOR
       }, {
         key: `${KEY}:top`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP), 'htTop');
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htTop');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htTop') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htTop')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -155,15 +171,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:middle`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE), 'htMiddle');
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htMiddle');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htMiddle') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htMiddle')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -180,15 +197,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:bottom`,
+        checkable: true,
+        ariaLabel() {
+          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM), 'htBottom');
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htBottom');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htBottom') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htBottom')) {
             label = markLabelAsSelected(label);
           }
           return label;

package/plugins/contextMenu/predefinedItems/readOnly.js

@@ -15,6 +15,17 @@ const KEY = exports.KEY = 'make_read_only';
 function readOnlyItem() {
   return {
     key: KEY,
+    checkable: true,
+    ariaChecked() {
+      const atLeastOneReadOnly = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);
+      return atLeastOneReadOnly;
+    },
+    ariaLabel() {
+      const rawName = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_READ_ONLY);
+      const atLeastOneReadOnly = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);
+      const checkboxState = atLeastOneReadOnly ? this.getTranslatedPhrase(C.CHECKBOX_CHECKED) : this.getTranslatedPhrase(C.CHECKBOX_UNCHECKED);
+      return `${rawName} ${checkboxState.toLowerCase()}`;
+    },
     name() {
       let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_READ_ONLY);
       const atLeastOneReadOnly = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);

package/plugins/contextMenu/predefinedItems/readOnly.mjs

@@ -9,6 +9,17 @@ export const KEY = 'make_read_only';
 export default function readOnlyItem() {
   return {
     key: KEY,
+    checkable: true,
+    ariaChecked() {
+      const atLeastOneReadOnly = checkSelectionConsistency(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);
+      return atLeastOneReadOnly;
+    },
+    ariaLabel() {
+      const rawName = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_READ_ONLY);
+      const atLeastOneReadOnly = checkSelectionConsistency(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);
+      const checkboxState = atLeastOneReadOnly ? this.getTranslatedPhrase(C.CHECKBOX_CHECKED) : this.getTranslatedPhrase(C.CHECKBOX_UNCHECKED);
+      return `${rawName} ${checkboxState.toLowerCase()}`;
+    },
     name() {
       let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_READ_ONLY);
       const atLeastOneReadOnly = checkSelectionConsistency(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);

package/plugins/contextMenu/utils.js

@@ -4,7 +4,9 @@ exports.__esModule = true;
 exports.align = align;
 exports.checkSelectionConsistency = checkSelectionConsistency;
 exports.getAlignmentClasses = getAlignmentClasses;
+exports.getAlignmentComparatorByClass = getAlignmentComparatorByClass;
 exports.getDocumentOffsetByElement = getDocumentOffsetByElement;
+exports.hasSelectionAClass = hasSelectionAClass;
 exports.markLabelAsSelected = markLabelAsSelected;
 exports.prepareHorizontalAlignClass = prepareHorizontalAlignClass;
 exports.prepareVerticalAlignClass = prepareVerticalAlignClass;
@@ -151,4 +153,28 @@ function getDocumentOffsetByElement(elementToCheck, baseDocument) {
     offset.left = left;
   }
   return offset;
+}
+
+/**
+ * Prepares comparator function consumable by checkSelectionConsistency
+ * Comparator function checks if the cell has the provided class name.
+ *
+ * @param  {string} htClassName The class name to check.
+ * @returns {Function} Returns the comparator function.
+ * Use with .bind, .call or .apply to pass the Handsontable instance.
+ */
+function getAlignmentComparatorByClass(htClassName) {
+  return function (row, col) {
+    const className = this.getCellMeta(row, col).className;
+    return className && className.indexOf(htClassName) !== -1;
+  };
+}
+
+/**
+ * @param {object} hot Handsontable instance.
+ * @param {string} htClassName The class name to check.
+ * @returns {boolean} Returns true if at least one cell has the provided class name.
+ */
+function hasSelectionAClass(hot, htClassName) {
+  return checkSelectionConsistency(hot.getSelectedRange(), getAlignmentComparatorByClass(htClassName).bind(hot));
 }

package/plugins/contextMenu/utils.mjs

@@ -141,4 +141,28 @@ export function getDocumentOffsetByElement(elementToCheck, baseDocument) {
     offset.left = left;
   }
   return offset;
+}
+
+/**
+ * Prepares comparator function consumable by checkSelectionConsistency
+ * Comparator function checks if the cell has the provided class name.
+ *
+ * @param  {string} htClassName The class name to check.
+ * @returns {Function} Returns the comparator function.
+ * Use with .bind, .call or .apply to pass the Handsontable instance.
+ */
+export function getAlignmentComparatorByClass(htClassName) {
+  return function (row, col) {
+    const className = this.getCellMeta(row, col).className;
+    return className && className.indexOf(htClassName) !== -1;
+  };
+}
+
+/**
+ * @param {object} hot Handsontable instance.
+ * @param {string} htClassName The class name to check.
+ * @returns {boolean} Returns true if at least one cell has the provided class name.
+ */
+export function hasSelectionAClass(hot, htClassName) {
+  return checkSelectionConsistency(hot.getSelectedRange(), getAlignmentComparatorByClass(htClassName).bind(hot));
 }