Bug 1844062 - [devtools] Properly handle aria-pressed attribute on selector highlighter icon. r=devtools-reviewers,ochameau.

nchevobbe · nchevobbe · commit a9138ad00c88 · 2023-10-06T07:52:29.000Z
Differential Revision: https://phabricator.services.mozilla.com/D189916
diff --git a/devtools/client/inspector/rules/rules.js b/devtools/client/inspector/rules/rules.js
@@ -483,10 +483,9 @@ CssRuleView.prototype = {
 
           const query = `.js-toggle-selector-highlighter[data-computed-selector='${selector}']`;
           for (const node of this.styleDocument.querySelectorAll(query)) {
-            node.classList.toggle(
-              "highlighted",
-              eventName == "highlighter-shown"
-            );
+            const isHighlighterDisplayed = eventName == "highlighter-shown";
+            node.classList.toggle("highlighted", isHighlighterDisplayed);
+            node.setAttribute("aria-pressed", isHighlighterDisplayed);
           }
         }
         break;

Original file line number	Diff line number	Diff line change
`@@ -483,10 +483,9 @@ CssRuleView.prototype = {`
`483`	`483`
`484`	`484`	const query = `.js-toggle-selector-highlighter[data-computed-selector='${selector}']`;
`485`	`485`	`for (const node of this.styleDocument.querySelectorAll(query)) {`
`486`		`- node.classList.toggle(`
`487`		`- "highlighted",`
`488`		`- eventName == "highlighter-shown"`
`489`		`- );`
	`486`	`+ const isHighlighterDisplayed = eventName == "highlighter-shown";`
	`487`	`+ node.classList.toggle("highlighted", isHighlighterDisplayed);`
	`488`	`+ node.setAttribute("aria-pressed", isHighlighterDisplayed);`
`490`	`489`	`}`
`491`	`490`	`}`
`492`	`491`	`break;`