refactor(cli): keyboard handling and AskUserDialog (#17414)

packages/cli/src/ui/components/shared/TabHeader.tsx

@@ -81,16 +81,16 @@ export function TabHeader({
     if (tab.statusIcon) return tab.statusIcon;
 
     // Default icons
-    if (tab.isSpecial) return '\u2261'; // ≡
-    return isCompleted ? '\u2713' : '\u25A1'; // ✓ or □
+    if (tab.isSpecial) return '≡';
+    return isCompleted ? '✓' : '□';
   };
 
   return (
-    <Box flexDirection="row" marginBottom={1}>
-      {showArrows && <Text color={theme.text.secondary}>{'\u2190 '}</Text>}
+    <Box flexDirection="row" marginBottom={1} aria-role="tablist">
+      {showArrows && <Text color={theme.text.secondary}>{'← '}</Text>}
       {tabs.map((tab, i) => (
         <React.Fragment key={tab.key}>
-          {i > 0 && <Text color={theme.text.secondary}>{' \u2502 '}</Text>}
+          {i > 0 && <Text color={theme.text.secondary}>{' │ '}</Text>}
           {showStatusIcons && (
             <Text color={theme.text.secondary}>{getStatusIcon(tab, i)} </Text>
           )}
@@ -99,12 +99,13 @@ export function TabHeader({
               i === currentIndex ? theme.text.accent : theme.text.secondary
             }
             bold={i === currentIndex}
+            aria-current={i === currentIndex ? 'step' : undefined}
           >
             {tab.header}
           </Text>
         </React.Fragment>
       ))}
-      {showArrows && <Text color={theme.text.secondary}>{' \u2192'}</Text>}
+      {showArrows && <Text color={theme.text.secondary}>{' →'}</Text>}
     </Box>
   );
 }