Repository: wagtail/wagtail

Issue:
Feature request: page editor minimap
### Is your proposal related to a problem?

Long page editing UIs are tedious to navigate.

### Describe the solution you'd like

The minimap is a proposed feature from the [page editor 2022](https://github.com/wagtail/wagtail/discussions/7739) project, to help with navigation of those pages. We’re currently [looking for sponsors or contributors](https://wagtail.org/blog/build-update-on-new-page-editor/) to help deliver the minimap.

This new component serves different use cases:

- For mouse users, the minimap presents all of the page’s sections (panels, potentially blocks, potentially fields) as a table of contents that can be reached at any point
- For keyboard users, the minimap functions as a set of skip links – to jump straight to any part of the page
- For sighted users, the minimap always displays a visual indicator of the user’s current position through the page structure
- When opened, it also has a button to collapse all of the page’s sections at once.

Here is what it looks like in practice:

![Image](https://user-images.githubusercontent.com/877585/173399135-edebeb20-88af-47a7-9ecd-7f6234c9433f.gif)

[Figma design link](https://www.figma.com/file/h67EsVXdWsfu38WGGxWfpi/Wagtail-Design-System?node-id=4859%3A44694)

### Additional context

- Expecting this to be built based on our upcoming refactor of field panels, to use a more semantic document outline, as well as having the ability to link to individual section headings
- The collapsing is a feature of individual sections – "collapse all" just triggers the action for all of them at once.
- The currently-active (visible?) sections of the page are shown in the minimap, using the IntersectionObserver API


Discussion:
I have a working POC for this here https://github.com/lb-/wagtail/commits/experiments/mini-map (see last commit).

Note that this is implemented using Stimulus as it makes it easier to scope event listeners and register new behaviour to dynamically injected elements (e.g. blocks). Could be refactored to non-stimulus but would require more code.

## Recording

https://user-images.githubusercontent.com/1396140/173516073-49083162-80b9-463d-89d8-0d4b6184dda4.mp4


## Summary of POC

* Each `h2` or `h3` we care about is a Stimulus target (which is used to build the mini-map list)
* Each container, where relevant, around those headers gets an intersection observer attached (via a separate, generic intersection observer controller in Stimulus), which dispatches events based on scrolling / moving in or out of view
  * https://github.com/lb-/wagtail/blob/experiments/mini-map/client/src/components/StreamField/blocks/BaseSequenceBlock.js#L149 (blocks)
* The minimap controller is scoped to one tab's object list, so that there is only one sidebar for each tab
    * https://github.com/lb-/wagtail/blob/experiments/mini-map/wagtail/admin/templates/wagtailadmin/panels/object_list.html -> add data attributes and base `aside` element for the sidebar
* Mini map controller code https://github.com/lb-/wagtail/blob/experiments/mini-map/client/src/controllers/MiniMapController.ts
* Intersection observer code https://github.com/lb-/wagtail/blob/experiments/mini-map/client/src/controllers/IntersectionObserverController.ts
* React component used for the inner `ul` as it is much simpler to re-render content in a list through React, also a good example of how Stimulus & React can work together https://github.com/lb-/wagtail/blob/experiments/mini-map/client/src/components/MiniMapIndex/MiniMapIndex.tsx
* interactions are heavily debounced, no smarts yet as to when/when not to dispatch (e.g. only when observer has changed), so can be up to 300ms delay in some interactions.
* It will update the minimap when blocks are added/removed and has two levels of 'depth' but can handle more easily
* basic hover to expand behaviour but really roughly styled
* No smarts as to finding the 'icon' but I think that the current DOM structure does not make this easy
* Added some code to auto-inject an id if one is not on a header (might be a better way)
* Scroll into view is basic, does not consider sticky header offset
* No unit tests and typing fails for some code
* There may be a better way :) 
* Would be very easy to add other 'header' elements to be listened to or even non-headers as opt in via data attributes

## Potential issue with block headers

I noticed that the `h3` inside blocks is always empty, I think this may be an accessibility bug but not sure, let me know if this should be raised.

```
                <h3 data-block-title class="c-sf-block__header__title"></h3>
```

https://github.com/wagtail/wagtail/blob/cb43536f07f0a43412b3ff1c8c0d8ed61af5b3db/client/src/components/StreamField/blocks/BaseSequenceBlock.js#L149



Update - I pushed some changes to the branch mentioned above today - behaviour is much smoother and also was able to work around the smooth scroll and scrolling to content under the header easily with come CSS (instead of more JS).

Resolving patch:
diff --git a/wagtail/admin/wagtail_hooks.py b/wagtail/admin/wagtail_hooks.py
--- a/wagtail/admin/wagtail_hooks.py
+++ b/wagtail/admin/wagtail_hooks.py
@@ -1093,6 +1093,7 @@ def register_icons(icons):
         "logout.svg",
         "mail.svg",
         "media.svg",
+        "minus.svg",
         "mobile-alt.svg",
         "no-view.svg",
         "openquote.svg",


Test patch:
diff --git a/client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap b/client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap
--- a/client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap
+++ b/client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap
@@ -17,7 +17,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"11111111-1111-1111-1111-111111111111\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -28,9 +28,9 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -85,7 +85,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"22222222-2222-2222-2222-222222222222\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -96,9 +96,9 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -153,7 +153,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
         <input type=\\"hidden\\" name=\\"the-prefix-2-id\\" value=\\"fake-uuid-v4-value\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-fake-uuid-v4-value-section\\" aria-labelledby=\\"block-fake-uuid-v4-value-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-fake-uuid-v4-value-section\\" aria-labelledby=\\"block-fake-uuid-v4-value-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-fake-uuid-v4-value-section\\" aria-labelledby=\\"block-fake-uuid-v4-value-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -164,9 +164,9 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-fake-uuid-v4-value-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-fake-uuid-v4-value-section\\" aria-labelledby=\\"block-fake-uuid-v4-value-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -235,7 +235,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"22222222-2222-2222-2222-222222222222\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -246,9 +246,9 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -303,7 +303,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"11111111-1111-1111-1111-111111111111\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -314,9 +314,9 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -385,7 +385,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"22222222-2222-2222-2222-222222222222\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -396,9 +396,9 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -453,7 +453,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"11111111-1111-1111-1111-111111111111\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -464,9 +464,9 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -535,7 +535,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"11111111-1111-1111-1111-111111111111\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -546,9 +546,9 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -603,7 +603,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
         <input type=\\"hidden\\" name=\\"the-prefix-2-id\\" value=\\"\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-undefined-section\\" aria-labelledby=\\"block-undefined-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-undefined-section\\" aria-labelledby=\\"block-undefined-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-undefined-section\\" aria-labelledby=\\"block-undefined-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -614,9 +614,9 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-undefined-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-undefined-section\\" aria-labelledby=\\"block-undefined-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -671,7 +671,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"22222222-2222-2222-2222-222222222222\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -682,9 +682,9 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -753,7 +753,7 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"11111111-1111-1111-1111-111111111111\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -764,9 +764,9 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -821,7 +821,7 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"22222222-2222-2222-2222-222222222222\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -832,9 +832,9 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -903,7 +903,7 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"11111111-1111-1111-1111-111111111111\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -914,9 +914,9 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -971,7 +971,7 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"22222222-2222-2222-2222-222222222222\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -982,9 +982,9 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -1053,7 +1053,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"11111111-1111-1111-1111-111111111111\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -1064,9 +1064,9 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -1121,7 +1121,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"22222222-2222-2222-2222-222222222222\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -1132,9 +1132,9 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -1203,7 +1203,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"11111111-1111-1111-1111-111111111111\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -1214,9 +1214,9 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-11111111-1111-1111-1111-111111111111-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-11111111-1111-1111-1111-111111111111-section\\" aria-labelledby=\\"block-11111111-1111-1111-1111-111111111111-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -1271,7 +1271,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"22222222-2222-2222-2222-222222222222\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -1282,9 +1282,9 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-22222222-2222-2222-2222-222222222222-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\"></span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-22222222-2222-2222-2222-222222222222-section\\" aria-labelledby=\\"block-22222222-2222-2222-2222-222222222222-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
diff --git a/client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap b/client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap
--- a/client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap
+++ b/client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap
@@ -21,7 +21,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"1\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -32,9 +32,9 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-1-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block A</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -94,7 +94,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"2\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -105,9 +105,9 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-2-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block B</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -167,7 +167,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
         <input type=\\"hidden\\" name=\\"the-prefix-2-id\\" value=\\"fake-uuid-v4-value\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-fake-uuid-v4-value-section\\" aria-labelledby=\\"block-fake-uuid-v4-value-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-fake-uuid-v4-value-section\\" aria-labelledby=\\"block-fake-uuid-v4-value-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-fake-uuid-v4-value-section\\" aria-labelledby=\\"block-fake-uuid-v4-value-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -178,9 +178,9 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-fake-uuid-v4-value-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block B</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-fake-uuid-v4-value-section\\" aria-labelledby=\\"block-fake-uuid-v4-value-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -258,7 +258,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"2\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -269,9 +269,9 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-2-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block B</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -331,7 +331,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"1\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -342,9 +342,9 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-1-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block A</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -422,7 +422,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"2\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -433,9 +433,9 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-2-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block B</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -495,7 +495,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"1\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -506,9 +506,9 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-1-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block A</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -586,7 +586,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"1\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -597,9 +597,9 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-1-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block A</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -659,7 +659,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"2\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -670,9 +670,9 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-2-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block B</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -750,7 +750,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"1\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -761,9 +761,9 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-1-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block A</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -833,7 +833,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"2\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -844,9 +844,9 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-2-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block B</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -924,7 +924,7 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"1\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -935,9 +935,9 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-1-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block A</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -997,7 +997,7 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"2\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -1008,9 +1008,9 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-2-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block B</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -1098,7 +1098,7 @@ exports[`telepath: wagtail.blocks.StreamBlock with labels that need escaping it
         <input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"1\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -1109,9 +1109,9 @@ exports[`telepath: wagtail.blocks.StreamBlock with labels that need escaping it
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-1-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block &lt;A&gt;</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
@@ -1171,7 +1171,7 @@ exports[`telepath: wagtail.blocks.StreamBlock with labels that need escaping it
         <input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"2\\">
         <section class=\\"w-panel w-panel--nested\\" id=\\"block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel=\\"\\">
           <div class=\\"w-panel__header\\">
-            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
+            <a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel-anchor=\\"\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
                 <use href=\\"#icon-link\\"></use>
               </svg>
@@ -1182,9 +1182,9 @@ exports[`telepath: wagtail.blocks.StreamBlock with labels that need escaping it
               </svg>
             </button>
             <h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-2-heading\\" data-panel-heading=\\"\\">
-              <span data-block-title=\\"\\" class=\\"c-sf-block__title\\"></span>
+              <span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
               <span class=\\"c-sf-block__type\\">Test Block &lt;B&gt;</span>
-              <span class=\\"w-required-mark\\">*</span>
+              <span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
             </h2>
             <a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
               <svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
diff --git a/wagtail/admin/tests/pages/test_edit_page.py b/wagtail/admin/tests/pages/test_edit_page.py
--- a/wagtail/admin/tests/pages/test_edit_page.py
+++ b/wagtail/admin/tests/pages/test_edit_page.py
@@ -152,7 +152,7 @@ def test_page_edit(self):
         # test that side panel is shown
         self.assertContains(
             response,
-            '<aside class="form-side form-side--initial" data-form-side >',
+            '<aside class="form-side form-side--initial" aria-label="Side panels" data-form-side>',
         )
         self.assertNotContains(response, "data-form-side-explorer")