As a Wikipedia editor, I want to be able to use the Data Bridge with an image, such as an “edit” icon, as the “button” / “link” to activate the bridge.

Problem:
The bridge is initialized on all links that are direct children of an element with a data-bridge-edit-flow attribute:

const selectedLinks = Array.from( document.querySelectorAll( '[data-bridge-edit-flow] > a' ) );

However, since the new media structure for Parsoid compatibility was rolled out, an image link is wrapped in an additional element that causes it not to be matched by this selector anymore:

<span data-bridge-edit-flow="single-best-value">
  <span class="mw-valign-text-top" typeof="mw:File/Frameless"> <!-- NEW! -->
    <a href="https://wikidata.beta.wmflabs.org/wiki/Q540739?uselang=en#P725" title="Edit this on Wikidata" rel="nofollow"><img alt="Edit this on Wikidata" src="..." decoding="async" width="10" height="10" class="mw-file-element" srcset="..." data-file-width="20" data-file-height="20"></a>
  </span>
</span>

Example:
This can currently be seen on Beta enwiki:Wikidata Bridge Showcase.

The DOM change was deployed to cawiki on 15 December 2022, and at the same time (plus a couple of days for parser cache expiry), we stopped seeing Data Bridge metrics in Grafana:

BDD
GIVEN a page with wikitext like <span data-bridge-edit-flow="single-best-value">[[File:OOjs UI icon edit-ltr-progressive.svg|frameless|text-top|10px|alt=Edit this on Wikidata|link=https://wikidata.beta.wmflabs.org/wiki/Q540739?uselang=en#P725|Edit this on Wikidata]]</span>
AND Data Bridge is enabled on the wiki
WHEN visiting the page
AND clicking the link / icon
THEN data bridge is opened

Acceptance criteria: