feat: Table grid navigation #1893
Conversation
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## main #1893 +/- ##
==========================================
- Coverage 94.79% 94.78% -0.02%
==========================================
Files 666 666
Lines 17972 17992 +20
Branches 5935 5942 +7
==========================================
+ Hits 17037 17054 +17
- Misses 870 873 +3
Partials 65 65 ☔ View full report in Codecov by Sentry. |
pan-kot
requested review from
jperals,
just-boris,
timogasda and
gethinwebster
and removed request for
a team
…able-grid-nav-integ
|
|
||
| return ( | ||
| <th | ||
| data-focus-id={`header-${String(columnId)}`} |
There was a problem hiding this comment.
The data-focus-id is used to keep focus outlines in sync between header and sticky header. Previously it was only possible to focus on sortable headers, select-all checkbox and resize handles. Now it is also possible to focus on header cells themselves when there are no other focus targets inside.
| @@ -128,15 +138,15 @@ function useTableFocusNavigation<T extends { editConfig?: TableProps.EditConfig< | |||
| ); | |||
|
|
|||
| useEffect(() => { | |||
| if (!tableRoot.current) { | |||
| if (!tableRoot.current || tableRole === 'grid') { | |||
There was a problem hiding this comment.
Why not listen for events when tableRole === 'grid'?
There was a problem hiding this comment.
The "grid" table role is only set when the keyboard navigation is active. It overtakes the table focus navigation developed for tables with inline editing. W/o this, both navigations will be active at the same time causing the cursor to jump two cells at a time in some cases.
Description
The PR integrates grid navigation (enhanced keyboard navigation) feature into the table component and makes it available through a public API.
Related links:
Depends on:
Related:
How has this been tested?
More integration tests to existing pages (inline editing, resizable columns, shift selection). Screenshot tests
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.