css: Use :focus-visible instead of our custom data-keyboard-focus
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
:focus-visible is basically the exact same functionality as the custom
data-keyboard-focus attribute that devtools maintains. This CL converts
all of our uses of data-keyboard-focus in CSS to use :focus-visible.
This has no intended behaviour change although it's possible there are
small differences in our implementation vs. the web platform one, so
this might cause some regression with focus styles for keyboard
interaction.
I tested a few of these manually to verify they still do the same thing.
The CSS linter was unhappy about the ordering of some rules due to
specificity-ordering checks, so there is some re-ordering too.
A follow-up CL will remove our implementation of data-keyboard-focus.
Change-Id: Ifc273f7d82e16ea07e24ed2d1faa6f794a12501d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352236
Commit-Queue: Peter Marshall <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>
Reviewed-by: Kalon Hinds <[email protected]>
Reviewed-by: Jack Lynch <[email protected]>
Reviewed-by: Brandon Goddard <[email protected]>
diff --git a/front_end/accessibility/axBreadcrumbs.css b/front_end/accessibility/axBreadcrumbs.css
index 12dbaaa..2273c20 100644
--- a/front_end/accessibility/axBreadcrumbs.css
+++ b/front_end/accessibility/axBreadcrumbs.css
@@ -141,7 +141,7 @@
.ax-breadcrumbs .ax-node.preselected:not(.inspected) .selection,
.ax-breadcrumbs .ax-node.hovered:not(.inspected) .selection,
.ax-breadcrumbs .ax-node.hovered:not(.inspected) .wrapper,
- .ax-breadcrumbs .ax-node[data-keyboard-focus="true"]:focus:not(.inspected) .wrapper {
+ .ax-breadcrumbs .ax-node:focus-visible:not(.inspected) .wrapper {
forced-color-adjust: none;
background-color: Highlight;
color: HighlightText;
@@ -149,8 +149,8 @@
}
.ax-breadcrumbs .ax-node.parent.hovered:not(.inspected)::before,
- .ax-breadcrumbs .ax-node.parent[data-keyboard-focus="true"]:focus:not(.inspected)::before,
- .ax-breadcrumbs .ax-node.children-unloaded[data-keyboard-focus="true"]:focus:not(.inspected)::before,
+ .ax-breadcrumbs .ax-node.parent:focus-visible:not(.inspected)::before,
+ .ax-breadcrumbs .ax-node.children-unloaded:focus-visible:not(.inspected)::before,
.ax-breadcrumbs .ax-node.hovered:not(.inspected).children-unloaded::before {
background-color: HighlightText;
}
diff --git a/front_end/animation/animationTimeline.css b/front_end/animation/animationTimeline.css
index 4888132..583bef2 100644
--- a/front_end/animation/animationTimeline.css
+++ b/front_end/animation/animationTimeline.css
@@ -28,7 +28,7 @@
flex: 0 0 150px;
}
-.animation-node-description[data-keyboard-focus="true"]:focus {
+.animation-node-description:focus-visible {
overflow: auto;
box-shadow: 0 0 0 2px var(--accent-color) inset;
}
@@ -250,8 +250,8 @@
opacity: 100%;
}
-svg.animation-ui circle[data-keyboard-focus="true"],
-svg.animation-ui path[data-keyboard-focus="true"] {
+svg.animation-ui circle:focus-visible,
+svg.animation-ui path:focus-visible {
outline: 2px solid -webkit-focus-ring-color;
}
@@ -333,11 +333,11 @@
cursor: pointer;
}
-.animation-buffer-preview[data-keyboard-focus="true"]:focus {
+.animation-buffer-preview:focus-visible {
outline: -webkit-focus-ring-color auto 5px;
}
-.animation-buffer-preview[data-keyboard-focus="true"]:not(.selected):focus,
+.animation-buffer-preview:not(.selected):focus-visible,
.animation-buffer-preview:not(.selected):hover {
background-color: hsl(217deg 90% 92% / 100%);
}
@@ -412,19 +412,6 @@
border-radius: 0 4px 4px 0;
}
-.animation-playback-rate-button[data-keyboard-focus="true"].selected:focus {
- color: hsl(0deg 0% 0%);
-}
-
-.animation-playback-rate-button[data-keyboard-focus="true"].selected:first-child:focus,
-.animation-playback-rate-button[data-keyboard-focus="true"]:focus {
- background-color: var(--focus-bg-color);
-}
-
-.animation-playback-rate-button:not(.selected):hover {
- background: hsl(211deg 100% 95%);
-}
-
.animation-playback-rate-button.selected {
color: hsl(0deg 100% 100%);
background-color: var(--selection-bg-color);
@@ -437,6 +424,19 @@
background-color: hsl(217deg 89% 100%);
}
+.animation-playback-rate-button.selected:focus-visible {
+ color: hsl(0deg 0% 0%);
+}
+
+.animation-playback-rate-button.selected:first-child:focus-visible,
+.animation-playback-rate-button:focus-visible {
+ background-color: var(--focus-bg-color);
+}
+
+.animation-playback-rate-button:not(.selected):hover {
+ background: hsl(211deg 100% 95%);
+}
+
.animation-remove-button,
.-theme-preserve {
position: absolute;
@@ -466,16 +466,16 @@
}
@media (forced-colors: active) {
- .animation-playback-rate-button[data-keyboard-focus="true"].selected:first-child:focus,
- .animation-playback-rate-button[data-keyboard-focus="true"]:focus,
.animation-playback-rate-button.selected,
- .animation-playback-rate-button.selected:first-child {
+ .animation-playback-rate-button.selected:first-child,
+ .animation-playback-rate-button.selected:first-child:focus-visible,
+ .animation-playback-rate-button:focus-visible {
forced-color-adjust: none;
color: HighlightText;
background-color: Highlight;
}
- .animation-node-description[data-keyboard-focus="true"]:focus {
+ .animation-node-description:focus-visible {
background-color: canvas;
forced-color-adjust: none;
}
diff --git a/front_end/browser_debugger/domBreakpointsSidebarPane.css b/front_end/browser_debugger/domBreakpointsSidebarPane.css
index f995c36..b8d46c4 100644
--- a/front_end/browser_debugger/domBreakpointsSidebarPane.css
+++ b/front_end/browser_debugger/domBreakpointsSidebarPane.css
@@ -21,7 +21,7 @@
padding: 2px 0;
}
-.breakpoint-entry[data-keyboard-focus="true"] {
+.breakpoint-entry:focus-visible {
background-color: var(--focus-bg-color);
}
@@ -40,13 +40,13 @@
}
@media (forced-colors: active) {
- .breakpoint-list .breakpoint-entry:hover,
- .breakpoint-entry[data-keyboard-focus="true"] {
+ .breakpoint-entry:focus-visible,
+ .breakpoint-list .breakpoint-entry:hover {
forced-color-adjust: none;
background-color: Highlight;
}
- .breakpoint-entry[data-keyboard-focus="true"] *,
+ .breakpoint-entry:focus-visible *,
.breakpoint-list .breakpoint-entry:hover * {
color: HighlightText;
}
diff --git a/front_end/browser_debugger/xhrBreakpointsSidebarPane.css b/front_end/browser_debugger/xhrBreakpointsSidebarPane.css
index 48917ed..d8befd0 100644
--- a/front_end/browser_debugger/xhrBreakpointsSidebarPane.css
+++ b/front_end/browser_debugger/xhrBreakpointsSidebarPane.css
@@ -38,7 +38,7 @@
background-color: #eee;
}
-.breakpoint-list .breakpoint-entry[data-keyboard-focus="true"] {
+.breakpoint-list .breakpoint-entry:focus-visible {
background-color: var(--focus-bg-color);
}
@@ -58,13 +58,13 @@
@media (forced-colors: active) {
.breakpoint-list .breakpoint-entry:hover,
- .breakpoint-list .breakpoint-entry[data-keyboard-focus="true"] {
+ .breakpoint-list .breakpoint-entry:focus-visible {
forced-color-adjust: none;
background-color: Highlight;
}
.breakpoint-list .breakpoint-entry:hover *,
- .breakpoint-list .breakpoint-entry[data-keyboard-focus="true"] * {
+ .breakpoint-list .breakpoint-entry:focus-visible * {
color: HighlightText;
}
}
diff --git a/front_end/color_picker/spectrum.css b/front_end/color_picker/spectrum.css
index ec61767..28b1d68 100644
--- a/front_end/color_picker/spectrum.css
+++ b/front_end/color_picker/spectrum.css
@@ -86,8 +86,8 @@
border-radius: 2px;
}
-.spectrum-hue[data-keyboard-focus="true"] .spectrum-slider,
-.spectrum-alpha[data-keyboard-focus="true"] .spectrum-slider {
+.spectrum-hue:focus-visible .spectrum-slider,
+.spectrum-alpha:focus-visible .spectrum-slider {
border: 1px solid var(--accent-color-hover);
width: 14px;
height: 14px;
@@ -316,7 +316,7 @@
}
.swatch-overlay:hover,
-.swatch-overlay[data-keyboard-focus="true"]:focus {
+.swatch-overlay:focus-visible {
background-color: rgb(0 0 0 / 30%);
opacity: 100%;
}
@@ -384,7 +384,7 @@
background-color: #ddd;
}
-.spectrum-switcher[data-keyboard-focus="true"]:focus {
+.spectrum-switcher:focus-visible {
background-color: var(--focus-bg-color);
}
@@ -544,7 +544,7 @@
flex: 0 0 84px;
}
-.palette-preview[data-keyboard-focus="true"]:focus,
+.palette-preview:focus-visible,
.palette-preview:hover {
background-color: #eee;
}
@@ -660,7 +660,7 @@
}
.spectrum-switcher:hover,
- .spectrum-switcher[data-keyboard-focus="true"]:focus {
+ .spectrum-switcher:focus-visible {
forced-color-adjust: none;
background-color: Highlight !important;
}
@@ -670,7 +670,7 @@
}
.spectrum-switcher:hover svg,
- .spectrum-switcher[data-keyboard-focus="true"]:focus svg {
+ .spectrum-switcher:focus-visible svg {
fill: HighlightText;
}
@@ -685,7 +685,7 @@
}
.swatch-overlay:hover,
- .swatch-overlay[data-keyboard-focus="true"]:focus {
+ .swatch-overlay:focus-visible {
background-color: canvas !important;
}
diff --git a/front_end/console/consolePinPane.css b/front_end/console/consolePinPane.css
index 18cd339..e77133d 100644
--- a/front_end/console/consolePinPane.css
+++ b/front_end/console/consolePinPane.css
@@ -70,7 +70,7 @@
}
.console-delete-pin:hover,
-.console-delete-pin[data-keyboard-focus="true"]:focus {
+.console-delete-pin:focus-visible {
opacity: 100%;
}
diff --git a/front_end/console/consoleView.css b/front_end/console/consoleView.css
index 3375a80..9a4ad0f 100644
--- a/front_end/console/consoleView.css
+++ b/front_end/console/consoleView.css
@@ -517,8 +517,13 @@
color: HighlightText !important;
}
- #console-messages .link[data-keyboard-focus="true"]:focus,
- #console-messages .devtools-link[data-keyboard-focus="true"]:focus {
+ #console-messages .devtools-link,
+ #console-messages .devtools-link:hover {
+ color: linktext;
+ }
+
+ #console-messages .link:focus-visible,
+ #console-messages .devtools-link:focus-visible {
background: Highlight;
color: HighlightText;
}
@@ -531,9 +536,4 @@
.console-message-wrapper.console-error-level:focus:last-of-type {
--error-text-color: HighlightText;
}
-
- #console-messages .devtools-link,
- #console-messages .devtools-link:hover {
- color: linktext;
- }
}
diff --git a/front_end/data_grid/dataGrid.css b/front_end/data_grid/dataGrid.css
index 13d7308..297e4b1 100644
--- a/front_end/data_grid/dataGrid.css
+++ b/front_end/data_grid/dataGrid.css
@@ -218,7 +218,7 @@
color: inherit;
}
-.data-grid.no-selection[data-keyboard-focus="true"]:focus {
+.data-grid.no-selection:focus-visible {
border: 1px solid var(--accent-color) !important;
}
@@ -279,6 +279,10 @@
background-color: ButtonText;
}
+ .data-grid.no-selection:focus-visible * {
+ color: ButtonText;
+ }
+
.data-grid th.sortable:hover *,
.data-grid th.sortable:hover .sort-order-icon-container [is=ui-icon].icon-mask,
.data-grid tr.parent.selected td.disclosure::before,
@@ -294,15 +298,11 @@
background-color: canvas;
}
- .data-grid.no-selection[data-keyboard-focus="true"]:focus {
+ .data-grid.no-selection:focus-visible {
forced-color-adjust: none;
border-color: Highlight;
}
- .data-grid.no-selection[data-keyboard-focus="true"]:focus * {
- color: ButtonText;
- }
-
.data-grid th.sortable:hover,
.data-grid table.data tr.revealed:hover,
.data-grid table.data tr.revealed.selected,
diff --git a/front_end/elements/domLinkifier.css b/front_end/elements/domLinkifier.css
index be80477..f1d61b2 100644
--- a/front_end/elements/domLinkifier.css
+++ b/front_end/elements/domLinkifier.css
@@ -14,7 +14,7 @@
pointer-events: auto;
}
-.node-link[data-keyboard-focus="true"]:focus {
+.node-link:focus-visible {
outline-width: unset;
}
diff --git a/front_end/elements/elementsTreeOutline.css b/front_end/elements/elementsTreeOutline.css
index 7dd677b..79c2d06 100644
--- a/front_end/elements/elementsTreeOutline.css
+++ b/front_end/elements/elementsTreeOutline.css
@@ -112,7 +112,7 @@
margin-left: -12px;
}
-.elements-disclosure .elements-tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .highlight > * {
+.elements-disclosure .elements-tree-outline.hide-selection-when-blurred .selected:focus-visible .highlight > * {
background: var(--focus-bg-color);
border-radius: 2px;
box-shadow: 0 0 0 2px var(--focus-bg-color);
diff --git a/front_end/elements/stylesSidebarPane.css b/front_end/elements/stylesSidebarPane.css
index 36ee906..98d118b 100644
--- a/front_end/elements/stylesSidebarPane.css
+++ b/front_end/elements/stylesSidebarPane.css
@@ -26,11 +26,11 @@
font-style: italic;
}
-.styles-section[data-keyboard-focus="true"]:focus {
+.styles-section:focus-visible {
background-color: hsl(214deg 48% 95%);
}
-.styles-section.read-only[data-keyboard-focus="true"]:focus {
+.styles-section.read-only:focus-visible {
background-color: hsl(215deg 25% 87%);
}
@@ -230,7 +230,7 @@
z-index: 0;
}
-.styles-section[data-keyboard-focus="true"]:focus .sidebar-pane-section-toolbar {
+.styles-section:focus-visible .sidebar-pane-section-toolbar {
background-color: hsl(214deg 67% 95% / 90%);
}
@@ -251,8 +251,8 @@
background: ButtonFace;
}
- .styles-section[data-keyboard-focus="true"]:focus,
- .styles-section.read-only[data-keyboard-focus="true"]:focus {
+ .styles-section:focus-visible,
+ .styles-section.read-only:focus-visible {
forced-color-adjust: none;
background-color: Highlight;
}
@@ -262,9 +262,9 @@
text-decoration-color: linktext;
}
- .styles-section[data-keyboard-focus="true"]:focus *,
- .styles-section.read-only[data-keyboard-focus="true"]:focus *,
- .styles-section[data-keyboard-focus="true"]:focus .styles-section-subtitle .devtools-link {
+ .styles-section:focus-visible *,
+ .styles-section.read-only:focus-visible *,
+ .styles-section:focus-visible .styles-section-subtitle .devtools-link {
color: HighlightText;
text-decoration-color: HighlightText;
}
@@ -275,7 +275,7 @@
background-color: ButtonFace;
}
- .styles-section[data-keyboard-focus="true"]:focus .sidebar-pane-section-toolbar {
+ .styles-section:focus-visible .sidebar-pane-section-toolbar {
background-color: ButtonFace;
}
}
diff --git a/front_end/event_listeners/eventListenersView.css b/front_end/event_listeners/eventListenersView.css
index c58a58d..0d5b4a5 100644
--- a/front_end/event_listeners/eventListenersView.css
+++ b/front_end/event_listeners/eventListenersView.css
@@ -84,8 +84,8 @@
border-color: ButtonText;
}
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .event-listener-button,
- .tree-outline-disclosure li[data-keyboard-focus="true"]:focus .gray-info-message {
+ .tree-outline.hide-selection-when-blurred .selected:focus-visible .event-listener-button,
+ .tree-outline-disclosure li:focus-visible .gray-info-message {
background-color: Highlight;
color: HighlightText;
border-color: HighlightText;
diff --git a/front_end/issues/issuesTree.css b/front_end/issues/issuesTree.css
index 1b49d58..615da41 100644
--- a/front_end/issues/issuesTree.css
+++ b/front_end/issues/issuesTree.css
@@ -77,7 +77,7 @@
/* Override selected tree item styles for issues to avoid changing width. */
-.tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .issue.selected:focus[data-keyboard-focus="true"] {
+.tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .issue.selected:focus-visible {
width: auto;
padding-right: 8px;
}
diff --git a/front_end/layer_viewer/layers3DView.css b/front_end/layer_viewer/layers3DView.css
index 922b727..c51038a 100644
--- a/front_end/layer_viewer/layers3DView.css
+++ b/front_end/layer_viewer/layers3DView.css
@@ -18,6 +18,6 @@
flex: 1 1;
}
-.layers-3d-view > canvas[data-keyboard-focus="true"]:focus {
+.layers-3d-view > canvas:focus-visible {
outline: auto 5px -webkit-focus-ring-color;
}
diff --git a/front_end/network/networkLogView.css b/front_end/network/networkLogView.css
index 576d55e..a287059 100644
--- a/front_end/network/networkLogView.css
+++ b/front_end/network/networkLogView.css
@@ -33,7 +33,7 @@
flex: auto;
}
-.network-log-grid.data-grid.no-selection[data-keyboard-focus="true"]:focus {
+.network-log-grid.data-grid.no-selection:focus-visible {
border: none !important;
}
diff --git a/front_end/network/networkTimingTable.css b/front_end/network/networkTimingTable.css
index 6eff681..7dc6c3b 100644
--- a/front_end/network/networkTimingTable.css
+++ b/front_end/network/networkTimingTable.css
@@ -140,7 +140,12 @@
background-color: rgb(110 110 110);
}
-.network-fetch-timing-bar-clickable[data-keyboard-focus="true"]:focus {
+.network-fetch-timing-bar-clickable {
+ position: relative;
+ left: -12px;
+}
+
+.network-fetch-timing-bar-clickable:focus-visible {
background-color: var(--toolbar-bg-color);
}
@@ -156,11 +161,6 @@
display: block;
}
-.network-fetch-timing-bar-clickable {
- position: relative;
- left: -12px;
-}
-
.network-fetch-timing-bar-details {
padding-left: 11px;
width: fit-content;
diff --git a/front_end/network/requestInitiatorView.css b/front_end/network/requestInitiatorView.css
index 5227d2f..7599414 100644
--- a/front_end/network/requestInitiatorView.css
+++ b/front_end/network/requestInitiatorView.css
@@ -14,7 +14,7 @@
padding: 4px;
}
-.request-initiator-view-section-title[data-keyboard-focus="true"]:focus {
+.request-initiator-view-section-title:focus-visible {
background-color: rgb(0 0 0 / 8%);
}
@@ -23,11 +23,11 @@
}
@media (forced-colors: active) {
- .request-initiator-view-section-title[data-keyboard-focus="true"]:focus [is=ui-icon].icon-mask {
+ .request-initiator-view-section-title:focus-visible [is=ui-icon].icon-mask {
background-color: HighlightText;
}
- .request-initiator-view-section-title[data-keyboard-focus="true"]:focus {
+ .request-initiator-view-section-title:focus-visible {
forced-color-adjust: none;
background-color: Highlight;
color: HighlightText;
diff --git a/front_end/object_ui/objectPropertiesSection.css b/front_end/object_ui/objectPropertiesSection.css
index dfb449e..ce13a5f 100644
--- a/front_end/object_ui/objectPropertiesSection.css
+++ b/front_end/object_ui/objectPropertiesSection.css
@@ -70,13 +70,13 @@
margin-left: 4px;
}
-.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
+.tree-outline.hide-selection-when-blurred .selected:focus-visible {
background: none;
}
-.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] ::slotted(*),
-.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .tree-element-title,
-.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .name-and-value {
+.tree-outline.hide-selection-when-blurred .selected:focus-visible ::slotted(*),
+.tree-outline.hide-selection-when-blurred .selected:focus-visible .tree-element-title,
+.tree-outline.hide-selection-when-blurred .selected:focus-visible .name-and-value {
background: var(--focus-bg-color);
border-radius: 2px;
box-shadow: 0 0 0 2px var(--focus-bg-color);
@@ -87,7 +87,7 @@
opacity: 100%;
}
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
+ .tree-outline.hide-selection-when-blurred .selected:focus-visible {
background: Highlight;
}
@@ -96,14 +96,14 @@
color: ButtonText;
}
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .tree-element-title,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .name-and-value {
+ .tree-outline.hide-selection-when-blurred .selected:focus-visible .tree-element-title,
+ .tree-outline.hide-selection-when-blurred .selected:focus-visible .name-and-value {
background: transparent;
box-shadow: none;
}
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] span,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .gray-info-message {
+ .tree-outline.hide-selection-when-blurred .selected:focus-visible span,
+ .tree-outline.hide-selection-when-blurred .selected:focus-visible .gray-info-message {
color: HighlightText;
}
diff --git a/front_end/perf_ui/flameChart.css b/front_end/perf_ui/flameChart.css
index 55a4260..c8f6c6f 100644
--- a/front_end/perf_ui/flameChart.css
+++ b/front_end/perf_ui/flameChart.css
@@ -18,7 +18,7 @@
display: block;
}
-.flame-chart-canvas[data-keyboard-focus="true"]:focus {
+.flame-chart-canvas:focus-visible {
border-top: 1px solid var(--accent-color);
border-bottom: 1px solid var(--accent-color);
}
diff --git a/front_end/perf_ui/overviewGrid.css b/front_end/perf_ui/overviewGrid.css
index 54c4296..e8e75e3 100644
--- a/front_end/perf_ui/overviewGrid.css
+++ b/front_end/perf_ui/overviewGrid.css
@@ -24,7 +24,7 @@
z-index: 500;
}
-.overview-grid-window-resizer[data-keyboard-focus="true"]:focus {
+.overview-grid-window-resizer:focus-visible {
background-color: var(--active-control-bg-color);
}
@@ -89,7 +89,7 @@
.overview-grid-window-resizer:hover,
.overview-grid-window-resizer:active,
- .overview-grid-window-resizer[data-keyboard-focus="true"]:focus {
+ .overview-grid-window-resizer:focus-visible {
forced-color-adjust: none;
background-color: Highlight;
}
diff --git a/front_end/perf_ui/pieChart.css b/front_end/perf_ui/pieChart.css
index 4591fad..24c3c12 100644
--- a/front_end/perf_ui/pieChart.css
+++ b/front_end/perf_ui/pieChart.css
@@ -58,7 +58,7 @@
font-weight: bold;
}
-.pie-chart-legend-row[data-keyboard-focus="true"]:focus {
+.pie-chart-legend-row:focus-visible {
box-shadow: 0 0 0 2px var(--selection-bg-color) !important;
}
diff --git a/front_end/performance_monitor/performanceMonitor.css b/front_end/performance_monitor/performanceMonitor.css
index 18bdce50..de0375a 100644
--- a/front_end/performance_monitor/performanceMonitor.css
+++ b/front_end/performance_monitor/performanceMonitor.css
@@ -55,7 +55,7 @@
background-color: #f8f8f8;
}
-.perfmon-indicator[data-keyboard-focus="true"]:focus {
+.perfmon-indicator:focus-visible {
background-color: #f8f8f8;
}
diff --git a/front_end/profiler/profileLauncherView.css b/front_end/profiler/profileLauncherView.css
index 5ff4f6e..bf8505f 100644
--- a/front_end/profiler/profileLauncherView.css
+++ b/front_end/profiler/profileLauncherView.css
@@ -158,7 +158,7 @@
}
.javascript-vm-instances-list:focus .profile-memory-usage-item.selected,
- .javascript-vm-instances-list[data-keyboard-focus="true"]:focus .profile-memory-usage-item.selected {
+ .javascript-vm-instances-list:focus-visible .profile-memory-usage-item.selected {
background-color: Highlight;
border-color: ButtonText;
color: HighlightText;
diff --git a/front_end/resources/resourcesPanel.css b/front_end/resources/resourcesPanel.css
index aba0801..46a08c9 100644
--- a/front_end/resources/resourcesPanel.css
+++ b/front_end/resources/resourcesPanel.css
@@ -111,7 +111,7 @@
flex-shrink: 0;
}
-.database-user-query[data-keyboard-focus="true"]:focus {
+.database-user-query:focus-visible {
background-color: hsl(214deg 48% 95%);
}
diff --git a/front_end/settings/keybindsSettingsTab.css b/front_end/settings/keybindsSettingsTab.css
index aa622f0..ef7245a 100644
--- a/front_end/settings/keybindsSettingsTab.css
+++ b/front_end/settings/keybindsSettingsTab.css
@@ -47,7 +47,7 @@
flex: auto 1 1;
}
-.keybinds-list-item:focus[data-keyboard-focus="true"] {
+.keybinds-list-item:focus-visible {
background-color: var(--focus-bg-color);
}
diff --git a/front_end/sources/callStackSidebarPane.css b/front_end/sources/callStackSidebarPane.css
index 48429d4..e4cb4a6 100644
--- a/front_end/sources/callStackSidebarPane.css
+++ b/front_end/sources/callStackSidebarPane.css
@@ -53,10 +53,6 @@
border-top: 1px solid #efefef;
}
-.call-frame-item:not(.async-header):hover {
- background-color: #eee;
-}
-
.call-frame-item-title,
.call-frame-location {
display: flex;
@@ -72,11 +68,15 @@
z-index: 1;
}
-.call-frame-item[data-keyboard-focus="true"]:focus,
-.call-frame-item.async-header[data-keyboard-focus="true"]:focus .call-frame-item-title {
+.call-frame-item:focus-visible,
+.call-frame-item.async-header:focus-visible .call-frame-item-title {
background-color: var(--focus-bg-color);
}
+.call-frame-item:not(.async-header):hover {
+ background-color: #eee;
+}
+
.call-frame-location {
color: #888;
margin-left: auto;
@@ -118,14 +118,14 @@
}
@media (forced-colors: active) {
- .call-frame-item:not(.async-header):hover,
- .call-frame-item[data-keyboard-focus="true"]:focus {
+ .call-frame-item:focus-visible,
+ .call-frame-item:not(.async-header):hover {
forced-color-adjust: none;
background-color: Highlight;
}
- .call-frame-item:not(.async-header):hover *,
- .call-frame-item[data-keyboard-focus="true"]:focus * {
+ .call-frame-item:focus-visible *,
+ .call-frame-item:not(.async-header):hover * {
color: HighlightText;
}
}
diff --git a/front_end/sources/threadsSidebarPane.css b/front_end/sources/threadsSidebarPane.css
index f955ed5..f921821 100644
--- a/front_end/sources/threadsSidebarPane.css
+++ b/front_end/sources/threadsSidebarPane.css
@@ -21,7 +21,7 @@
background-color: #eee;
}
-.thread-item[data-keyboard-focus="true"] {
+.thread-item:focus-visible {
background-color: var(--focus-bg-color);
}
@@ -51,13 +51,13 @@
@media (forced-colors: active) {
.thread-item:hover,
- .thread-item[data-keyboard-focus="true"] {
+ .thread-item:focus-visible {
forced-color-adjust: none;
background-color: Highlight;
}
.thread-item:hover > div,
- .thread-item[data-keyboard-focus="true"] > div {
+ .thread-item:focus-visible > div {
color: HighlightText;
}
}
diff --git a/front_end/sources/watchExpressionsSidebarPane.css b/front_end/sources/watchExpressionsSidebarPane.css
index a53f73a..4e8c64e 100644
--- a/front_end/sources/watchExpressionsSidebarPane.css
+++ b/front_end/sources/watchExpressionsSidebarPane.css
@@ -101,7 +101,7 @@
background-color: #f0f0f0;
}
-.watch-expression-header:focus[data-keyboard-focus="true"] {
+.watch-expression-header:focus-visible {
background: var(--focus-bg-color);
}
diff --git a/front_end/timeline/historyToolbarButton.css b/front_end/timeline/historyToolbarButton.css
index 2e80084..f83d0b0 100644
--- a/front_end/timeline/historyToolbarButton.css
+++ b/front_end/timeline/historyToolbarButton.css
@@ -29,7 +29,7 @@
min-width: 35px;
}
-.history-dropdown-button[data-keyboard-focus="true"]:focus::before {
+.history-dropdown-button:focus-visible::before {
content: "";
position: absolute;
top: 2px;
diff --git a/front_end/ui/closeButton.css b/front_end/ui/closeButton.css
index e3d52d3..7bf2998 100644
--- a/front_end/ui/closeButton.css
+++ b/front_end/ui/closeButton.css
@@ -28,7 +28,7 @@
}
.close-button:active .default-icon,
-.close-button[data-keyboard-focus="true"]:focus .default-icon {
+.close-button:focus-visible .default-icon {
display: none;
}
@@ -36,7 +36,7 @@
display: none !important;
}
-.close-button[data-keyboard-focus="true"]:focus .hover-icon {
+.close-button:focus-visible .hover-icon {
display: block;
}
diff --git a/front_end/ui/filter.css b/front_end/ui/filter.css
index 22d0ac1..934d831 100644
--- a/front_end/ui/filter.css
+++ b/front_end/ui/filter.css
@@ -66,7 +66,7 @@
overflow: hidden;
}
-.filter-bitset-filter span[data-keyboard-focus="true"] {
+.filter-bitset-filter span:focus-visible {
outline: -webkit-focus-ring-color auto 5px;
}
diff --git a/front_end/ui/inspectorCommon.css b/front_end/ui/inspectorCommon.css
index a4b596b..4886bb2 100644
--- a/front_end/ui/inspectorCommon.css
+++ b/front_end/ui/inspectorCommon.css
@@ -480,7 +480,7 @@
background-color: #d5d5d5;
}
-.expandable-inline-button[data-keyboard-focus="true"] {
+.expandable-inline-button:focus-visible {
background-color: #bbb;
}
@@ -504,7 +504,7 @@
padding: 3px;
}
-button.link[data-keyboard-focus="true"]:focus {
+button.link:focus-visible {
background-color: rgb(0 0 0 / 8%);
border-radius: 2px;
}
diff --git a/front_end/ui/inspectorSyntaxHighlight.css b/front_end/ui/inspectorSyntaxHighlight.css
index 0892833..303858e 100644
--- a/front_end/ui/inspectorSyntaxHighlight.css
+++ b/front_end/ui/inspectorSyntaxHighlight.css
@@ -129,7 +129,7 @@
vertical-align: middle;
}
-.devtools-link[data-keyboard-focus="true"]:focus {
+.devtools-link:focus-visible {
outline-width: unset;
}
@@ -189,7 +189,7 @@
color: linktext;
}
- .devtools-link[data-keyboard-focus="true"]:focus {
+ .devtools-link:focus-visible {
background: Highlight;
color: HighlightText;
}
diff --git a/front_end/ui/softContextMenu.css b/front_end/ui/softContextMenu.css
index 8aa84a8..52b05a7 100644
--- a/front_end/ui/softContextMenu.css
+++ b/front_end/ui/softContextMenu.css
@@ -148,7 +148,7 @@
color: HighlightText;
}
- .soft-context-menu[data-keyboard-focus="true"]:focus {
+ .soft-context-menu:focus-visible {
forced-color-adjust: none;
background: canvas;
border-color: Highlight;
diff --git a/front_end/ui/softDropDownButton.css b/front_end/ui/softDropDownButton.css
index 0d68b2b..fe0f383 100644
--- a/front_end/ui/softDropDownButton.css
+++ b/front_end/ui/softDropDownButton.css
@@ -23,7 +23,7 @@
text-overflow: ellipsis;
}
-button.soft-dropdown[data-keyboard-focus="true"]:focus::before {
+button.soft-dropdown:focus-visible::before {
content: "";
position: absolute;
top: 2px;
diff --git a/front_end/ui/tabbedPane.css b/front_end/ui/tabbedPane.css
index 5f1a40d..5d5da7f 100644
--- a/front_end/ui/tabbedPane.css
+++ b/front_end/ui/tabbedPane.css
@@ -62,7 +62,7 @@
margin: 2px;
}
-.tabbed-pane-placeholder-row[data-keyboard-focus="true"]:focus {
+.tabbed-pane-placeholder-row:focus-visible {
outline-width: unset;
}
@@ -129,7 +129,7 @@
}
.tabbed-pane-header-tab:hover,
-.tabbed-pane-shadow .tabbed-pane-header-tab[data-keyboard-focus="true"]:focus {
+.tabbed-pane-shadow .tabbed-pane-header-tab:focus-visible {
color: #333;
background-color: var(--toolbar-hover-bg-color);
}
@@ -180,7 +180,7 @@
}
.tabbed-pane-header-tabs-drop-down-container:hover,
-.tabbed-pane-header-tabs-drop-down-container[data-keyboard-focus="true"]:focus {
+.tabbed-pane-header-tabs-drop-down-container:focus-visible {
background-color: rgb(0 0 0 / 8%);
}
@@ -308,7 +308,7 @@
}
.tabbed-pane-header-tab:hover,
- .tabbed-pane-shadow .tabbed-pane-header-tab[data-keyboard-focus="true"]:focus {
+ .tabbed-pane-shadow .tabbed-pane-header-tab:focus-visible {
background-color: Highlight;
color: HighlightText;
}
@@ -318,7 +318,7 @@
}
.tabbed-pane-header-tabs-drop-down-container:hover,
- .tabbed-pane-header-tabs-drop-down-container[data-keyboard-focus="true"]:focus {
+ .tabbed-pane-header-tabs-drop-down-container:focus-visible {
background-color: Highlight;
}
@@ -327,7 +327,7 @@
}
.tabbed-pane-header-tabs-drop-down-container:hover > .chevron-icon,
- .tabbed-pane-header-tabs-drop-down-container[data-keyboard-focus="true"]:focus > .chevron-icon {
+ .tabbed-pane-header-tabs-drop-down-container:focus-visible > .chevron-icon {
background-color: HighlightText;
}
}
diff --git a/front_end/ui/toolbar.css b/front_end/ui/toolbar.css
index a28dd6e..7e86fb9 100644
--- a/front_end/ui/toolbar.css
+++ b/front_end/ui/toolbar.css
@@ -225,12 +225,12 @@
opacity: 50%;
}
-select.toolbar-item[data-keyboard-focus="true"]:focus {
+select.toolbar-item:focus-visible {
background: rgb(0 0 0 / 8%);
border-radius: 2px;
}
-select.toolbar-item[data-keyboard-focus="true"]:focus > * {
+select.toolbar-item:focus-visible > * {
background: white;
}
@@ -309,7 +309,7 @@
background-color: rgb(163 163 163);
}
-.toolbar-button[data-keyboard-focus="true"]:focus::after {
+.toolbar-button:focus-visible::after {
position: absolute;
top: 2px;
bottom: 2px;
diff --git a/front_end/ui/treeoutline.css b/front_end/ui/treeoutline.css
index 7d938ed..eedf805 100644
--- a/front_end/ui/treeoutline.css
+++ b/front_end/ui/treeoutline.css
@@ -21,7 +21,7 @@
position: relative;
}
-.tree-outline[data-keyboard-focus="true"] {
+.tree-outline:focus-visible {
box-shadow: 0 0 0 2px var(--accent-color) inset;
}
@@ -153,12 +153,12 @@
padding-left: 10px;
}
-.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
+.tree-outline.hide-selection-when-blurred .selected:focus-visible {
background: var(--focus-bg-color);
border-radius: 2px;
}
-.tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
+.tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .selected:focus-visible {
width: fit-content;
padding-right: 3px;
}
@@ -182,20 +182,20 @@
}
ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
+ .tree-outline.hide-selection-when-blurred .selected:focus-visible {
forced-color-adjust: none;
background-color: Highlight;
}
ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected::before,
ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected:focus::before,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"]::before {
+ .tree-outline.hide-selection-when-blurred .selected:focus-visible::before {
background-color: HighlightText;
}
.tree-outline li:not(.parent)::before,
.tree-outline li:not(.parent):hover::before,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"]:not(.parent)::before {
+ .tree-outline.hide-selection-when-blurred .selected:focus-visible:not(.parent)::before {
forced-color-adjust: none;
background-color: transparent;
}
@@ -208,10 +208,10 @@
ol.tree-outline:not(.hide-selection-when-blurred) li.selected,
.tree-outline:not(.hide-selection-when-blurred) li.selected .tree-element-title,
.tree-outline:not(.hide-selection-when-blurred) li.selected:focus,
+ .tree-outline:not(.hide-selection-when-blurred) li:focus-visible .tree-element-title,
.tree-outline:not(.hide-selection-when-blurred) li.selected:focus .tree-element-title,
- .tree-outline:not(.hide-selection-when-blurred) li[data-keyboard-focus="true"]:focus .tree-element-title,
.tree-outline:not(.hide-selection-when-blurred) li.selected span,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] span {
+ .tree-outline.hide-selection-when-blurred .selected:focus-visible span {
forced-color-adjust: none;
color: HighlightText;
}
diff --git a/front_end/ui/viewContainers.css b/front_end/ui/viewContainers.css
index ab5d520..0676b6a 100644
--- a/front_end/ui/viewContainers.css
+++ b/front_end/ui/viewContainers.css
@@ -64,12 +64,12 @@
margin-bottom: -2px;
}
-.expandable-view-title[data-keyboard-focus="true"]:focus {
+.expandable-view-title:focus-visible {
background-color: var(--focus-bg-color);
}
@media (forced-colors: active) {
- .expandable-view-title[data-keyboard-focus="true"]:focus {
+ .expandable-view-title:focus-visible {
forced-color-adjust: none;
background: canvas !important;
box-shadow: 0 0 0 2px Highlight inset;
