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

android/src/main/java/com/facebook/sonar/plugins/inspector/descriptors/utils/AccessibilityUtil.java

@@ -686,7 +686,7 @@ public final class AccessibilityUtil {
   public static void addTalkbackProperties(SonarObject.Builder props, View view) {
     if (!AccessibilityEvaluationUtil.isTalkbackFocusable(view)) {
       props
-          .put("talkback-ignored", true)
+          .put("talkback-focusable", false)
           .put("talkback-ignored-reasons", getTalkbackIgnoredReasons(view));
     } else {
       props
@@ -729,7 +729,7 @@ public final class AccessibilityUtil {
     if (!AccessibilityEvaluationUtil.isTalkbackFocusable(view)) {
       String reason = getTalkbackIgnoredReasons(view);
       return new SonarObject.Builder()
-              .put("talkback-ignored", true)
+              .put("talkback-focusable", false)
               .put("talkback-ignored-reasons", reason == null ? "" : reason)
               .build();
     } else {

src/plugins/layout/index.js

@@ -935,6 +935,27 @@ export default class Layout extends SonarPlugin<InspectorState> {
     });
   };
 
+  // returns object with all sidebar elements that should show more information
+  // on hover (needs to be kept up-to-date if names of properties change)
+  getAccessibilityTooltips() {
+    return {
+      'accessibility-focused':
+        'True if this element has the focus of an accessibility service',
+      'content-description':
+        'Text to label the content/functionality of this element ',
+      'important-for-accessibility':
+        'Marks this element as important to accessibility services, one of AUTO, YES, NO, NO_HIDE_DESCENDANTS',
+      'talkback-focusable': 'True if Talkback can focus on this element',
+      'talkback-focusable-reasons': 'Why Talkback can focus on this element',
+      'talkback-ignored': 'True if Talkback cannot focus on this element',
+      'talkback-ignored-reasons': 'Why Talkback cannot focus on the element',
+      'talkback-output':
+        'What Talkback will say when this element is focused (derived from role, content-description, and state of the element)',
+      'talkback-hint':
+        'What Talkback will say after output if hints are enabled',
+    };
+  }
+
   renderSidebar = () => {
     if (this.state.inAXMode) {
       // empty if no element selected w/in AX node tree
@@ -942,6 +963,7 @@ export default class Layout extends SonarPlugin<InspectorState> {
         this.state.AXselected && (
           <InspectorSidebar
             element={this.state.AXelements[this.state.AXselected]}
+            tooltips={this.getAccessibilityTooltips()}
             onValueChanged={this.onDataValueChanged}
             client={this.client}
           />
@@ -1001,7 +1023,7 @@ export default class Layout extends SonarPlugin<InspectorState> {
               onClick={this.onToggleAccessibility}
               role="button"
               tabIndex={-1}
-              title="Toggle accessibility mode within the LayoutInspector">
+              title="Toggle to see the accessibility hierarchy">
               <Glyph
                 name="accessibility"
                 size={16}

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]}