Tooltips added on hover for AX sidebar

Summary: Adds on hover descriptions for some of the more esoteric properties in the accessibility sidebar panel such as accessibility-focused and all the talkback derived properties. Also change talkback-focusable and talkback-ignored to both be talkback-focusable.

Differential Revision: D9381676

fbshipit-source-id: 55ce854da24241a7c89b0c122c4c3ebd77438dbb

src/ui/components/data-inspector/DataInspector.js

@@ -133,6 +133,10 @@ type DataInspectorProps = {
    * Ancestry of parent objects, used to avoid recursive objects.
    */
   ancestry: Array<Object>,
+  /**
+   * Object of properties that will have tooltips
+   */
+  tooltips?: Object,
 };
 
 const defaultValueExtractor: DataValueExtractor = (value: any) => {
@@ -408,6 +412,7 @@ export default class DataInspector extends Component<DataInspectorProps> {
       path,
       ancestry,
       collapsed,
+      tooltips,
     } = this.props;
 
     // the data inspector makes values read only when setValue isn't set so we just need to set it
@@ -493,6 +498,7 @@ export default class DataInspector extends Component<DataInspectorProps> {
               name={key}
               data={metadata.data}
               diff={metadata.diff}
+              tooltips={tooltips}
             />
           );
 
@@ -523,7 +529,11 @@ export default class DataInspector extends Component<DataInspectorProps> {
     // create name components
     const nameElems = [];
     if (typeof name !== 'undefined') {
-      nameElems.push(<InspectorName key="name">{name}</InspectorName>);
+      nameElems.push(
+        <InspectorName key="name" title={(tooltips && tooltips[name]) || ''}>
+          {name}
+        </InspectorName>,
+      );
       nameElems.push(<span key="sep">: </span>);
     }
 
@@ -549,6 +559,7 @@ export default class DataInspector extends Component<DataInspectorProps> {
         />
       );
     }
+
     descriptionOrPreview = (
       <span>
         {nameElems}

src/ui/components/data-inspector/ManagedDataInspector.js

@@ -39,6 +39,10 @@ type ManagedDataInspectorProps = {|
    * Whether all objects and arrays should be collapsed by default.
    */
   collapsed?: boolean,
+  /**
+   * Object of all properties that will have tooltips
+   */
+  tooltips?: Object,
 |};
 
 type ManagedDataInspectorState = {|
@@ -99,6 +103,7 @@ export default class ManagedDataInspector extends PureComponent<
         onExpanded={this.onExpanded}
         expandRoot={this.props.expandRoot}
         collapsed={this.props.collapsed}
+        tooltips={this.props.tooltips}
       />
     );
   }

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

@@ -22,6 +22,7 @@ type InspectorSidebarSectionProps = {
   data: any,
   id: string,
   onValueChanged: ?OnValueChanged,
+  tooltips?: Object,
 };
 
 class InspectorSidebarSection extends Component<InspectorSidebarSectionProps> {
@@ -65,6 +66,7 @@ class InspectorSidebarSection extends Component<InspectorSidebarSectionProps> {
           extractValue={this.extractValue}
           expandRoot={true}
           collapsed={true}
+          tooltips={this.props.tooltips}
         />
       </Panel>
     );
@@ -73,6 +75,7 @@ class InspectorSidebarSection extends Component<InspectorSidebarSectionProps> {
 
 type Props = {|
   element: ?Element,
+  tooltips?: Object,
   onValueChanged: ?OnValueChanged,
   client: PluginClient,
 |};
@@ -117,6 +120,7 @@ export class InspectorSidebar extends Component<Props, State> {
     for (const key in element.data) {
       sections.push(
         <InspectorSidebarSection
+          tooltips={this.props.tooltips}
           key={key}
           id={key}
           data={element.data[key]}