From 9868be79003fcb863b160897ee688c4aff7be356 Mon Sep 17 00:00:00 2001
From: Lovelyfin00 <omokaroloveth10@gmail.com>
Date: Sat, 1 Jul 2023 15:29:45 +0100
Subject: [PATCH] Adopt DialogController & TeleportController in the userbar

---
 client/src/includes/userbar.ts                | 49 ++++++++-----
 .../templates/wagtailadmin/userbar/base.html  | 68 ++++++++++---------
 2 files changed, 68 insertions(+), 49 deletions(-)

diff --git a/client/src/includes/userbar.ts b/client/src/includes/userbar.ts
index 1b28bc5155..b6ffcc62cb 100644
--- a/client/src/includes/userbar.ts
+++ b/client/src/includes/userbar.ts
@@ -1,6 +1,9 @@
 import axe, { ElementContext, NodeResult, Result, RunOptions } from 'axe-core';
 
-import { dialog } from './dialog';
+import A11yDialog from 'a11y-dialog';
+import { Application } from '@hotwired/stimulus';
+import { DialogController } from '../controllers/DialogController';
+import { TeleportController } from '../controllers/TeleportController';
 
 /*
 This entrypoint is not bundled with any polyfills to keep it as light as possible
@@ -51,7 +54,9 @@ export class Userbar extends HTMLElement {
     const shadowRoot = this.attachShadow({
       mode: 'open',
     });
-    shadowRoot.appendChild(template.content.cloneNode(true));
+    shadowRoot.appendChild(
+      (template.content.firstElementChild as HTMLElement).cloneNode(true),
+    );
     // Removes the template from html after it's being used
     template.remove();
 
@@ -369,25 +374,37 @@ export class Userbar extends HTMLElement {
       this.trigger.appendChild(a11yErrorBadge);
     }
 
-    const dialogTemplates =
-      this.shadowRoot.querySelectorAll<HTMLTemplateElement>(
-        '[data-wagtail-dialog]',
-      );
-    const dialogs = dialog(
-      dialogTemplates,
-      this.shadowRoot as unknown as HTMLElement,
+    const stimulus = Application.start(
+      this.shadowRoot.firstElementChild as Element,
     );
-    if (!dialogs.length) return;
 
-    const modal = dialogs[0];
+    stimulus.register('w-dialog', DialogController);
+    stimulus.register('w-teleport', TeleportController);
+
+    const modalReady = new Promise<{ body: HTMLElement; dialog: A11yDialog }>(
+      (resolve) => {
+        this.shadowRoot?.addEventListener(
+          'w-dialog:ready',
+          (({
+            detail,
+          }: CustomEvent<{ body: HTMLElement; dialog: A11yDialog }>) => {
+            const { body, dialog } = detail;
+            resolve({ body, dialog });
+          }) as EventListener,
+          { once: true, passive: true },
+        );
+      },
+    );
+
+    const { body: modalBody, dialog: modal } = await modalReady;
+
     // Disable TS linter check for legacy code in 3rd party `A11yDialog` element
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    const modalBody = modal.$el.querySelector(
-      '[data-dialog-body]',
-    ) as HTMLDivElement;
-    const accessibilityResultsBox =
-      this.shadowRoot.querySelector<HTMLDivElement>('#accessibility-results');
+    const accessibilityResultsBox = this.shadowRoot.querySelector(
+      '#accessibility-results',
+    );
+
     const a11yRowTemplate = this.shadowRoot.querySelector<HTMLTemplateElement>(
       '#w-a11y-result-row-template',
     );
diff --git a/wagtail/admin/templates/wagtailadmin/userbar/base.html b/wagtail/admin/templates/wagtailadmin/userbar/base.html
index d617c46a4e..d33fcaf996 100644
--- a/wagtail/admin/templates/wagtailadmin/userbar/base.html
+++ b/wagtail/admin/templates/wagtailadmin/userbar/base.html
@@ -1,42 +1,44 @@
 {% load wagtailadmin_tags i18n %}
 <!-- Wagtail user bar embed code -->
 <template id="wagtail-userbar-template">
-    <div class="w-userbar w-userbar--{{ position|default:'bottom-right' }}" data-wagtail-userbar part="userbar">
-        <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/core.css' %}">
-        {% hook_output 'insert_global_admin_css' %}
-        {% hook_output 'insert_editor_css' %}
-        <div class="w-userbar-nav">
+    <aside>
+        <div class="w-userbar w-userbar--{{ position|default:'bottom-right' }}" data-wagtail-userbar part="userbar">
+            <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/core.css' %}">
+            {% hook_output 'insert_global_admin_css' %}
+            {% hook_output 'insert_editor_css' %}
+            <div class="w-userbar-nav">
 
-            <svg class="w-hidden">
-                <defs>
-                    {% include "wagtailadmin/icons/wagtail.svg" %}
-                    {% include "wagtailadmin/icons/key.svg" %}
-                    {% include "wagtailadmin/icons/folder-open-inverse.svg" %}
-                    {% include "wagtailadmin/icons/edit.svg" %}
-                    {% include "wagtailadmin/icons/plus.svg" %}
-                    {% include "wagtailadmin/icons/check.svg" %}
-                    {% include "wagtailadmin/icons/cross.svg" %}
-                    {% include "wagtailadmin/icons/crosshairs.svg" %}
-                </defs>
-            </svg>
+                <svg class="w-hidden">
+                    <defs>
+                        {% include "wagtailadmin/icons/wagtail.svg" %}
+                        {% include "wagtailadmin/icons/key.svg" %}
+                        {% include "wagtailadmin/icons/folder-open-inverse.svg" %}
+                        {% include "wagtailadmin/icons/edit.svg" %}
+                        {% include "wagtailadmin/icons/plus.svg" %}
+                        {% include "wagtailadmin/icons/check.svg" %}
+                        {% include "wagtailadmin/icons/cross.svg" %}
+                        {% include "wagtailadmin/icons/crosshairs.svg" %}
+                    </defs>
+                </svg>
 
-            <button aria-controls="wagtail-userbar-items" aria-haspopup="true" class="w-userbar-trigger" id="wagtail-userbar-trigger" data-wagtail-userbar-trigger>
-                {% block branding_logo %}
-                    {% comment %} Intentionally not using the icon template tag to show as SVG only {% endcomment %}
-                    <svg class="w-userbar-icon" aria-hidden="true">
-                        <use href="#icon-wagtail-icon"></use>
-                    </svg>
-                {% endblock %}
-                <span class="w-sr-only">{% trans 'View Wagtail quick actions' %}</span>
-            </button>
-            <ul aria-labelledby="wagtail-userbar-trigger" class="w-userbar-items" id="wagtail-userbar-items" role="menu">
-                {% for item in items %}
-                    {{ item|safe }}
-                {% endfor %}
-            </ul>
+                <button aria-controls="wagtail-userbar-items" aria-haspopup="true" class="w-userbar-trigger" id="wagtail-userbar-trigger" data-wagtail-userbar-trigger>
+                    {% block branding_logo %}
+                        {% comment %} Intentionally not using the icon template tag to show as SVG only {% endcomment %}
+                        <svg class="w-userbar-icon" aria-hidden="true">
+                            <use href="#icon-wagtail-icon"></use>
+                        </svg>
+                    {% endblock %}
+                    <span class="w-sr-only">{% trans 'View Wagtail quick actions' %}</span>
+                </button>
+                <ul aria-labelledby="wagtail-userbar-trigger" class="w-userbar-items" id="wagtail-userbar-items" role="menu">
+                    {% for item in items %}
+                        {{ item|safe }}
+                    {% endfor %}
+                </ul>
+            </div>
         </div>
-    </div>
-    <div data-a11y-result-outline-container></div>
+        <div data-a11y-result-outline-container></div>
+    </aside>
 </template>
 <wagtail-userbar></wagtail-userbar>
 <script src="{% versioned_static 'wagtailadmin/js/vendor.js' %}"></script>