handsontable 0.0.0-next-9059914-20231025 → 0.0.0-next-cecf979-20231026

package/dataMap/metaManager/metaSchema.js

@@ -318,6 +318,18 @@ var _default = () => {
      * ```
      */
     allowRemoveRow: true,
+    /**
+     * If set to `true`, the accessibility-related ARIA tags will be added to the table. If set to `false`, they
+     * will be omitted.
+     * Defaults to `true`.
+     *
+     * @memberof Options#
+     * @type {boolean}
+     * @default true
+     * @category Core
+     * @since 14.0.0
+     */
+    ariaTags: true,
     /**
      * The `autoColumnSize` option configures the [`AutoColumnSize`](@/api/autoColumnSize.md) plugin.
      *
@@ -2430,6 +2442,18 @@ var _default = () => {
      * ```
      */
     invalidCellClassName: 'htInvalid',
+    /**
+     * The `imeFastEdit` option allows using the "fast edit" feature for the IME users. It's disabled by default
+     * because of its incompatibility with some of the accessibility features.
+     *
+     * Enabling this option can make a negative impact on how some screen readers handle reading the table cells.
+     *
+     * @since 14.0.0
+     * @memberof Options#
+     * @type {boolean}
+     * @category Core
+     */
+    imeFastEdit: false,
     /**
      * The `isEmptyCol` option lets you define your own custom method
      * for checking if a column at a given visual index is empty.
@@ -3103,6 +3127,47 @@ var _default = () => {
      * ```
      */
     multiColumnSorting: void 0,
+    /**
+     * When set to `true`, the `navigableHeaders` option lets you navigate [row headers](@/guides/rows/row-header.md) and [column headers](@/guides/columns/column-header.md), using the arrow keys or the <kbd>**Tab**</kbd> key (if the [`disableTabNavigation`](#disabletabnavigation) option is set to `false`).
+     *
+     * @since 14.0.0
+     * @memberof Options#
+     * @type {boolean}
+     * @default false
+     * @category Core
+     *
+     * @example
+     * ```js
+     * // you can navigate row and column headers with the keyboard
+     * navigableHeaders: true,
+     *
+     * // default behavior: you can't navigate row and column headers with the keyboard
+     * navigableHeaders: false,
+     * ```
+     */
+    navigableHeaders: false,
+    /**
+     * When set to `true`, the `disableTabNavigation` option changes the behavior of the
+     * <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> keyboard shortcuts. The Handsontable
+     * no more captures that shortcuts to make the grid navigation available (`disableTabNavigation: false`)
+     * but returns control to the browser so the native page navigation is possible.
+     *
+     * @since 14.0.0
+     * @memberof Options#
+     * @type {boolean}
+     * @default false
+     * @category Core
+     *
+     * @example
+     * ```js
+     * // you can't navigate row and column headers using <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> keyboard shortcuts
+     * disableTabNavigation: true,
+     *
+     * // default behavior: you can navigate row and column headers using <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> keyboard shortcuts
+     * disableTabNavigation: false,
+     * ```
+     */
+    disableTabNavigation: false,
     /**
      * @description
      * The `nestedHeaders` option configures the [`NestedHeaders`](@/api/nestedHeaders.md) plugin.

package/dataMap/metaManager/metaSchema.mjs

@@ -315,6 +315,18 @@ export default (() => {
      * ```
      */
     allowRemoveRow: true,
+    /**
+     * If set to `true`, the accessibility-related ARIA tags will be added to the table. If set to `false`, they
+     * will be omitted.
+     * Defaults to `true`.
+     *
+     * @memberof Options#
+     * @type {boolean}
+     * @default true
+     * @category Core
+     * @since 14.0.0
+     */
+    ariaTags: true,
     /**
      * The `autoColumnSize` option configures the [`AutoColumnSize`](@/api/autoColumnSize.md) plugin.
      *
@@ -2427,6 +2439,18 @@ export default (() => {
      * ```
      */
     invalidCellClassName: 'htInvalid',
+    /**
+     * The `imeFastEdit` option allows using the "fast edit" feature for the IME users. It's disabled by default
+     * because of its incompatibility with some of the accessibility features.
+     *
+     * Enabling this option can make a negative impact on how some screen readers handle reading the table cells.
+     *
+     * @since 14.0.0
+     * @memberof Options#
+     * @type {boolean}
+     * @category Core
+     */
+    imeFastEdit: false,
     /**
      * The `isEmptyCol` option lets you define your own custom method
      * for checking if a column at a given visual index is empty.
@@ -3100,6 +3124,47 @@ export default (() => {
      * ```
      */
     multiColumnSorting: void 0,
+    /**
+     * When set to `true`, the `navigableHeaders` option lets you navigate [row headers](@/guides/rows/row-header.md) and [column headers](@/guides/columns/column-header.md), using the arrow keys or the <kbd>**Tab**</kbd> key (if the [`disableTabNavigation`](#disabletabnavigation) option is set to `false`).
+     *
+     * @since 14.0.0
+     * @memberof Options#
+     * @type {boolean}
+     * @default false
+     * @category Core
+     *
+     * @example
+     * ```js
+     * // you can navigate row and column headers with the keyboard
+     * navigableHeaders: true,
+     *
+     * // default behavior: you can't navigate row and column headers with the keyboard
+     * navigableHeaders: false,
+     * ```
+     */
+    navigableHeaders: false,
+    /**
+     * When set to `true`, the `disableTabNavigation` option changes the behavior of the
+     * <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> keyboard shortcuts. The Handsontable
+     * no more captures that shortcuts to make the grid navigation available (`disableTabNavigation: false`)
+     * but returns control to the browser so the native page navigation is possible.
+     *
+     * @since 14.0.0
+     * @memberof Options#
+     * @type {boolean}
+     * @default false
+     * @category Core
+     *
+     * @example
+     * ```js
+     * // you can't navigate row and column headers using <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> keyboard shortcuts
+     * disableTabNavigation: true,
+     *
+     * // default behavior: you can navigate row and column headers using <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> keyboard shortcuts
+     * disableTabNavigation: false,
+     * ```
+     */
+    disableTabNavigation: false,
     /**
      * @description
      * The `nestedHeaders` option configures the [`NestedHeaders`](@/api/nestedHeaders.md) plugin.

package/dataMap/metaManager/mods/extendMetaProperties.js

@@ -18,7 +18,13 @@ class ExtendMetaPropertiesMod {
     /**
      * @type {Map}
      */
-    this.propDescriptors = new Map([['fixedColumnsLeft', {
+    this.propDescriptors = new Map([['ariaTags', {
+      onChange(propName, value, isInitialChange) {
+        if (!isInitialChange) {
+          throw new Error(`The \`${propName}\` option can not be updated after the Handsontable instance was initialized.`);
+        }
+      }
+    }], ['fixedColumnsLeft', {
       target: 'fixedColumnsStart',
       onChange(propName) {
         const isRtl = this.metaManager.hot.isRtl();

package/dataMap/metaManager/mods/extendMetaProperties.mjs

@@ -15,7 +15,13 @@ export class ExtendMetaPropertiesMod {
     /**
      * @type {Map}
      */
-    this.propDescriptors = new Map([['fixedColumnsLeft', {
+    this.propDescriptors = new Map([['ariaTags', {
+      onChange(propName, value, isInitialChange) {
+        if (!isInitialChange) {
+          throw new Error(`The \`${propName}\` option can not be updated after the Handsontable instance was initialized.`);
+        }
+      }
+    }], ['fixedColumnsLeft', {
       target: 'fixedColumnsStart',
       onChange(propName) {
         const isRtl = this.metaManager.hot.isRtl();

package/dataMap/replaceData.js

@@ -8,6 +8,8 @@ var _string = require("../helpers/string");
 var _function = require("../helpers/function");
 var _dataMap = _interopRequireDefault(require("./dataMap"));
 var _object = require("../helpers/object");
+var _element = require("../helpers/dom/element");
+var _a11y = require("../helpers/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Loads new data to Handsontable.
@@ -111,4 +113,7 @@ function replaceData(data, setDataMapFunction, callbackFunction, config) {
     hotInstance.runHooks('afterChange', null, internalSource);
     hotInstance.render();
   }
+  if (hotInstance.getSettings().ariaTags) {
+    (0, _element.setAttribute)(hotInstance.rootElement, [(0, _a11y.A11Y_ROWCOUNT)(hotInstance.countRows()), (0, _a11y.A11Y_COLCOUNT)(hotInstance.countCols())]);
+  }
 }

package/dataMap/replaceData.mjs

@@ -4,6 +4,8 @@ import { toUpperCaseFirst } from "../helpers/string.mjs";
 import { isFunction } from "../helpers/function.mjs";
 import DataMap from "./dataMap.mjs";
 import { deepClone } from "../helpers/object.mjs";
+import { setAttribute } from "../helpers/dom/element.mjs";
+import { A11Y_COLCOUNT, A11Y_ROWCOUNT } from "../helpers/a11y.mjs";
 /**
  * Loads new data to Handsontable.
  *
@@ -106,5 +108,8 @@ function replaceData(data, setDataMapFunction, callbackFunction, config) {
     hotInstance.runHooks('afterChange', null, internalSource);
     hotInstance.render();
   }
+  if (hotInstance.getSettings().ariaTags) {
+    setAttribute(hotInstance.rootElement, [A11Y_ROWCOUNT(hotInstance.countRows()), A11Y_COLCOUNT(hotInstance.countCols())]);
+  }
 }
 export { replaceData };

package/dist/handsontable.css

@@ -25,8 +25,8 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 0.0.0-next-9059914-20231025
- * Release date: 31/08/2023 (built at 25/10/2023 06:25:48)
+ * Version: 0.0.0-next-cecf979-20231026
+ * Release date: 31/08/2023 (built at 26/10/2023 11:29:36)
  */
 /**
  * Fix for bootstrap styles
@@ -179,6 +179,7 @@
   background-color: #fff;
   vertical-align: top;
   overflow: hidden;
+  outline: none;
   outline-width: 0;
   white-space: pre-wrap;
 }
@@ -389,13 +390,23 @@ innerBorderBottom - Property controlled by bottom overlay
 
 .handsontable td.htInvalid {
   /*gives priority over td.area selection background*/
-  background-color: #ff4c42 !important;
+  background-color: #ffbeba !important;
 }
 
 .handsontable td.htNoWrap {
   white-space: nowrap;
 }
 
+.handsontable td.invisibleSelection,
+.handsontable th.invisibleSelection {
+  outline: none;
+}
+
+.handsontable td.invisibleSelection::selection,
+.handsontable th.invisibleSelection::selection {
+  background: rgba(255, 255, 255, 0);
+}
+
 .hot-display-license-info {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
   font-size: 10px;
@@ -410,6 +421,17 @@ innerBorderBottom - Property controlled by bottom overlay
   font-size: 10px;
 }
 
+.handsontable .htFocusCatcher {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  width: 0;
+  height: 0;
+}
+
 /* plugins */
 /* row + column resizer*/
 .handsontable .manualColumnResizer {
@@ -607,6 +629,11 @@ innerBorderBottom - Property controlled by bottom overlay
   opacity: 0.58;
 }
 
+.handsontable tbody th.current,
+.handsontable thead th.current {
+  box-shadow: inset 0 0 0 2px #4b89ff;
+}
+
 .handsontable tbody th.ht__highlight,
 .handsontable thead th.ht__highlight {
   background-color: #dcdcdc;
@@ -799,7 +826,7 @@ TextRenderer placeholder value
   cursor: pointer;
   -webkit-box-shadow: 0 0 0 6px rgb(238, 238, 238);
   -moz-box-shadow: 0 0 0 6px rgb(238, 238, 238);
-  box-shadow: 0 0 0 6px rgb(238, 238, 238);
+  box-shadow: 0 0 0 3px rgb(238, 238, 238);
   background: #eee;
   text-align: center;
 }
@@ -867,7 +894,7 @@ AutocompleteRenderer down arrow
 .handsontable .htAutocompleteArrow {
   float: right;
   font-size: 10px;
-  color: #EEE;
+  color: #bbbbbb;
   cursor: default;
   width: 16px;
   text-align: center;
@@ -877,6 +904,14 @@ AutocompleteRenderer down arrow
   float: left;
 }
 
+.handsontable td.htInvalid .htAutocompleteArrow {
+  color: #555555;
+}
+
+.handsontable td.htInvalid .htAutocompleteArrow:hover {
+  color: #1a1a1a;
+}
+
 .handsontable td .htAutocompleteArrow:hover {
   color: #777;
 }
@@ -997,6 +1032,10 @@ CheckboxRenderer
   border-left-width: 2px;
 }
 
+.htContextMenu.handsontable:focus {
+  outline: none;
+}
+
 .htContextMenu .wtBorder {
   visibility: hidden;
 }
@@ -1028,8 +1067,7 @@ CheckboxRenderer
   color: #323232;
 }
 
-.htContextMenu table tbody tr td.current,
-.htContextMenu table tbody tr td.zeroclipboard-is-hover {
+.htContextMenu table tbody tr td.current {
   background: #f3f3f3;
 }
 
@@ -1147,6 +1185,10 @@ textarea.HandsontableCopyPaste {
   border-left-width: 2px;
 }
 
+.htDropdownMenu.handsontable:focus {
+  outline: none;
+}
+
 .htDropdownMenu .wtBorder {
   visibility: hidden;
 }
@@ -1178,8 +1220,7 @@ textarea.HandsontableCopyPaste {
   color: #323232;
 }
 
-.htDropdownMenu table tbody tr td.current,
-.htDropdownMenu table tbody tr td.zeroclipboard-is-hover {
+.htDropdownMenu table tbody tr td.current {
   background: #e9e9e9;
 }
 
@@ -1285,8 +1326,7 @@ textarea.HandsontableCopyPaste {
   color: #323232;
 }
 
-.htFiltersConditionsMenu table tbody tr td.current,
-.htFiltersConditionsMenu table tbody tr td.zeroclipboard-is-hover {
+.htFiltersConditionsMenu table tbody tr td.current {
   background: #e9e9e9;
 }
 
@@ -1434,10 +1474,6 @@ textarea.HandsontableCopyPaste {
   border: 1px solid #d2d1d1;
 }
 
-.handsontable .htUIInput input:focus {
-  outline: 0;
-}
-
 .handsontable .htUIInputIcon {
   position: absolute;
 }

package/dist/handsontable.full.css

@@ -25,8 +25,8 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 0.0.0-next-9059914-20231025
- * Release date: 31/08/2023 (built at 25/10/2023 06:25:48)
+ * Version: 0.0.0-next-cecf979-20231026
+ * Release date: 31/08/2023 (built at 26/10/2023 11:29:36)
  */
 /**
  * Fix for bootstrap styles
@@ -179,6 +179,7 @@
   background-color: #fff;
   vertical-align: top;
   overflow: hidden;
+  outline: none;
   outline-width: 0;
   white-space: pre-wrap;
 }
@@ -389,13 +390,23 @@ innerBorderBottom - Property controlled by bottom overlay
 
 .handsontable td.htInvalid {
   /*gives priority over td.area selection background*/
-  background-color: #ff4c42 !important;
+  background-color: #ffbeba !important;
 }
 
 .handsontable td.htNoWrap {
   white-space: nowrap;
 }
 
+.handsontable td.invisibleSelection,
+.handsontable th.invisibleSelection {
+  outline: none;
+}
+
+.handsontable td.invisibleSelection::selection,
+.handsontable th.invisibleSelection::selection {
+  background: rgba(255, 255, 255, 0);
+}
+
 .hot-display-license-info {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
   font-size: 10px;
@@ -410,6 +421,17 @@ innerBorderBottom - Property controlled by bottom overlay
   font-size: 10px;
 }
 
+.handsontable .htFocusCatcher {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  width: 0;
+  height: 0;
+}
+
 /* plugins */
 /* row + column resizer*/
 .handsontable .manualColumnResizer {
@@ -607,6 +629,11 @@ innerBorderBottom - Property controlled by bottom overlay
   opacity: 0.58;
 }
 
+.handsontable tbody th.current,
+.handsontable thead th.current {
+  box-shadow: inset 0 0 0 2px #4b89ff;
+}
+
 .handsontable tbody th.ht__highlight,
 .handsontable thead th.ht__highlight {
   background-color: #dcdcdc;
@@ -799,7 +826,7 @@ TextRenderer placeholder value
   cursor: pointer;
   -webkit-box-shadow: 0 0 0 6px rgb(238, 238, 238);
   -moz-box-shadow: 0 0 0 6px rgb(238, 238, 238);
-  box-shadow: 0 0 0 6px rgb(238, 238, 238);
+  box-shadow: 0 0 0 3px rgb(238, 238, 238);
   background: #eee;
   text-align: center;
 }
@@ -1100,7 +1127,7 @@ AutocompleteRenderer down arrow
 .handsontable .htAutocompleteArrow {
   float: right;
   font-size: 10px;
-  color: #EEE;
+  color: #bbbbbb;
   cursor: default;
   width: 16px;
   text-align: center;
@@ -1110,6 +1137,14 @@ AutocompleteRenderer down arrow
   float: left;
 }
 
+.handsontable td.htInvalid .htAutocompleteArrow {
+  color: #555555;
+}
+
+.handsontable td.htInvalid .htAutocompleteArrow:hover {
+  color: #1a1a1a;
+}
+
 .handsontable td .htAutocompleteArrow:hover {
   color: #777;
 }
@@ -1230,6 +1265,10 @@ CheckboxRenderer
   border-left-width: 2px;
 }
 
+.htContextMenu.handsontable:focus {
+  outline: none;
+}
+
 .htContextMenu .wtBorder {
   visibility: hidden;
 }
@@ -1261,8 +1300,7 @@ CheckboxRenderer
   color: #323232;
 }
 
-.htContextMenu table tbody tr td.current,
-.htContextMenu table tbody tr td.zeroclipboard-is-hover {
+.htContextMenu table tbody tr td.current {
   background: #f3f3f3;
 }
 
@@ -1380,6 +1418,10 @@ textarea.HandsontableCopyPaste {
   border-left-width: 2px;
 }
 
+.htDropdownMenu.handsontable:focus {
+  outline: none;
+}
+
 .htDropdownMenu .wtBorder {
   visibility: hidden;
 }
@@ -1411,8 +1453,7 @@ textarea.HandsontableCopyPaste {
   color: #323232;
 }
 
-.htDropdownMenu table tbody tr td.current,
-.htDropdownMenu table tbody tr td.zeroclipboard-is-hover {
+.htDropdownMenu table tbody tr td.current {
   background: #e9e9e9;
 }
 
@@ -1518,8 +1559,7 @@ textarea.HandsontableCopyPaste {
   color: #323232;
 }
 
-.htFiltersConditionsMenu table tbody tr td.current,
-.htFiltersConditionsMenu table tbody tr td.zeroclipboard-is-hover {
+.htFiltersConditionsMenu table tbody tr td.current {
   background: #e9e9e9;
 }
 
@@ -1667,10 +1707,6 @@ textarea.HandsontableCopyPaste {
   border: 1px solid #d2d1d1;
 }
 
-.handsontable .htUIInput input:focus {
-  outline: 0;
-}
-
 .handsontable .htUIInputIcon {
   position: absolute;
 }