@idealyst/components 1.1.4 → 1.1.5

package/src/Button/Button.web.tsx

@@ -1,9 +1,10 @@
-import React, { isValidElement, forwardRef } from 'react';
+import React, { isValidElement, forwardRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { ButtonProps } from './types';
 import { buttonStyles } from './Button.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
 // Extended props to include path props added by Babel plugin
 interface InternalButtonProps extends ButtonProps {
@@ -29,6 +30,19 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
     style,
     testID,
     id,
+    // Accessibility props
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityDisabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityControls,
+    accessibilityExpanded,
+    accessibilityPressed,
+    accessibilityOwns,
+    accessibilityHasPopup,
   } = props;
 
   buttonStyles.useVariants({
@@ -47,6 +61,50 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
     }
   };
 
+  // Generate unique ID for accessibility
+  const buttonId = useMemo(() => id || generateAccessibilityId('button'), [id]);
+
+  // Generate ARIA props - especially important for icon-only buttons
+  const ariaProps = useMemo(() => {
+    // For icon-only buttons, accessibilityLabel is critical
+    const buttonContent = children || title;
+    const isIconOnly = !buttonContent && (leftIcon || rightIcon);
+    const computedLabel = accessibilityLabel ?? (isIconOnly && typeof leftIcon === 'string' ? leftIcon : undefined);
+
+    return getWebInteractiveAriaProps({
+      accessibilityLabel: computedLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'button',
+      accessibilityLabelledBy,
+      accessibilityDescribedBy,
+      accessibilityControls,
+      accessibilityExpanded,
+      accessibilityPressed,
+      accessibilityOwns,
+      accessibilityHasPopup,
+    });
+  }, [
+    accessibilityLabel,
+    children,
+    title,
+    leftIcon,
+    rightIcon,
+    accessibilityHint,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityControls,
+    accessibilityExpanded,
+    accessibilityPressed,
+    accessibilityOwns,
+    accessibilityHasPopup,
+  ]);
+
   // Compute dynamic styles
   const buttonStyleArray = [
     buttonStyles.button,
@@ -95,8 +153,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButton
   return (
     <button
       {...webProps}
+      {...ariaProps}
       ref={mergedRef}
-      id={id}
+      id={buttonId}
       onClick={handleClick}
       disabled={disabled}
       data-testid={testID}

package/src/Button/types.ts

@@ -3,6 +3,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 ButtonType = 'contained' | 'outlined' | 'text';
@@ -17,7 +18,7 @@ export type ButtonSizeVariant = Size;
  */
 export type ButtonGradient = 'darken' | 'lighten';
 
-export interface ButtonProps extends BaseProps {
+export interface ButtonProps extends BaseProps, InteractiveAccessibilityProps {
   /**
    * The text or content to display inside the button
    */

package/src/Card/Card.native.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef, ComponentRef } from 'react';
+import React, { forwardRef, ComponentRef, useMemo } from 'react';
 import { View, Pressable } from 'react-native';
 import { CardProps } from './types';
 import { cardStyles } from './Card.styles';
+import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
 
 const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressable>, CardProps>(({
   children,
@@ -21,9 +22,26 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
   marginHorizontal,
   style,
   testID,
-  accessibilityLabel,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityPressed,
 }, ref) => {
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeInteractiveAccessibilityProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? (clickable ? 'button' : 'none'),
+      accessibilityPressed,
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole, clickable, accessibilityPressed]);
   // Apply variants
   cardStyles.useVariants({
     clickable,
@@ -48,9 +66,7 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
     nativeID: id,
     style: [cardStyles.card, style],
     testID,
-    accessibilityLabel,
-    // Only use button role for clickable cards in React Native
-    ...(clickable && { accessibilityRole: 'button' as const }),
+    ...nativeA11yProps,
     ...(clickable && {
       onPress: disabled ? undefined : onPress,
       disabled,

package/src/Card/Card.web.tsx

@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { CardProps } from './types';
 import { cardStyles } from './Card.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { getWebInteractiveAriaProps } from '../utils/accessibility';
 
 const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
   children,
@@ -22,9 +23,26 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
   marginHorizontal,
   style,
   testID,
-  accessibilityLabel,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityPressed,
 }, ref) => {
+  // Generate ARIA props
+  const ariaProps = useMemo(() => {
+    return getWebInteractiveAriaProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? (clickable ? 'button' : 'region'),
+      accessibilityPressed,
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole, clickable, accessibilityPressed]);
   const handleClick = () => {
     if (!disabled && clickable && onPress) {
       onPress();
@@ -58,13 +76,12 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
   return (
     <Component
       {...webProps}
+      {...ariaProps}
       ref={mergedRef as any}
       id={id}
       onClick={clickable ? handleClick : undefined}
       disabled={clickable && disabled}
       data-testid={testID}
-      aria-label={accessibilityLabel}
-      role={clickable ? 'button' : undefined}
     >
       {children}
     </Component>

package/src/Card/types.ts

@@ -2,13 +2,14 @@ import { Intent, Size } from '@idealyst/theme';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
+import { InteractiveAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type CardIntentVariant = Intent;
 export type CardType = 'default' | 'outlined' | 'elevated' | 'filled';
 export type CardRadiusVariant = 'none' | Size;
 
-export interface CardProps extends ContainerStyleProps {
+export interface CardProps extends ContainerStyleProps, InteractiveAccessibilityProps {
   /**
    * The content to display inside the card
    */
@@ -53,9 +54,4 @@ export interface CardProps extends ContainerStyleProps {
    * Test ID for testing
    */
   testID?: string;
-
-  /**
-   * Accessibility label
-   */
-  accessibilityLabel?: string;
 }

package/src/Checkbox/Checkbox.native.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useEffect, forwardRef } from 'react';
+import React, { useState, useEffect, forwardRef, useMemo } from 'react';
 import { View, Text, Pressable } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { CheckboxProps } from './types';
 import { checkboxStyles } from './Checkbox.styles';
+import { getNativeSelectionAccessibilityProps } from '../utils/accessibility';
 
 const Checkbox = forwardRef<View, CheckboxProps>(({
   checked = false,
@@ -20,11 +21,19 @@ const Checkbox = forwardRef<View, CheckboxProps>(({
   marginHorizontal,
   style,
   testID,
-  accessibilityLabel,
   required = false,
   error,
   helperText,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityLabelledBy,
+  accessibilityDescribedBy,
+  accessibilityChecked,
 }, ref) => {
   const [internalChecked, setInternalChecked] = useState(checked);
 
@@ -40,6 +49,40 @@ const Checkbox = forwardRef<View, CheckboxProps>(({
     onCheckedChange?.(newChecked);
   };
 
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    const labelContent = children || label;
+    const computedLabel = accessibilityLabel ?? (typeof labelContent === 'string' ? labelContent : undefined);
+    const computedChecked = accessibilityChecked ?? (indeterminate ? 'mixed' : internalChecked);
+
+    return getNativeSelectionAccessibilityProps({
+      accessibilityLabel: computedLabel,
+      accessibilityHint: accessibilityHint ?? (error || helperText),
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'checkbox',
+      accessibilityLabelledBy,
+      accessibilityDescribedBy,
+      accessibilityChecked: computedChecked,
+    });
+  }, [
+    accessibilityLabel,
+    children,
+    label,
+    accessibilityHint,
+    error,
+    helperText,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityChecked,
+    indeterminate,
+    internalChecked,
+  ]);
+
   // Apply variants
   checkboxStyles.useVariants({
     size,
@@ -62,9 +105,7 @@ const Checkbox = forwardRef<View, CheckboxProps>(({
         onPress={handlePress}
         disabled={disabled}
         testID={testID}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole="checkbox"
-        accessibilityState={{ checked: internalChecked }}
+        {...nativeA11yProps}
         style={checkboxStyles.container}
       >
         <View style={checkboxStyles.checkbox({ intent })}>

package/src/Checkbox/Checkbox.web.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, forwardRef } from 'react';
+import React, { useState, useEffect, forwardRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { CheckboxProps } from './types';
 import { checkboxStyles } from './Checkbox.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { resolveIconPath } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { getWebSelectionAriaProps, generateAccessibilityId, combineIds } from '../utils/accessibility';
 
 const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
   checked = false,
@@ -22,11 +23,24 @@ const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
   marginHorizontal,
   style,
   testID,
-  accessibilityLabel,
   required = false,
   error,
   helperText,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityLabelledBy,
+  accessibilityDescribedBy,
+  accessibilityControls,
+  accessibilityExpanded,
+  accessibilityPressed,
+  accessibilityOwns,
+  accessibilityHasPopup,
+  accessibilityChecked,
 }, ref) => {
   const [internalChecked, setInternalChecked] = useState(checked);
 
@@ -42,6 +56,61 @@ const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
     onCheckedChange?.(newChecked);
   };
 
+  // Generate unique IDs for accessibility
+  const checkboxId = useMemo(() => id || generateAccessibilityId('checkbox'), [id]);
+  const errorId = useMemo(() => `${checkboxId}-error`, [checkboxId]);
+  const helperId = useMemo(() => `${checkboxId}-helper`, [checkboxId]);
+
+  // Generate ARIA props for the input element
+  const ariaProps = useMemo(() => {
+    const labelContent = children || label;
+    const computedLabel = accessibilityLabel ?? (typeof labelContent === 'string' ? labelContent : undefined);
+    const computedChecked = accessibilityChecked ?? (indeterminate ? 'mixed' : internalChecked);
+    const describedByIds = combineIds(
+      accessibilityDescribedBy,
+      error ? errorId : helperText ? helperId : undefined
+    );
+
+    return getWebSelectionAriaProps({
+      accessibilityLabel: computedLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'checkbox',
+      accessibilityLabelledBy,
+      accessibilityDescribedBy: describedByIds,
+      accessibilityControls,
+      accessibilityExpanded,
+      accessibilityPressed,
+      accessibilityOwns,
+      accessibilityHasPopup,
+      accessibilityChecked: computedChecked,
+    });
+  }, [
+    accessibilityLabel,
+    children,
+    label,
+    accessibilityHint,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    error,
+    errorId,
+    helperText,
+    helperId,
+    accessibilityControls,
+    accessibilityExpanded,
+    accessibilityPressed,
+    accessibilityOwns,
+    accessibilityHasPopup,
+    accessibilityChecked,
+    indeterminate,
+    internalChecked,
+  ]);
+
   // Apply variants
   checkboxStyles.useVariants({
     size,
@@ -82,12 +151,15 @@ const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
         <div style={{ position: 'relative' }}>
           <input
             type="checkbox"
+            id={checkboxId}
             checked={internalChecked}
             onChange={handleChange}
             disabled={disabled}
             required={required}
             data-testid={testID}
-            aria-label={accessibilityLabel}
+            {...ariaProps}
+            aria-required={required}
+            aria-invalid={Boolean(error)}
             ref={(ref) => {
               if (ref) {
                 ref.indeterminate = indeterminate;
@@ -119,7 +191,11 @@ const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
         )}
       </label>
       {displayHelperText && (
-        <div {...helperTextProps}>
+        <div
+          {...helperTextProps}
+          id={error ? errorId : helperId}
+          role={error ? 'alert' : undefined}
+        >
           {error || helperText}
         </div>
       )}

package/src/Checkbox/types.ts

@@ -2,13 +2,14 @@ import { Intent, Size } from '@idealyst/theme';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { FormInputStyleProps } from '../utils/viewStyleProps';
+import { SelectionAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type CheckboxIntentVariant = Intent;
 export type CheckboxSizeVariant = Size;
 export type CheckboxVariant = 'default' | 'outlined';
 
-export interface CheckboxProps extends FormInputStyleProps {
+export interface CheckboxProps extends FormInputStyleProps, SelectionAccessibilityProps {
   /**
    * Whether the checkbox is checked
    */
@@ -64,11 +65,6 @@ export interface CheckboxProps extends FormInputStyleProps {
    */
   testID?: string;
 
-  /**
-   * Accessibility label
-   */
-  accessibilityLabel?: string;
-
   /**
    * Whether the checkbox is required
    */

package/src/Chip/Chip.native.tsx

@@ -20,6 +20,9 @@ const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityChecked,
 }, ref) => {
   const handlePress = () => {
     if (disabled) return;
@@ -103,10 +106,12 @@ const Chip = forwardRef<ComponentRef<typeof Pressable>, ChipProps>(({
         nativeID={id}
         onPress={handlePress}
         disabled={disabled}
+        accessibilityLabel={accessibilityLabel ?? label}
         accessibilityRole="button"
         accessibilityState={{
           disabled,
           selected: selectable ? selected : undefined,
+          checked: accessibilityChecked ?? (selectable ? selected : undefined),
         }}
       >
         <View style={[containerStyle, style]} testID={testID}>

package/src/Chip/Chip.web.tsx

@@ -22,6 +22,9 @@ const Chip = forwardRef<HTMLDivElement, ChipProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityChecked,
 }, ref) => {
   // Compute actual selected state
   const isSelected = selectable ? selected : false;
@@ -102,8 +105,9 @@ const Chip = forwardRef<HTMLDivElement, ChipProps>(({
       onClick={handleClick}
       data-testid={testID}
       role={isClickable ? 'button' : undefined}
+      aria-label={accessibilityLabel ?? label}
       aria-disabled={disabled}
-      aria-pressed={selectable ? selected : undefined}
+      aria-pressed={accessibilityChecked ?? (selectable ? selected : undefined)}
     >
       {icon && (
         <span

package/src/Chip/types.ts

@@ -2,12 +2,13 @@ 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 { SelectionAccessibilityProps } from '../utils/accessibility';
 
 export type ChipSize = Size;
 export type ChipType = 'filled' | 'outlined' | 'soft';
 export type ChipIntent = Intent;
 
-export interface ChipProps extends BaseProps {
+export interface ChipProps extends BaseProps, SelectionAccessibilityProps {
   /** The text content of the chip */
   label: string;
 

package/src/Dialog/Dialog.native.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, forwardRef } from 'react';
+import React, { useEffect, forwardRef, useMemo } from 'react';
 import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { DialogProps } from './types';
 import { dialogStyles } from './Dialog.styles';
+import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
 
 const Dialog = forwardRef<View, DialogProps>(({
   open,
@@ -17,7 +18,24 @@ const Dialog = forwardRef<View, DialogProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
 }, ref) => {
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeInteractiveAccessibilityProps({
+      accessibilityLabel: accessibilityLabel ?? title,
+      accessibilityHint,
+      accessibilityDisabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'none',
+    });
+  }, [accessibilityLabel, title, accessibilityHint, accessibilityDisabled, accessibilityHidden, accessibilityRole]);
+
   const backdropOpacity = useSharedValue(0);
   const containerScale = useSharedValue(0.9);
   const containerOpacity = useSharedValue(0);
@@ -105,12 +123,11 @@ const Dialog = forwardRef<View, DialogProps>(({
       onRequestClose={() => onOpenChange(false)}
       statusBarTranslucent
       testID={testID}
-      nativeID={id}
     >
       <TouchableWithoutFeedback onPress={handleBackdropPress}>
         <Animated.View style={[dialogStyles.backdrop, backdropAnimatedStyle]}>
           <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
-            <Animated.View ref={ref as any} style={[dialogStyles.container, style, containerAnimatedStyle]}>
+            <Animated.View ref={ref as any} style={[dialogStyles.container, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
               {(title || showCloseButton) && (
                 <View style={dialogStyles.header}>
                   {title && (

package/src/Dialog/Dialog.web.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useRef, useState, forwardRef } from 'react';
+import React, { useEffect, useRef, useState, forwardRef, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { getWebProps } from 'react-native-unistyles/web';
 import { DialogProps } from './types';
 import { dialogStyles } from './Dialog.styles';
 import Icon from '../Icon';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
 const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   open,
@@ -19,12 +20,35 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityDescribedBy,
 }, ref) => {
   const dialogRef = useRef<HTMLDivElement>(null);
   const previousActiveElementRef = useRef<HTMLElement | null>(null);
   const [isVisible, setIsVisible] = useState(false);
   const [shouldRender, setShouldRender] = useState(false);
 
+  // Generate unique IDs for accessibility
+  const dialogId = useMemo(() => id || generateAccessibilityId('dialog'), [id]);
+  const titleId = useMemo(() => `${dialogId}-title`, [dialogId]);
+
+  // Generate ARIA props
+  const ariaProps = useMemo(() => {
+    return getWebInteractiveAriaProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'dialog',
+      accessibilityDescribedBy,
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, accessibilityHidden, accessibilityRole, accessibilityDescribedBy]);
+
   // Handle mounting/unmounting with animation
   useEffect(() => {
     if (open && !shouldRender) {
@@ -130,23 +154,24 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
     <div
       {...backdropProps}
       ref={mergedBackdropRef}
-      id={id}
       onClick={handleBackdropClick}
       data-testid={testID}
     >
       <div
         {...containerProps}
+        {...ariaProps}
         ref={dialogRef}
+        id={dialogId}
         role="dialog"
         aria-modal="true"
-        aria-labelledby={title ? 'dialog-title' : undefined}
+        aria-labelledby={title ? titleId : undefined}
         tabIndex={-1}
         onClick={(e) => e.stopPropagation()}
       >
         {(title || showCloseButton) && (
           <div {...headerProps}>
             {title && (
-              <h2 {...titleProps} id="dialog-title">
+              <h2 {...titleProps} id={titleId}>
                 {title}
               </h2>
             )}

package/src/Dialog/types.ts

@@ -1,13 +1,14 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { BaseProps } from '../utils/viewStyleProps';
+import { InteractiveAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type DialogSizeVariant = 'sm' | 'md' | 'lg' | 'fullscreen';
 export type DialogType = 'standard' | 'alert' | 'confirmation';
 export type DialogAnimationType = 'slide' | 'fade' | 'none';
 
-export interface DialogProps extends BaseProps {
+export interface DialogProps extends BaseProps, InteractiveAccessibilityProps {
   /**
    * Whether the dialog is open/visible
    */