Add main as a wrapper for story content

[lishichengyan]

Closes
#1268
This seems to be a real quick fix -- simply adding a main wrapper in .storybook/custom-addons/provider/index.js would do the trick.

Before:

After:

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

1. add the aXe devtools to your chrome extension
2. choose a story arbitrarily and open it in a new tab
3. run aXe against the entire page, check if the warning is still there

🧢 Your Project:

[ktabors]

Did you confirm that opening this in another tab via the button Danni mentioned did or didn't work for aXe and landmark?

[lishichengyan]

Did you confirm that opening this in another tab via the button Danni mentioned did or didn't work for aXe and landmark?

Yes, i checked the "no main landmark" error is gone (see the second screenshot above)

[LFDanLu]

GET_BUILD

[adobe-bot]

Build successful! 🎉

• View the storybook
• View the storybook-16
• View the documentation

[LFDanLu]

LGTM, will have to look at updating the landmark stories since there will be multiple main landmarks then but that is out of scope here IMO

[majornista]

Should main also wrap the div that precedes the story content?

[lishichengyan]

Hey Michael, thanks for reviewing! Yeah we can do that, but as long as we provide a main landmark the "no main landmark" error should be gone. The question is whether or not should we consider the "note" button as part of "main" content. 🤔

[majornista]

I think it's fine for the note to be part of the main content. If not, axe might throw an error or warning when the note is present, because all content within the page is not contained within landmarks.

[lishichengyan]

I updated the PR. Thank!