[Modal] Fix activator not gaining focus when modal is closed

[LauraAubin]

WHY are these changes introduced?

Fixes the modal activator not regaining focus when the modal is closed.

Will also resolve #10493.

WHAT is this pull request doing?

Previously in this PR, the Box was removed in favour of using cloneElement. This was done in order to obtain inline styling since the Box is a div by default. However, cloneElement was also passing the ref as a prop, which assumes that the activator you are passing also accepts ref, which in most cases is not the case (i.e, Button). As a result, the ref to the activator was always null.

This PR reverts this change and reimplements the Box so that the ref can be maintained. This PR also introduces a new prop activatorWrapper, which enables the consumer to optionally convert the Box into whatever element they choose. In the case of inline styling, we can now set the activator to be a span. This new prop activatorWrapper is a consistent pattern across this repo, i.e <Tooltip />.

How to 🎩

Since many modals across the admin are either passing a ref, or simply do not have the activator hooked up, I added a simple example to the top of the orders list page in the admin with an element activator.

Screen.Recording.2023-12-01.at.2.08.29.PM.mov

• Orders list: With these changes
• Open the modal by clicking on the button Open test modal.
• Press tab. Once on the exit button, press enter to close the modal.
• Ensure focus is redirected back to the Open test modal button.
• Ensure that the following console error does not exist:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()

Here is the same example implemented on a separate Spinstance without these changes:

• Orders list: Without these changes
• Note that opening the modal and closing it redirects focus to the body of the page.
• Note that the console error exists.

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

• Tested a snapshot
• 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

[LauraAubin]

These tests can now be un-skipped and have been fixed!

[joelzwarrington]

It's unfortunate these tests were skipped (and I didn't notice) at the time I shipped my PR. It would have caught that!

[LauraAubin]

/snapit

[LauraAubin]

cc @joelzwarrington, we'll need to coordinate and add the activatorWrapper="span" prop to your area once this Polaris version is released and updated in Web. I'm happy to make that change, just keeping you in the loop!

[github-actions]

🫰✨ Thanks @LauraAubin! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20231130224650

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20231130224650

yarn add @shopify/polaris@0.0.0-snapshot-release-20231130224650

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20231130224650

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20231130224650

[chloerice]

Thanks for fixing this Laura!!