[DropZone] Change DOM order of Visually hidden input in order to focus it before its children

[husshegz]

WHY are these changes introduced?

We have a use-case where there is a Button inside the dropzone

Currently, if we're navigating (tabbing) through the component with the keyboard:

1. Button inside Dropzone is focused first
2. Dropzone is focused

We expect a meaningful order when navigating through. Expected order:

1. Focus the Dropzone first
2. Then any focusable contents inside it

Current

Tabbing.order.mp4

Correct order

correct.order.mp4

WHAT is this pull request doing?

Changes DOM order to accommodate a meaningful tabbing sequence.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Could this possibly break anything from the consumer side ?

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

size-limit report

Path	Size
cjs	141.84 KB (+0.01% 🔺)
esm	95.44 KB (-0.01% 🔽)
esnext	138.7 KB (-0.01% 🔽)
css	33.77 KB (0%)

[jared-fanning]

awesome, thanks for addressing this @husshegz 👍

[husshegz]

@jared-fanning
Let me know if this needs more changes, tests, story edit. I couldn't come up with any relevant examples.

Also should I update the UNRELEASED before or after approval ?

[kyledurand]

Also should I update the UNRELEASED before or after approval ?

I think it makes sense to add a note for this. I'll approve when it's been added just ping me 👍

[husshegz]

@kyledurand Should be good now

[kyledurand]

👍 Thanks!

[ghost]

🎉 Thanks for your contribution to Polaris React!