1901713 - Container query "Jump to container node" button is not keyboard accessible

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, defect)

Description

[Nicolas Chevobbe [:nchevobbe]]

https://searchfox.org/mozilla-central/rev/aa9d148d5be3e7b606448f0b8da6e9f4fa43112f/devtools/client/inspector/rules/views/rule-editor.js#185-190

// We can't use a button, otherwise a line break is added when copy/pasting the rule
const jumpToNodeButton = createChild(selectorContainer, "span", {
  class: "open-inspector",
  role: "button",
  title: l10n("rule.containerQuery.selectContainerButton.tooltip"),
});

I didn't use a button initially because it was adding a line break when copy/pasting the rule, but this can be handled with a CSS property, so let's have a proper button!

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1901713 - [devtools] Turn container query jump to node icon into a proper button. r=#devtools-reviewers.

The button can now be focus and activated with the keyboard.
This allows us to remove one fail-if annotation in associated test.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8d41ba2e0cd6
[devtools] Turn container query jump to node icon into a proper button. r=devtools-reviewers,ochameau.

Comment 3

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/8d41ba2e0cd6