Dropdown: add focusOnMount prop to pass onto Popover component

[psealock]

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/woocommerce-admin#1069. Changes in this PR will not affect other areas of the codebase.

Screenshots

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.

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]

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]

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).

[tofumatt]

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]

Would you mind rebasing this?

[youknowriad]

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

[psealock]

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