fix(ComposedModal): wrap modal content in div to get VO in iOS working

[annawen1]

Closes #11046

VO on iOS - focus was not getting trapped in the ComposedModal. When user swipes through modal content, expected behavior is the focus will loop back to start of modal instead of going out into the browser tool bar.

BEFORE:

RPReplay_Final1652120455.mov

AFTER: (I'm swiping back and forth to ensure both start and end sentinels redirect focus back within the modal)

RPReplay_Final1652120296.mov

Changelog

Changed

• wrap modal content in another div - weird, but doing so gets VO to focus on the start/end sentinel buttons and redirect focus.
• create a cds--modal-container-body class for styling

Testing / Reviewing

• using VO, make sure focus in ComposedModal is trapped within modal until user closes the modal

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Name	Link
🔨 Latest commit	dbc20df
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/6282722b58257b0009a5e47c
😎 Deploy Preview	https://deploy-preview-11350--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	dbc20df
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6282722b53eac50009c84dd7
😎 Deploy Preview	https://deploy-preview-11350--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[joshblack]

@annawen1 one thing that may be happening with VO on iOS is that ComposedModal needs to set inert and/or aria-hidden on content outside of the modal dialog, if I remember right. This is something we ran into when trying to build up Dialog for v11 where we set aria-hidden and inert on content that was not the modal dialog.

This could also totally be wrong haha, figured I'd share in case it helped out at all!

[annawen1]

@annawen1 one thing that may be happening with VO on iOS is that ComposedModal needs to set inert and/or aria-hidden on content outside of the modal dialog, if I remember right. This is something we ran into when trying to build up Dialog for v11 where we set aria-hidden and inert on content that was not the modal dialog.

This could also totally be wrong haha, figured I'd share in case it helped out at all!

@joshblack yeah that was the #1 solution that I've seen when searching online, but we do have similar focus wrap logic for our web components locale modal that's working on VO iOS so I'm trying to see why it doesn't do the same 🤔

UPDATE: weird, but it works when I use another div to wrap the start/end sentinel buttons within. Really not sure why VO decides to finally focus on the sentinel buttons with that extra div wrapping.