Added data-rvt-dialog-mount attribute

src/js/components/dialog.js

@@ -64,11 +64,13 @@ export default class Dialog extends Component {
 
       _initSelectors () {
         this.dialogAttribute = 'data-rvt-dialog'
+        this.mountElementAttribute = 'data-rvt-dialog-mount'
         this.triggerAttribute = 'data-rvt-dialog-trigger'
         this.closeButtonAttribute = 'data-rvt-dialog-close'
         this.modalAttribute = 'data-rvt-dialog-modal'
         this.disablePageInteractionAttribute = 'data-rvt-dialog-disable-page-interaction'
 
+        this.mountElementSelector = `[${this.mountElementAttribute}]`
         this.triggerSelector = `[${this.triggerAttribute}]`
         this.closeButtonSelector = `[${this.closeButtonAttribute}]`
       },
@@ -81,6 +83,9 @@ export default class Dialog extends Component {
 
       _initElements () {
         const dialogId = this.element.getAttribute(this.dialogAttribute)
+        const mountElement = document.querySelector(this.mountElementSelector)
+
+        this.mountElement = mountElement ?? document.body
 
         this.triggerButtons = Array.from(
           document.querySelectorAll(`[${this.triggerAttribute} = "${dialogId}"]`)
@@ -119,15 +124,18 @@ export default class Dialog extends Component {
 
       /************************************************************************
        * Rearranges the DOM so that the dialog becomes the first element in
-       * the document body.
+       * the document body (or app container div in the case of a frontend
+       * framework like React). This rearrangement of the DOM is required for
+       * accessibility reasons.
        *
        * @private
        ***********************************************************************/
 
       _makeDialogFirstElementInBody () {
-        const body = document.body
-        const currentFirstElement = body.firstElementChild
-        body.insertBefore(this.element, currentFirstElement)
+        this.mountElement.insertBefore(
+          this.element,
+          this.mountElement.firstElementChild
+        )
       },
 
       /************************************************************************
@@ -520,23 +528,25 @@ export default class Dialog extends Component {
        ***********************************************************************/
 
       _disablePageInteraction () {
-        this._getDirectChildrenOfBody().forEach(child => {
+        this._getDirectChildrenOfBodyExceptDialog().forEach(child => {
           child.setAttribute('inert', '')
           child.setAttribute('aria-hidden', 'true')
         })
       },
 
       /************************************************************************
-       * Returns an array of all current direct children of the document body.
+       * Returns an array of all current direct children of the document body
+       * (or app container in the case of a frontend framework like React)
+       * except for the dialog itself.
        *
        * @private
        * @returns {HTMLElement[]} Direct children of body
        ***********************************************************************/
 
-      _getDirectChildrenOfBody () {
-        return Array.from(
-          document.querySelectorAll(`body > *:not([${this.dialogAttribute}])`)
-        )
+      _getDirectChildrenOfBodyExceptDialog () {
+        const directChildrenOfBody = Array.from(this.mountElement.children)
+
+        return directChildrenOfBody.filter(el => !el.hasAttribute(this.dialogAttribute))
       },
 
       /************************************************************************
@@ -578,7 +588,7 @@ export default class Dialog extends Component {
        ***********************************************************************/
 
       _enablePageInteraction () {
-        this._getDirectChildrenOfBody().forEach(child => {
+        this._getDirectChildrenOfBodyExceptDialog().forEach(child => {
           child.removeAttribute('inert')
           child.removeAttribute('aria-hidden')
         })

src/sandbox/components/dialog/variants/dialog-mount.njk

@@ -0,0 +1,36 @@
+---
+tags: dialog
+title: Mounted dialog
+layout: layouts/preview.njk
+permalink: /components/preview/{{ title | slug}}/
+padding: true
+order: 7
+---
+<div id="app" data-rvt-dialog-mount>
+  <h1>Some test header</h1>
+  <button type="button" class="rvt-button" data-rvt-dialog-trigger="dialog-example">
+    <span>Dialog example</span>
+  </button>
+  <div class="rvt-dialog" id="dialog-example" role="dialog" tabindex="-1" aria-labelledby="dialog-title" aria-describedby="dialog-description" data-rvt-dialog="dialog-example" data-rvt-dialog-disable-page-interaction data-rvt-dialog-darken-page hidden>
+    <header class="rvt-dialog__header">
+      <h1 class="rvt-dialog__title" id="dialog-title">Dialog title</h1>
+    </header>
+    <div class="rvt-dialog__body">
+      <p id="dialog-description">The default dialog appears near the middle of the screen. It does not darken the page behind it and does not close when the user clicks outside of it. You can use data attributes to configure the appearance and behavior of the dialog.</p>
+    </div>
+    <div class="rvt-dialog__controls">
+      <button type="button" class="rvt-button" role="button">
+      <span>OK</span>
+      </button>
+      <button type="button" class="rvt-button rvt-button--secondary" data-rvt-dialog-close="dialog-example" role="button">
+      <span>Cancel</span>
+      </button>
+    </div>
+    <button class="rvt-button rvt-button--plain rvt-dialog__close" data-rvt-dialog-close="dialog-example" role="button">
+      <span class="rvt-sr-only">Close</span>
+      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+        <path fill="currentColor" d="M9.41,8l5.29-5.29a1,1,0,0,0-1.41-1.41L8,6.59,2.71,1.29A1,1,0,0,0,1.29,2.71L6.59,8,1.29,13.29a1,1,0,1,0,1.41,1.41L8,9.41l5.29,5.29a1,1,0,0,0,1.41-1.41Z" />
+      </svg>
+    </button>
+  </div>
+</div>