Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Menu: Arrow key navigation updates #1761

Merged
merged 1 commit into from Jan 11, 2021
Merged

Menu: Arrow key navigation updates #1761

merged 1 commit into from Jan 11, 2021

Conversation

mdodgelooker
Copy link
Contributor

✨ Changes

  • Replaces moveFocus with new useArrowKeyNav hook in Menu and Tabs
  • Supports up/down arrows (Menu) and left/right arrows (Tabs) via the axis prop
    • Anticipates future support for up/down/left/right arrows (DataTable) with axis="both" and a custom getNextFocus.
  • Follows GCP standard for arrow key nav behavior
    • Tab key enters & exits focus on the list as a whole but only arrow keys can move focus between items in the list
    • Cycles through from last to first & vice versa
    • The last item focused via arrow keys is persisted the next time the user tabs into the list

✅ Requirements

  • Includes test coverage for all changes
  • Build and tests are passing
  • Update documentation
  • Updated CHANGELOG
  • Checked for i18n impacts
  • Checked for a11y impacts
  • Check for image-snapshot changes (run yarn image-snapshots locally)
  • PR is ideally < ~400LOC

📷 Screenshots

185dcf50-bd6e-46a3-b17c-010bda96724a

mdodgelooker
mdodgelooker commented Jan 8, 2021
View reviewed changes
packages/components/src/Menu/MenuGroup.story.tsx
...Basic.args,
label: undefined,
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding this image snapshot to make up for a jest snapshot I removed.

packages/components/src/Menu/MenuGroup.test.tsx
const { getByTestId } = renderWithTheme(
<MenuList>
<MenuItem icon="Calendar">Gouda</MenuItem>
describe('MenuGroup', () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing all the snapshots since they're covered by image snapshots and otherwise this PR would need to update them. Also added the describe – just cuz.

packages/components/src/Menu/MenuItem.tsx
rel={rel}
role="menuitem"
target={target}
tabIndex={-1}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tabIndex={-1} supports the "use arrows to move focus between items, tab to move focus in & out of the list" behavior.

packages/components/src/Tabs/Tabs.test.tsx
</Tabs>
)
})

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing this snapshot since it's covered by an image snapshot and otherwise this PR would have to update it. I tried removing the other 2 snapshots as well but I ran into this issue when trying to use toHaveStyleRule.

packages/components/src/utils/useWindow.tsx
enabled?: boolean
children?: JSX.Element | JSX.Element[]
/** Derive the height of each child using props, type, etc. */
childHeight: number | ChildHeightFunction
/** Tagname to use for the spacers above and below the window */
spacerTag?: WindowSpacerTag
ref?: Ref<E>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added ref as a prop here to avoid the need for useForkedRef in MenuList.

@mdodgelooker mdodgelooker requested review from a user and elliooo January 8, 2021 21:25
@mdodgelooker mdodgelooker marked this pull request as ready for review January 8, 2021 23:51
elliooo
elliooo previously approved these changes Jan 9, 2021
View reviewed changes
Copy link
Contributor

@elliooo elliooo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome! Really liked the implementation of getNextFocus and useArrowKeyNav.

LGTM

packages/components/src/utils/useArrowKeyNav.ts
vertical
)
if (newFocusedItem) {
e.preventDefault()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of curiosity, why do we need to preventDefault here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It stops the scrolling that would otherwise happen with the arrow keys.

ghost
ghost previously approved these changes Jan 11, 2021
View reviewed changes
Copy link

@ghost ghost left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! :)

@mdodgelooker mdodgelooker dismissed stale reviews from ghost and elliooo via d7accae January 11, 2021 23:38
@mdodgelooker mdodgelooker merged commit dc2400f into main Jan 11, 2021
@mdodgelooker mdodgelooker deleted the mdodge/menu-keyboard-nav branch January 11, 2021 23:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@elliooo elliooo elliooo left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@mdodgelooker @elliooo