Add runthrough index for accessibility mode

Summary:
In accessibility mode it is important to be visually aware of the order of the elements on the screen aside from the list on the left

To enable this let's show the indices on the elements
Voice over assumes single continuous list of objects so it is okay to pass index of children we should never have nested lists in accessibility mode

Reviewed By: lblasa

Differential Revision: D49440400

fbshipit-source-id: e6878b4b33952053823451ad76993259f0794067

desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx

@@ -9,7 +9,12 @@
 
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {Bounds, Coordinate, Id, ClientNode} from '../../ClientTypes';
-import {NestedNode, OnSelectNode, WireFrameMode} from '../../DesktopTypes';
+import {
+  NestedNode,
+  OnSelectNode,
+  TraversalMode,
+  WireFrameMode,
+} from '../../DesktopTypes';
 
 import {
   produce,
@@ -46,6 +51,7 @@ export const Visualization2D: React.FC<
   const hoveredNodes = useValue(instance.uiState.hoveredNodes);
   const hoveredNodeId = head(hoveredNodes);
   const wireFrameMode = useValue(instance.uiState.wireFrameMode);
+  const traversalMode = useValue(instance.uiState.currentTraversalMode);
 
   const [targetMode, setTargetMode] = useState<TargetModeState>({
     state: 'disabled',
@@ -245,6 +251,7 @@ export const Visualization2D: React.FC<
             selectedNode={selectedNodeId?.id}
             node={focusState.focusedRoot}
             onSelectNode={onSelectNode}
+            traversalMode={traversalMode}
           />
         </div>
       </div>
@@ -275,12 +282,16 @@ function Visualization2DNode({
   selectedNode,
   node,
   onSelectNode,
+  runThroughIndex,
+  traversalMode,
 }: {
   wireframeMode: WireFrameMode;
   isSelectedOrChildOrSelected: boolean;
   selectedNode?: Id;
   node: NestedNode;
   onSelectNode: OnSelectNode;
+  runThroughIndex?: number;
+  traversalMode: TraversalMode;
 }) {
   const instance = usePlugin(plugin);
 
@@ -300,7 +311,7 @@ function Visualization2DNode({
     nestedChildren = node.children;
   }
 
-  const children = nestedChildren.map((child) => (
+  const children = nestedChildren.map((child, index) => (
     <Visualization2DNode
       wireframeMode={wireframeMode}
       selectedNode={selectedNode}
@@ -308,6 +319,8 @@ function Visualization2DNode({
       key={child.id}
       node={child}
       onSelectNode={onSelectNode}
+      runThroughIndex={index + 1}
+      traversalMode={traversalMode}
     />
   ));
 
@@ -319,6 +332,7 @@ function Visualization2DNode({
     wireframeMode === 'All' ||
     (wireframeMode === 'SelectedAndChildren' && isSelectedOrChildOrSelected) ||
     (wireframeMode === 'SelectedOnly' && isSelected);
+  const showOrdinalIndices = traversalMode == 'accessibility-hierarchy';
 
   return (
     <div
@@ -338,6 +352,29 @@ function Visualization2DNode({
       {showBorder && <NodeBorder />}
 
       {children}
+      {showOrdinalIndices && (
+        <div
+          style={{
+            position: 'relative',
+            left: '-10px',
+            top: '-7px',
+            width: '20px',
+            height: '14px',
+            fontFamily: 'monospace',
+            borderRadius: '3px',
+            display: 'flex',
+            textAlign: 'center',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backdropFilter: 'blur(2px)',
+            border: '1px solid #00000081',
+            fontSize: '0.6em',
+            opacity: 0.8,
+            background: 'white',
+          }}>
+          {runThroughIndex}
+        </div>
+      )}
     </div>
   );
 }