Fix header toggle aria-expanded on web

This commit is contained in:
Mohamed Boudra
2026-03-01 23:15:28 +07:00
parent cdf59e8315
commit 16984c138d
@@ -1,5 +1,12 @@
import type { PropsWithChildren, ReactElement } from "react"; 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 { StyleSheet } from "react-native-unistyles";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { Shortcut } from "@/components/ui/shortcut"; import { Shortcut } from "@/components/ui/shortcut";
@@ -29,11 +36,17 @@ export function HeaderToggleButton({
typeof props.testID === "string" && props.testID.length > 0 typeof props.testID === "string" && props.testID.length > 0
? `${props.testID}-tooltip` ? `${props.testID}-tooltip`
: undefined; : 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 ( return (
<Tooltip delayDuration={tooltipDelayDuration} enabledOnDesktop enabledOnMobile={false}> <Tooltip delayDuration={tooltipDelayDuration} enabledOnDesktop enabledOnMobile={false}>
<TooltipTrigger <TooltipTrigger
{...props} {...props}
{...ariaExpandedProps}
disabled={disabled} disabled={disabled}
onPress={(e) => { onPress={(e) => {
onPress(e); onPress(e);