diff --git a/devtools/client/accessibility/components/AccessibilityTree.js b/devtools/client/accessibility/components/AccessibilityTree.js index 7c95e66a9913..960e8665c290 100644 --- a/devtools/client/accessibility/components/AccessibilityTree.js +++ b/devtools/client/accessibility/components/AccessibilityTree.js @@ -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), diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_context_menu_browser.js b/devtools/client/accessibility/test/browser/browser_accessibility_context_menu_browser.js index a850eeeb522a..7fc07bebcc1b 100644 --- a/devtools/client/accessibility/test/browser/browser_accessibility_context_menu_browser.js +++ b/devtools/client/accessibility/test/browser/browser_accessibility_context_menu_browser.js @@ -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." + ); } ); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_context_menu_inspector.js b/devtools/client/accessibility/test/browser/browser_accessibility_context_menu_inspector.js index 8c9fb8662976..f4575af3d4f1 100644 --- a/devtools/client/accessibility/test/browser/browser_accessibility_context_menu_inspector.js +++ b/devtools/client/accessibility/test/browser/browser_accessibility_context_menu_inspector.js @@ -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(