[terra-table] Added navigation via Home and End Keys #1887
Conversation
chrismichalewicz
added
⭐ Functionally Reviewed
and removed
Functional Review Required
labels
| if (event.keyCode !== KeyCode.KEY_TAB | ||
| && (isTextInput(targetElement) |
There was a problem hiding this comment.
nit: In other places where we do onKeyDown we use switch statements. I think doing that here would make it clear that we're watching for keycode events and doing an action accordingly.
Also it seems that we're doing something pretty similar to what's being done in focusManagement.js. Maybe we can put this query search in that file too and then us that as a util here?
There was a problem hiding this comment.
We have very similar code in the data-grid package. I think it is ok to keep this pattern.
| @@ -8,6 +8,29 @@ import GridContext, { GridConstants } from '../../src/utils/GridContext'; | |||
| import Cell from '../../src/subcomponents/Cell'; | |||
| import ColumnContext from '../../src/utils/ColumnContext'; | |||
|
|
|||
| const originalOffsetHeight = Object.getOwnPropertyDescriptor( | |||
There was a problem hiding this comment.
Just a question: What is the purpose of doing this bit from 11 to 33? What's being changed or needed to change here?
There was a problem hiding this comment.
This is required so that the elements will have an offsetWidth and offsetHeight in Jest. Without this logic, the values will be 0 and the tests will fail.
| * @param {HTMLElement} element - The element to check if it is a text input | ||
| * @returns True if the element is a text input. Otherwise, false. | ||
| */ | ||
| const isTextInput = (element) => { |
There was a problem hiding this comment.
nit: Since we now have focusManagement.js that's doing queries similar to this, should we move this function in that file as well?
There was a problem hiding this comment.
I just didn't move it because it is currently only used in this one location. We can always move it if the function needs to be shared by multiple files.
|
Needs to be mentioned in the docs somewhere. Possibly under "Component Features". @sdadn @sycombs @chrismichalewicz thoughts? |
eawww
added
⭐ UX Reviewed
Summary
What was changed:
The Terra Table was updated to allow users to navigate to the first or last focusable element in the table via the home and end keys, respectively.
Why it was changed:
The change was made to improve accessibility as well as the user experience for keyboard users. If a table contained a large set of focusable elements, users previously had to tab through each individual element.
Testing
This change was tested using:
Reviews
In addition to engineering reviews, this PR needs:
Additional Details
N/A
This PR resolves:
UXPLATFORM-9784
Thank you for contributing to Terra.
@cerner/terra