Clicking checkbox scrolls page title out of view

[wkeese]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

If a carbon checkbox is contained in a scrollable <div>, then clicking the checkbox may scroll the page title out of view.
Clicking a checkbox should not cause any scrolling.

Presumably similar to #9403, i.e. it has the same problem that the checkbox is missing a position: relative which makes the <input> position out of the viewport.

Tested on Carbon 10.41.

Steps to reproduce the issue

1. Open https://codesandbox.io/s/focused-lamarr-tjfkq?file=/index.html
2. Scroll down to the checkboxes, but not so far that the page title scrolls out of view.
3. Click a checkbox.
4. Page title scrolls out of the viewport.

Additional information

I originally filed this as https://bugs.chromium.org/p/chromium/issues/detail?id=1235323 but it seems to be a carbon issue, rather than a chrome issue per see. The root issue is that the checkbox's <input> is outside of the viewport, causing a scroll when clicking the <label>.

It only happens when the scroll is on a <div> rather than on the document itself.