Title: [258057] trunk/Source/WebInspectorUI
- Revision
- 258057
- Author
- nvasil...@apple.com
- Date
- 2020-03-06 21:11:56 -0800 (Fri, 06 Mar 2020)
Log Message
Web Inspector: AXI: scope bars should be focusable when navigating by pressing Tab
https://bugs.webkit.org/show_bug.cgi?id=208277
<rdar://problem/59828111>
Reviewed by Devin Rousso.
Make resource type filter in the Network tab and message type filter in the Console tab focusable.
* UserInterface/Views/AuditTestGroupContentView.css:
(.content-view.audit-test-group > header > nav):
(.content-view.audit-test-group > header > nav > .scope-bar):
Prevent outline of the focused scope bar item from clipping.
* UserInterface/Views/ScopeBar.css:
(.scope-bar > li:focus):
(.scope-bar > li:focus::after,):
* UserInterface/Views/ScopeBar.js:
(WI.ScopeBar):
(WI.ScopeBar.prototype._handleKeyDown):
Make Arrow Left an Arrow Right keys move focus within the scope bar.
This matches the behavior of macOS radio buttons.
* UserInterface/Views/ScopeBarItem.js:
(WI.ScopeBarItem.prototype.get scopeBar):
(WI.ScopeBarItem.prototype.set scopeBar):
(WI.ScopeBarItem.prototype.toggle):
(WI.ScopeBarItem.prototype._updateSelected):
(WI.ScopeBarItem.prototype._handleMouseDown):
(WI.ScopeBarItem.prototype._handleKeyDown):
Allow to toggle focused scope bar item by pressing Space or Enter.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (258056 => 258057)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-03-07 05:05:08 UTC (rev 258056)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-03-07 05:11:56 UTC (rev 258057)
@@ -1,3 +1,37 @@
+2020-03-06 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: AXI: scope bars should be focusable when navigating by pressing Tab
+ https://bugs.webkit.org/show_bug.cgi?id=208277
+ <rdar://problem/59828111>
+
+ Reviewed by Devin Rousso.
+
+ Make resource type filter in the Network tab and message type filter in the Console tab focusable.
+
+ * UserInterface/Views/AuditTestGroupContentView.css:
+ (.content-view.audit-test-group > header > nav):
+ (.content-view.audit-test-group > header > nav > .scope-bar):
+ Prevent outline of the focused scope bar item from clipping.
+
+ * UserInterface/Views/ScopeBar.css:
+ (.scope-bar > li:focus):
+ (.scope-bar > li:focus::after,):
+ * UserInterface/Views/ScopeBar.js:
+ (WI.ScopeBar):
+ (WI.ScopeBar.prototype._handleKeyDown):
+ Make Arrow Left an Arrow Right keys move focus within the scope bar.
+ This matches the behavior of macOS radio buttons.
+
+ * UserInterface/Views/ScopeBarItem.js:
+ (WI.ScopeBarItem.prototype.get scopeBar):
+ (WI.ScopeBarItem.prototype.set scopeBar):
+ (WI.ScopeBarItem.prototype.toggle):
+ (WI.ScopeBarItem.prototype._updateSelected):
+ (WI.ScopeBarItem.prototype._handleMouseDown):
+
+ (WI.ScopeBarItem.prototype._handleKeyDown):
+ Allow to toggle focused scope bar item by pressing Space or Enter.
+
2020-03-06 Jon Davis <j...@apple.com>
Fixed missing icons for WI.ThreadTreeElement and selected Heap Snapshots
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.css (258056 => 258057)
--- trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.css 2020-03-07 05:05:08 UTC (rev 258056)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.css 2020-03-07 05:11:56 UTC (rev 258057)
@@ -68,8 +68,13 @@
display: inline-flex;
height: auto;
border-bottom: none;
+ overflow: visible;
}
+.content-view.audit-test-group > header > nav > .scope-bar {
+ overflow: visible;
+}
+
.content-view.audit-test-group > header > nav:empty {
display: none;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css (258056 => 258057)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css 2020-03-07 05:05:08 UTC (rev 258056)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css 2020-03-07 05:11:56 UTC (rev 258057)
@@ -68,6 +68,10 @@
opacity: var(--scope-bar-background-opacity);
}
+.scope-bar > li:focus {
+ outline: none;
+}
+
.scope-bar > li:matches(.selected, :hover) {
--scope-bar-text-color-default: var(--selected-foreground-color);
--scope-bar-background-color-default: var(--glyph-color-active);
@@ -96,6 +100,12 @@
pointer-events: none;
}
+.scope-bar > li:focus::after,
+.scope-bar > li.multiple > select:focus {
+ outline: auto -webkit-focus-ring-color;
+ outline-offset: -1px;
+}
+
body[dir=ltr] .scope-bar > li.multiple > select {
left: calc(var(--scope-bar-padding) - var(--scope-bar-padding-default) - 2px);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.js (258056 => 258057)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.js 2020-03-07 05:05:08 UTC (rev 258056)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.js 2020-03-07 05:11:56 UTC (rev 258057)
@@ -35,9 +35,14 @@
this._defaultItem = defaultItem;
this._shouldGroupNonExclusiveItems = shouldGroupNonExclusiveItems || false;
+ for (let item of this._items)
+ item.scopeBar = this;
+
this._minimumWidth = 0;
this._populate();
+
+ this._element.addEventListener("keydown", this._handleKeyDown.bind(this));
}
// Public
@@ -173,6 +178,33 @@
this.dispatchEventToListeners(WI.ScopeBar.Event.SelectionChanged);
}
+
+ _handleKeyDown(event)
+ {
+ if (event.code === "ArrowLeft" || event.code === "ArrowRight") {
+ event.stop();
+ let focusedIndex = -1;
+
+ for (let i = 0; i < this._items.length; ++i) {
+ let element = this._items[i].element;
+ if (element === document.activeElement) {
+ focusedIndex = i;
+ break;
+ }
+ }
+
+ if (focusedIndex === -1)
+ return;
+
+ let delta = (event.code === "ArrowLeft") ? -1 : 1;
+ if (WI.resolveLayoutDirectionForElement(this._element) === WI.LayoutDirection.RTL)
+ delta *= -1;
+
+ focusedIndex += delta;
+ focusedIndex = (focusedIndex + this._items.length) % this._items.length;
+ this._items[focusedIndex].element.focus();
+ }
+ }
};
WI.ScopeBar.Event = {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBarItem.js (258056 => 258057)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBarItem.js 2020-03-07 05:05:08 UTC (rev 258056)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBarItem.js 2020-03-07 05:11:56 UTC (rev 258057)
@@ -34,7 +34,9 @@
if (className)
this._element.classList.add(className);
this._element.textContent = label;
+
this._element.addEventListener("mousedown", this._handleMouseDown.bind(this));
+ this._element.addEventListener("keydown", this._handleKeyDown.bind(this));
this._id = id;
this._label = label;
@@ -41,15 +43,19 @@
this._exclusive = !!exclusive;
this._independent = !!independent;
this._hidden = !!hidden;
+ this._scopeBar = null;
this._selectedSetting = new WI.Setting("scopebaritem-" + id, false);
+ this._updateSelected(this._selectedSetting.value);
- this._element.classList.toggle("selected", this._selectedSetting.value);
this._element.classList.toggle("hidden", this._hidden);
}
// Public
+ get scopeBar() { return this._scopeBar; }
+ set scopeBar(scopeBar) { this._scopeBar = scopeBar; }
+
get element()
{
return this._element;
@@ -104,7 +110,7 @@
if (this._selectedSetting.value === selected)
return;
- this._element.classList.toggle("selected", selected);
+ this._updateSelected(selected);
this._selectedSetting.value = selected;
this.dispatchEventToListeners(WI.ScopeBarItem.Event.SelectionChanged, {extendSelection});
@@ -112,6 +118,14 @@
// Private
+ _updateSelected(selected)
+ {
+ selected = !!selected;
+ this._element.classList.toggle("selected", selected);
+ this._element.ariaPressed = selected;
+ this._element.tabIndex = selected ? 0 : -1;
+ }
+
_handleMouseDown(event)
{
// Only handle left mouse clicks.
@@ -119,7 +133,19 @@
return;
this.selected = !this.selected;
+
+ // Move the focus to the clicked element only when the focus is already inside the scope bar element.
+ if (!this._scopeBar?.element.contains(document.activeElement))
+ event.preventDefault();
}
+
+ _handleKeyDown(event)
+ {
+ if (event.code === "Space" || event.code === "Enter") {
+ event.stop();
+ this.selected = !this.selected;
+ }
+ }
};
WI.ScopeBarItem.Event = {
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
