@idealyst/components 1.1.4 → 1.1.5

package/src/Image/Image.native.tsx

@@ -57,7 +57,7 @@ const Image = forwardRef<View, ImageProps>(({
   ];
 
   return (
-    <View ref={ref} nativeID={id} style={containerStyle as any} testID={testID}>
+    <View ref={ref} nativeID={id} style={containerStyle as any} testID={testID} accessibilityRole="image" accessibilityLabel={accessibilityLabel || alt}>
       <RNImage
         source={imageSource as any}
         style={[imageStyles.image, { borderRadius }]}

package/src/Image/Image.web.tsx

@@ -63,6 +63,8 @@ const Image: React.FC<ImageProps> = ({
   return (
     <div
       {...containerProps}
+      role="img"
+      aria-label={accessibilityLabel || alt}
       id={id}
       data-testid={testID}
     >

package/src/Input/Input.native.tsx

@@ -1,8 +1,9 @@
-import React, { useState, isValidElement } from 'react';
+import React, { useState, isValidElement, useMemo } from 'react';
 import { View, TextInput, TouchableOpacity } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { InputProps } from './types';
 import { inputStyles } from './Input.styles';
+import { getNativeFormAccessibilityProps } from '../utils/accessibility';
 
 const Input = React.forwardRef<TextInput, InputProps>(({
   value,
@@ -28,6 +29,14 @@ const Input = React.forwardRef<TextInput, InputProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityRequired,
+  accessibilityInvalid,
 }, ref) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -85,6 +94,32 @@ const Input = React.forwardRef<TextInput, InputProps>(({
     marginHorizontal,
   });
 
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    // Derive invalid state from hasError or explicit accessibilityInvalid
+    const isInvalid = accessibilityInvalid ?? hasError;
+
+    return getNativeFormAccessibilityProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'textbox',
+      accessibilityRequired,
+      accessibilityInvalid: isInvalid,
+    });
+  }, [
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityRequired,
+    accessibilityInvalid,
+    hasError,
+  ]);
+
   // Helper to render left icon
   const renderLeftIcon = () => {
     if (!leftIcon) return null;
@@ -149,6 +184,7 @@ const Input = React.forwardRef<TextInput, InputProps>(({
         onBlur={handleBlur}
         style={inputStyles.input}
         placeholderTextColor="#999999"
+        {...nativeA11yProps}
       />
 
       {/* Right Icon or Password Toggle */}

package/src/Input/Input.web.tsx

@@ -1,10 +1,11 @@
-import React, { isValidElement, useState } from 'react';
+import React, { isValidElement, useState, useMemo, useRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { isIconName, resolveIconPath } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { inputStyles } from './Input.styles';
 import { InputProps } from './types';
+import { getWebFormAriaProps, generateAccessibilityId, combineIds } from '../utils/accessibility';
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   value,
@@ -30,6 +31,23 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityLabelledBy,
+  accessibilityDescribedBy,
+  accessibilityControls,
+  accessibilityExpanded,
+  accessibilityPressed,
+  accessibilityOwns,
+  accessibilityHasPopup,
+  accessibilityRequired,
+  accessibilityInvalid,
+  accessibilityErrorMessage,
+  accessibilityAutoComplete,
 }, ref) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
@@ -106,7 +124,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   });
 
   // Get web props for all styled elements
-  const containerProps = getWebProps([inputStyles.container, style]);
+  const {ref: containerStyleRef, ...containerProps} = getWebProps([inputStyles.container, style]);
   const leftIconContainerProps = getWebProps([inputStyles.leftIconContainer]);
   const rightIconContainerProps = getWebProps([inputStyles.rightIconContainer]);
   const leftIconProps = getWebProps([inputStyles.leftIcon]);
@@ -117,11 +135,49 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   // Get input props
   const inputWebProps = getWebProps([inputStyles.input]);
 
-  const handleContainerPress = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    inputWebProps.ref?.current?.focus();
-  }
+  // Generate accessibility props
+  const ariaProps = useMemo(() => {
+    // Derive invalid state from hasError or explicit accessibilityInvalid
+    const isInvalid = accessibilityInvalid ?? hasError;
+
+    return getWebFormAriaProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'textbox',
+      accessibilityLabelledBy,
+      accessibilityDescribedBy,
+      accessibilityControls,
+      accessibilityExpanded,
+      accessibilityPressed,
+      accessibilityOwns,
+      accessibilityHasPopup,
+      accessibilityRequired,
+      accessibilityInvalid: isInvalid,
+      accessibilityErrorMessage,
+      accessibilityAutoComplete,
+    });
+  }, [
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityControls,
+    accessibilityExpanded,
+    accessibilityPressed,
+    accessibilityOwns,
+    accessibilityHasPopup,
+    accessibilityRequired,
+    accessibilityInvalid,
+    hasError,
+    accessibilityErrorMessage,
+    accessibilityAutoComplete,
+  ]);
 
   // Merge the forwarded ref with unistyles ref for the input
   const mergedInputRef = useMergeRefs(ref, inputWebProps.ref);
@@ -179,8 +235,18 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
     );
   };
 
+  const containerRef = useRef<HTMLDivElement>(null);
+
+    const handleContainerPress = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    containerRef.current?.focus();
+  }
+
+  const mergedContainerRef = useMergeRefs(containerRef, containerStyleRef);
+
   return (
-    <div onClick={handleContainerPress} {...containerProps} id={id} data-testid={testID}>
+    <div onClick={handleContainerPress} ref={mergedContainerRef} {...containerProps} id={id} data-testid={testID}>
       {/* Left Icon */}
       {leftIcon && (
         <span {...leftIconContainerProps}>
@@ -191,6 +257,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
       {/* Input */}
       <input
         {...inputWebProps}
+        {...ariaProps}
         ref={mergedInputRef}
         type={getInputType()}
         value={value}

package/src/Input/types.ts

@@ -2,6 +2,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon/icon-types';
 import { Intent, Size } from '@idealyst/theme';
 import { FormInputStyleProps } from '../utils/viewStyleProps';
+import { FormAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type InputIntent = Intent;
@@ -9,7 +10,7 @@ export type InputSize = Size;
 export type InputType = 'outlined' | 'filled' | 'bare';
 export type InputInputType = 'text' | 'email' | 'password' | 'number';
 
-export interface InputProps extends FormInputStyleProps {
+export interface InputProps extends FormInputStyleProps, FormAccessibilityProps {
   /**
    * The current value of the input
    */

package/src/List/List.native.tsx

@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { View, ScrollView } from 'react-native';
 import { listStyles } from './List.styles';
 import type { ListProps } from './types';
 import { ListProvider } from './ListContext';
+import { getNativeAccessibilityProps } from '../utils/accessibility';
 
 const List = forwardRef<View, ListProps>(({
   children,
@@ -21,7 +22,21 @@ const List = forwardRef<View, ListProps>(({
   scrollable = false,
   maxHeight,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  accessibilityHidden,
 }, ref) => {
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeAccessibilityProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityRole: accessibilityRole ?? 'list',
+      accessibilityHidden,
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityHidden]);
   // Apply types
   listStyles.useVariants({
     size,
@@ -55,6 +70,7 @@ const List = forwardRef<View, ListProps>(({
         style={containerStyle as any}
         testID={testID}
         showsVerticalScrollIndicator={true}
+        {...nativeA11yProps}
       >
         {content}
       </ScrollView>
@@ -62,7 +78,7 @@ const List = forwardRef<View, ListProps>(({
   }
 
   return (
-    <View ref={ref} nativeID={id} style={containerStyle as any} testID={testID}>
+    <View ref={ref} nativeID={id} style={containerStyle as any} testID={testID} {...nativeA11yProps}>
       {content}
     </View>
   );

package/src/List/ListItem.native.tsx

@@ -1,16 +1,20 @@
-import React, { isValidElement, forwardRef, ComponentRef } from 'react';
-import { View, TouchableOpacity, Text } from 'react-native';
+import React, { isValidElement, forwardRef, ComponentRef, useMemo } from 'react';
+import { View, Pressable, Text } from 'react-native';
+import { useUnistyles } from 'react-native-unistyles';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { getColorFromString, Intent, Theme, Color } from '@idealyst/theme';
 import { listStyles } from './List.styles';
 import type { ListItemProps } from './types';
 import { useListContext } from './ListContext';
+import { getNativeSelectableAccessibilityProps } from '../utils/accessibility';
 
-const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof TouchableOpacity>, ListItemProps>(({
+const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressable>, ListItemProps>(({
   id,
   label,
   children,
   leading,
   trailing,
+  iconColor,
   active = false,
   selected = false,
   disabled = false,
@@ -19,10 +23,30 @@ const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Touc
   onPress,
   style,
   testID,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  accessibilityHidden,
+  accessibilitySelected,
+  accessibilityDisabled,
 }, ref) => {
+  const { theme } = useUnistyles() as { theme: Theme };
   const listContext = useListContext();
   const isClickable = !disabled && !!onPress;
 
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeSelectableAccessibilityProps({
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityHint,
+      accessibilityRole: accessibilityRole ?? (isClickable ? 'button' : 'none'),
+      accessibilityHidden,
+      accessibilitySelected: accessibilitySelected ?? selected,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+    });
+  }, [accessibilityLabel, label, accessibilityHint, accessibilityRole, isClickable, accessibilityHidden, accessibilitySelected, selected, accessibilityDisabled, disabled]);
+
   // Use explicit size prop, fallback to context size, then default
   const effectiveSize = size ?? listContext.size ?? 'md';
   const effectiveVariant = listContext.type ?? 'default';
@@ -36,6 +60,17 @@ const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Touc
     clickable: isClickable,
   });
 
+  // Resolve icon color - check intents first, then color palette
+  const resolvedIconColor = (() => {
+    if (!iconColor) return undefined;
+    // Check if it's an intent name
+    if (iconColor in theme.intents) {
+      return theme.intents[iconColor as Intent]?.primary;
+    }
+    // Otherwise try color palette
+    return getColorFromString(theme, iconColor as Color);
+  })();
+
   // Helper to render leading/trailing icons
   const renderElement = (element: typeof leading | typeof trailing, styleKey: 'leading' | 'trailingIcon') => {
     if (!element) return null;
@@ -47,7 +82,7 @@ const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Touc
         <MaterialCommunityIcons
           name={element}
           size={iconStyle.width}
-          color={iconStyle.color}
+          color={resolvedIconColor ?? iconStyle.color}
         />
       );
     } else if (isValidElement(element)) {
@@ -86,21 +121,22 @@ const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Touc
 
   if (isClickable) {
     return (
-      <TouchableOpacity
+      <Pressable
         ref={ref as any}
+        nativeID={id}
         style={combinedStyle}
         onPress={onPress}
         disabled={disabled}
-        activeOpacity={0.7}
         testID={testID}
+        {...nativeA11yProps}
       >
         {content}
-      </TouchableOpacity>
+      </Pressable>
     );
   }
 
   return (
-    <View ref={ref as any} style={combinedStyle} testID={testID}>
+    <View ref={ref as any} nativeID={id} style={combinedStyle} testID={testID} {...nativeA11yProps}>
       {content}
     </View>
   );

package/src/List/ListItem.web.tsx

@@ -1,5 +1,7 @@
 import React, { isValidElement } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
+import { useUnistyles } from 'react-native-unistyles';
+import { getColorFromString, Intent, Theme, Color } from '@idealyst/theme';
 import { listStyles } from './List.styles';
 import type { ListItemProps } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
@@ -12,6 +14,7 @@ const ListItem: React.FC<ListItemProps> = ({
   children,
   leading,
   trailing,
+  iconColor,
   active = false,
   selected = false,
   disabled = false,
@@ -21,6 +24,7 @@ const ListItem: React.FC<ListItemProps> = ({
   style,
   testID,
 }) => {
+  const { theme } = useUnistyles() as { theme: Theme };
   const listContext = useListContext();
   const isClickable = !disabled && !!onPress;
 
@@ -49,6 +53,17 @@ const ListItem: React.FC<ListItemProps> = ({
     }
   };
 
+  // Resolve icon color - check intents first, then color palette
+  const resolvedIconColor = (() => {
+    if (!iconColor) return undefined;
+    // Check if it's an intent name
+    if (iconColor in theme.intents) {
+      return theme.intents[iconColor as Intent]?.primary;
+    }
+    // Otherwise try color palette
+    return getColorFromString(theme, iconColor as Color);
+  })();
+
   // Helper to render leading/trailing icons
   const renderElement = (element: typeof leading | typeof trailing, props: any, isTrailing = false) => {
     if (!element) return null;
@@ -61,6 +76,7 @@ const ListItem: React.FC<ListItemProps> = ({
         <IconSvg
           path={iconPath}
           {...iconPropsToUse}
+          color={resolvedIconColor}
           aria-label={element}
         />
       );

package/src/List/types.ts

@@ -1,19 +1,22 @@
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 import type { ReactNode } from 'react';
 import type { IconName } from '../Icon/icon-types';
-import { Size } from '@idealyst/theme';
+import { Size, Color, Intent } from '@idealyst/theme';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
+import { AccessibilityProps, SelectableAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type ListSizeVariant = Size;
 export type ListType = 'default' | 'bordered' | 'divided';
 
-export interface ListItemProps {
+export interface ListItemProps extends SelectableAccessibilityProps {
   id?: string;
   label?: string;
   children?: ReactNode;
   leading?: IconName | ReactNode;
   trailing?: IconName | ReactNode;
+  /** Color for leading and trailing icons. Accepts intent names (primary, success, error, warning) or palette colors (blue.500, red.300) */
+  iconColor?: Intent | Color;
   active?: boolean;
   selected?: boolean;
   disabled?: boolean;
@@ -24,7 +27,7 @@ export interface ListItemProps {
   testID?: string;
 }
 
-export interface ListProps extends ContainerStyleProps {
+export interface ListProps extends ContainerStyleProps, AccessibilityProps {
   children: ReactNode;
   type?: ListType;
   size?: ListSizeVariant;

package/src/Menu/Menu.native.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, isValidElement, cloneElement, forwardRef, useEffect } from 'react';
+import React, { useRef, useState, isValidElement, cloneElement, forwardRef, useEffect, useMemo } from 'react';
 import {
   View,
   Modal,
@@ -11,6 +11,7 @@ import MenuItem from './MenuItem.native';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { BoundedModalContent } from '../internal/BoundedModalContent.native';
 import { useSmartPosition } from '../hooks/useSmartPosition.native';
+import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
 
 const Menu = forwardRef<View, MenuProps>(({
   children,
@@ -22,7 +23,25 @@ const Menu = forwardRef<View, MenuProps>(({
   size,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityExpanded,
 }, ref) => {
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeInteractiveAccessibilityProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'menu',
+      accessibilityExpanded: accessibilityExpanded ?? open,
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, accessibilityHidden, accessibilityRole, accessibilityExpanded, open]);
   const {
     position: menuPosition,
     size: menuSize,
@@ -137,7 +156,7 @@ const Menu = forwardRef<View, MenuProps>(({
 
   return (
     <>
-      <View ref={mergedTriggerRef} nativeID={id} collapsable={false}>
+      <View ref={mergedTriggerRef} nativeID={id} collapsable={false} {...nativeA11yProps}>
         {trigger}
       </View>
 

package/src/Menu/Menu.web.tsx

@@ -1,10 +1,11 @@
-import React, { useRef, forwardRef } from 'react';
+import React, { useRef, forwardRef, useMemo, useCallback, useEffect } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { menuStyles } from './Menu.styles';
 import type { MenuProps } from './types';
 import MenuItem from './MenuItem.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { PositionedPortal } from '../internal/PositionedPortal';
+import { getWebInteractiveAriaProps, generateAccessibilityId, MENU_KEYS } from '../utils/accessibility';
 
 const Menu = forwardRef<HTMLDivElement, MenuProps>(({
   children,
@@ -17,9 +18,96 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityExpanded,
+  accessibilityControls,
+  accessibilityHasPopup,
 }, ref) => {
   const triggerRef = useRef<HTMLDivElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
+  const menuItemRefs = useRef<Map<number, HTMLButtonElement>>(new Map());
+  const focusedIndex = useRef<number>(-1);
+
+  // Generate unique ID for menu
+  const menuId = useMemo(() => id || generateAccessibilityId('menu'), [id]);
+
+  // Get enabled items for keyboard navigation
+  const enabledItems = useMemo(() =>
+    items.map((item, index) => ({ ...item, index })).filter(item => !item.disabled && !item.separator),
+    [items]
+  );
+
+  // Focus first menu item when menu opens
+  useEffect(() => {
+    if (open && enabledItems.length > 0) {
+      // Small delay to ensure menu is rendered
+      requestAnimationFrame(() => {
+        const firstItem = menuItemRefs.current.get(enabledItems[0].index);
+        if (firstItem) {
+          firstItem.focus();
+          focusedIndex.current = 0;
+        }
+      });
+    } else {
+      focusedIndex.current = -1;
+    }
+  }, [open, enabledItems]);
+
+  // Keyboard navigation handler
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    const key = e.key;
+
+    if (MENU_KEYS.close.includes(key)) {
+      e.preventDefault();
+      onOpenChange?.(false);
+      // Return focus to trigger
+      triggerRef.current?.focus();
+      return;
+    }
+
+    if (enabledItems.length === 0) return;
+
+    let nextIndex = focusedIndex.current;
+
+    if (MENU_KEYS.next.includes(key)) {
+      e.preventDefault();
+      nextIndex = focusedIndex.current < enabledItems.length - 1 ? focusedIndex.current + 1 : 0;
+    } else if (MENU_KEYS.prev.includes(key)) {
+      e.preventDefault();
+      nextIndex = focusedIndex.current > 0 ? focusedIndex.current - 1 : enabledItems.length - 1;
+    } else if (MENU_KEYS.first.includes(key)) {
+      e.preventDefault();
+      nextIndex = 0;
+    } else if (MENU_KEYS.last.includes(key)) {
+      e.preventDefault();
+      nextIndex = enabledItems.length - 1;
+    }
+
+    if (nextIndex !== focusedIndex.current && nextIndex >= 0) {
+      focusedIndex.current = nextIndex;
+      const item = enabledItems[nextIndex];
+      const button = menuItemRefs.current.get(item.index);
+      button?.focus();
+    }
+  }, [enabledItems, onOpenChange]);
+
+  // Generate ARIA props for menu
+  const ariaProps = useMemo(() => {
+    return getWebInteractiveAriaProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'menu',
+      accessibilityExpanded: accessibilityExpanded ?? open,
+      accessibilityControls,
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, accessibilityHidden, accessibilityRole, accessibilityExpanded, open, accessibilityControls]);
 
   menuStyles.useVariants({
     size,
@@ -47,7 +135,21 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
 
   return (
     <>
-      <div ref={triggerRef} onClick={handleTriggerClick} style={{ display: 'inline-block' }}>
+      <div
+        ref={triggerRef}
+        onClick={handleTriggerClick}
+        style={{ display: 'inline-block' }}
+        aria-haspopup={accessibilityHasPopup ?? 'menu'}
+        aria-expanded={open}
+        aria-controls={menuId}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleTriggerClick();
+          }
+        }}
+      >
         {children}
       </div>
 
@@ -64,10 +166,12 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
       >
         <div
           {...menuProps}
+          {...ariaProps}
           ref={mergedMenuRef}
           role="menu"
-          id={id}
+          id={menuId}
           data-testid={testID}
+          onKeyDown={handleKeyDown}
         >
           {items.map((item, index) => {
             if (item.separator) {
@@ -87,6 +191,9 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
                 onPress={handleItemClick}
                 size={size}
                 testID={testID ? `${testID}-item-${item.id || index}` : undefined}
+                ref={(el) => {
+                  if (el) menuItemRefs.current.set(index, el);
+                }}
               />
             );
           })}