- Revision
- 257380
- Author
- nvasil...@apple.com
- Date
- 2020-02-25 15:12:47 -0800 (Tue, 25 Feb 2020)
Log Message
Web Inspector: VoiceOver: TreeOutline does not correctly indicate selected item
https://bugs.webkit.org/show_bug.cgi?id=207968
Reviewed by Brian Burg.
Previously, the entire TreeOutline's DOM element had focus. With this patch,
selected item DOM element has focus instead. When clicking on the treeElement,
set tabIndex to 0 and focus on it.
* UserInterface/Views/DOMTreeOutline.css:
(.tree-outline.dom): Fix indentation.
(.tree-outline.dom:not(.non-selectable):focus-within li.selected .selection-area):
(.tree-outline.dom:not(.non-selectable) li.hovered:not(.selected) .selection-area):
(.tree-outline.dom:focus-within li.inspected-node.selected > span::after):
(.tree-outline.dom li):
Remove outline - selection is already indicated by the background.
(.tree-outline.dom:focus-within li.selected .pseudo-class-indicator):
(.tree-outline.dom:focus-within li.selected):
(.tree-outline.dom:focus-within li.selected *):
(.tree-outline.dom:focus-within li.parent.selected::before):
(.tree-outline.dom:focus-within li.parent.expanded.selected::before):
* UserInterface/Views/DOMTreeOutline.js:
* UserInterface/Views/TreeElement.js:
(WI.TreeElement.prototype._attach):
(WI.TreeElement.prototype.collapse):
(WI.TreeElement.prototype.expand):
(WI.TreeElement.prototype.select):
(WI.TreeElement.prototype.deselect):
(WI.TreeElement.prototype.focus):
(WI.TreeElement.prototype.unfocus):
* UserInterface/Views/TreeOutline.css:
(.tree-outline .item.selected:focus .disclosure-button):
(.tree-outline .item.selected.expanded:focus .disclosure-button):
(.tree-outline .item.selected:focus):
(.tree-outline .item.selected:focus .subtitle):
(.tree-outline:not(.large) .item.selected:focus .status .indeterminate-progress-spinner):
* UserInterface/Views/TreeOutline.js:
(WI.TreeOutline.prototype._treeKeyDown):
(WI.TreeOutline.prototype._handleMouseDown):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (257379 => 257380)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-02-25 23:12:12 UTC (rev 257379)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-02-25 23:12:47 UTC (rev 257380)
@@ -1,3 +1,47 @@
+2020-02-25 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: VoiceOver: TreeOutline does not correctly indicate selected item
+ https://bugs.webkit.org/show_bug.cgi?id=207968
+
+ Reviewed by Brian Burg.
+
+ Previously, the entire TreeOutline's DOM element had focus. With this patch,
+ selected item DOM element has focus instead. When clicking on the treeElement,
+ set tabIndex to 0 and focus on it.
+
+ * UserInterface/Views/DOMTreeOutline.css:
+ (.tree-outline.dom): Fix indentation.
+
+ (.tree-outline.dom:not(.non-selectable):focus-within li.selected .selection-area):
+ (.tree-outline.dom:not(.non-selectable) li.hovered:not(.selected) .selection-area):
+ (.tree-outline.dom:focus-within li.inspected-node.selected > span::after):
+ (.tree-outline.dom li):
+ Remove outline - selection is already indicated by the background.
+
+ (.tree-outline.dom:focus-within li.selected .pseudo-class-indicator):
+ (.tree-outline.dom:focus-within li.selected):
+ (.tree-outline.dom:focus-within li.selected *):
+ (.tree-outline.dom:focus-within li.parent.selected::before):
+ (.tree-outline.dom:focus-within li.parent.expanded.selected::before):
+ * UserInterface/Views/DOMTreeOutline.js:
+ * UserInterface/Views/TreeElement.js:
+ (WI.TreeElement.prototype._attach):
+ (WI.TreeElement.prototype.collapse):
+ (WI.TreeElement.prototype.expand):
+ (WI.TreeElement.prototype.select):
+ (WI.TreeElement.prototype.deselect):
+ (WI.TreeElement.prototype.focus):
+ (WI.TreeElement.prototype.unfocus):
+ * UserInterface/Views/TreeOutline.css:
+ (.tree-outline .item.selected:focus .disclosure-button):
+ (.tree-outline .item.selected.expanded:focus .disclosure-button):
+ (.tree-outline .item.selected:focus):
+ (.tree-outline .item.selected:focus .subtitle):
+ (.tree-outline:not(.large) .item.selected:focus .status .indeterminate-progress-spinner):
+ * UserInterface/Views/TreeOutline.js:
+ (WI.TreeOutline.prototype._treeKeyDown):
+ (WI.TreeOutline.prototype._handleMouseDown):
+
2020-02-19 Jon Davis <j...@apple.com>
Fixed object trees using the wrong theme of type icon
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css (257379 => 257380)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2020-02-25 23:12:12 UTC (rev 257379)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2020-02-25 23:12:47 UTC (rev 257380)
@@ -34,7 +34,7 @@
list-style-type: none;
- /* Needed to make the negative z-index on .selection-area works. Otherwise the background-color from .syntax-highlighted hides the selection. */
+ /* Needed to make the negative z-index on .selection-area works. Otherwise the background-color from .syntax-highlighted hides the selection. */
background-color: transparent !important;
color: var(--text-color);
@@ -61,11 +61,12 @@
border-top: 2px solid var(--selected-background-color);
}
-.tree-outline.dom:not(.non-selectable):focus li:matches(.selected, .hovered) .selection-area {
+.tree-outline.dom:not(.non-selectable):focus-within li.selected .selection-area {
background-color: var(--selected-background-color);
}
.tree-outline.dom:not(.non-selectable) li.hovered:not(.selected) .selection-area {
+ background-color: var(--selected-background-color);
opacity: 0.3;
}
@@ -81,7 +82,7 @@
white-space: pre;
}
-.tree-outline.dom:focus li.inspected-node.selected > span::after {
+.tree-outline.dom:focus-within li.inspected-node.selected > span::after {
color: var(--selected-secondary-text-color);
}
@@ -116,6 +117,7 @@
.tree-outline.dom li {
padding: 0;
word-wrap: break-word;
+ outline: none;
--item-padding-start: 17px;
--item-padding-end: 6px;
@@ -150,7 +152,7 @@
left: var(--item-pseudo-class-indicator-start);
}
-.tree-outline.dom:focus li.selected .pseudo-class-indicator {
+.tree-outline.dom:focus-within li.selected .pseudo-class-indicator {
background-color: var(--selected-foreground-color);
}
@@ -158,11 +160,11 @@
padding-left: 2px;
}
-.tree-outline.dom:focus li.selected {
+.tree-outline.dom:focus-within li.selected {
color: white;
}
-.tree-outline.dom:focus li.selected * {
+.tree-outline.dom:focus-within li.selected * {
color: inherit;
}
@@ -200,7 +202,7 @@
float: left;
}
-.tree-outline.dom:focus li.parent.selected::before {
+.tree-outline.dom:focus-within li.parent.selected::before {
background-image: url(../Images/DisclosureTriangles.svg#closed-selected);
}
@@ -208,7 +210,7 @@
background-image: url(../Images/DisclosureTriangles.svg#open-normal);
}
-.tree-outline.dom:focus li.parent.expanded.selected::before {
+.tree-outline.dom:focus-within li.parent.expanded.selected::before {
background-image: url(../Images/DisclosureTriangles.svg#open-selected);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js (257379 => 257380)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2020-02-25 23:12:12 UTC (rev 257379)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2020-02-25 23:12:47 UTC (rev 257380)
@@ -45,6 +45,7 @@
this.element.classList.add("dom", WI.SyntaxHighlightedStyleClassName);
this.element.dir = "ltr";
+ this.element.role = "tree";
this._includeRootDOMNode = !omitRootDOMNode;
this._excludeRevealElementContextMenu = excludeRevealElementContextMenu;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js (257379 => 257380)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js 2020-02-25 23:12:12 UTC (rev 257379)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js 2020-02-25 23:12:47 UTC (rev 257380)
@@ -256,6 +256,7 @@
this._setListItemNodeContent();
this._listItemNode.title = this._tooltip ? this._tooltip : "";
this._listItemNode.hidden = this.hidden;
+ this._listItemNode.role = "treeitem";
if (this.hasChildren)
this._listItemNode.classList.add("parent");
@@ -347,10 +348,14 @@
collapse()
{
- if (this._listItemNode)
+ if (this._listItemNode) {
this._listItemNode.classList.remove("expanded");
- if (this._childrenListNode)
+ this._listItemNode.ariaExpanded = false;
+ }
+ if (this._childrenListNode) {
this._childrenListNode.classList.remove("expanded");
+ this._childrenListNode.ariaExpanded = false;
+ }
this.expanded = false;
if (this.treeOutline)
@@ -402,6 +407,7 @@
this._childrenListNode.parentTreeElement = this;
this._childrenListNode.classList.add("children");
this._childrenListNode.hidden = this.hidden;
+ this._childrenListNode.role = "group";
this.onpopulate();
@@ -417,12 +423,16 @@
if (this._listItemNode) {
this._listItemNode.classList.add("expanded");
+ this._listItemNode.ariaExpanded = true;
+
if (this._childrenListNode && this._childrenListNode.parentNode !== this._listItemNode.parentNode)
this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
}
- if (this._childrenListNode)
+ if (this._childrenListNode) {
this._childrenListNode.classList.add("expanded");
+ this._childrenListNode.ariaExpanded = true;
+ }
if (this.onexpand)
this.onexpand(this);
@@ -513,12 +523,12 @@
if (!this.treeOutline || !this.selectable)
return;
+ if (!omitFocus)
+ this.focus();
+
if (this.selected && !this.treeOutline.allowsRepeatSelection)
return;
- if (!omitFocus)
- this.treeOutline._childrenListNode.focus();
-
// Focusing on another node may detach "this" from tree.
let treeOutline = this.treeOutline;
if (!treeOutline)
@@ -526,6 +536,9 @@
this.selected = true;
treeOutline.selectTreeElementInternal(this, suppressNotification, selectedByUser);
+
+ if (this._listItemNode)
+ this._listItemNode.ariaSelected = true;
}
revealAndSelect(omitFocus, selectedByUser, suppressNotification)
@@ -542,9 +555,31 @@
this.selected = false;
this.treeOutline.selectTreeElementInternal(null, suppressNotification);
+ if (this._listItemNode) {
+ this.unfocus();
+ this._listItemNode.ariaSelected = false;
+ }
+
return true;
}
+ focus()
+ {
+ if (!this._listItemNode)
+ return;
+
+ this._listItemNode.tabIndex = 0;
+ this._listItemNode.focus();
+ }
+
+ unfocus()
+ {
+ if (!this._listItemNode)
+ return;
+
+ this._listItemNode.removeAttribute("tabIndex");
+ }
+
onpopulate()
{
// Overridden by subclasses.
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css (257379 => 257380)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css 2020-02-25 23:12:12 UTC (rev 257379)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css 2020-02-25 23:12:47 UTC (rev 257380)
@@ -119,7 +119,7 @@
display: block;
}
-.tree-outline:focus .item.selected .disclosure-button {
+.tree-outline .item.selected:focus .disclosure-button {
background-image: url(../Images/DisclosureTriangles.svg#closed-selected) !important;
}
@@ -127,7 +127,7 @@
background-image: url(../Images/DisclosureTriangles.svg#open-normal);
}
-.tree-outline:focus .item.selected.expanded .disclosure-button {
+.tree-outline .item.selected.expanded:focus .disclosure-button {
background-image: url(../Images/DisclosureTriangles.svg#open-selected) !important;
}
@@ -175,9 +175,10 @@
background-color: var(--selected-background-color-unfocused);
}
-.tree-outline:focus .item.selected {
+.tree-outline .item.selected:focus {
color: var(--selected-foreground-color);
background-color: var(--selected-background-color);
+ outline: none;
}
.tree-outline .item .titles {
@@ -220,7 +221,7 @@
font-size: 9px;
}
-.tree-outline:focus .item.selected .subtitle {
+.tree-outline .item.selected:focus .subtitle {
color: hsla(0, 0%, 100%, 0.9);
}
@@ -235,7 +236,7 @@
height: 14px;
}
-.tree-outline:not(.large):focus .item.selected .status .indeterminate-progress-spinner {
+.tree-outline:not(.large) .item.selected:focus .status .indeterminate-progress-spinner {
filter: invert();
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js (257379 => 257380)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js 2020-02-25 23:12:12 UTC (rev 257379)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js 2020-02-25 23:12:47 UTC (rev 257380)
@@ -34,6 +34,7 @@
this.element = document.createElement("ol");
this.element.classList.add(WI.TreeOutline.ElementStyleClassName);
+ this.element.role = "tree";
this.element.addEventListener("contextmenu", this._handleContextmenu.bind(this));
this.children = [];
@@ -594,9 +595,12 @@
_treeKeyDown(event)
{
- if (event.target !== this._childrenListNode)
+ if (WI.isBeingEdited(event.target))
return;
+ if (event.target !== this._childrenListNode && event.target.closest("." + WI.TreeOutline.ElementStyleClassName) !== this._childrenListNode)
+ return;
+
let isRTL = WI.resolveLayoutDirectionForElement(this.element) === WI.LayoutDirection.RTL;
let expandKeyIdentifier = isRTL ? "Left" : "Right";
let collapseKeyIdentifier = isRTL ? "Right" : "Left";
@@ -1112,6 +1116,8 @@
this._itemWasSelectedByUser = true;
this._selectionController.handleItemMouseDown(this.objectForSelection(treeElement), event);
this._itemWasSelectedByUser = false;
+
+ treeElement.focus();
}
_dispatchSelectionDidChangeEvent()
