[a11y] Show a visile focus outline when stepping through the styles tab

The styles tab supports keyboard navigation over interactive controls. Currently this is invisible so this CL is adding a focus outline. Bug: 396311936 Change-Id: I5169639f1f8977fd7a3f0db2b9dd3cc17de4bdb9 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6286010 Reviewed-by: Changhao Han <[email protected]> Commit-Queue: Philip Pfaffe <[email protected]>
ChromeDevTools · Feb 21, 2025 · aee15ed · aee15ed
1 parent 6814017
commit aee15ed
Showing 1 changed file with 4 additions and 0 deletions.
diff --git a/front_end/panels/elements/stylePropertiesTreeOutline.css b/front_end/panels/elements/stylePropertiesTreeOutline.css
@@ -296,3 +296,7 @@ devtools-icon.open-in-animations-panel {
     color: var(--icon-css-hover);
   }
 }
+
+.value :focus {
+  outline: 1px solid var(--sys-color-outline);
+}