mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 16:25:38 +00:00
Bug 1592858 - scroll selected row in the tree view into view when inspecting an accessible object. r=mtigley
Differential Revision: https://phabricator.services.mozilla.com/D56765 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
5a897829db
commit
c2f2fbf8d2
@ -53,6 +53,7 @@ class AccessibilityTree extends Component {
|
||||
this.onReorder = this.onReorder.bind(this);
|
||||
this.onTextChange = this.onTextChange.bind(this);
|
||||
this.renderValue = this.renderValue.bind(this);
|
||||
this.scrollSelectedRowIntoView = this.scrollSelectedRowIntoView.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -64,6 +65,11 @@ class AccessibilityTree extends Component {
|
||||
accessibilityWalker.on("reorder", this.onReorder);
|
||||
accessibilityWalker.on("name-change", this.onNameChange);
|
||||
accessibilityWalker.on("text-change", this.onTextChange);
|
||||
|
||||
window.on(
|
||||
EVENTS.NEW_ACCESSIBLE_FRONT_INSPECTED,
|
||||
this.scrollSelectedRowIntoView
|
||||
);
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -71,10 +77,7 @@ class AccessibilityTree extends Component {
|
||||
// When filtering is toggled, make sure that the selected row remains in
|
||||
// view.
|
||||
if (this.props.filtered !== prevProps.filtered) {
|
||||
const selected = document.querySelector(".treeTable .treeRow.selected");
|
||||
if (selected) {
|
||||
scrollIntoView(selected, { center: true });
|
||||
}
|
||||
this.scrollSelectedRowIntoView();
|
||||
}
|
||||
|
||||
window.emit(EVENTS.ACCESSIBILITY_INSPECTOR_UPDATED);
|
||||
@ -88,6 +91,11 @@ class AccessibilityTree extends Component {
|
||||
accessibilityWalker.off("reorder", this.onReorder);
|
||||
accessibilityWalker.off("name-change", this.onNameChange);
|
||||
accessibilityWalker.off("text-change", this.onTextChange);
|
||||
|
||||
window.off(
|
||||
EVENTS.NEW_ACCESSIBLE_FRONT_INSPECTED,
|
||||
this.scrollSelectedRowIntoView
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -103,6 +111,25 @@ class AccessibilityTree extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
scrollSelectedRowIntoView() {
|
||||
const { treeview } = this.refs;
|
||||
if (!treeview) {
|
||||
return;
|
||||
}
|
||||
|
||||
const treeEl = treeview.treeRef.current;
|
||||
if (!treeEl) {
|
||||
return;
|
||||
}
|
||||
|
||||
const selected = treeEl.ownerDocument.querySelector(
|
||||
".treeTable .treeRow.selected"
|
||||
);
|
||||
if (selected) {
|
||||
scrollIntoView(selected, { center: true });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle accessible name change event. If the name of an accessible changes
|
||||
* and that accessible is cached and rendered within the accessibility tree,
|
||||
@ -190,6 +217,7 @@ class AccessibilityTree extends Component {
|
||||
const className = filtered ? "filtered" : undefined;
|
||||
|
||||
return TreeView({
|
||||
ref: "treeview",
|
||||
object: accessibilityWalker,
|
||||
mode: MODE.SHORT,
|
||||
provider: new Provider(accessibles, filtered, dispatch),
|
||||
|
@ -88,5 +88,9 @@ addA11YPanelTask(
|
||||
const doc = panel.panelWin.document;
|
||||
const propertiesTree = doc.querySelector(".tree");
|
||||
is(doc.activeElement, propertiesTree, "Properties list must be focused.");
|
||||
ok(
|
||||
isVisible(doc.querySelector(".treeTable .treeRow.selected")),
|
||||
"Selected row is visible."
|
||||
);
|
||||
}
|
||||
);
|
||||
|
@ -71,6 +71,10 @@ async function checkAccessibleObjectSelection(
|
||||
const doc = panel.panelWin.document;
|
||||
const propertiesTree = doc.querySelector(".tree");
|
||||
is(doc.activeElement, propertiesTree, "Properties list must be focused.");
|
||||
ok(
|
||||
isVisible(doc.querySelector(".treeTable .treeRow.selected")),
|
||||
"Selected row is visible."
|
||||
);
|
||||
}
|
||||
|
||||
addA11YPanelTask(
|
||||
|
Loading…
Reference in New Issue
Block a user