-
Notifications
You must be signed in to change notification settings - Fork 8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add keyboard navigation to table #2172
Merged
Merged
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
…wport tabstop (Firefox)
…c as Tab for rows/cells)
- If an anchor is focused in a cell, and we're in the 'single interactive element' special case, and the user mousewheel scrolls the table, the row will be focused instead. (So we don't try to refocus the anchor while the focusedRecycleCallback blurs it) - If cell contents were focused (tabbable child), and a scroll occurs, the cell will be focused instead. Also ensure action menu focus state is set once an action menu is opened. - If an action menu button was focused and a scroll occurs, the cell will be focused instead.
rajsite
reviewed
Jun 21, 2024
packages/nimble-components/src/table-column/base/cell-view/template.ts
Outdated
Show resolved
Hide resolved
packages/nimble-components/src/table/models/keyboard-navigation-manager.ts
Outdated
Show resolved
Hide resolved
packages/nimble-components/src/table/components/group-row/index.ts
Outdated
Show resolved
Hide resolved
packages/nimble-components/src/table/models/keyboard-navigation-manager.ts
Outdated
Show resolved
Hide resolved
packages/nimble-components/src/table/models/keyboard-navigation-manager.ts
Outdated
Show resolved
Hide resolved
packages/nimble-components/src/table/models/keyboard-navigation-manager.ts
Show resolved
Hide resolved
…happens, nothing in table is focused (expectation was cell focus). Add more tests.
rajsite
reviewed
Jun 24, 2024
packages/nimble-components/src/table/components/cell/template.ts
Outdated
Show resolved
Hide resolved
packages/nimble-components/src/table/components/group-row/index.ts
Outdated
Show resolved
Hide resolved
packages/nimble-components/src/table-column/anchor/tests/table-column-anchor.spec.ts
Show resolved
Hide resolved
packages/nimble-components/src/table/models/keyboard-navigation-manager.ts
Outdated
Show resolved
Hide resolved
packages/nimble-components/src/table/models/keyboard-navigation-manager.ts
Outdated
Show resolved
Hide resolved
packages/nimble-components/src/table/models/keyboard-navigation-manager.ts
Show resolved
Hide resolved
…e button could be keyboard navigated to, which was no longer the case)
rajsite
reviewed
Jun 25, 2024
packages/nimble-components/src/table/components/cell/template.ts
Outdated
Show resolved
Hide resolved
rajsite
approved these changes
Jun 25, 2024
rajsite
reviewed
Jun 25, 2024
rajsite
reviewed
Jun 25, 2024
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.
Pull Request
🤨 Rationale
Resolves #1137
👩💻 Implementation
See #2173 for the most up-to-date expected behavior of keyboard navigation that this PR implements. (Direct link to updated HLD)
The
KeyboardNavigationManager
class does the bulk of the work:focusType
, androw/column/cellContent/headerActionIndex
)handleFocus()
to handle this (see additional comments there)handleFocus()
again)The overall approach of only setting
tabindex=0
on the single element in the table we want focused is called roving tabindex.To ensure that we control what elements in the table should get focused, this PR updates
tabindex
on many elements in the table:tabindex=0
to ensure that it can be focused viaTab
tabindex=-1
to start with, until the keyboard navigation code wants to focus them (then they're set totabindex=0
just before being focused).🧪 Testing
Keyboard navigation can be used on any/all of the existing table Storybook pages, once the table is focused.
✅ Checklist