Reland: Make call stack keyboard navigable
This is a reland of https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1880515,
which was reverted at https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1961190
due to test failures that do not repro or appear to be related.
This PR makes the call stack sidebar pane in the Sources panel more
accessible by:
- enabling keyboard navigation of the call frame list by managing call
frame selection outside of ListControl as suggested by Joel in [2]
- adding the aria-disabled attribute to unselectable call frames
- adding an aria description to blackboxed call frames
This will break several web tests, so [3] must be merged first to
disable them.
Originally reviewed in [1], where the web test fixes for this CL now
live.
Video showing navigation: https://i.imgur.com/55tJy2k.mp4
[1] https://chromium-review.googlesource.com/c/chromium/src/+/1715121
[2] https://chromium-review.googlesource.com/c/chromium/src/+/1690089/11#message-3e9e158cce4628b01398d9cf84e37550b55b14c6
[3] https://chromium-review.googlesource.com/c/chromium/src/+/1893117
Bug: 963183
Change-Id: I826e1c5c2f78c235823a71c956fde6ef73bcccac
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1965855
Commit-Queue: Jack Lynch <[email protected]>
Reviewed-by: Robert Paveza <[email protected]>
diff --git a/front_end/sources/callStackSidebarPane.css b/front_end/sources/callStackSidebarPane.css
index 66d967f..1f0b6c0 100644
--- a/front_end/sources/callStackSidebarPane.css
+++ b/front_end/sources/callStackSidebarPane.css
@@ -16,6 +16,10 @@
margin-left: 5px;
}
+.blackboxed-message > .link:focus {
+ outline-width: unset;
+}
+
.show-more-message {
text-align: center;
font-style: italic;
@@ -49,6 +53,11 @@
background-color: #eee;
}
+.call-frame-item[data-keyboard-focus="true"]:focus,
+.call-frame-item.async-header[data-keyboard-focus="true"]:focus .call-frame-item-title {
+ background-color: var(--focus-bg-color);
+}
+
.async-header + .call-frame-item {
border-top: 0;
}
@@ -71,7 +80,6 @@
border-top: 1px solid #d8d8d8;
margin-top: 8px;
position: absolute;
- z-index: -1;
left: 0;
}
@@ -81,6 +89,7 @@
background-color: white;
margin-left: -5px;
padding: 0 5px;
+ z-index: 1;
}
.blackboxed-call-frame {
