Add icon to show which elements in ax tree are talkback-focusable

Summary: Puts an accessibility icon next to any elements in the ax tree that may be focused on when talkback is running to show that they are "accessibility-focusable". When any sidebar values are changed, the icon will show up/disappear accordingly.

Reviewed By: danielbuechele

Differential Revision: D9171781

fbshipit-source-id: f3b42624988aaef22040ac3325d745a12f0622db

src/plugins/layout/index.js

@@ -803,15 +803,20 @@ export default class Layout extends SonarPlugin<InspectorState> {
   }
 
   onDataValueChanged = (path: Array<string>, value: any) => {
-    const selected = this.state.inAXMode
-      ? this.state.AXselected
-      : this.state.selected;
-    this.client.send('setData', {id: selected, path, value});
-    this.props.logger.track('usage', 'layout:value-changed', {
-      id: selected,
-      value: value,
-      path: path,
-    });
+    const ax = this.state.inAXMode;
+    const id = ax ? this.state.AXselected : this.state.selected;
+    this.client
+      .call('setData', {id, path, value, ax})
+      .then((element: Element) => {
+        if (ax) {
+          this.dispatchAction({
+            elements: [element],
+            type: 'UpdateAXElements',
+          });
+        }
+      });
+
+    this.props.logger.track('usage', 'layout:value-changed', {id, value, path});
   };
 
   renderSidebar = () => {