@idealyst/components 1.1.4 → 1.1.5

package/src/Menu/MenuItem.web.tsx

@@ -1,9 +1,10 @@
-import React, { isValidElement } from 'react';
+import React, { isValidElement, forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { menuItemStyles } from './MenuItem.styles';
 import type { MenuItem as MenuItemType, MenuSizeVariant } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import useMergeRefs from '../hooks/useMergeRefs';
 
 interface MenuItemProps {
   item: MenuItemType;
@@ -12,7 +13,7 @@ interface MenuItemProps {
   testID?: string;
 }
 
-const MenuItem: React.FC<MenuItemProps> = ({ item, onPress, size = 'md', testID }) => {
+const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(({ item, onPress, size = 'md', testID }, ref) => {
   // Initialize styles with useVariants
   menuItemStyles.useVariants({
     size,
@@ -44,12 +45,18 @@ const MenuItem: React.FC<MenuItemProps> = ({ item, onPress, size = 'md', testID
     return null;
   };
 
+  // Merge refs
+  const mergedRef = useMergeRefs(ref, itemProps.ref);
+
   return (
     <button
       {...itemProps}
+      ref={mergedRef}
       onClick={() => onPress(item)}
       disabled={item.disabled}
       role="menuitem"
+      aria-disabled={item.disabled}
+      tabIndex={-1}
       data-testid={testID}
     >
       {item.icon && (
@@ -62,6 +69,8 @@ const MenuItem: React.FC<MenuItemProps> = ({ item, onPress, size = 'md', testID
       </span>
     </button>
   );
-};
+});
+
+MenuItem.displayName = 'MenuItem';
 
 export default MenuItem;

package/src/Menu/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 { BaseProps } from '../utils/viewStyleProps';
+import { InteractiveAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type MenuIntentVariant = Intent;
@@ -18,7 +19,7 @@ export interface MenuItem {
   separator?: boolean;
 }
 
-export interface MenuProps extends BaseProps {
+export interface MenuProps extends BaseProps, InteractiveAccessibilityProps {
   children: React.ReactNode;
   items: MenuItem[];
   open?: boolean;

package/src/Popover/Popover.native.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useRef, useState, forwardRef } from 'react';
+import React, { useEffect, useRef, useState, forwardRef, useMemo } from 'react';
 import { Modal, View, TouchableWithoutFeedback, BackHandler, Dimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PopoverProps } from './types';
 import { popoverStyles } from './Popover.styles';
 import { calculateSmartPosition, calculateAvailableHeight } from '../utils/positionUtils.native';
 import { BoundedModalContent } from '../internal/BoundedModalContent.native';
+import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
 
 const Popover = forwardRef<View, PopoverProps>(({
   open,
@@ -18,7 +19,21 @@ const Popover = forwardRef<View, PopoverProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  accessibilityHidden,
 }, ref) => {
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeInteractiveAccessibilityProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityRole: accessibilityRole ?? 'none',
+      accessibilityHidden,
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityHidden]);
   const popoverRef = useRef<View>(null);
   const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0, width: 0 });
   const [popoverSize, setPopoverSize] = useState({ width: 0, height: 0 });
@@ -141,6 +156,7 @@ const Popover = forwardRef<View, PopoverProps>(({
               maxHeight={500}
               style={[popoverStyles.container, style]}
               onLayout={handlePopoverLayout}
+              {...nativeA11yProps}
             >
               {showArrow && <View style={popoverStyles.arrow} />}
               <View style={popoverStyles.content}>

package/src/Popover/Popover.web.tsx

@@ -1,9 +1,10 @@
-import React, { useRef, forwardRef } from 'react';
+import React, { useRef, forwardRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { PopoverProps } from './types';
 import { popoverStyles } from './Popover.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { PositionedPortal } from '../internal/PositionedPortal';
+import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
 const Popover = forwardRef<HTMLDivElement, PopoverProps>(({
   open,
@@ -17,7 +18,28 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(({
   showArrow = false,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  accessibilityHidden,
+  accessibilityLabelledBy,
+  accessibilityDescribedBy,
 }, ref) => {
+  // Generate unique ID for the popover
+  const popoverId = useMemo(() => id || generateAccessibilityId('popover'), [id]);
+
+  // Generate ARIA props
+  const ariaProps = useMemo(() => {
+    return getWebInteractiveAriaProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityRole: accessibilityRole ?? 'dialog',
+      accessibilityHidden,
+      accessibilityLabelledBy,
+      accessibilityDescribedBy,
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityHidden, accessibilityLabelledBy, accessibilityDescribedBy]);
   const popoverRef = useRef<HTMLDivElement>(null);
 
   popoverStyles.useVariants({});
@@ -48,7 +70,14 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(({
       onEscapeKey={closeOnEscapeKey ? () => onOpenChange(false) : undefined}
       zIndex={9999}
     >
-      <div ref={mergedPopoverRef} id={id} data-testid={testID}>
+      <div
+        ref={mergedPopoverRef}
+        id={popoverId}
+        data-testid={testID}
+        {...ariaProps}
+        role="dialog"
+        aria-modal="false"
+      >
         <div {...containerProps}>
           <div {...contentProps}>
             {children}

package/src/Popover/types.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { BaseProps } from '../utils/viewStyleProps';
+import { InteractiveAccessibilityProps } from '../utils/accessibility';
 
 export type PopoverPlacement =
   | 'top' | 'top-start' | 'top-end'
@@ -8,7 +9,7 @@ export type PopoverPlacement =
   | 'left' | 'left-start' | 'left-end'
   | 'right' | 'right-start' | 'right-end';
 
-export interface PopoverProps extends BaseProps {
+export interface PopoverProps extends BaseProps, InteractiveAccessibilityProps {
   /**
    * Whether the popover is open/visible
    */

package/src/RadioButton/RadioButton.native.tsx

@@ -1,9 +1,10 @@
-import React, { ComponentRef, forwardRef } from 'react';
+import React, { ComponentRef, forwardRef, useMemo } from 'react';
 import { View, Pressable, Animated } from 'react-native';
 import Text from '../Text';
 import { radioButtonStyles } from './RadioButton.styles';
 import type { RadioButtonProps } from './types';
 import { useRadioGroup } from './RadioGroup.native';
+import { getNativeSelectionAccessibilityProps } from '../utils/accessibility';
 
 const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>(({
   value,
@@ -20,6 +21,15 @@ const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityLabelledBy,
+  accessibilityDescribedBy,
+  accessibilityChecked,
 }, ref) => {
   const group = useRadioGroup();
 
@@ -47,6 +57,35 @@ const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>
     }
   };
 
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    const computedLabel = accessibilityLabel ?? label;
+    const computedChecked = accessibilityChecked ?? checked;
+
+    return getNativeSelectionAccessibilityProps({
+      accessibilityLabel: computedLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'radio',
+      accessibilityLabelledBy,
+      accessibilityDescribedBy,
+      accessibilityChecked: computedChecked,
+    });
+  }, [
+    accessibilityLabel,
+    label,
+    accessibilityHint,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityChecked,
+    checked,
+  ]);
+
   // Apply variants for radio styles
   radioButtonStyles.useVariants({
     size,
@@ -70,8 +109,7 @@ const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>
       disabled={disabled}
       style={[radioButtonStyles.container, style]}
       testID={testID}
-      accessibilityRole="radio"
-      accessibilityState={{ checked, disabled }}
+      {...nativeA11yProps}
     >
       <View style={radioButtonStyles.radio({ intent })}>
         <Animated.View

package/src/RadioButton/RadioButton.web.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { radioButtonStyles } from './RadioButton.styles';
 import type { RadioButtonProps } from './types';
 import { useRadioGroup } from './RadioGroup.web';
+import { getWebSelectionAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
 const RadioButton: React.FC<RadioButtonProps> = ({
   value,
@@ -19,6 +20,15 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityLabelledBy,
+  accessibilityDescribedBy,
+  accessibilityChecked,
 }) => {
   const group = useRadioGroup();
 
@@ -35,6 +45,38 @@ const RadioButton: React.FC<RadioButtonProps> = ({
     }
   };
 
+  // Generate unique ID for accessibility
+  const radioId = useMemo(() => id || generateAccessibilityId('radio'), [id]);
+
+  // Generate ARIA props
+  const ariaProps = useMemo(() => {
+    const computedLabel = accessibilityLabel ?? label;
+    const computedChecked = accessibilityChecked ?? checked;
+
+    return getWebSelectionAriaProps({
+      accessibilityLabel: computedLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'radio',
+      accessibilityLabelledBy,
+      accessibilityDescribedBy,
+      accessibilityChecked: computedChecked,
+    });
+  }, [
+    accessibilityLabel,
+    label,
+    accessibilityHint,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityChecked,
+    checked,
+  ]);
+
   // Apply variants using the correct Unistyles v3 pattern
   radioButtonStyles.useVariants({
     size,
@@ -53,13 +95,11 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   return (
     <button
       {...containerProps}
+      {...ariaProps}
       onClick={handleClick}
       disabled={disabled}
-      id={id}
+      id={radioId}
       data-testid={testID}
-      role="radio"
-      aria-checked={checked}
-      aria-disabled={disabled}
       style={{
         background: 'none',
         border: 'none',
@@ -68,7 +108,6 @@ const RadioButton: React.FC<RadioButtonProps> = ({
         display: 'inline-flex',
         alignItems: 'center',
       }}
-      {...containerProps}
     >
       <div {...radioProps} style={{
         display: 'flex',

package/src/RadioButton/RadioGroup.native.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { View } from 'react-native';
 import { radioButtonStyles } from './RadioButton.styles';
 import type { RadioGroupProps } from './types';
+import { getNativeAccessibilityProps } from '../utils/accessibility';
 
 const RadioGroupContext = React.createContext<{
   value?: string;
@@ -20,8 +21,25 @@ const RadioGroup = forwardRef<View, RadioGroupProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
 }, ref) => {
 
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeAccessibilityProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'radiogroup',
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole]);
+
   return (
     <RadioGroupContext.Provider value={{ value, onValueChange, disabled }}>
       <View
@@ -31,8 +49,8 @@ const RadioGroup = forwardRef<View, RadioGroupProps>(({
           radioButtonStyles.groupContainer,
           style as any,
         ]}
-        accessibilityRole="radiogroup"
         testID={testID}
+        {...nativeA11yProps}
       >
         {children}
       </View>

package/src/RadioButton/RadioGroup.web.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { radioButtonStyles } from './RadioButton.styles';
 import type { RadioGroupProps } from './types';
+import { getWebAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
 const RadioGroupContext = React.createContext<{
   value?: string;
@@ -20,7 +21,27 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
 }) => {
+  // Generate unique ID for accessibility
+  const groupId = useMemo(() => id || generateAccessibilityId('radiogroup'), [id]);
+
+  // Generate ARIA props
+  const ariaProps = useMemo(() => {
+    return getWebAriaProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'radiogroup',
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole]);
+
   // Apply variants
   radioButtonStyles.useVariants({
     orientation,
@@ -35,8 +56,8 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
     <RadioGroupContext.Provider value={{ value, onValueChange, disabled }}>
       <div
         {...groupProps}
-        role="radiogroup"
-        id={id}
+        {...ariaProps}
+        id={groupId}
         data-testid={testID}
         style={{
           display: 'flex',

package/src/RadioButton/types.ts

@@ -2,12 +2,13 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import type { ReactNode } from 'react';
 import { Intent, Size } from '@idealyst/theme';
 import { FormInputStyleProps, BaseProps } from '../utils/viewStyleProps';
+import { SelectionAccessibilityProps, AccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type RadioButtonIntentVariant = Intent;
 export type RadioButtonSizeVariant = Size;
 
-export interface RadioButtonProps extends FormInputStyleProps {
+export interface RadioButtonProps extends FormInputStyleProps, SelectionAccessibilityProps {
   value: string;
   checked?: boolean;
   onPress?: () => void;
@@ -19,7 +20,7 @@ export interface RadioButtonProps extends FormInputStyleProps {
   testID?: string;
 }
 
-export interface RadioGroupProps extends BaseProps {
+export interface RadioGroupProps extends BaseProps, AccessibilityProps {
   value?: string;
   onValueChange?: (value: string) => void;
   disabled?: boolean;

package/src/Select/types.ts

@@ -2,6 +2,7 @@ import { Intent, Size } from '@idealyst/theme';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { FormInputStyleProps } from '../utils/viewStyleProps';
+import { FormAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type SelectIntentVariant = Intent;
@@ -30,7 +31,7 @@ export interface SelectOption {
   icon?: ReactNode;
 }
 
-export interface SelectProps extends FormInputStyleProps {
+export interface SelectProps extends FormInputStyleProps, FormAccessibilityProps {
   /**
    * Array of options to display in the select
    */
@@ -117,9 +118,4 @@ export interface SelectProps extends FormInputStyleProps {
    * Test ID for testing
    */
   testID?: string;
-
-  /**
-   * Accessibility label
-   */
-  accessibilityLabel?: string;
 }

package/src/Skeleton/Skeleton.native.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, forwardRef } from 'react';
+import React, { useEffect, forwardRef, useMemo } from 'react';
 import { View } from 'react-native';
 import Animated, {
   useSharedValue,
@@ -10,6 +10,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { skeletonStyles } from './Skeleton.styles';
 import type { SkeletonProps, SkeletonGroupProps } from './types';
+import { getNativeLiveRegionAccessibilityProps } from '../utils/accessibility';
 
 const Skeleton = forwardRef<View, SkeletonProps>(({
   width = '100%',
@@ -20,7 +21,19 @@ const Skeleton = forwardRef<View, SkeletonProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityLiveRegion,
+  accessibilityBusy,
 }, ref) => {
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeLiveRegionAccessibilityProps({
+      accessibilityLabel: accessibilityLabel ?? 'Loading content',
+      accessibilityLiveRegion: accessibilityLiveRegion ?? 'polite',
+      accessibilityBusy: accessibilityBusy ?? true,
+    });
+  }, [accessibilityLabel, accessibilityLiveRegion, accessibilityBusy]);
   skeletonStyles.useVariants({
     shape,
     animation,
@@ -87,6 +100,7 @@ const Skeleton = forwardRef<View, SkeletonProps>(({
         pulseAnimatedStyle,
       ]}
       testID={testID}
+      {...nativeA11yProps}
     >
       {animation === 'wave' && (
         <Animated.View

package/src/Skeleton/Skeleton.web.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { skeletonStyles } from './Skeleton.styles';
 import type { SkeletonProps, SkeletonGroupProps } from './types';
+import { getWebLiveRegionAriaProps } from '../utils/accessibility';
 
 const Skeleton: React.FC<SkeletonProps> = ({
   width = '100%',
@@ -12,7 +13,23 @@ const Skeleton: React.FC<SkeletonProps> = ({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityLiveRegion,
+  accessibilityBusy,
+  accessibilityAtomic,
+  accessibilityRelevant,
 }) => {
+  // Generate ARIA props for loading state
+  const ariaProps = useMemo(() => {
+    return getWebLiveRegionAriaProps({
+      accessibilityLabel: accessibilityLabel ?? 'Loading content',
+      accessibilityLiveRegion: accessibilityLiveRegion ?? 'polite',
+      accessibilityBusy: accessibilityBusy ?? true,
+      accessibilityAtomic,
+      accessibilityRelevant,
+    });
+  }, [accessibilityLabel, accessibilityLiveRegion, accessibilityBusy, accessibilityAtomic, accessibilityRelevant]);
   skeletonStyles.useVariants({
     shape,
     animation,
@@ -57,6 +74,8 @@ const Skeleton: React.FC<SkeletonProps> = ({
       )}
       <div
         {...skeletonProps}
+        {...ariaProps}
+        role="status"
         style={{
           ...customStyles,
           ...animationStyles,

package/src/Skeleton/types.ts

@@ -1,10 +1,11 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 import { BaseProps } from '../utils/viewStyleProps';
+import { LiveRegionAccessibilityProps } from '../utils/accessibility';
 
 export type SkeletonShape = 'rectangle' | 'circle' | 'rounded';
 export type SkeletonAnimation = 'pulse' | 'wave' | 'none';
 
-export interface SkeletonProps extends BaseProps {
+export interface SkeletonProps extends BaseProps, LiveRegionAccessibilityProps {
   /**
    * Width of the skeleton (number in pixels or string with units)
    * @default '100%'

package/src/Slider/Slider.native.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, forwardRef } from 'react';
+import React, { useState, useCallback, forwardRef, useMemo } from 'react';
 import { View } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, useAnimatedStyle, runOnJS, withSpring } from 'react-native-reanimated';
@@ -7,6 +7,7 @@ import { sliderStyles } from './Slider.styles';
 import Text from '../Text';
 import type { SliderProps } from './types';
 import { isIconName } from '../Icon/icon-resolver';
+import { getNativeRangeAccessibilityProps } from '../utils/accessibility';
 
 const Slider = forwardRef<View, SliderProps>(({
   value: controlledValue,
@@ -30,6 +31,16 @@ const Slider = forwardRef<View, SliderProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityValueNow,
+  accessibilityValueMin,
+  accessibilityValueMax,
+  accessibilityValueText,
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [trackWidthState, setTrackWidthState] = useState(0);
@@ -75,6 +86,35 @@ const Slider = forwardRef<View, SliderProps>(({
     onValueCommit?.(finalValue);
   }, [onValueCommit]);
 
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeRangeAccessibilityProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'adjustable',
+      accessibilityValueNow: accessibilityValueNow ?? value,
+      accessibilityValueMin: accessibilityValueMin ?? min,
+      accessibilityValueMax: accessibilityValueMax ?? max,
+      accessibilityValueText: accessibilityValueText ?? `${value}`,
+    });
+  }, [
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityValueNow,
+    value,
+    accessibilityValueMin,
+    min,
+    accessibilityValueMax,
+    max,
+    accessibilityValueText,
+  ]);
+
   // Update translateX when value changes externally
   React.useEffect(() => {
     if (!isDragging.value && trackWidth.value > 0) {
@@ -167,7 +207,7 @@ const Slider = forwardRef<View, SliderProps>(({
   };
 
   return (
-    <View ref={ref} nativeID={id} style={[sliderStyles.container, style]} testID={testID}>
+    <View ref={ref} nativeID={id} style={[sliderStyles.container, style]} testID={testID} {...nativeA11yProps}>
       {showValue && (
         <View style={sliderStyles.valueLabel as any}>
           <Text>{value}</Text>