Add support for collapsing/expanding columns using a keyboard shortcut #10404
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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;
...add more unit tests and atomize the keboard shortcuts to have easier individual implementations for shortcuts in headers.
...move grid shortcuts to the shortcotContexts dir, fix some E2E tests.
Co-authored-by: Jakub Wiśniewski <jakub.wisniewski@handsontable.com>
|
@kirszenbaum I guess the keyboard shortcuts page needs to be updated. Would you like to add the missing entries in this PR or separately? |
wszymanski
approved these changes
Jun 14, 2023
|
Documented in #10402 |
jansiegel
added a commit
that referenced
this pull request
Oct 27, 2023
* 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>
|
Works flawlessly in v14.0.0 https://jsfiddle.net/1t6r59v2/1/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Context
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
How has this been tested?
I tested the changes locally and I cover the feature with new E2E tests.
Types of changes
Related issue(s):
Affected project(s):
handsontableChecklist: