Implement keyboard navigation in headers #10301

budnix · 2023-03-22T09:33:53Z

Context

Currently, the table does not support keyboard navigation in headers (only in cells). The aim of the PR is going to change that. After the changes, there should be able to navigate in a row and column headers (including top and bottom corners) using currently supported keyboard shortcuts e.g., Tab (next cell/header), Shift+Tab (previous cell/header), Arrow keys and more.

PoC demo:

[skip changelog] as the PR is a continuation of the #10265 PR.

The PR introduces the following changes:

Major (breaking change)

Changed the signature of the CellCoords:isValid() and CellRange:isValid() methods. The method in the origin state was inconvenient to use as it requires passing a whole Walkontable instance which causes it to be even more difficult to use, especially for 3rd app developers;
Change how the CellRange:isSingle() method works. With the new navigable headers feature, the method returns true not only when the single cell is selected but also when the single header is selected;

Minor

Add a new option navigableHeaders;
Add new isSingleCell(), isSingleHeader () and containsHeaders() methods to the CellRange class;
Extend the Core methods such as selectColumns(), selectRows(), and selectAll() for the ability to change the position of the cell focus highlight;

Miscellaneous

Reorganize the shortcuts and collect them from different parts of the code (Core and EditorManager) and move them to the separate module called shortcutContexts;
Add an internal helper called clamp that allows easily apply constraints to the number;
Extend the E2E AsciiTable helper for support for nested headers and navigable headers features;
Add a new toEqualCellRange()Jasmine matcher that allows easily test of the selection. For example, instead of writing

expect(getSelected()).toEqual([[-1, 0, 1, 1]]);
expect(getSelectedRangeLast().highlight.row).toBe(0);
expect(getSelectedRangeLast().highlight.col).toBe(0);
expect(getSelectedRangeLast().from.row).toBe(-1);
expect(getSelectedRangeLast().from.col).toBe(0);
expect(getSelectedRangeLast().to.row).toBe(1);
expect(getSelectedRangeLast().to.col).toBe(1);

it can be simplified to

expect(getSelectedRange()).toEqualCellRange(['highlight: 0,0 from: -1,0 to: 1,1']);

Supported keyboard shortcuts in headers

Tab navigation (Tab, Shift+Tab);
Arrow keys navigation;
Single-cell navigation to the most left/right position (Home, End);
Selecting all cells and headers (Cmd/Ctrl+A);
Expanding selection when columns or rows are selected (Shift+Arrow keys);
Expanding selection to the most left/right/top/bottom position when columns or rows are selected (Shift+Cmd/Ctrl+Arrow keys);

Tasks to be done

How has this been tested?

I tested the changes locally with different setups, such as:

Navigation in headers when there is a scroll;
Navigation in headers when there are no rows or columns;
Navigation in headers when all rows or columns are hidden;
Navigation in headers when NestedHeaders and CollapsiblePlugins are enabled;
Navigation in headers cooperation with editors, CopyPaste plugin, MergeCells plugin and more;
Navigation with all above cooperation with autoRowWrap and autoColWrap options.

Types of changes

Breaking change (fix or feature that would cause existing functionality to not work as expected)

Related issue(s):

fixes https://github.com/handsontable/dev-handsontable/issues/1062

Affected project(s):

handsontable

Checklist:

I have reviewed the guidelines about Contributing to Handsontable and I confirm that my code follows the code style of this project.
I have signed the Contributor License Agreement
My change requires a change to the documentation.

Extract the selection rendering code to the separate module.

Cleanup the code, complete code documentation, fix lint complains.

This includes: * Update tests to use new internal API for selection; * Fix AsciiTable matcher. For now it support nested rows and columns; * Add new E2E tests for different Selection types;

Transformer

...add more unit tests and atomize the keboard shortcuts to have easier individual implementations for shortcuts in headers.

aninde

I thoroughly reviewed the navigation functionality described in the PR, and overall, it is working as expected on macOS, Windows. mobile and iPadOS. Focus margin nicely works with fixed columns. However, during my testing, I identified a bug that occurs when the focus is set on the header of a row or column.
Issue
Pressing the DELETE or BACKSPACE key deletes the content of the first cell in the focused row or column. This issue needs to be addressed before merging
https://js-svvzwc.stackblitz.io

Screen.Recording.2023-06-05.at.16.28.10.mov

handsontable/src/selection/__tests__/keyboardShortcuts/navigation.spec.js

budnix · 2023-06-07T12:59:17Z

Pressing the DELETE or BACKSPACE key deletes the content of the first cell in the focused row or column.

Fixed within b605eca.

aninde

After discussing the assumptions, it turns out that there is also a bug in the focus display after clicking selectAll using the CMD/CTRL + A keyboard shortcut. The focus is marked on the header level, and should stay on the cell (0,0). This may mislead the user regarding the scope of the copy.

budnix · 2023-06-07T13:20:51Z

After discussing the assumptions, it turns out that there is also a bug in the focus display after clicking selectAll using the CMD/CTRL + A keyboard shortcut. The focus is marked on the header level, and should stay on the cell (0,0). This may mislead the user regarding the scope of the copy.

It's by design. The focus position when the full table selection is triggered for navigableHeaders: false always takes coords 0,0. For navigableHeaders: true, the focus is always positioned in the most top-left header of the table.

aninde · 2023-06-07T13:44:01Z

@krzysztofspilka We lack assumptions in the project for one use case of selectAll, so I would like you to confirm the implementation of Budnix:

The focus position when the full table selection is triggered for navigableHeaders: false always takes coords 0,0. For navigableHeaders: true, the focus is always positioned in the most top-left header of the table.

Demo https://js-wgdsgv.stackblitz.io
Config https://stackblitz.com/edit/js-wgdsgv?file=index.js
navigableHeaders: true

navigableHeaders: false

Thanks to this, the user can quickly navigate through the headers, but at the time of default copying, he still only copies the cells themselves.

handsontable/src/3rdparty/walkontable/src/cell/coords.js

handsontable/src/3rdparty/walkontable/src/cell/range.js

handsontable/src/core.js

handsontable/src/dataMap/metaManager/metaSchema.js

Co-authored-by: Jakub Wiśniewski <jakub.wisniewski@handsontable.com>

wrong button

wszymanski

Good job 👏

Just one questions related to UI. Should it work like this?

selection.mp4

handsontable/src/3rdparty/walkontable/test/unit/cell/range.unit.js

handsontable/src/3rdparty/walkontable/src/cell/coords.js

budnix · 2023-06-12T13:02:49Z

Just one questions related to UI. Should it work like this?

@wszymanski I think that it's a side effect that the NestedHeaders plugin implements its own selection mechanism. I think that I'd leave that improvement for a separate issue.

Edit: Issue for that bug.

…umns (#10389) The PR adds support for new keyboard shortcuts that allow selecting the entire rows/columns based on the currently selected cell/cells. New keyboard shortcuts * Ctrl+Space Select columns that hold the currently focused cell/cells * Shift+Space Select rows that hold the currently focused cell/cells To make the feature happen, some new APIs needed to be extended, and some new hooks had to be added. The Core API changes (extends the API from the not released PR #10301) * selectColumns allow moving the focus highlight position to any row within the table rows range (the 3rd argument); * selectRows allow moving the focus highlight position to any column within the table columns range (the 3rd argument); * selectAll allow moving the focus highlight to any row and column position within the table range (the 3rd argument); New hooks * beforeSelectColumns Allows modifies the columns selection range that was triggered by a selection API call or a mouse header click; * afterSelectColumns Allows doing some things right after the columns selection is applied but before it is rendered on the table; * beforeSelectRows Allows modifies the rows selection range that was triggered by a selection API call or a mouse header click; * beforeSelectRows Allows doing some things right after the rows selection is applied but before it is rendered on the table; Co-authored-by: Jakub Wiśniewski <jakub.wisniewski@handsontable.com>

* Add Ctrl/Cmd+Shift+Space keyboard shortcut support (#10237) * Refactor Walkontable Selection rendering module (#10265) The commit refactors and extends (with some braking change) the Walkontable Selection rendering module for the ability to highlight the table's headers. The work presented here will be the basis for the navigation in headers (#1062). The changes include: * Extract the drawing logic from the Selection class to the separate parent class called SelectionManager. This allowed simplifying the Selection class (used by the Handsontable through the Highlight class) to a thing that only holds coordinates, border settings, and CSS class names to render be rendered in the correct cell. * Extract and divide into smaller loops the main selection loop that was used to scan intersected elements; * Create the Selection module by moving the related files and code, such as the Selection class, its manager, Border and selection-related methods from Table class to the "selection" directory; * Extend the overlay's Table instances for the method that allows getting the number of the rendered headers; * Reorganize the naming and adjust the Handsontable Selection module to support the new Walkontable Selection API; * Implement ASCIITable test matcher for the Walkontable tests for writing more convenient visual tests for selections; * Implement keyboard navigation in headers (#10301) The PR adds support for keyboard navigation in headers (including top and bottom corners) using currently supported keyboard shortcuts e.g., Tab (next cell/header), Shift+Tab (previous cell/header), Arrow keys and more. Major (breaking change) * Changed the signature of the CellCoords:isValid() and CellRange:isValid() methods. The method in the origin state was inconvenient to use as it requires passing a whole Walkontable instance which causes it to be even more difficult to use, especially for 3rd app developers; * Change how the CellRange:isSingle() method works. With the new navigable headers feature, the method returns true not only when the single cell is selected but also when the single header is selected; Minor * Add a new option navigableHeaders; * Add new isSingleCell(), isSingleHeader () and containsHeaders() methods to the CellRange class; * Extend the Core methods such as selectColumns(), selectRows(), and selectAll() for the ability to change the position of the cell focus highlight; Miscellaneous * Reorganize the shortcuts and collect them from different parts of the code (Core and EditorManager) and move them to the separate module called shortcutContexts; * Add an internal helper called clamp that allows easily apply constraints to the number; * Extend the E2E AsciiTable helper for support for nested headers and navigable headers features; * Add a new toEqualCellRange()Jasmine matcher that allows easily test of the selection. For example, instead of writing Supported keyboard shortcuts in headers * Tab navigation (Tab, Shift+Tab); * Arrow keys navigation; * Single-cell navigation to the most left/right position (Home, End); * Selecting all cells and headers (Cmd/Ctrl+A); * Expanding selection when columns or rows are selected (Shift+Arrow keys); * Expanding selection to the most left/right/top/bottom position when columns or rows are selected (Shift+Cmd/Ctrl+Arrow keys); Co-authored-by: Jakub Wiśniewski <jakub.wisniewski@handsontable.com> * Add support for keyboard shortcuts that allows selecting all rows/columns (#10389) The PR adds support for new keyboard shortcuts that allow selecting the entire rows/columns based on the currently selected cell/cells. New keyboard shortcuts * Ctrl+Space Select columns that hold the currently focused cell/cells * Shift+Space Select rows that hold the currently focused cell/cells To make the feature happen, some new APIs needed to be extended, and some new hooks had to be added. The Core API changes (extends the API from the not released PR #10301) * selectColumns allow moving the focus highlight position to any row within the table rows range (the 3rd argument); * selectRows allow moving the focus highlight position to any column within the table columns range (the 3rd argument); * selectAll allow moving the focus highlight to any row and column position within the table range (the 3rd argument); New hooks * beforeSelectColumns Allows modifies the columns selection range that was triggered by a selection API call or a mouse header click; * afterSelectColumns Allows doing some things right after the columns selection is applied but before it is rendered on the table; * beforeSelectRows Allows modifies the rows selection range that was triggered by a selection API call or a mouse header click; * beforeSelectRows Allows doing some things right after the rows selection is applied but before it is rendered on the table; Co-authored-by: Jakub Wiśniewski <jakub.wisniewski@handsontable.com> * Add support for collapsing/expanding columns using a keyboard shortcut (#10404) The PR adds support for new keyboard shortcuts that allow collapsing/expanding the collapsible columns based on the currently selected cell. The keyboard shortcut is active only when the header is focused. New keyboard shortcuts * Enter The keyboard shortcut toggles the header state from expanding to collapsing and vice versa; * Add support for expanding/collapsing nested rows using a keyboard shortcut (#10405) The PR adds support for new keyboard shortcuts that allow collapsing/expanding the nested rows based on the currently selected row header. The keyboard shortcut is active only when the header is focused. Expected working new keyboard shortcuts * Enter The keyboard shortcut allows toggling the state of the nested row headers from expanded to collapsed and vice versa; * Remove duplicated methods that appear after merging * Add support for keyboard shortcuts that allow sorting columns (#10410) The PR adds support for new keyboard shortcuts that allows sorting the column/multiple columns based on the currently selected column header. The keyboard shortcuts are active only when the header is focused. Expected working new keyboard shortcuts * Enter Sorts the column (if the ColumnSorting or MultipleColumnSorting plugins are enabled) in a specific order: Ascending > Descending > Restore original order. If there is initialized the multiple columns order, the whole state is cleared, and only the selected column is sorted; * Ctrl/Cmd+Enter Sorts the column in the same order as above, and it works only if the MultipleColumnSorting plugin is enabled. Sorting other columns does not clear the previous columns sorting state but adds new sorting order to the stack. * Add support for keyboard shortcuts that allow open column menu (#10413) The commit adds support for keyboard shortcuts that allow opening dropdown menu (from DropdownMenu plugin). The keyboard shortcuts are active only when the plugin is enabled. Expected working new keyboard shortcuts * `Shift+Enter` Opens the dropdown menu. The keyboard shortcut is active only when the last header (the header nearest cells) is selected and the dropdown button is rendered; * `Shift+Alt/Option+Arrow Down` Opens the dropdown menu. The keyboard shortcut is active on the whole table (cells and headers that have dropdown menu button rendered); * Add support for keyboard shortcut that allows clearing the filters (#10420) The commit adds support for a new keyboard shortcut that allows clearing the state of the filters. The shortcut is active only when the Filters plugin is enabled. Expected working new keyboard shortcuts * Alt/Option+A Clears the filters from all columns. The shortcut is active for the whole table. There is not necessary to select a column or a cell to clear the states. Clearing the states should keep the position of the current selection the same. * Add support for new keyboard shortcut that allows scrolling the viewport (#10419) The commit adds support for a new keyboard shortcut that allows scrolling the table viewport to the focused cell. Expected working new keyboard shortcuts * Cmd/Ctrl+Backspace Scroll the table viewport to the focused cell. The viewport is always scrolled to the cell in a way that it's positioned right in the middle of the table. * Add a keyboard shortcut that allows managing the cell comments (#10421) The commit adds support for new keyboard shortcuts that allows managing the cell comments feature. The shortcut is active only when the Comments plugin is enabled. Expected working new keyboard shortcuts * Ctrl+Alt+M - Inserts or edits a comment. * Ctrl/Cmd+Enter - Saves and exits the current comment; * Escape - Exits from the current comment without saving; * Add the ability to traverse the grid using TAB key throughout the page (#10430) The PR adds the ability to traverse the grid using Tab and Shift+Tab throughout the page keeping the correct order of the native browser focus. This is a breaking change as from now on when the last cell is selected (or the last cell in a row), pressing the Tab key deactivates the table (the table no more listens for any keyboard shortcuts) and moves the browser's focus to the next element. The PR introduces a new API: * The new table option disableTabNavigation (default false). The option, when set as true, disables the table navigation. In that mode, the arrow keys are supposed to use to navigate the table. Pressing the Tab or Shift+Tab moves the browser's focus to the next or previous element on the page. When set as false, there is a possibility to navigate the table, but when the cell selection reaches the last cell (or the last cell in a row when autoWrapRow: false) then the table deactivates itself, and the browser's focus is moved to the next element on the page; * The new modifyFocusOnTabNavigation hook. The hook allows changing the cell selection after the table is activated by the browser's focus triggered by Tab or Shift+Tab keys. By default, the first visible cell (or header) is selected when the table is activated from the above element. When it's activated from the element below, the last cell is selected; * The Core listen method is improved for pages where multiple Handsontable instances are created. From now on, when one of the instances is activated, the other instance that the activation was taken from calls 'unlisten' hook on its instance; Co-authored-by: Wojciech Szymański <141330+wszymanski@users.noreply.github.com> * Fix selection expanding (#10438) The PR fixes a regression bug that disallows expanding the selection that was already expanded. * Implement a new focusing mechanism. (#10342) * [WIP] VoiceOver experiment: - set focus to the table cell element and switch to the focusable element with a slight timeout * [WIP] VoiceOver experiment: - keep the focus always on the TD elements * [WIP] Refactor the "focus on TDs" approach (without modifying the tests yet). * [WIP] - Extend the 'toMatchHTML' Jasmine matcher to ignore/not ignore certain attributes when comparing the HTML - Update most of the test cases for the new logic - Add a fallback option of 'imeFastEdit' * [WIP] Update test cases, remove unneeded code. * - Refactor the focusing + refocusing logic by adding a Focus Manager - Add tests * - Correct unit and walkontable tests - Correct problems after merging the epic branch into the feature branch * - Modify the visual tests helpers to make more sense in terms of targeting cell by their indexes - Correct a failing visual test * Post-Cr updates * Correct after-merge problems. * Make the headers focusable after navigation. * - Exclude the refocusing mechanism for headers - Extend tests with the header navigation feature * Post-CR changes * Correct lint error. * Modify the logic of when the focusing/refocusing takes place. * Correct lint errors. * - Get rid of the unwanted outline in Safari - Make the copy/cut work from the HOT's context menu - Make the copy/cut work from the Safari's menu * Clone the aria role from the master table to all the overlays' tables * Add the 'modifyFocusedElement' hook. * Correct type tests for the new hook. * Post-CR corrections. * Add missing 'private' tags. * Change the behavior of selecting all cells feature (#10464) The commit changes the behavior of selecting all cells feature. Changes: * Hitting the Ctrl/Cmd+A from now on, select all cells without headers; * Selecting all cells does not move the focus position. The focus position stays in the same position; * Change the color of the header focus selection (#10507) * Fix table's viewport scrolling issues for NestedHeaders (#10508) * Fix typo after resolving conflicted file * Fix code quality worflow complains * Implement the ARIA tags (phase 1) (#10463) * [WIP] VoiceOver experiment: - set focus to the table cell element and switch to the focusable element with a slight timeout * [WIP] VoiceOver experiment: - keep the focus always on the TD elements * [WIP] Refactor the "focus on TDs" approach (without modifying the tests yet). * [WIP] - Extend the 'toMatchHTML' Jasmine matcher to ignore/not ignore certain attributes when comparing the HTML - Update most of the test cases for the new logic - Add a fallback option of 'imeFastEdit' * [WIP] Update test cases, remove unneeded code. * - Refactor the focusing + refocusing logic by adding a Focus Manager - Add tests * - Correct unit and walkontable tests - Correct problems after merging the epic branch into the feature branch * - Modify the visual tests helpers to make more sense in terms of targeting cell by their indexes - Correct a failing visual test * Post-Cr updates * Correct after-merge problems. * Make the headers focusable after navigation. * - Exclude the refocusing mechanism for headers - Extend tests with the header navigation feature * Post-CR changes * Correct lint error. * Modify the logic of when the focusing/refocusing takes place. * Correct lint errors. * - Get rid of the unwanted outline in Safari - Make the copy/cut work from the HOT's context menu - Make the copy/cut work from the Safari's menu * Clone the aria role from the master table to all the overlays' tables * Add the 'modifyFocusedElement' hook. * Correct type tests for the new hook. * [WIP] Implement Aria Manager and aria tags from the "Page level" and "static ARIA" sections of the KB specification. * Add the manager getter + change the version in the focus manager getter's docs. * Fix failing tests. * [WIP] Remove the aria manager in favor of adding the aria tags in the renderers/plugins. * [WIP] - Add additional aria tags - Rearrange the aria tags implementation logic * Remove the aria manager leftovers. * Remove unused import. * Add changelog entry. * Fix lint errors. * Fix the unit tests. * Add aria tags for collapsible columns. * [WIP] - Refactor the previously added logic - Extend the walkontable selected cell solution with additional conditions * [WIP] - Add aria tags to the context menu - Refactor the accessibility-related consts for consistency * [WIP] - Fix the error introduced in the previous commit * [WIP] - Add a new option, `ariaTags` (boolean) to be able to disable adding table-related aria tags to handsontable-based editors. - Fix some issues with VoiceOver reading the table incorrectly. * [WIP] Fix CI errors. * WIP - Refactor - Modify the last aria structure to make it get read better by the accessibility readers * [WIP] - Fix problems with header buttons - Fix a problem with attributes staying added to cells after scrolling back and forth - Extend the following methods with RegExp functionality - removeClass - removeAttributes - Rename setAttributes/removeAttributes to setAttribute/removeAttribute and extend their functionality to be able to set/remove single attributes to be more semantically compatible with addClass/removeClass - Add tests to cover these changes * Correct JSDoc param definition types. * - Add more test cases - Simplify the new logic substantially * - Correct some problems with the current architecture - Add test cases to test the current architecture * Fix the walkontable tests. * - Add more test cases - Fix problems that were found with the new test cases * Correct the 'aria-expanded' implementation in context menu. * Post-CR corrections. * Fix tests. * Add an additional helper for the tests, modifiy the a11y test cases to make them more readable. * - Make the new test cases more readable - Extend the after-scroll sleep time * Extend the sleep time in the a11y scroll-related test cases. * Correct the code to work with the new API. * Try to rollback the sleep values to reasonable amounts. * Fix focus header position for nested headers (#10513) * - Add the aria tags to the autocomplete editor (#10524) * - Add the aria tags to the autocomplete editor - Add test cases to check for the aria tags * Make 'setsize' and 'posinset' be added only if the source was provided as an array. * Post-CR corrections. * Correct the test cases. * Improve keyboard shortcuts navigation throughout the context and dropdown menus (#10519) * Implement the `select` cell type. (#10529) * - Add a 'select' renderer and 'select' cell type - Make the select renderer add aria-haspopup * Add the changelog entry. * Change the colors of the invalid cells and the arrow buttons of the autocomplete-typed cells. (#10520) * - Changed the color of the invalid cells. - Changed the color of the arrow button in the autocomplete-typed cells. * Add the changelog entry. * Add a set of autocomplete editor's test cases to the dropdown editor. (#10526) * Remove unused div htUIInputIcon * Change the keyboard shortcuts for sorting and dropdown menu (#10527) * WIP * Add a11y attributes and navigation for `date`, `checkbox` and `handsontable` types. (#10535) * - Add aria tags described in handsontable/dev-handsontable#1440 - Add a 'handsontable' and 'date' renderers to their respective cell types - Add test cases - Correct some things missed in #10529 * Add the changelog entry. * Post-CR suggestions * Fix `selectAll` method arguments typo (#10538) * Add `aria-label` to the checkbox renderer. (#10539) * Add a translatable `aria-label` to the checkbox renderer. * - Add polish translation - Add an `aria-label` test case * WIP * Add aria-label to hidden row indicators * Refactor hiddenRows.js * Make hidden column indicators accessible * a11y demo react/js Feature/dev issue 1444 (#10532) * js accessibility demo * update to latest, improve a11y html * update to latest next * feat: react a11y demo * fix: misconfigure * changelog * col virtualize * link to docs * refactor: pr feedback * try cjs * update tests * Update examples/next/docs/js/accessibility/README.md * docs: migration guide draft * Revert "docs: migration guide draft" This reverts commit cf2bd2a. * Update pluginHooks.js updated typo in line 611 * Add a div wrapper to the sorting indicator icon * Add aria-label to multi column sorting indicator icon * Add aria-hidden to submenu indicator * Add hepers removeChildIfExists and appendDiv * Add A11Y_DESCRIPTION helper * Add A11Y_BUTTON helper * Use A11Y_ helpers for setting aria tags * Fix linter warnings * Add aria tags only when the appropriate configuration option is set * Make collapsible columns aria-description translatable * Make column sorting aria-description translatable * Make dropdown menu open button aria-label translatable * Make hidden columns indicator icon aria-label translatable * Make nested rows aria-description translatable * Make hidden rows aria-label translatable * Make multi-column sorting indicator aria-label translatable * Restore the original version of the dist/* files * Undo the change in the build script in package.json * Fix linter warnings * Add changelog * Change context menu instructions for screen readers to use CTRL+ENTER * Fix linter warnings * Improve navigation and accessibility of Column menu with filtering (#10530) * Fix formatting od the import statements * Fix a linter warning * Add missing import * Fix a unit test * Exclude some of the tests that fail * Exclude more unit tests that fail * Exclude all unit tests that fail * Uncomment the previously-commented-out test cases and make them work with the new DOM structure. * Fix lint errors. * - Add testes for the new a11y attributes - Fix problems with plugins being disabled not removing the a11y attributes correctly * - Slight refactor - Rename the 'appendDiv' helper to 'appendElement' to extend its functionality - Add tests for the indicator elements * - Add additional test cases - Fix a problem with the dropdown menu attributes not being removed after disabling the plugin * Modify the documentation's mentions of the indicator selectors. * Post-CR corrections * Revert unwanted removals from the previous commit. * Correct unit tests. * Post-CR update --------- Co-authored-by: Krzysztof Budnik <571316+budnix@users.noreply.github.com> Co-authored-by: Jan Siegel <js.ziggle@gmail.com> Co-authored-by: Jakub Wiśniewski <jakub.wisniewski@handsontable.com> Co-authored-by: Wojciech Szymański <141330+wszymanski@users.noreply.github.com> Co-authored-by: Jan Siegel <jansiegel@users.noreply.github.com> Co-authored-by: Evan Seaward <seaward.evan@gmail.com> Co-authored-by: Aleksandra <88165796+alxawl@users.noreply.github.com>

AMBudnik · 2023-12-01T10:08:29Z

Works perfect in v14.0.0 https://jsfiddle.net/qsedcahb/1/

budnix added 22 commits March 1, 2023 14:09

Unlock selection highlight to be able to navigate within headers

8489108

Update header selection styling and add changelog entry file

53c4ba8

[wip] Unify the selection/highlight types

3ee22f5

Extract the selection rendering code to the separate module.

Create Scanner module for WoT selections

fb208e6

Fix all selection edge cases reported by the tests

d2232bb

Decouple Border module from Selection API

9454283

Cleanup the code, complete code documentation, fix lint complains.

Fix linter complains

a60b219

Add missing code docs

a280312

Update Walkontable E2E tests

815c956

This includes: * Update tests to use new internal API for selection; * Fix AsciiTable matcher. For now it support nested rows and columns; * Add new E2E tests for different Selection types;

Allow using asciiTable by the Walkontable tests

353c468

Fix overlays sizing when the Selection API does not exist

ab2ea43

Clean up the code, complete code docs

16c58c3

Remove isCell method call

036f9c5

Fix linter complains

fa6a2be

Clean up the code and revert removed CellRange methods

2fa4c00

Add unit tests for Selection class improve others one

1710a60

Extract table's E2E tests to separate files

43dffd0

Add E2E tests for new Wot Table class methods

526b98a

Add tests for new Core methods

51990ca

Merge branch 'feature/accessibility' into feature/dev-issue-1062

441ea16

Optimize elements scanning

829f7c0

Remove selection limits

15913aa

budnix self-assigned this Mar 22, 2023

budnix changed the title ~~Feature/dev issue 1062 part2~~ Implement keyboard navigation in headers Mar 22, 2023

budnix changed the base branch from develop to feature/accessibility March 22, 2023 09:34

budnix changed the base branch from feature/accessibility to feature/dev-issue-1062 March 22, 2023 09:34

budnix added 4 commits March 27, 2023 10:58

Unlock ability to navigate in headers

4176f8c

Fix focus selection in headers in some cases and add unit tests for

db64b12

Transformer

Cover transformStart Transformation class with new unit tests

4aee810

Implement the PoC of the navigableHeaders option

fd2ad7f

...add more unit tests and atomize the keboard shortcuts to have easier individual implementations for shortcuts in headers.

budnix requested a review from kirszenbaum May 31, 2023 09:29

aninde suggested changes Jun 5, 2023

View reviewed changes

handsontable/src/selection/__tests__/keyboardShortcuts/navigation.spec.js Outdated Show resolved Hide resolved

budnix mentioned this pull request Jun 7, 2023

Add support for keyboard shortcuts that allows selecting all rows/columns #10389

Merged

5 tasks

Fix Delete keyboard shortcut when header is selected

b605eca

aninde self-requested a review June 7, 2023 13:05

aninde suggested changes Jun 7, 2023

View reviewed changes

kirszenbaum requested changes Jun 9, 2023

View reviewed changes

budnix and others added 3 commits June 12, 2023 08:09

Apply suggestions from code review

4c99381

Co-authored-by: Jakub Wiśniewski <jakub.wisniewski@handsontable.com>

Improve the PageUp/Down keyboard shortcuts functionality

6f6a47a

Merge branch 'develop' into feature/dev-issue-1062-part2

f163bc6

budnix requested a review from aninde June 12, 2023 11:19

aninde previously approved these changes Jun 12, 2023

View reviewed changes

Merge branch 'feature/accessibility' into feature/dev-issue-1062-part2

6834755

wszymanski reviewed Jun 12, 2023

View reviewed changes

handsontable/src/3rdparty/walkontable/test/unit/cell/range.unit.js Show resolved Hide resolved

handsontable/src/3rdparty/walkontable/src/cell/coords.js Show resolved Hide resolved

wszymanski approved these changes Jun 12, 2023

View reviewed changes

jansiegel approved these changes Jun 14, 2023

View reviewed changes

budnix merged commit ae753b7 into feature/accessibility Jun 14, 2023
22 checks passed

budnix deleted the feature/dev-issue-1062-part2 branch June 14, 2023 11:08

budnix mentioned this pull request Jun 14, 2023

Epic branch for accessibility #10242

Merged

4 tasks

budnix added the Breaking change label Jun 14, 2023

budnix mentioned this pull request Jun 29, 2023

Add the ability to traverse the grid using TAB key throughout the page #10430

Merged

5 tasks

AMBudnik added the Status: Released label Dec 1, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement keyboard navigation in headers #10301

Implement keyboard navigation in headers #10301

budnix commented Mar 22, 2023 •

edited

aninde left a comment •

edited

budnix commented Jun 7, 2023

aninde left a comment

budnix commented Jun 7, 2023 •

edited

aninde commented Jun 7, 2023 •

edited

wszymanski left a comment •

edited

budnix commented Jun 12, 2023 •

edited

AMBudnik commented Dec 1, 2023

Implement keyboard navigation in headers #10301

Implement keyboard navigation in headers #10301

Conversation

budnix commented Mar 22, 2023 • edited

Context

The PR introduces the following changes:

Major (breaking change)

Minor

Miscellaneous

Supported keyboard shortcuts in headers

Tasks to be done

How has this been tested?

Types of changes

Related issue(s):

Affected project(s):

Checklist:

aninde left a comment • edited

Choose a reason for hiding this comment

budnix commented Jun 7, 2023

aninde left a comment

Choose a reason for hiding this comment

budnix commented Jun 7, 2023 • edited

aninde commented Jun 7, 2023 • edited

wszymanski left a comment • edited

Choose a reason for hiding this comment

budnix commented Jun 12, 2023 • edited

AMBudnik commented Dec 1, 2023

budnix commented Mar 22, 2023 •

edited

aninde left a comment •

edited

budnix commented Jun 7, 2023 •

edited

aninde commented Jun 7, 2023 •

edited

wszymanski left a comment •

edited

budnix commented Jun 12, 2023 •

edited