handsontable 0.0.0-next-50e428d-20231026 → 0.0.0-next-42d5bd7-20231027

package/plugins/collapsibleColumns/collapsibleColumns.mjs

@@ -17,7 +17,8 @@ import { warn } from "../../helpers/console.mjs";
 import { addClass, hasClass, removeClass, fastInnerText, removeAttribute, setAttribute } from "../../helpers/dom/element.mjs";
 import EventManager from "../../eventManager.mjs";
 import { stopImmediatePropagation } from "../../helpers/dom/event.mjs";
-import { A11Y_EXPANDED, A11Y_HIDDEN } from "../../helpers/a11y.mjs";
+import { A11Y_DESCRIPTION, A11Y_EXPANDED, A11Y_HIDDEN } from "../../helpers/a11y.mjs";
+import { COLUMN_HEADER_DESCRIPTION_COLLAPSE_COLUMN, COLUMN_HEADER_DESCRIPTION_EXPAND_COLUMN } from "../../i18n/constants.mjs";
 export const PLUGIN_KEY = 'collapsibleColumns';
 export const PLUGIN_PRIORITY = 290;
 const SETTING_KEYS = ['nestedHeaders'];
@@ -514,7 +515,7 @@ export class CollapsibleColumns extends BasePlugin {
 
         // Add ARIA tags
         if (isAriaTagsEnabled) {
-          setAttribute(TH, ...A11Y_EXPANDED(false));
+          setAttribute(TH, [A11Y_EXPANDED(false), A11Y_DESCRIPTION(this.hot.getTranslatedPhrase(COLUMN_HEADER_DESCRIPTION_EXPAND_COLUMN))]);
         }
       } else {
         addClass(collapsibleElement, 'expanded');
@@ -522,7 +523,7 @@ export class CollapsibleColumns extends BasePlugin {
 
         // Add ARIA tags
         if (isAriaTagsEnabled) {
-          setAttribute(TH, ...A11Y_EXPANDED(true));
+          setAttribute(TH, [A11Y_EXPANDED(true), A11Y_DESCRIPTION(this.hot.getTranslatedPhrase(COLUMN_HEADER_DESCRIPTION_COLLAPSE_COLUMN))]);
         }
       }
       if (isAriaTagsEnabled) {

package/plugins/columnSorting/columnSorting.js

@@ -16,6 +16,7 @@ var _domHelpers = require("./domHelpers");
 var _rootComparator = require("./rootComparator");
 var _sortService = require("./sortService");
 var _a11y = require("../../helpers/a11y");
+var _constants = require("../../i18n/constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const PLUGIN_KEY = 'columnSorting';
 exports.PLUGIN_KEY = PLUGIN_KEY;
@@ -26,6 +27,7 @@ exports.APPEND_COLUMN_CONFIG_STRATEGY = APPEND_COLUMN_CONFIG_STRATEGY;
 const REPLACE_COLUMN_CONFIG_STRATEGY = 'replace';
 exports.REPLACE_COLUMN_CONFIG_STRATEGY = REPLACE_COLUMN_CONFIG_STRATEGY;
 const SHORTCUTS_GROUP = PLUGIN_KEY;
+const SORTING_INDICATOR_CLASS = 'columnSortingIndicator';
 (0, _sortService.registerRootComparator)(PLUGIN_KEY, _rootComparator.rootComparator);
 _pluginHooks.default.getSingleton().register('beforeColumnSort');
 _pluginHooks.default.getSingleton().register('afterColumnSort');
@@ -644,12 +646,14 @@ class ColumnSorting extends _base.BasePlugin {
       return;
     }
     const pluginSettingsForColumn = this.getFirstCellSettings(column)[this.pluginKey];
+    const ariaTags = this.hot.getSettings().ariaTags;
     const showSortIndicator = pluginSettingsForColumn.indicator;
     const headerActionEnabled = pluginSettingsForColumn.headerAction;
+    const currentSortState = this.columnStatesManager.getSortOrderOfColumn(column);
     this.updateHeaderClasses(headerSpanElement, this.columnStatesManager, column, showSortIndicator, headerActionEnabled);
-    if (this.hot.getSettings().ariaTags) {
-      const currentSortState = this.columnStatesManager.getSortOrderOfColumn(column);
-      (0, _element.setAttribute)(TH, ...(0, _a11y.A11Y_SORT)(currentSortState ? `${currentSortState}ending` : 'none'));
+    this.updateSortingIndicator(column, headerSpanElement);
+    if (ariaTags) {
+      (0, _element.setAttribute)(TH, [(0, _a11y.A11Y_SORT)(currentSortState ? `${currentSortState}ending` : 'none'), (0, _a11y.A11Y_DESCRIPTION)(this.hot.getTranslatedPhrase(_constants.COLUMN_HEADER_DESCRIPTION_SORT_ROWS))]);
     }
   }
 
@@ -670,6 +674,28 @@ class ColumnSorting extends _base.BasePlugin {
     }
   }
 
+  /**
+   * Update sorting indicator.
+   *
+   * @private
+   * @param {number} column Visual column index.
+   * @param {HTMLElement} headerSpanElement Header span element.
+   */
+  updateSortingIndicator(column, headerSpanElement) {
+    const pluginSettingsForColumn = this.getFirstCellSettings(column)[this.pluginKey];
+    const ariaTags = this.hot.getSettings().ariaTags;
+    const showSortIndicator = pluginSettingsForColumn.indicator;
+    const isColumnSorted = this.columnStatesManager.isColumnSorted(column);
+    const indicatorElement = headerSpanElement.querySelector(`.${SORTING_INDICATOR_CLASS}`);
+    if (showSortIndicator && isColumnSorted && !indicatorElement) {
+      (0, _element.appendElement)(headerSpanElement, {
+        tagName: 'div',
+        className: SORTING_INDICATOR_CLASS,
+        attributes: ariaTags ? [(0, _a11y.A11Y_HIDDEN)()] : []
+      });
+    }
+  }
+
   /**
    * Overwriting base plugin's `onUpdateSettings` method. Please keep in mind that `onAfterUpdateSettings` isn't called
    * for `updateSettings` in specific situations.

package/plugins/columnSorting/columnSorting.mjs

@@ -1,5 +1,5 @@
 import "core-js/modules/es.array.push.js";
-import { addClass, removeClass, setAttribute } from "../../helpers/dom/element.mjs";
+import { addClass, appendElement, removeClass, setAttribute } from "../../helpers/dom/element.mjs";
 import { isUndefined, isDefined } from "../../helpers/mixed.mjs";
 import { isObject } from "../../helpers/object.mjs";
 import { isFunction } from "../../helpers/function.mjs";
@@ -12,12 +12,14 @@ import { getNextSortOrder, areValidSortStates, getHeaderSpanElement, isFirstLeve
 import { getClassesToRemove, getClassesToAdd } from "./domHelpers.mjs";
 import { rootComparator } from "./rootComparator.mjs";
 import { registerRootComparator, sort } from "./sortService/index.mjs";
-import { A11Y_SORT } from "../../helpers/a11y.mjs";
+import { A11Y_DESCRIPTION, A11Y_HIDDEN, A11Y_SORT } from "../../helpers/a11y.mjs";
+import { COLUMN_HEADER_DESCRIPTION_SORT_ROWS } from "../../i18n/constants.mjs";
 export const PLUGIN_KEY = 'columnSorting';
 export const PLUGIN_PRIORITY = 50;
 export const APPEND_COLUMN_CONFIG_STRATEGY = 'append';
 export const REPLACE_COLUMN_CONFIG_STRATEGY = 'replace';
 const SHORTCUTS_GROUP = PLUGIN_KEY;
+const SORTING_INDICATOR_CLASS = 'columnSortingIndicator';
 registerRootComparator(PLUGIN_KEY, rootComparator);
 Hooks.getSingleton().register('beforeColumnSort');
 Hooks.getSingleton().register('afterColumnSort');
@@ -636,12 +638,14 @@ export class ColumnSorting extends BasePlugin {
       return;
     }
     const pluginSettingsForColumn = this.getFirstCellSettings(column)[this.pluginKey];
+    const ariaTags = this.hot.getSettings().ariaTags;
     const showSortIndicator = pluginSettingsForColumn.indicator;
     const headerActionEnabled = pluginSettingsForColumn.headerAction;
+    const currentSortState = this.columnStatesManager.getSortOrderOfColumn(column);
     this.updateHeaderClasses(headerSpanElement, this.columnStatesManager, column, showSortIndicator, headerActionEnabled);
-    if (this.hot.getSettings().ariaTags) {
-      const currentSortState = this.columnStatesManager.getSortOrderOfColumn(column);
-      setAttribute(TH, ...A11Y_SORT(currentSortState ? `${currentSortState}ending` : 'none'));
+    this.updateSortingIndicator(column, headerSpanElement);
+    if (ariaTags) {
+      setAttribute(TH, [A11Y_SORT(currentSortState ? `${currentSortState}ending` : 'none'), A11Y_DESCRIPTION(this.hot.getTranslatedPhrase(COLUMN_HEADER_DESCRIPTION_SORT_ROWS))]);
     }
   }
 
@@ -662,6 +666,28 @@ export class ColumnSorting extends BasePlugin {
     }
   }
 
+  /**
+   * Update sorting indicator.
+   *
+   * @private
+   * @param {number} column Visual column index.
+   * @param {HTMLElement} headerSpanElement Header span element.
+   */
+  updateSortingIndicator(column, headerSpanElement) {
+    const pluginSettingsForColumn = this.getFirstCellSettings(column)[this.pluginKey];
+    const ariaTags = this.hot.getSettings().ariaTags;
+    const showSortIndicator = pluginSettingsForColumn.indicator;
+    const isColumnSorted = this.columnStatesManager.isColumnSorted(column);
+    const indicatorElement = headerSpanElement.querySelector(`.${SORTING_INDICATOR_CLASS}`);
+    if (showSortIndicator && isColumnSorted && !indicatorElement) {
+      appendElement(headerSpanElement, {
+        tagName: 'div',
+        className: SORTING_INDICATOR_CLASS,
+        attributes: ariaTags ? [A11Y_HIDDEN()] : []
+      });
+    }
+  }
+
   /**
    * Overwriting base plugin's `onUpdateSettings` method. Please keep in mind that `onAfterUpdateSettings` isn't called
    * for `updateSettings` in specific situations.

package/plugins/contextMenu/menu/menuItemRenderer.js

@@ -5,6 +5,8 @@ exports.createMenuItemRenderer = createMenuItemRenderer;
 var _utils = require("./utils");
 var _element = require("../../../helpers/dom/element");
 var _a11y = require("../../../helpers/a11y");
+const SUBMENU_INDICATOR_CLASSNAME = 'submenuIndicator';
+
 /**
  * Creates the menu renderer function.
  *
@@ -37,6 +39,16 @@ function createMenuItemRenderer(mainTableHot) {
       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)] : [])]);
     }
+    if ((0, _utils.isItemSubMenu)(item)) {
+      const submenuIndicatorElement = TD.querySelector('.submenuIndicator');
+      if (!submenuIndicatorElement) {
+        (0, _element.appendElement)(TD, {
+          tagName: 'div',
+          attributes: mainTableHot.getSettings().ariaTags ? [(0, _a11y.A11Y_HIDDEN)()] : [],
+          className: SUBMENU_INDICATOR_CLASSNAME
+        });
+      }
+    }
     TD.className = '';
     TD.appendChild(wrapper);
     if ((0, _utils.isItemSeparator)(item)) {

package/plugins/contextMenu/menu/menuItemRenderer.mjs

@@ -1,6 +1,8 @@
 import { isItemSubMenu, isItemDisabled, isItemSelectionDisabled, isItemSeparator } 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 { addClass, appendElement, empty, fastInnerHTML, setAttribute } from "../../../helpers/dom/element.mjs";
+import { A11Y_DISABLED, A11Y_EXPANDED, A11Y_HIDDEN, A11Y_LABEL, A11Y_MENU_ITEM, A11Y_TABINDEX } from "../../../helpers/a11y.mjs";
+const SUBMENU_INDICATOR_CLASSNAME = 'submenuIndicator';
+
 /**
  * Creates the menu renderer function.
  *
@@ -33,6 +35,16 @@ export function createMenuItemRenderer(mainTableHot) {
       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)] : [])]);
     }
+    if (isItemSubMenu(item)) {
+      const submenuIndicatorElement = TD.querySelector('.submenuIndicator');
+      if (!submenuIndicatorElement) {
+        appendElement(TD, {
+          tagName: 'div',
+          attributes: mainTableHot.getSettings().ariaTags ? [A11Y_HIDDEN()] : [],
+          className: SUBMENU_INDICATOR_CLASSNAME
+        });
+      }
+    }
     TD.className = '';
     TD.appendChild(wrapper);
     if (isItemSeparator(item)) {