EmbedBlock breaks accessibility checker

[alxbridge]

Issue Summary

The accessibility checker in the page editor (introduced in Wagtail 6.0) breaks when adding an EmbedBlock to a page.

Steps to Reproduce

1. In a new Wagtail project, create (and install) a new app containing the following:

   • a model containing a StreamField which accepts blocks of type EmbedBlock and RichTextBlock
   • a template for this model which includes the {% wagtailuserbar %} tag, to enable the accessibility checker
   • For convenience, I've attached a sample app for the described setup here: embedtest.zip

2. In the Wagtail editor, create a new page using the model and add the following:

   • A RichTextBlock formatted as Heading 2
   • A RichTextBlock formatted as Heading 4

3. Note that the accessibility checker reports an issue: Incorrect heading hierarchy. Avoid skipping levels.

4. Now add an EmbedBlock with a link to an external service, e.g. https://soundcloud.com/healthandbeautyclub/hb-06-bored-lord, and save the page

5. Note that the accessibility checker no longer reports any issues, even though the skip-level heading hierarchy is still present

6. In browser developer tools, errors relating to the axe library can be seen:

   • Error: Expect axe._selectorData to be set up
   • Uncaught (in promise) Error: Axe is already running. Use await axe.run() to wait for the previous run to finish before starting a new run.
   • Uncaught (in promise) Error: Axe in frame timed out: :root

• I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: Yes

Technical details

• Python version: 3.10.12
• Django version: 5.0.3
• Wagtail version: 6.0.1
• Browser version - tested and seen in:
  • Firefox 124.0.1 (64-bit) for Ubuntu
  • Chrome 119.0.6045.159 (64-bit) for Ubuntu

Working on this

Anyone can contribute to this. View our contributing guidelines, add a comment to the issue once you’re ready to start.