handsontable 14.0.0-next-dd92f79-20231124 → 14.0.0-next-88de277-20231127

package/plugins/hiddenRows/hiddenRows.mjs

@@ -10,7 +10,7 @@ function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
 function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
 import { BasePlugin } from "../base/index.mjs";
-import { addClass, appendElement } from "../../helpers/dom/element.mjs";
+import { addClass } from "../../helpers/dom/element.mjs";
 import { rangeEach } from "../../helpers/number.mjs";
 import { arrayEach, arrayMap, arrayReduce } from "../../helpers/array.mjs";
 import { isObject } from "../../helpers/object.mjs";
@@ -20,16 +20,12 @@ import Hooks from "../../pluginHooks.mjs";
 import hideRowItem from "./contextMenuItem/hideRow.mjs";
 import showRowItem from "./contextMenuItem/showRow.mjs";
 import { HidingMap } from "../../translations/index.mjs";
-import { A11Y_LABEL } from "../../helpers/a11y.mjs";
-import { ROW_HEADER_LABEL_AFTER_HIDDEN_ROW, ROW_HEADER_LABEL_BEFORE_HIDDEN_ROW } from "../../i18n/constants.mjs";
 Hooks.getSingleton().register('beforeHideRows');
 Hooks.getSingleton().register('afterHideRows');
 Hooks.getSingleton().register('beforeUnhideRows');
 Hooks.getSingleton().register('afterUnhideRows');
 export const PLUGIN_KEY = 'hiddenRows';
 export const PLUGIN_PRIORITY = 320;
-const AFTER_INDICATOR_CLASSNAME = 'afterHiddenRowIndicator';
-const BEFORE_INDICATOR_CLASSNAME = 'beforeHiddenRowIndicator';
 
 /* eslint-disable jsdoc/require-description-complete-sentence */
 
@@ -139,7 +135,6 @@ const BEFORE_INDICATOR_CLASSNAME = 'beforeHiddenRowIndicator';
  */
 var _settings = /*#__PURE__*/new WeakMap();
 var _hiddenRowsMap = /*#__PURE__*/new WeakMap();
-var _clearIndicatorElements = /*#__PURE__*/new WeakSet();
 var _onModifyRowHeight = /*#__PURE__*/new WeakSet();
 var _onAfterGetCellMeta = /*#__PURE__*/new WeakSet();
 var _onModifyCopyableRange = /*#__PURE__*/new WeakSet();
@@ -189,12 +184,6 @@ export class HiddenRows extends BasePlugin {
      * @returns {number}
      */
     _classPrivateMethodInitSpec(this, _onModifyRowHeight);
-    /**
-     * Remove the indicator elements from the provided row header element.
-     *
-     * @param {HTMLElement} TH Column header element.
-     */
-    _classPrivateMethodInitSpec(this, _clearIndicatorElements);
     /**
      * Cached settings from Handsontable settings.
      *
@@ -284,15 +273,8 @@ export class HiddenRows extends BasePlugin {
    * Disables the plugin functionality for this Handsontable instance.
    */
   disablePlugin() {
-    const clearRowHeader = (columnIndex, TH) => {
-      _classPrivateMethodGet(this, _clearIndicatorElements, _clearIndicatorElements2).call(this, TH);
-    };
     this.hot.rowIndexMapper.unregisterMap(this.pluginName);
     _classPrivateFieldSet(this, _settings, {});
-    this.hot.addHook('afterGetRowHeader', clearRowHeader);
-    this.hot.addHookOnce('afterViewRender', () => {
-      this.hot.removeHook('afterGetRowHeader', clearRowHeader);
-    });
     super.disablePlugin();
     this.resetCellsMeta();
   }
@@ -440,11 +422,6 @@ export class HiddenRows extends BasePlugin {
     super.destroy();
   }
 }
-function _clearIndicatorElements2(TH) {
-  Array.from(TH.querySelectorAll(`.${AFTER_INDICATOR_CLASSNAME}, .${BEFORE_INDICATOR_CLASSNAME}`)).forEach(element => {
-    element.remove();
-  });
-}
 function _onModifyRowHeight2(height, row) {
   // Hook is triggered internally only for the visible rows. Conditional will be handled for the API
   // calls of the `getRowHeight` function on not visible indexes.
@@ -511,35 +488,14 @@ function _onModifyCopyableRange2(ranges) {
   return newRanges;
 }
 function _onAfterGetRowHeader2(row, TH) {
-  const areAriaTagsEnabled = this.hot.getSettings().ariaTags;
-  const beforeHiddenRowIndicatorElement = TH.querySelector('.beforeHiddenRowIndicator');
-  const afterHiddenRowIndicatorElement = TH.querySelector('.afterHiddenRowIndicator');
   if (!_classPrivateFieldGet(this, _settings).indicators || row < 0) {
-    beforeHiddenRowIndicatorElement === null || beforeHiddenRowIndicatorElement === void 0 || beforeHiddenRowIndicatorElement.remove();
-    afterHiddenRowIndicatorElement === null || afterHiddenRowIndicatorElement === void 0 || afterHiddenRowIndicatorElement.remove();
     return;
   }
   const classList = [];
   if (row >= 1 && this.isHidden(row - 1)) {
-    if (!afterHiddenRowIndicatorElement) {
-      const attributesToAdd = areAriaTagsEnabled ? [A11Y_LABEL(this.hot.getTranslatedPhrase(ROW_HEADER_LABEL_AFTER_HIDDEN_ROW))] : [];
-      appendElement(TH, {
-        tagName: 'div',
-        attributes: attributesToAdd,
-        className: AFTER_INDICATOR_CLASSNAME
-      });
-    }
     classList.push('afterHiddenRow');
   }
   if (row < this.hot.countRows() - 1 && this.isHidden(row + 1)) {
-    if (!beforeHiddenRowIndicatorElement) {
-      const attributesToAdd = areAriaTagsEnabled ? [A11Y_LABEL(this.hot.getTranslatedPhrase(ROW_HEADER_LABEL_BEFORE_HIDDEN_ROW))] : [];
-      appendElement(TH, {
-        tagName: 'div',
-        attributes: attributesToAdd,
-        className: BEFORE_INDICATOR_CLASSNAME
-      });
-    }
     classList.push('beforeHiddenRow');
   }
   addClass(TH, classList);

package/plugins/multiColumnSorting/multiColumnSorting.js

@@ -9,8 +9,6 @@ var _element = require("../../helpers/dom/element");
 var _rootComparator = require("./rootComparator");
 var _utils2 = require("./utils");
 var _domHelpers = require("./domHelpers");
-var _a11y = require("../../helpers/a11y");
-var _constants = require("../../i18n/constants");
 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); }
@@ -272,25 +270,6 @@ class MultiColumnSorting extends _columnSorting.ColumnSorting {
     }
   }
 
-  /**
-   * Update sorting indicator.
-   *
-   * @private
-   * @param {number} column Visual column index.
-   * @param {HTMLElement} headerSpanElement Header span element.
-   */
-  updateSortingIndicator(column, headerSpanElement) {
-    super.updateSortingIndicator(column, headerSpanElement);
-    const indicatorElement = headerSpanElement.querySelector('.columnSortingIndicator');
-    if (!indicatorElement || !this.hot.getSettings().ariaTags || !this.columnStatesManager.isColumnSorted(column) || this.columnStatesManager.getNumberOfSortedColumns() <= 1) {
-      return;
-    }
-    const multiColumnSortingOrder = this.columnStatesManager.getIndexOfColumnInSortQueue(column) + 1;
-    const a11yLabelAttribute = (0, _a11y.A11Y_LABEL)(`${this.hot.getTranslatedPhrase(_constants.COLUMN_HEADER_LABEL_MULTI_COLUMN_SORT_ORDER)} ${multiColumnSortingOrder}.`);
-    (0, _element.removeAttribute)(indicatorElement, (0, _a11y.A11Y_HIDDEN)()[0]);
-    (0, _element.setAttribute)(indicatorElement, ...a11yLabelAttribute);
-  }
-
   /**
    * Overwriting base plugin's `onUpdateSettings` method. Please keep in mind that `onAfterUpdateSettings` isn't called
    * for `updateSettings` in specific situations.

package/plugins/multiColumnSorting/multiColumnSorting.mjs

@@ -5,12 +5,10 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 import { APPEND_COLUMN_CONFIG_STRATEGY, ColumnSorting } from "../columnSorting/index.mjs";
 import { registerRootComparator } from "../columnSorting/sortService/index.mjs";
 import { wasHeaderClickedProperly } from "../columnSorting/utils.mjs";
-import { addClass, removeClass, setAttribute, removeAttribute } from "../../helpers/dom/element.mjs";
+import { addClass, removeClass } from "../../helpers/dom/element.mjs";
 import { rootComparator } from "./rootComparator.mjs";
 import { warnAboutPluginsConflict } from "./utils.mjs";
 import { getClassesToAdd, getClassesToRemove } from "./domHelpers.mjs";
-import { A11Y_HIDDEN, A11Y_LABEL } from "../../helpers/a11y.mjs";
-import { COLUMN_HEADER_LABEL_MULTI_COLUMN_SORT_ORDER } from "../../i18n/constants.mjs";
 export const PLUGIN_KEY = 'multiColumnSorting';
 export const PLUGIN_PRIORITY = 170;
 const CONFLICTED_PLUGIN_KEY = 'columnSorting';
@@ -269,25 +267,6 @@ export class MultiColumnSorting extends ColumnSorting {
     }
   }
 
-  /**
-   * Update sorting indicator.
-   *
-   * @private
-   * @param {number} column Visual column index.
-   * @param {HTMLElement} headerSpanElement Header span element.
-   */
-  updateSortingIndicator(column, headerSpanElement) {
-    super.updateSortingIndicator(column, headerSpanElement);
-    const indicatorElement = headerSpanElement.querySelector('.columnSortingIndicator');
-    if (!indicatorElement || !this.hot.getSettings().ariaTags || !this.columnStatesManager.isColumnSorted(column) || this.columnStatesManager.getNumberOfSortedColumns() <= 1) {
-      return;
-    }
-    const multiColumnSortingOrder = this.columnStatesManager.getIndexOfColumnInSortQueue(column) + 1;
-    const a11yLabelAttribute = A11Y_LABEL(`${this.hot.getTranslatedPhrase(COLUMN_HEADER_LABEL_MULTI_COLUMN_SORT_ORDER)} ${multiColumnSortingOrder}.`);
-    removeAttribute(indicatorElement, A11Y_HIDDEN()[0]);
-    setAttribute(indicatorElement, ...a11yLabelAttribute);
-  }
-
   /**
    * Overwriting base plugin's `onUpdateSettings` method. Please keep in mind that `onAfterUpdateSettings` isn't called
    * for `updateSettings` in specific situations.

package/plugins/nestedRows/nestedRows.js

@@ -365,8 +365,7 @@ class NestedRows extends _base.BasePlugin {
   /**
    * Updates the plugin's state.
    *
-   * This method is executed when [`updateSettings()`](@/api/core.md#updatesettings) is invoked with any of the
-   * following configuration options:
+   * This method is executed when [`updateSettings()`](@/api/core.md#updatesettings) is invoked with any of the following configuration options:
    *  - [`nestedRows`](@/api/options.md#nestedrows)
    */
   updatePlugin() {

package/plugins/nestedRows/nestedRows.mjs

@@ -361,8 +361,7 @@ export class NestedRows extends BasePlugin {
   /**
    * Updates the plugin's state.
    *
-   * This method is executed when [`updateSettings()`](@/api/core.md#updatesettings) is invoked with any of the
-   * following configuration options:
+   * This method is executed when [`updateSettings()`](@/api/core.md#updatesettings) is invoked with any of the following configuration options:
    *  - [`nestedRows`](@/api/options.md#nestedrows)
    */
   updatePlugin() {

package/plugins/nestedRows/ui/headers.js

@@ -6,7 +6,6 @@ var _number = require("../../../helpers/number");
 var _element = require("../../../helpers/dom/element");
 var _base = _interopRequireDefault(require("./_base"));
 var _a11y = require("../../../helpers/a11y");
-var _constants = require("../../../i18n/constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Class responsible for the UI in the Nested Rows' row headers.
@@ -25,6 +24,7 @@ class HeadersUI extends _base.default {
     return {
       indicatorContainer: 'ht_nestingLevels',
       parent: 'ht_nestingParent',
+      indicator: 'ht_nestingLevel',
       emptyIndicator: 'ht_nestingLevel_empty',
       button: 'ht_nestingButton',
       expandButton: 'ht_nestingExpand',
@@ -102,12 +102,12 @@ class HeadersUI extends _base.default {
       if (this.collapsingUI.areChildrenCollapsed(rowIndex)) {
         (0, _element.addClass)(buttonsContainer, `${HeadersUI.CSS_CLASSES.button} ${HeadersUI.CSS_CLASSES.expandButton}`);
         if (ariaEnabled) {
-          (0, _element.setAttribute)(TH, [(0, _a11y.A11Y_EXPANDED)(false), (0, _a11y.A11Y_DESCRIPTION)(this.hot.getTranslatedPhrase(_constants.ROW_HEADER_DESCRIPTION_EXPAND_ROW))]);
+          (0, _element.setAttribute)(TH, [(0, _a11y.A11Y_EXPANDED)(false)]);
         }
       } else {
         (0, _element.addClass)(buttonsContainer, `${HeadersUI.CSS_CLASSES.button} ${HeadersUI.CSS_CLASSES.collapseButton}`);
         if (ariaEnabled) {
-          (0, _element.setAttribute)(TH, [(0, _a11y.A11Y_EXPANDED)(true), (0, _a11y.A11Y_DESCRIPTION)(this.hot.getTranslatedPhrase(_constants.ROW_HEADER_DESCRIPTION_COLLAPSE_ROW))]);
+          (0, _element.setAttribute)(TH, [(0, _a11y.A11Y_EXPANDED)(true)]);
         }
       }
       innerDiv.appendChild(buttonsContainer);

package/plugins/nestedRows/ui/headers.mjs

@@ -2,8 +2,7 @@ import { arrayEach } from "../../../helpers/array.mjs";
 import { rangeEach } from "../../../helpers/number.mjs";
 import { addClass, setAttribute } from "../../../helpers/dom/element.mjs";
 import BaseUI from "./_base.mjs";
-import { A11Y_DESCRIPTION, A11Y_EXPANDED, A11Y_HIDDEN } from "../../../helpers/a11y.mjs";
-import { ROW_HEADER_DESCRIPTION_COLLAPSE_ROW, ROW_HEADER_DESCRIPTION_EXPAND_ROW } from "../../../i18n/constants.mjs";
+import { A11Y_EXPANDED, A11Y_HIDDEN } from "../../../helpers/a11y.mjs";
 /**
  * Class responsible for the UI in the Nested Rows' row headers.
  *
@@ -21,6 +20,7 @@ class HeadersUI extends BaseUI {
     return {
       indicatorContainer: 'ht_nestingLevels',
       parent: 'ht_nestingParent',
+      indicator: 'ht_nestingLevel',
       emptyIndicator: 'ht_nestingLevel_empty',
       button: 'ht_nestingButton',
       expandButton: 'ht_nestingExpand',
@@ -98,12 +98,12 @@ class HeadersUI extends BaseUI {
       if (this.collapsingUI.areChildrenCollapsed(rowIndex)) {
         addClass(buttonsContainer, `${HeadersUI.CSS_CLASSES.button} ${HeadersUI.CSS_CLASSES.expandButton}`);
         if (ariaEnabled) {
-          setAttribute(TH, [A11Y_EXPANDED(false), A11Y_DESCRIPTION(this.hot.getTranslatedPhrase(ROW_HEADER_DESCRIPTION_EXPAND_ROW))]);
+          setAttribute(TH, [A11Y_EXPANDED(false)]);
         }
       } else {
         addClass(buttonsContainer, `${HeadersUI.CSS_CLASSES.button} ${HeadersUI.CSS_CLASSES.collapseButton}`);
         if (ariaEnabled) {
-          setAttribute(TH, [A11Y_EXPANDED(true), A11Y_DESCRIPTION(this.hot.getTranslatedPhrase(ROW_HEADER_DESCRIPTION_COLLAPSE_ROW))]);
+          setAttribute(TH, [A11Y_EXPANDED(true)]);
         }
       }
       innerDiv.appendChild(buttonsContainer);

package/renderers/autocompleteRenderer/autocompleteRenderer.js

@@ -44,9 +44,6 @@ function autocompleteRenderer(hotInstance, TD, row, col, prop, value, cellProper
 
   TD.insertBefore(ARROW, TD.firstChild);
   (0, _element.addClass)(TD, 'htAutocomplete');
-  if (isAriaEnabled) {
-    TD.setAttribute(...(0, _a11y.A11Y_HASPOPUP)('listbox'));
-  }
   if (!hotInstance.acArrowListener) {
     const eventManager = new _eventManager.default(hotInstance);
 

package/renderers/autocompleteRenderer/autocompleteRenderer.mjs

@@ -2,7 +2,7 @@ import { htmlRenderer } from "../htmlRenderer/index.mjs";
 import { textRenderer } from "../textRenderer/index.mjs";
 import EventManager from "../../eventManager.mjs";
 import { addClass, hasClass } from "../../helpers/dom/element.mjs";
-import { A11Y_HASPOPUP, A11Y_HIDDEN } from "../../helpers/a11y.mjs";
+import { A11Y_HIDDEN } from "../../helpers/a11y.mjs";
 export const RENDERER_TYPE = 'autocomplete';
 
 /**
@@ -39,9 +39,6 @@ export function autocompleteRenderer(hotInstance, TD, row, col, prop, value, cel
 
   TD.insertBefore(ARROW, TD.firstChild);
   addClass(TD, 'htAutocomplete');
-  if (isAriaEnabled) {
-    TD.setAttribute(...A11Y_HASPOPUP('listbox'));
-  }
   if (!hotInstance.acArrowListener) {
     const eventManager = new EventManager(hotInstance);
 

package/renderers/checkboxRenderer/checkboxRenderer.js

@@ -294,7 +294,6 @@ function createInput(rootDocument) {
   const input = rootDocument.createElement('input');
   input.className = 'htCheckboxRendererInput';
   input.type = 'checkbox';
-  input.setAttribute('autocomplete', 'off');
   input.setAttribute('tabindex', '-1');
   return input.cloneNode(false);
 }

package/renderers/checkboxRenderer/checkboxRenderer.mjs

@@ -289,7 +289,6 @@ function createInput(rootDocument) {
   const input = rootDocument.createElement('input');
   input.className = 'htCheckboxRendererInput';
   input.type = 'checkbox';
-  input.setAttribute('autocomplete', 'off');
   input.setAttribute('tabindex', '-1');
   return input.cloneNode(false);
 }

package/renderers/dateRenderer/dateRenderer.js

@@ -3,8 +3,6 @@
 exports.__esModule = true;
 exports.dateRenderer = dateRenderer;
 var _autocompleteRenderer = require("../autocompleteRenderer");
-var _a11y = require("../../helpers/a11y");
-var _element = require("../../helpers/dom/element");
 const RENDERER_TYPE = exports.RENDERER_TYPE = 'date';
 
 /**
@@ -21,8 +19,5 @@ const RENDERER_TYPE = exports.RENDERER_TYPE = 'date';
  */
 function dateRenderer(hotInstance, TD, row, col, prop, value, cellProperties) {
   _autocompleteRenderer.autocompleteRenderer.apply(this, [hotInstance, TD, row, col, prop, value, cellProperties]);
-  if (hotInstance.getSettings().ariaTags) {
-    (0, _element.setAttribute)(TD, [(0, _a11y.A11Y_HASPOPUP)('dialog'), (0, _a11y.A11Y_EXPANDED)('false')]);
-  }
 }
 dateRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/dateRenderer/dateRenderer.mjs

@@ -1,6 +1,4 @@
 import { autocompleteRenderer } from "../autocompleteRenderer/index.mjs";
-import { A11Y_EXPANDED, A11Y_HASPOPUP } from "../../helpers/a11y.mjs";
-import { setAttribute } from "../../helpers/dom/element.mjs";
 export const RENDERER_TYPE = 'date';
 
 /**
@@ -17,8 +15,5 @@ export const RENDERER_TYPE = 'date';
  */
 export function dateRenderer(hotInstance, TD, row, col, prop, value, cellProperties) {
   autocompleteRenderer.apply(this, [hotInstance, TD, row, col, prop, value, cellProperties]);
-  if (hotInstance.getSettings().ariaTags) {
-    setAttribute(TD, [A11Y_HASPOPUP('dialog'), A11Y_EXPANDED('false')]);
-  }
 }
 dateRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/handsontableRenderer/handsontableRenderer.js

@@ -3,8 +3,6 @@
 exports.__esModule = true;
 exports.handsontableRenderer = handsontableRenderer;
 var _autocompleteRenderer = require("../autocompleteRenderer");
-var _a11y = require("../../helpers/a11y");
-var _element = require("../../helpers/dom/element");
 const RENDERER_TYPE = exports.RENDERER_TYPE = 'handsontable';
 
 /**
@@ -21,8 +19,5 @@ const RENDERER_TYPE = exports.RENDERER_TYPE = 'handsontable';
  */
 function handsontableRenderer(hotInstance, TD, row, col, prop, value, cellProperties) {
   _autocompleteRenderer.autocompleteRenderer.apply(this, [hotInstance, TD, row, col, prop, value, cellProperties]);
-  if (hotInstance.getSettings().ariaTags) {
-    (0, _element.setAttribute)(TD, [(0, _a11y.A11Y_HASPOPUP)('true'), (0, _a11y.A11Y_EXPANDED)('false')]);
-  }
 }
 handsontableRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/handsontableRenderer/handsontableRenderer.mjs

@@ -1,6 +1,4 @@
 import { autocompleteRenderer } from "../autocompleteRenderer/index.mjs";
-import { A11Y_EXPANDED, A11Y_HASPOPUP } from "../../helpers/a11y.mjs";
-import { setAttribute } from "../../helpers/dom/element.mjs";
 export const RENDERER_TYPE = 'handsontable';
 
 /**
@@ -17,8 +15,5 @@ export const RENDERER_TYPE = 'handsontable';
  */
 export function handsontableRenderer(hotInstance, TD, row, col, prop, value, cellProperties) {
   autocompleteRenderer.apply(this, [hotInstance, TD, row, col, prop, value, cellProperties]);
-  if (hotInstance.getSettings().ariaTags) {
-    setAttribute(TD, [A11Y_HASPOPUP('true'), A11Y_EXPANDED('false')]);
-  }
 }
 handsontableRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/selectRenderer/selectRenderer.js

@@ -3,8 +3,6 @@
 exports.__esModule = true;
 exports.selectRenderer = selectRenderer;
 var _textRenderer = require("../textRenderer");
-var _a11y = require("../../helpers/a11y");
-var _element = require("../../helpers/dom/element");
 const RENDERER_TYPE = exports.RENDERER_TYPE = 'select';
 
 /**
@@ -19,8 +17,5 @@ const RENDERER_TYPE = exports.RENDERER_TYPE = 'select';
  */
 function selectRenderer(hotInstance, TD, row, col, prop, value, cellProperties) {
   _textRenderer.textRenderer.apply(this, [hotInstance, TD, row, col, prop, value, cellProperties]);
-  if (hotInstance.getSettings().ariaTags) {
-    (0, _element.setAttribute)(TD, ...(0, _a11y.A11Y_HASPOPUP)('listbox'));
-  }
 }
 selectRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/selectRenderer/selectRenderer.mjs

@@ -1,6 +1,4 @@
 import { textRenderer } from "../textRenderer/index.mjs";
-import { A11Y_HASPOPUP } from "../../helpers/a11y.mjs";
-import { setAttribute } from "../../helpers/dom/element.mjs";
 export const RENDERER_TYPE = 'select';
 
 /**
@@ -15,8 +13,5 @@ export const RENDERER_TYPE = 'select';
  */
 export function selectRenderer(hotInstance, TD, row, col, prop, value, cellProperties) {
   textRenderer.apply(this, [hotInstance, TD, row, col, prop, value, cellProperties]);
-  if (hotInstance.getSettings().ariaTags) {
-    setAttribute(TD, ...A11Y_HASPOPUP('listbox'));
-  }
 }
 selectRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/selection/highlight/types/focus.js

@@ -4,6 +4,7 @@ exports.__esModule = true;
 exports.createHighlight = createHighlight;
 var _src = require("../../../3rdparty/walkontable/src");
 var _visualSelection = _interopRequireDefault(require("../visualSelection"));
+var _a11y = require("../../../helpers/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Creates the new instance of Selection responsible for highlighting currently selected cell. This type of selection
@@ -20,6 +21,7 @@ function createHighlight(_ref) {
   } = _ref;
   return new _visualSelection.default({
     className: 'current',
+    headerAttributes: [(0, _a11y.A11Y_SELECTED)()],
     border: {
       width: 2,
       color: '#4b89ff',

package/selection/highlight/types/focus.mjs

@@ -1,5 +1,6 @@
 import { HIGHLIGHT_FOCUS_TYPE } from "../../../3rdparty/walkontable/src/index.mjs";
 import VisualSelection from "../visualSelection.mjs";
+import { A11Y_SELECTED } from "../../../helpers/a11y.mjs";
 /**
  * Creates the new instance of Selection responsible for highlighting currently selected cell. This type of selection
  * can present on the table only one at the time.
@@ -15,6 +16,7 @@ export function createHighlight(_ref) {
   } = _ref;
   return new VisualSelection({
     className: 'current',
+    headerAttributes: [A11Y_SELECTED()],
     border: {
       width: 2,
       color: '#4b89ff',

package/selection/selection.js

@@ -99,7 +99,6 @@ class Selection {
     this.tableProps = tableProps;
     this.highlight = new _highlight.default({
       headerClassName: settings.currentHeaderClassName,
-      headerAttributes: [(0, _a11y.A11Y_SELECTED)()],
       activeHeaderClassName: settings.activeHeaderClassName,
       rowClassName: settings.currentRowClassName,
       columnClassName: settings.currentColClassName,

package/selection/selection.mjs

@@ -93,7 +93,6 @@ class Selection {
     this.tableProps = tableProps;
     this.highlight = new Highlight({
       headerClassName: settings.currentHeaderClassName,
-      headerAttributes: [A11Y_SELECTED()],
       activeHeaderClassName: settings.activeHeaderClassName,
       rowClassName: settings.currentRowClassName,
       columnClassName: settings.currentColClassName,

package/tableView.js

@@ -11,11 +11,13 @@ var _mouseEventHandler = require("./selection/mouseEventHandler");
 var _rootInstance = require("./utils/rootInstance");
 var _a11y = require("./helpers/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 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); }
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
 function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
 function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
@@ -32,11 +34,25 @@ var _mouseDown = /*#__PURE__*/new WeakMap();
 var _table = /*#__PURE__*/new WeakMap();
 var _lastWidth = /*#__PURE__*/new WeakMap();
 var _lastHeight = /*#__PURE__*/new WeakMap();
+var _getAriaColcount = /*#__PURE__*/new WeakSet();
+var _updateAriaColcount = /*#__PURE__*/new WeakSet();
 class TableView {
   /**
    * @param {Hanstontable} hotInstance Instance of {@link Handsontable}.
    */
   constructor(hotInstance) {
+    /**
+     * Update the `aria-colcount` attribute by the provided value.
+     *
+     * @param {number} delta The number of columns to add or remove to the aria tag.
+     */
+    _classPrivateMethodInitSpec(this, _updateAriaColcount);
+    /**
+     * Return the value of the `aria-colcount` attribute.
+     *
+     * @returns {number} The value of the `aria-colcount` attribute.
+     */
+    _classPrivateMethodInitSpec(this, _getAriaColcount);
     /**
      * Instance of {@link Handsontable}.
      *
@@ -273,7 +289,7 @@ class TableView {
     }
     if (this.settings.ariaTags) {
       (0, _element.setAttribute)(_classPrivateFieldGet(this, _table), [(0, _a11y.A11Y_PRESENTATION)()]);
-      (0, _element.setAttribute)(rootElement, [(0, _a11y.A11Y_TREEGRID)(), (0, _a11y.A11Y_ROWCOUNT)(this.hot.countRows()), (0, _a11y.A11Y_COLCOUNT)(this.hot.countCols()), (0, _a11y.A11Y_MULTISELECTABLE)()]);
+      (0, _element.setAttribute)(rootElement, [(0, _a11y.A11Y_TREEGRID)(), (0, _a11y.A11Y_ROWCOUNT)(-1), (0, _a11y.A11Y_COLCOUNT)(this.hot.countCols()), (0, _a11y.A11Y_MULTISELECTABLE)()]);
     }
     this.THEAD = rootDocument.createElement('THEAD');
     _classPrivateFieldGet(this, _table).appendChild(this.THEAD);
@@ -666,6 +682,13 @@ class TableView {
         }
         this.hot.runHooks('afterGetRowHeaderRenderers', headerRenderers);
         _classPrivateFieldSet(this, _rowHeadersCount, headerRenderers.length);
+        if (this.hot.getSettings().ariaTags) {
+          // Update the aria-colcount attribute.
+          // Only needs to be done once after initialization/data update.
+          if (_classPrivateMethodGet(this, _getAriaColcount, _getAriaColcount2).call(this) === this.hot.countCols()) {
+            _classPrivateMethodGet(this, _updateAriaColcount, _updateAriaColcount2).call(this, _classPrivateFieldGet(this, _rowHeadersCount));
+          }
+        }
         return headerRenderers;
       },
       columnHeaders: () => {
@@ -1158,6 +1181,10 @@ class TableView {
       const span = rootDocument.createElement('span');
       div.className = 'relative';
       span.className = 'colHeader';
+      if (this.settings.ariaTags) {
+        (0, _element.setAttribute)(div, ...(0, _a11y.A11Y_PRESENTATION)());
+        (0, _element.setAttribute)(span, ...(0, _a11y.A11Y_PRESENTATION)());
+      }
       this.updateCellHeader(span, visualColumnIndex, label, headerLevel);
       div.appendChild(span);
       TH.appendChild(div);
@@ -1301,7 +1328,6 @@ class TableView {
   getRowHeadersCount() {
     return _classPrivateFieldGet(this, _rowHeadersCount);
   }
-
   /**
    * Destroys internal WalkOnTable's instance. Detaches all of the bonded listeners.
    *
@@ -1312,4 +1338,11 @@ class TableView {
     this.eventManager.destroy();
   }
 }
+function _getAriaColcount2() {
+  return parseInt(this.hot.rootElement.getAttribute((0, _a11y.A11Y_COLCOUNT)()[0]), 10);
+}
+function _updateAriaColcount2(delta) {
+  const colCount = _classPrivateMethodGet(this, _getAriaColcount, _getAriaColcount2).call(this) + delta;
+  (0, _element.setAttribute)(this.hot.rootElement, ...(0, _a11y.A11Y_COLCOUNT)(colCount));
+}
 var _default = exports.default = TableView;