Bug 1520107 - fix focus and keyboard triggered context menu handling in a11y panel tree. r=gl

MozReview-Commit-ID: 2kzvA2Eb1eF

Differential Revision: https://phabricator.services.mozilla.com/D16986

devtools/client/accessibility/accessibility.css

@@ -228,30 +228,28 @@ body {
   min-width: 50%;
 }
 
-.treeTable:focus,
-.treeTable > tbody:focus {
+.treeTable:focus {
   outline: 0;
 }
 
-.treeTable::-moz-focus-inner,
-.treeTable > tbody::-moz-focus-inner {
+.treeTable::-moz-focus-inner {
   border: 0;
 }
 
-.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected {
+.treeTable:not(:focus) .treeRow.selected {
   background-color: var(--accessibility-unfocused-tree-focused-node-background);
 }
 
-.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .theme-twisty {
+.treeTable:not(:focus) .treeRow.selected .theme-twisty {
   fill: var(--accessibility-unfocused-tree-focused-node-twisty-fill);
 }
 
-.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected *,
-.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .treeLabelCell:after {
+.treeTable:not(:focus) .treeRow.selected *,
+.treeTable:not(:focus) .treeRow.selected .treeLabelCell:after {
   color: inherit;
 }
 
-.treeTable:not(:focus) tbody:not(:focus) .treeRow.selected .objectBox-string {
+.treeTable:not(:focus) .treeRow.selected .objectBox-string {
   color: var(--string-color);
 }
 

devtools/client/accessibility/components/AccessibilityRow.js

@@ -61,6 +61,7 @@ class AccessibilityRow extends Component {
   static get propTypes() {
     return {
       ...TreeRow.propTypes,
+      hasContextMenu: PropTypes.bool.isRequired,
       dispatch: PropTypes.func.isRequired,
       walker: PropTypes.object,
     };
@@ -193,11 +194,6 @@ class AccessibilityRow extends Component {
     }
   }
 
-  get hasContextMenu() {
-    const { supports } = this.props;
-    return supports.snapshot;
-  }
-
   /**
    * Render accessible row component.
    * @returns acecssible-row React component.
@@ -205,7 +201,7 @@ class AccessibilityRow extends Component {
   render() {
     const { object } = this.props.member;
     const props = Object.assign({}, this.props, {
-      onContextMenu: this.hasContextMenu && (e => this.onContextMenu(e)),
+      onContextMenu: this.props.hasContextMenu && (e => this.onContextMenu(e)),
       onMouseOver: () => this.highlight(object),
       onMouseOut: () => this.unhighlight(),
     });
@@ -218,4 +214,5 @@ const mapStateToProps = ({ ui }) => ({
   supports: ui.supports,
 });
 
-module.exports = connect(mapStateToProps)(AccessibilityRow);
+module.exports =
+  connect(mapStateToProps, null, null, { withRef: true })(AccessibilityRow);

devtools/client/accessibility/components/AccessibilityTree.js

@@ -34,6 +34,7 @@ class AccessibilityTree extends Component {
       expanded: PropTypes.object,
       selected: PropTypes.string,
       highlighted: PropTypes.object,
+      supports: PropTypes.object,
     };
   }
 
@@ -137,9 +138,14 @@ class AccessibilityTree extends Component {
       expanded,
       selected,
       highlighted: highlightedItem,
+      supports,
       walker,
     } = this.props;
 
+    // Historically, the first context menu item is snapshot function and it is available
+    // for all accessible object.
+    const hasContextMenu = supports.snapshot;
+
     const renderValue = props => {
       return Rep(Object.assign({}, props, {
         defaultRep: Grip,
@@ -152,6 +158,7 @@ class AccessibilityTree extends Component {
       const highlighted = object === highlightedItem;
       return AccessibilityRow(Object.assign({}, rowProps, {
         walker,
+        hasContextMenu,
         highlighted,
         decorator: {
           getRowClass: function() {
@@ -180,6 +187,17 @@ class AccessibilityTree extends Component {
           }
           this.selectRow(event.currentTarget);
         },
+        onContextMenuTree: hasContextMenu && function(e) {
+          // If context menu event is triggered on (or bubbled to) the TreeView, it was
+          // done via keyboard. Open context menu for currently selected row.
+          let row = this.getSelectedRow();
+          if (!row) {
+            return;
+          }
+
+          row = row.getWrappedInstance();
+          row.onContextMenu(e);
+        },
       })
     );
   }
@@ -189,6 +207,7 @@ const mapStateToProps = ({ accessibles, ui }) => ({
   accessibles,
   expanded: ui.expanded,
   selected: ui.selected,
+  supports: ui.supports,
   highlighted: ui.highlighted,
 });
 // Exports from this module

devtools/client/shared/components/tree/TreeView.js

@@ -117,6 +117,8 @@ define(function(require, exports, module) {
         onSort: PropTypes.func,
         // Custom row click callback
         onClickRow: PropTypes.func,
+        // Tree context menu event handler
+        onContextMenuTree: PropTypes.func,
         // A header is displayed if set to true
         header: PropTypes.bool,
         // Long string is expandable by a toggle button
@@ -512,8 +514,8 @@ define(function(require, exports, module) {
       const classNames = ["treeTable"];
       this.rows = [];
 
+      const { className, onContextMenuTree } = this.props;
       // Use custom class name from props.
-      const className = this.props.className;
       if (className) {
         classNames.push(...className.split(" "));
       }
@@ -541,6 +543,7 @@ define(function(require, exports, module) {
           },
           tabIndex: 0,
           onKeyDown: this.onKeyDown,
+          onContextMenu: onContextMenuTree && onContextMenuTree.bind(this),
           "aria-label": this.props.label || "",
           "aria-activedescendant": this.state.selected,
           cellPadding: 0,
@@ -548,7 +551,6 @@ define(function(require, exports, module) {
           TreeHeader(props),
           dom.tbody({
             role: "presentation",
-            tabIndex: -1,
           }, rows)
         )
       );