Switch sidebar props to a JSON script tag for ease of testing

client/src/components/Sidebar/index.tsx

@@ -8,6 +8,7 @@ export const SIDEBAR_COLLAPSED_COOKIE_NAME = 'wagtail_sidebar_collapsed';
 
 export function initSidebar() {
   const element = document.getElementById('wagtail-sidebar');
+  const rawProps = document.getElementById('wagtail-sidebar-props');
 
   const navigate = (url: string) => {
     window.location.href = url;
@@ -20,8 +21,8 @@ export function initSidebar() {
     return new Promise<void>(() => {});
   };
 
-  if (element instanceof HTMLElement && element.dataset.props) {
-    const props = window.telepath.unpack(JSON.parse(element.dataset.props));
+  if (element && rawProps?.textContent) {
+    const props = window.telepath.unpack(JSON.parse(rawProps.textContent));
 
     const collapsedCookie: any = Cookies.get(SIDEBAR_COLLAPSED_COOKIE_NAME);
     // Cast to boolean

wagtail/admin/templates/wagtailadmin/base.html

@@ -5,7 +5,8 @@
     {% slim_sidebar_enabled as slim_sidebar_enabled %}
     <template data-wagtail-sidebar-branding-logo>{% block branding_logo %}{% endblock %}</template>
     {% if slim_sidebar_enabled %}
-    <aside id="wagtail-sidebar" data-wagtail-sidebar data-props="{% menu_props %}"></aside>
+    <script id="wagtail-sidebar-props" type="application/json">{% autoescape off %}{% menu_props %}{% endautoescape %}</script>
+    <aside id="wagtail-sidebar" data-wagtail-sidebar></aside>
     {% else %}
     <aside id="wagtail-sidebar" class="nav-wrapper" data-nav-primary>
         <div class="inner">