From 16984c138d947dc4206769523225f2aba42270ae Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Sun, 1 Mar 2026 23:15:28 +0700
Subject: [PATCH] Fix header toggle aria-expanded on web

---
 .../components/headers/header-toggle-button.tsx   | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/headers/header-toggle-button.tsx b/packages/app/src/components/headers/header-toggle-button.tsx
index cf07a2fe0..cf9968de4 100644
--- a/packages/app/src/components/headers/header-toggle-button.tsx
+++ b/packages/app/src/components/headers/header-toggle-button.tsx
@@ -1,5 +1,12 @@
 import type { PropsWithChildren, ReactElement } from "react";
-import { Text, View, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import {
+  Platform,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Shortcut } from "@/components/ui/shortcut";
@@ -29,11 +36,17 @@ export function HeaderToggleButton({
     typeof props.testID === "string" && props.testID.length > 0
       ? `${props.testID}-tooltip`
       : undefined;
+  const expandedState = (props.accessibilityState as { expanded?: boolean } | undefined)?.expanded;
+  const ariaExpandedProps =
+    Platform.OS === "web" && typeof expandedState === "boolean"
+      ? ({ "aria-expanded": expandedState } as any)
+      : null;
 
   return (
     <Tooltip delayDuration={tooltipDelayDuration} enabledOnDesktop enabledOnMobile={false}>
       <TooltipTrigger
         {...props}
+        {...ariaExpandedProps}
         disabled={disabled}
         onPress={(e) => {
           onPress(e);