(#2107) Implement ShadowDOM Config Option for Modal

[dlescarbeau]

Pull Request Details

Adds a config option for passing the modal a shadow root, allowing the modal styles to be separated from the rest of the page. This will be utilized by the CIS Slider so we do not have to worry about conflicting versions of the NCIDS.

Closes #2107

Author PR Checklist

Items that the author of the PR is responsible for checking before submitted the PR.

General:

• I have reviewed the acceptance criteria defined in the ticket and ensured the work has been completed.
• The commit message passes all quality commit message standards.
• Unit tests have been updated or created to reflect any javascript changes.
• Storybook scenarios have been updated or created to reflect any html/css/js changes.

Accessibility:

• WCAG 2.1 Level AA requirements have been met.

Development:

• Any new or updated javascript code has 100% unit test coverage.
• New or updated breakpoints have regression images.
• Breaking changes have been thoroughly documented in the PR.

Product Reviewer PR Checklist

Items the product team is responsible for reviewing.

General:

• There are no unexpected or unapproved regression image changes.

• Functionality of interactive elements meet the acceptance criteria.
• The product is visually and functionally the same across the different browsers.

Accessibility:

• AxeDev Tools: there are no new or outstanding accessibility issues introduced in this PR.
• Lighthouse: scores have not noticeably decreased during this PR.
• Wave: there are no new errors or contrast errors introduced in this PR.

Design Reviewer PR Checklist

Items the design team is responsible for reviewing. 


General:

• New or updated features introduced in this PR are developed mobile-first.
• Breakpoint changes and regression images match those breakpoints.
• This PR has been tested in all supported browsers at all breakpoints.

Developer Reviewer PR Checklist

Items the development team is responsible for reviewing.

General:

• New code passes code quality standards set by industry standards.
• The expected Storybook stories have been added or updated for the new or updated feature.
• The expected unit tests have been added or updated for the new or updated feature.

Accessibility:

• VoiceOver: Described content matches with what was expected.
• Keyboard navigation: new or updated features and content are navigable via the keyboard.

[github-actions]

Viewing Information

• The documentation site
• NCIDS JS Documentation
• The storybook site
• The example site

[dlescarbeau]

This PR changes the modal so that its config can take a shadowRoot to attach the modal to, rather than just automatically adding the wrapper to the document body.

• This is being put on hold due to the testing that will need to take place to ensure the shadow modal does not conflict with a different implementation (not shadow) of the modal on the same page.
• In theory, the development work for this should be done, it works as is and I haven't encountered any issues. There are issues regarding unregistering the component in Storybook, but Storybook might be its own bundle of joy.
• The main concern and the primary reason for holding off on this is just the nature of the change with there potentially being 2 modals on the page, one in the shadowRoot and one attached to the body. This will need to be tested thoroughly.