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

Dropdown: add focusOnMount prop to pass onto Popover component #12855

Merged
merged 1 commit into from Jan 23, 2019

Conversation

Projects
None yet
5 participants
@psealock
Copy link
Contributor

psealock commented Dec 13, 2018

Description

I'd like to use the functionality of the <Dropdown /> component, but not bring focus to the dropdown as it gets mounted by making use of <Popover /> prop focusOnMount.

This PR adds a focusOnMount prop to <Dropdown /> and simple passes it down to <Popover />.

How has this been tested?

I've tested via UI implementation, woocommerce/wc-admin#1069. Changes in this PR will not affect other areas of the codebase.

Screenshots

screen shot 2018-12-12 at 4 36 44 pm

Use case involving keyboard Interactions

The option to have the popover NOT take focus on mounting is useful in the case of the <Dropdown /> button being an input. The contents of the <Popover /> might be for information purposes, or in this case, provide additional methods of date selection beyond an input.

As seen below, tabbing to the input opens the popover, but by not stealing focus, allows keyboard-only users to remain in the input with focus.

datepicker

Types of changes

New feature: A non-breaking change that exposes <Popover />'s functionality.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
@tofumatt
Copy link
Member

tofumatt left a comment

My first thought is that the example provided seems a bit confusing; the popover is displayed on... focus of the input but the keyboard isn't moved to it. I guess I'm a bit lost as to how that works for keyboard users having not tested it and just having glanced at the code.

But I'm fine with exposing this property. I think you'll want to update the package's CHANGELOG though as this is an API change and we'll need to publish a new version of it. Our packages are handled via lerna and there are old PRs you can reference for this, but let me know if the package updates aren't clear 😅

@psealock psealock force-pushed the psealock:add/focusOnMount-to-dropdown branch from 5e36710 to 7b6164f Dec 16, 2018

@psealock

This comment has been minimized.

Copy link
Contributor Author

psealock commented Dec 16, 2018

Thanks for the review @tofumatt !

I guess I'm a bit lost as to how that works for keyboard users having not tested it and just having glanced at the code.

I added a gif and explanation to illustrate how it works for keyboard users. By avoiding bringing focus to the popover contents, keyboard users aren't taken out of a form's sequence and can use the input as intended.

I also added to the CHANGELOG with a minor bump (new backwards-compatible feature) 7.1.0 (Unreleased).

@designsimply designsimply added this to the 4.9 (Gutenberg) milestone Jan 17, 2019

@designsimply designsimply requested a review from WordPress/gutenberg-core Jan 17, 2019

@tofumatt
Copy link
Member

tofumatt left a comment

Ah okay, I getcha. Looks good then; it would probably be good to have an end-to-end test to verify tabbing works as expected here, but if you want to do that in a follow-up PR that's okay with me 😄

(You'll need to fix the conflict in the CHANGELOG but then it's good to merge, sorry I didn't get to this for forever, I think I missed it in my issue queue. My bad.)

@youknowriad

This comment has been minimized.

Copy link
Contributor

youknowriad commented Jan 18, 2019

Would you mind rebasing this?

@psealock psealock force-pushed the psealock:add/focusOnMount-to-dropdown branch 2 times, most recently from a46ec07 to 8175d62 Jan 20, 2019

@youknowriad

This comment has been minimized.

Copy link
Contributor

youknowriad commented Jan 22, 2019

I think the error in the unit tests here is already fixed in master and will be gone if we rebase this branch.

@psealock psealock force-pushed the psealock:add/focusOnMount-to-dropdown branch from 8175d62 to 241b081 Jan 22, 2019

@psealock

This comment has been minimized.

Copy link
Contributor Author

psealock commented Jan 22, 2019

Thanks @youknowriad ! Another rebase did the trick, thanks for taking a look.

@youknowriad youknowriad merged commit 2b303c4 into WordPress:master Jan 23, 2019

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment