@idealyst/components 1.1.4 → 1.1.5

package/src/Slider/Slider.web.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useRef, useCallback, isValidElement, forwardRef } from 'react';
+import React, { useState, useRef, useCallback, isValidElement, forwardRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { sliderStyles } from './Slider.styles';
 import type { SliderProps } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { getWebRangeAriaProps, generateAccessibilityId, SLIDER_KEYS } from '../utils/accessibility';
 
 const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   value: controlledValue,
@@ -28,6 +29,16 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityValueNow,
+  accessibilityValueMin,
+  accessibilityValueMax,
+  accessibilityValueText,
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [isDragging, setIsDragging] = useState(false);
@@ -119,6 +130,72 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
     }
   }, [isDragging, value, onValueCommit]);
 
+  // Handle keyboard navigation for accessibility
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (disabled) return;
+
+    const key = e.key;
+    let newValue = value;
+    const largeStep = (max - min) / 10; // 10% of range for PageUp/PageDown
+
+    if (SLIDER_KEYS.increase.includes(key)) {
+      e.preventDefault();
+      newValue = clampValue(value + step);
+    } else if (SLIDER_KEYS.decrease.includes(key)) {
+      e.preventDefault();
+      newValue = clampValue(value - step);
+    } else if (SLIDER_KEYS.min.includes(key)) {
+      e.preventDefault();
+      newValue = min;
+    } else if (SLIDER_KEYS.max.includes(key)) {
+      e.preventDefault();
+      newValue = max;
+    } else if (key === 'PageUp') {
+      e.preventDefault();
+      newValue = clampValue(value + largeStep);
+    } else if (key === 'PageDown') {
+      e.preventDefault();
+      newValue = clampValue(value - largeStep);
+    }
+
+    if (newValue !== value) {
+      updateValue(newValue);
+      onValueCommit?.(newValue);
+    }
+  }, [disabled, value, step, min, max, clampValue, updateValue, onValueCommit]);
+
+  // Generate unique ID for accessibility
+  const sliderId = useMemo(() => id || generateAccessibilityId('slider'), [id]);
+
+  // Generate ARIA props
+  const ariaProps = useMemo(() => {
+    return getWebRangeAriaProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'slider',
+      accessibilityValueNow: accessibilityValueNow ?? value,
+      accessibilityValueMin: accessibilityValueMin ?? min,
+      accessibilityValueMax: accessibilityValueMax ?? max,
+      accessibilityValueText,
+    });
+  }, [
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityValueNow,
+    value,
+    accessibilityValueMin,
+    min,
+    accessibilityValueMax,
+    max,
+    accessibilityValueText,
+  ]);
+
   React.useEffect(() => {
     if (isDragging) {
       document.addEventListener('mousemove', handleMouseMove);
@@ -166,7 +243,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   const mergedRef = useMergeRefs(ref, containerProps.ref);
 
   return (
-    <div {...containerProps} ref={mergedRef} id={id} data-testid={testID}>
+    <div {...containerProps} ref={mergedRef} id={sliderId} data-testid={testID}>
       {showValue && (
         <div {...valueLabelProps}>
           {value}
@@ -176,13 +253,10 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
       <div {...wrapperProps}>
         <div
           {...trackProps}
+          {...ariaProps}
           ref={trackRef}
           onMouseDown={handleMouseDown}
-          role="slider"
-          aria-valuenow={value}
-          aria-valuemin={min}
-          aria-valuemax={max}
-          aria-disabled={disabled}
+          onKeyDown={handleKeyDown}
           tabIndex={disabled ? -1 : 0}
         >
           {/* Filled track */}

package/src/Slider/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 { FormInputStyleProps } from '../utils/viewStyleProps';
+import { RangeAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type SliderIntentVariant = Intent;
 export type SliderSizeVariant = Size;
 
-export interface SliderProps extends FormInputStyleProps {
+export interface SliderProps extends FormInputStyleProps, RangeAccessibilityProps {
   value?: number;
   defaultValue?: number;
   min?: number;

package/src/Switch/Switch.native.tsx

@@ -1,9 +1,10 @@
-import React, { ComponentRef, forwardRef } from 'react';
+import React, { ComponentRef, forwardRef, useMemo } from 'react';
 import { Pressable } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import { switchStyles } from './Switch.styles';
 import Text from '../Text';
 import type { SwitchProps } from './types';
+import { getNativeSelectionAccessibilityProps } from '../utils/accessibility';
 
 const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
   checked = false,
@@ -20,6 +21,15 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityLabelledBy,
+  accessibilityDescribedBy,
+  accessibilityChecked,
 }, ref) => {
   switchStyles.useVariants({
     size,
@@ -45,6 +55,35 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
     }
   };
 
+  // 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 ?? 'switch',
+      accessibilityLabelledBy,
+      accessibilityDescribedBy,
+      accessibilityChecked: computedChecked,
+    });
+  }, [
+    accessibilityLabel,
+    label,
+    accessibilityHint,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityChecked,
+    checked,
+  ]);
+
   const getThumbDistance = () => {
     if (size === 'sm') return 16;
     if (size === 'lg') return 24;
@@ -87,8 +126,7 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
       disabled={disabled}
       style={switchStyles.switchContainer}
       testID={testID}
-      accessibilityRole="switch"
-      accessibilityState={{ checked, disabled }}
+      {...nativeA11yProps}
     >
       <Animated.View style={switchStyles.switchTrack({ checked, intent })}>
         <Animated.View

package/src/Switch/Switch.web.tsx

@@ -1,10 +1,11 @@
-import React, { isValidElement, forwardRef } from 'react';
+import React, { isValidElement, forwardRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { switchStyles } from './Switch.styles';
 import type { SwitchProps } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { getWebSelectionAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
 const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
   checked = false,
@@ -23,6 +24,15 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityLabelledBy,
+  accessibilityDescribedBy,
+  accessibilityChecked,
 }, ref) => {
   const handleClick = () => {
     if (!disabled && onCheckedChange) {
@@ -30,6 +40,38 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
     }
   };
 
+  // Generate unique ID for accessibility
+  const switchId = useMemo(() => id || generateAccessibilityId('switch'), [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 ?? 'switch',
+      accessibilityLabelledBy,
+      accessibilityDescribedBy,
+      accessibilityChecked: computedChecked,
+    });
+  }, [
+    accessibilityLabel,
+    label,
+    accessibilityHint,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityChecked,
+    checked,
+  ]);
+
   // Apply variants using the correct Unistyles v3 pattern
   switchStyles.useVariants({
     size: size as 'sm' | 'md' | 'lg',
@@ -88,14 +130,12 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
   const switchElement = (
     <button
       {...computedButtonProps}
+      {...ariaProps}
       ref={mergedButtonRef}
       onClick={handleClick}
       disabled={disabled}
-      id={id}
+      id={switchId}
       data-testid={testID}
-      role="switch"
-      aria-checked={checked}
-      aria-disabled={disabled}
     >
       <div {...trackProps}>
         <div {...thumbProps}>

package/src/Switch/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 { FormInputStyleProps } from '../utils/viewStyleProps';
+import { SelectionAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type SwitchIntentVariant = Intent;
 export type SwitchSizeVariant = Size;
 
-export interface SwitchProps extends FormInputStyleProps {
+export interface SwitchProps extends FormInputStyleProps, SelectionAccessibilityProps {
   checked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
   disabled?: boolean;

package/src/TabBar/TabBar.native.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, forwardRef, ReactNode } from 'react';
+import React, { useState, useRef, useEffect, forwardRef, ReactNode, useMemo } from 'react';
 import { View, TouchableOpacity, Text, ScrollView } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import {
@@ -9,6 +9,7 @@ import {
   tabBarIconStyles
 } from './TabBar.styles';
 import type { TabBarProps, TabBarItem } from './types';
+import { getNativeAccessibilityProps } from '../utils/accessibility';
 
 // Icon size mapping based on size variant
 const ICON_SIZES: Record<string, number> = {
@@ -53,10 +54,27 @@ const TabBar = forwardRef<View, TabBarProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
 }, ref) => {
   const firstItemValue = items[0]?.value || '';
   const [internalValue, setInternalValue] = useState(defaultValue || firstItemValue);
 
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeAccessibilityProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'tablist',
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, accessibilityHidden, accessibilityRole]);
+
   const indicatorPosition = useSharedValue(0);
   const indicatorWidth = useSharedValue(0);
   const tabLayouts = useRef<{ [key: string]: { x: number; width: number } }>({});
@@ -132,7 +150,7 @@ const TabBar = forwardRef<View, TabBarProps>(({
       showsHorizontalScrollIndicator={false}
       contentContainerStyle={{ position: 'relative' }}
     >
-      <View ref={ref} nativeID={id} style={[tabBarContainerStyles.container, style]} testID={testID}>
+      <View ref={ref} nativeID={id} style={[tabBarContainerStyles.container, style]} testID={testID} {...nativeA11yProps}>
         {/* Animated indicator - render first so it's behind */}
         <Animated.View
           style={[
@@ -185,6 +203,9 @@ const TabBar = forwardRef<View, TabBarProps>(({
                 disabled={item.disabled}
                 activeOpacity={0.7}
                 testID={`${testID}-tab-${item.value}`}
+                accessibilityRole="tab"
+                accessibilityLabel={item.label}
+                accessibilityState={{ selected: isActive, disabled: item.disabled }}
               >
                 {icon && <View style={tabBarIconStyles.tabIcon}>{icon}</View>}
                 <Text style={tabBarLabelStyles.tabLabel}>{item.label}</Text>

package/src/TabBar/TabBar.web.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, ReactNode } from 'react';
+import React, { useState, useRef, useEffect, ReactNode, useMemo, useCallback } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import {
   tabBarContainerStyles,
@@ -9,6 +9,7 @@ import {
 } from './TabBar.styles';
 import type { TabBarProps, TabBarItem } from './types';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { getWebAriaProps, generateAccessibilityId, TAB_KEYS } from '../utils/accessibility';
 
 // Icon size mapping based on size variant
 const ICON_SIZES: Record<string, number> = {
@@ -36,6 +37,7 @@ interface TabProps {
   item: TabBarItem;
   isActive: boolean;
   onClick: () => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
   size: TabBarProps['size'];
   type: TabBarProps['type'];
   pillMode: TabBarProps['pillMode'];
@@ -43,12 +45,15 @@ interface TabProps {
   justify: TabBarProps['justify'];
   testID?: string;
   tabRef: (el: HTMLButtonElement | null) => void;
+  tabId: string;
+  panelId: string;
 }
 
 const Tab: React.FC<TabProps> = ({
   item,
   isActive,
   onClick,
+  onKeyDown,
   size,
   type,
   pillMode,
@@ -56,6 +61,8 @@ const Tab: React.FC<TabProps> = ({
   justify,
   testID,
   tabRef,
+  tabId,
+  panelId,
 }) => {
   const iconSize = ICON_SIZES[size || 'md'] || 18;
 
@@ -99,11 +106,15 @@ const Tab: React.FC<TabProps> = ({
     <button
       {...tabProps}
       ref={mergedRef}
+      id={tabId}
       onClick={onClick}
+      onKeyDown={onKeyDown}
       disabled={item.disabled}
       role="tab"
       aria-selected={isActive}
+      aria-controls={panelId}
       aria-disabled={item.disabled}
+      tabIndex={isActive ? 0 : -1}
       data-testid={`${testID}-tab-${item.value}`}
     >
       {icon && <span {...iconProps}>{icon}</span>}
@@ -133,6 +144,12 @@ const TabBar: React.FC<TabBarProps> = ({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
 }) => {
   const firstItemValue = items[0]?.value || '';
   const [internalValue, setInternalValue] = useState(defaultValue || firstItemValue);
@@ -141,6 +158,54 @@ const TabBar: React.FC<TabBarProps> = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const tabRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});
 
+  // Generate unique ID for the tablist
+  const tabListId = useMemo(() => id || generateAccessibilityId('tablist'), [id]);
+
+  // Generate tab and panel IDs
+  const getTabId = useCallback((itemValue: string) => `${tabListId}-tab-${itemValue}`, [tabListId]);
+  const getPanelId = useCallback((itemValue: string) => `${tabListId}-panel-${itemValue}`, [tabListId]);
+
+  // Get enabled items for keyboard navigation
+  const enabledItems = useMemo(() => items.filter(item => !item.disabled), [items]);
+
+  // Keyboard navigation handler
+  const handleKeyDown = useCallback((e: React.KeyboardEvent, itemValue: string) => {
+    const key = e.key;
+    const currentIndex = enabledItems.findIndex(item => item.value === itemValue);
+    let nextIndex = -1;
+
+    if (TAB_KEYS.next.includes(key)) {
+      e.preventDefault();
+      nextIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
+    } else if (TAB_KEYS.prev.includes(key)) {
+      e.preventDefault();
+      nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
+    } else if (TAB_KEYS.first.includes(key)) {
+      e.preventDefault();
+      nextIndex = 0;
+    } else if (TAB_KEYS.last.includes(key)) {
+      e.preventDefault();
+      nextIndex = enabledItems.length - 1;
+    }
+
+    if (nextIndex >= 0) {
+      const nextItem = enabledItems[nextIndex];
+      const tabButton = tabRefs.current[nextItem.value];
+      tabButton?.focus();
+    }
+  }, [enabledItems]);
+
+  // Generate ARIA props
+  const ariaProps = useMemo(() => {
+    return getWebAriaProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'tablist',
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, accessibilityHidden, accessibilityRole]);
+
   const value = controlledValue !== undefined ? controlledValue : internalValue;
 
   const updateIndicator = () => {
@@ -229,9 +294,10 @@ const TabBar: React.FC<TabBarProps> = ({
   return (
     <div
       {...containerProps}
+      {...ariaProps}
       ref={mergedContainerRef}
       role="tablist"
-      id={id}
+      id={tabListId}
       data-testid={testID}
     >
       {/* Sliding indicator */}
@@ -249,12 +315,15 @@ const TabBar: React.FC<TabBarProps> = ({
             item={item}
             isActive={isActive}
             onClick={() => handleTabClick(item.value, item.disabled)}
+            onKeyDown={(e) => handleKeyDown(e, item.value)}
             size={size}
             type={type}
             pillMode={pillMode}
             iconPosition={iconPosition}
             justify={justify}
             testID={testID}
+            tabId={getTabId(item.value)}
+            panelId={getPanelId(item.value)}
             tabRef={(el) => {
               tabRefs.current[item.value] = el;
               // Update indicator when active tab ref is set

package/src/TabBar/types.ts

@@ -2,6 +2,7 @@ import { Size } from '@idealyst/theme';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
+import { AccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type TabBarSizeVariant = Size;
@@ -19,7 +20,7 @@ export interface TabBarItem {
   disabled?: boolean;
 }
 
-export interface TabBarProps extends ContainerStyleProps {
+export interface TabBarProps extends ContainerStyleProps, AccessibilityProps {
   items: TabBarItem[];
   value?: string;
   defaultValue?: string;

package/src/Table/Table.native.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { View, ScrollView, Text, TouchableOpacity } from 'react-native';
 import { tableStyles } from './Table.styles';
 import type { TableProps, TableColumn } from './types';
+import { getNativeAccessibilityProps } from '../utils/accessibility';
 
 function TableInner<T = any>({
   columns,
@@ -21,7 +22,21 @@ function TableInner<T = any>({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  accessibilityHidden,
 }: TableProps<T>, ref: React.Ref<ScrollView>) {
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeAccessibilityProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityRole: accessibilityRole ?? 'grid',
+      accessibilityHidden,
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityHidden]);
   // Apply variants
   tableStyles.useVariants({
     type,
@@ -54,6 +69,7 @@ function TableInner<T = any>({
       horizontal
       style={[tableStyles.container, style]}
       testID={testID}
+      {...nativeA11yProps}
     >
       <View style={tableStyles.table}>
         {/* Header */}

package/src/Table/Table.web.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { tableStyles } from './Table.styles';
 import type { TableProps, TableColumn } from './types';
+import { getWebAriaProps } from '../utils/accessibility';
 
 function Table<T = any>({
   columns,
@@ -21,7 +22,21 @@ function Table<T = any>({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  accessibilityHidden,
 }: TableProps<T>) {
+  // Generate ARIA props
+  const ariaProps = useMemo(() => {
+    return getWebAriaProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityRole: accessibilityRole ?? 'table',
+      accessibilityHidden,
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityHidden]);
   // Apply variants
   tableStyles.useVariants({
     type,
@@ -50,8 +65,8 @@ function Table<T = any>({
   const isClickable = !!onRowPress;
 
   return (
-    <div {...containerProps} id={id} data-testid={testID}>
-      <table {...tableProps}>
+    <div {...containerProps} {...ariaProps} id={id} data-testid={testID}>
+      <table {...tableProps} role="table">
         <thead {...getWebProps([tableStyles.thead])}>
           <tr>
             {columns.map((column) => {
@@ -67,6 +82,8 @@ function Table<T = any>({
                 <th
                   key={column.key}
                   {...headerCellProps}
+                  scope="col"
+                  aria-sort={column.accessibilitySort}
                   style={{
                     width: column.width,
                   }}

package/src/Table/types.ts

@@ -2,13 +2,14 @@ import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 import type { ReactNode } from 'react';
 import { Size } from '@idealyst/theme';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
+import { AccessibilityProps, SortableAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type TableSizeVariant = Size;
 export type TableType = 'standard' | 'bordered' | 'striped';
 export type TableAlignVariant = 'left' | 'center' | 'right';
 
-export interface TableColumn<T = any> {
+export interface TableColumn<T = any> extends SortableAccessibilityProps {
   key: string;
   title: string;
   dataIndex?: string;
@@ -17,7 +18,7 @@ export interface TableColumn<T = any> {
   align?: TableAlignVariant;
 }
 
-export interface TableProps<T = any> extends ContainerStyleProps {
+export interface TableProps<T = any> extends ContainerStyleProps, AccessibilityProps {
   columns: TableColumn<T>[];
   data: T[];
   type?: TableType;