From 60364eadca147d26c356e93a712b651b5fe8d50d Mon Sep 17 00:00:00 2001
From: Sash Zats <zats@meta.com>
Date: Wed, 20 Sep 2023 11:37:12 -0700
Subject: [PATCH] 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
---
 .../components/visualizer/Visualization2D.tsx | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
index bcde80ef5..2ee0b0ce2 100644
--- a/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
+++ b/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>
   );
 }