fix(modals): prevent html overflow

[hzhu]

Description

When Bedrock CSS is turned on and the Modal and DrawerModal components are opened the main window should be inert, but the user can scroll the main window.

Steps to reproduce:

1. Navigate to https://zendeskgarden.github.io/react-components/modals/
2. Turn on Bedrock CSS
3. Open a Modal or DrawerModal
4. Trigger some scroll events; the main window behind the backdrop scrolls, but it shouldn't

Detail

The Bedrock CSS that normalizes CSS in the Garden ecosystem applies an overflow-y:scroll; to the html element. In some cases like modal components, the overflow-y:scroll; should be overwritten so that inert windows behind an open modal dialog cannot be scrolled.

This PR proposes to modify overflow CSS for the html element instead of the body element. By doing so, the overflow from Bedrock CSS is correctly overwritten when a modal is opened.

Screenshots

Before: when Bedrock CSS is turned on, the user can scroll an inert window behind open modals

---

After: when Bedrock CSS is turned on, the user cannot scroll an inert window behind open modals

Checklist

• 🌐 Styleguidist demo is up-to-date (yarn start)
• ⬅️ renders as expected with reversed (RTL) direction
• 🤘 renders as expected with Bedrock CSS (?bedrock)
• ♿ analyzed via axe and evaluated using VoiceOver
• 💂‍♂️ includes new unit tests
• 📝 tested in Chrome, Firefox, Safari, Edge, and IE11

[jzempel]

Overflow needs to be hidden on both axes, not just y.

[jzempel]

Why is body overflow management being retained?

[hzhu]

Oh wow, it doesn't and the solution can be simplified a lot. Thanks!

[jzempel]

This maps to how the 1.0 version of modals was developed:

  componentDidUpdate(prevProps) {
    const { hidden } = this.props;
    const { hidden: prevHidden } = prevProps;


    if (!hidden && prevHidden) {
      document.querySelector("html").style.overflow = "hidden";
    } else if (hidden && !prevHidden) {
      document.querySelector("html").style.overflow = "";
      this.tabJail = null;
    }
  }

...not sure why it was changed in version 2.0.

[austingreendev]

@jzempel I think the original html -> body overflow change was due to iframed areas that were using Modal. Before we allowed document to be provided by the ThemeProvider this was a bigger issue.