Mobile Audit W1-B: Accessibility Foundation

apps/mobile/app.config.ts

@@ -26,6 +26,11 @@ const config: ExpoConfig = {
   owner: 'kilocode',
   slug: 'kilo-app',
   version: '1.0.3',
+  // Portrait-only is an accepted, documented product deviation from WCAG 1.3.4
+  // (Orientation). Landscape layouts and iPad split-view/multitasking are out
+  // of scope; `ios.requireFullScreen` below enforces that. This is not claimed
+  // as a WCAG "essential" exception, which requires functionality to
+  // fundamentally change with orientation.
   orientation: 'portrait',
   icon: './assets/images/logo.png',
   scheme: 'kiloapp',

apps/mobile/src/app/(app)/(tabs)/(1_kiloclaw)/index.tsx

@@ -19,7 +19,7 @@ import { useManualRefresh } from '@/lib/hooks/use-manual-refresh';
 import { useThemeColors } from '@/lib/hooks/use-theme-colors';
 import { useUnreadCounts } from '@/lib/hooks/use-unread-counts';
 import { chatSandboxPath } from '@/lib/kilo-chat-routes';
-import { getTabBarOverlayHeight } from '@/lib/tab-bar-layout';
+import { getEffectiveTabBarHeight } from '@/lib/tab-bar-layout';
 
 export default function KiloClawTab() {
   const router = useRouter();
@@ -42,7 +42,11 @@ export default function KiloClawTab() {
 
   const showInstanceSkeleton = entryDecision.kind === 'loading' || onboardingQuery.isPending;
   const emptyStateContainerStyle = {
-    paddingBottom: getTabBarOverlayHeight(bottom, Platform.OS, fontScale),
+    paddingBottom: getEffectiveTabBarHeight({
+      bottomInset: bottom,
+      platform: Platform.OS,
+      fontScale,
+    }),
   };
 
   const [manualRefreshing, handleRefresh] = useManualRefresh(

apps/mobile/src/app/(app)/(tabs)/_layout.tsx

@@ -8,8 +8,10 @@ import { BlurBar } from '@/components/ui/blur-bar';
 import { Text } from '@/components/ui/text';
 import { useThemeColors } from '@/lib/hooks/use-theme-colors';
 import {
-  getTabBarOverlayHeight,
+  getEffectiveTabBarHeight,
+  getTabBarIconSize,
   shouldHideTabBar,
+  shouldShowTabLabel,
   TAB_LABEL_WRAP_FONT_SCALE,
 } from '@/lib/tab-bar-layout';
 
@@ -52,7 +54,13 @@ export default function TabsLayout() {
   const { bottom } = useSafeAreaInsets();
   const { fontScale } = useWindowDimensions();
   const hideTabs = shouldHideTabBar(pathname);
-  const tabBarHeight = getTabBarOverlayHeight(bottom, Platform.OS, fontScale);
+  const showTabLabel = shouldShowTabLabel(fontScale);
+  const tabBarHeight = getEffectiveTabBarHeight({
+    bottomInset: bottom,
+    platform: Platform.OS,
+    fontScale,
+  });
+  const tabIconSize = getTabBarIconSize(fontScale);
 
   return (
     <Tabs
@@ -73,6 +81,7 @@ export default function TabsLayout() {
           height: tabBarHeight,
           position: 'absolute',
         },
+        tabBarShowLabel: showTabLabel,
       }}
     >
       <Tabs.Screen
@@ -82,7 +91,7 @@ export default function TabsLayout() {
           tabBarAccessibilityLabel: 'Home, tab, 1 of 4',
           tabBarLabel: ({ focused }) => <TabLabel label="Home" focused={focused} />,
           tabBarIcon: ({ color, focused }) => (
-            <House size={22} color={color} strokeWidth={focused ? 2 : 1.5} />
+            <House size={tabIconSize} color={color} strokeWidth={focused ? 2 : 1.5} />
           ),
         }}
         listeners={{
@@ -103,7 +112,7 @@ export default function TabsLayout() {
             />
           ),
           tabBarIcon: ({ color, focused }) => (
-            <MessageSquare size={22} color={color} strokeWidth={focused ? 2 : 1.5} />
+            <MessageSquare size={tabIconSize} color={color} strokeWidth={focused ? 2 : 1.5} />
           ),
         }}
         listeners={{
@@ -121,7 +130,7 @@ export default function TabsLayout() {
           tabBarAccessibilityLabel: 'Agents, tab, 3 of 4',
           tabBarLabel: ({ focused }) => <TabLabel label="Agents" focused={focused} />,
           tabBarIcon: ({ color, focused }) => (
-            <Bot size={22} color={color} strokeWidth={focused ? 2 : 1.5} />
+            <Bot size={tabIconSize} color={color} strokeWidth={focused ? 2 : 1.5} />
           ),
         }}
         listeners={{
@@ -137,7 +146,7 @@ export default function TabsLayout() {
           tabBarAccessibilityLabel: 'Profile, tab, 4 of 4',
           tabBarLabel: ({ focused }) => <TabLabel label="Profile" focused={focused} />,
           tabBarIcon: ({ color, focused }) => (
-            <UserRound size={22} color={color} strokeWidth={focused ? 2 : 1.5} />
+            <UserRound size={tabIconSize} color={color} strokeWidth={focused ? 2 : 1.5} />
           ),
         }}
         listeners={{

apps/mobile/src/components/agents/agent-interaction-policy.ts

@@ -1,6 +1,6 @@
 type ActiveRequest = { requestId: string } | null | undefined;
 
-type BlockingInteraction = 'question' | 'permission' | 'none';
+export type BlockingInteraction = 'question' | 'permission' | 'none';
 
 export function getBlockingInteraction(input: {
   activeQuestion: ActiveRequest;