show/update focused element

Summary: This was already implemented in the old versin of layout inspector and got lost during the refactoring. When using talkback, the focused view is highlighted in green in the a11y inspector.

Reviewed By: passy

Differential Revision: D15294025

fbshipit-source-id: 92cc015e4bc726515e433b7b96f924246916972d

src/plugins/layout/Inspector.js

@@ -66,6 +66,18 @@ export default class Inspector extends Component<Props> {
       : this.props.persistedState.elements;
   };
 
+  focused = () => {
+    if (!this.props.ax) {
+      return null;
+    }
+    // $FlowFixMe: Object.values returns Array<mixed>
+    const elements: Array<Element> = Object.values(
+      this.props.persistedState.AXelements,
+    );
+    return elements.find(i => i?.data?.Accessibility?.['accessibility-focused'])
+      ?.id;
+  };
+
   componentDidMount() {
     this.props.client.call(this.call().GET_ROOT).then((root: Element) => {
       this.props.setPersistedState({
@@ -102,6 +114,16 @@ export default class Inspector extends Component<Props> {
         this.getAndExpandPath(path);
       },
     );
+
+    if (this.props.ax) {
+      this.props.client.subscribe('axFocusEvent', () => {
+        // update all nodes, to find new focused node
+        this.getNodes(Object.keys(this.props.persistedState.AXelements), {
+          force: true,
+          ax: true,
+        });
+      });
+    }
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -234,6 +256,7 @@ export default class Inspector extends Component<Props> {
         selected={this.selected()}
         root={this.root()}
         elements={this.elements()}
+        focused={this.focused()}
       />
     ) : null;
   }

src/ui/components/elements-inspector/elements.js

@@ -27,7 +27,7 @@ const backgroundColor = props => {
   if (props.selected) {
     return colors.macOSTitleBarIconSelected;
   } else if (props.focused) {
-    return colors.lime;
+    return '#00CF52';
   } else if (props.even) {
     return colors.light02;
   } else {
@@ -39,7 +39,7 @@ const backgroundColorHover = props => {
   if (props.selected) {
     return colors.macOSTitleBarIconSelected;
   } else if (props.focused) {
-    return colors.lime;
+    return '#00CF52';
   } else {
     return '#EBF1FB';
   }