From ffea42e57fa7d437afb295b80172c33494e3bf27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Fri, 10 May 2019 06:16:07 -0700
Subject: [PATCH] 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               | 23 +++++++++++++++++++
 .../components/elements-inspector/elements.js |  4 ++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/plugins/layout/Inspector.js b/src/plugins/layout/Inspector.js
index 3aebb9fb2..0ca405dfa 100644
--- a/src/plugins/layout/Inspector.js
+++ b/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;
   }
diff --git a/src/ui/components/elements-inspector/elements.js b/src/ui/components/elements-inspector/elements.js
index 2a6906a57..dab428caf 100644
--- a/src/ui/components/elements-inspector/elements.js
+++ b/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';
   }