1881443 - Idref links in devtools do not respect web component boundaries

Status: VERIFIED FIXED

(DevTools :: Inspector, defect)

Description

[Kilian Valkhof]

Attachment: Selection_2328.png

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:122.0) Gecko/20100101 Firefox/122.0

Steps to reproduce:

Using the following codepen: https://codepen.io/matuzo/pen/yLwYNYY?editors=1010

1. Open the devtools
2. Inspect the button inside the <some-bugs>
3. Click the locator/ "Select element #h1" button in the inspector tree view

Actual results:

You jump to the element with id #h1 outside of the <some-bugs> webcomponent.

This is incorrect because aria-labelledby can not cross a webcomponent boundary, so the "h1" needs to exist inside the webcomponent to be able to be referenced.

Expected results:

The linked element can not be found in the same root, so the button to select it should work similarly to when a completely non-existant ID is referenced.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::Inspector' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Hello Kilian, thanks for the report!
I can indeed reproduce easily.
The click on the button is handled in https://searchfox.org/mozilla-central/rev/a8cc31504a2379bcf8ba395d2da7bb632b5521d6/devtools/client/inspector/markup/markup.js#1219-1234

// Select the node in the same document.
nodeFront.walkerFront
  .document(nodeFront)
  .then(doc => {
    return nodeFront.walkerFront
      .querySelector(doc, "#" + CSS.escape(link))
      .then(node => {
        if (!node) {
          this.emit("idref-attribute-link-failed");
          return;
        }
        this.inspector.selection.setNodeFront(node, {
          reason: "markup-attribute-link",
        });
      });
  })

and we're simply querying the document. We should have additional logic for web component

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

(I checked the accessibility panel and it does indicate that the button is not labelled , so we're good there)

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1881443 - [devtools] Lookup node from idref attribute within node rootNode. r=#devtools-reviewers.

In order to select elements referenced in idref/idreflist attributes,
we were querying the whole node document.
This is incorrect as id reference are scipes within a shadow root.
To fix this, we add a dedicated walker method to retrieve the referenced
node within the base node rootNode.
A test case is added to ensure we don't regress.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a99aa592b4a7
[devtools] Lookup node from idref attribute within node rootNode. r=devtools-reviewers,devtools-backward-compat-reviewers,ochameau,bomsy.

Comment 6

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/a99aa592b4a7

Comment 7

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on a 2024-02-22 Nightly build on macOS 12.
Verified as fixed on Firefox Nightly 126.0a1 and Firefox 125.0 on macOS 12, Windows 10, Ubuntu 22.