@idealyst/components 1.1.4 → 1.1.5

package/src/TextArea/TextArea.native.tsx

@@ -1,8 +1,9 @@
-import React, { useState, forwardRef } from 'react';
+import React, { useState, forwardRef, useMemo } from 'react';
 import { View, TextInput, NativeSyntheticEvent, TextInputContentSizeChangeEventData } from 'react-native';
 import { textAreaStyles } from './TextArea.styles';
 import Text from '../Text';
 import type { TextAreaProps } from './types';
+import { getNativeFormAccessibilityProps } from '../utils/accessibility';
 
 const TextArea = forwardRef<TextInput, TextAreaProps>(({
   value: controlledValue,
@@ -29,6 +30,17 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(({
   textareaStyle,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityLabelledBy,
+  accessibilityDescribedBy,
+  accessibilityRequired,
+  accessibilityInvalid,
+  accessibilityErrorMessage,
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
@@ -36,6 +48,42 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(({
   const value = controlledValue !== undefined ? controlledValue : internalValue;
   const hasError = Boolean(error);
 
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    const computedLabel = accessibilityLabel ?? label ?? placeholder;
+    const isInvalid = accessibilityInvalid ?? hasError;
+
+    return getNativeFormAccessibilityProps({
+      accessibilityLabel: computedLabel,
+      accessibilityHint: accessibilityHint ?? (error || helperText),
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'textbox',
+      accessibilityLabelledBy,
+      accessibilityDescribedBy,
+      accessibilityRequired,
+      accessibilityInvalid: isInvalid,
+      accessibilityErrorMessage: accessibilityErrorMessage ?? error,
+    });
+  }, [
+    accessibilityLabel,
+    label,
+    placeholder,
+    accessibilityHint,
+    error,
+    helperText,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityRequired,
+    accessibilityInvalid,
+    hasError,
+    accessibilityErrorMessage,
+  ]);
+
   // Apply variants
   textAreaStyles.useVariants({
     size,
@@ -90,6 +138,7 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(({
       <View style={textAreaStyles.textareaContainer}>
         <TextInput
           ref={ref}
+          {...nativeA11yProps}
           style={[
             textAreaStyles.textarea({ intent, disabled, hasError }),
             {

package/src/TextArea/TextArea.web.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useRef, useEffect, forwardRef } from 'react';
+import React, { useState, useRef, useEffect, forwardRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { textAreaStyles } from './TextArea.styles';
 import type { TextAreaProps } from './types';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { getWebFormAriaProps, combineIds, generateAccessibilityId } from '../utils/accessibility';
 
 const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
   value: controlledValue,
@@ -30,6 +31,23 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
   textareaStyle,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
+  accessibilityLabelledBy,
+  accessibilityDescribedBy,
+  accessibilityControls,
+  accessibilityExpanded,
+  accessibilityPressed,
+  accessibilityOwns,
+  accessibilityHasPopup,
+  accessibilityRequired,
+  accessibilityInvalid,
+  accessibilityErrorMessage,
+  accessibilityAutoComplete,
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -37,6 +55,64 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
   const value = controlledValue !== undefined ? controlledValue : internalValue;
   const hasError = Boolean(error);
 
+  // Generate unique IDs for accessibility
+  const textareaId = useMemo(() => id || generateAccessibilityId('textarea'), [id]);
+  const errorId = useMemo(() => `${textareaId}-error`, [textareaId]);
+  const helperId = useMemo(() => `${textareaId}-helper`, [textareaId]);
+  const labelId = useMemo(() => label ? `${textareaId}-label` : undefined, [textareaId, label]);
+
+  // Generate ARIA props for the textarea element
+  const ariaProps = useMemo(() => {
+    const isInvalid = accessibilityInvalid ?? hasError;
+    const describedByIds = combineIds(
+      accessibilityDescribedBy,
+      error ? errorId : helperText ? helperId : undefined
+    );
+
+    return getWebFormAriaProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'textbox',
+      accessibilityLabelledBy: accessibilityLabelledBy ?? labelId,
+      accessibilityDescribedBy: describedByIds,
+      accessibilityControls,
+      accessibilityExpanded,
+      accessibilityPressed,
+      accessibilityOwns,
+      accessibilityHasPopup,
+      accessibilityRequired,
+      accessibilityInvalid: isInvalid,
+      accessibilityErrorMessage: accessibilityErrorMessage ?? (error ? errorId : undefined),
+      accessibilityAutoComplete,
+    });
+  }, [
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    labelId,
+    accessibilityDescribedBy,
+    error,
+    errorId,
+    helperText,
+    helperId,
+    accessibilityControls,
+    accessibilityExpanded,
+    accessibilityPressed,
+    accessibilityOwns,
+    accessibilityHasPopup,
+    accessibilityRequired,
+    accessibilityInvalid,
+    hasError,
+    accessibilityErrorMessage,
+    accessibilityAutoComplete,
+  ]);
+
   // Apply variants
   textAreaStyles.useVariants({
     size,
@@ -115,12 +191,14 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
   return (
     <div {...containerProps} ref={mergedRef} id={id} data-testid={testID}>
       {label && (
-        <label {...labelProps}>{label}</label>
+        <label {...labelProps} id={labelId} htmlFor={textareaId}>{label}</label>
       )}
 
       <div {...textareaContainerProps}>
         <textarea
           {...computedTextareaProps}
+          {...ariaProps}
+          id={textareaId}
           ref={mergedTextareaRef}
           value={value}
           onChange={handleChange}
@@ -128,8 +206,6 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
           disabled={disabled}
           rows={autoGrow ? undefined : rows}
           maxLength={maxLength}
-          aria-invalid={hasError}
-          aria-describedby={error ? `${testID}-error` : helperText ? `${testID}-helper` : undefined}
         />
       </div>
 
@@ -137,12 +213,12 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
         <div {...footerProps}>
           <div style={{ flex: 1 }}>
             {error && (
-              <span {...helperTextProps} id={`${testID}-error`}>
+              <span {...helperTextProps} id={errorId} role="alert">
                 {error}
               </span>
             )}
             {!error && helperText && (
-              <span {...helperTextProps} id={`${testID}-helper`}>
+              <span {...helperTextProps} id={helperId}>
                 {helperText}
               </span>
             )}

package/src/TextArea/types.ts

@@ -1,13 +1,14 @@
 import { Intent, Size } from '@idealyst/theme';
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { FormInputStyleProps } from '../utils/viewStyleProps';
+import { FormAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type TextAreaIntentVariant = Intent;
 export type TextAreaSizeVariant = Size;
 export type TextAreaResizeVariant = 'none' | 'vertical' | 'horizontal' | 'both';
 
-export interface TextAreaProps extends FormInputStyleProps {
+export interface TextAreaProps extends FormInputStyleProps, FormAccessibilityProps {
   value?: string;
   defaultValue?: string;
   onChange?: (value: string) => void;

package/src/Tooltip/Tooltip.native.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useRef, useEffect, isValidElement, cloneElement, forwardRef } from 'react';
+import React, { useState, useRef, useEffect, isValidElement, cloneElement, forwardRef, useMemo } from 'react';
 import { View, Modal, Text, Pressable } from 'react-native';
 import { tooltipStyles } from './Tooltip.styles';
 import type { TooltipProps } from './types';
+import { getNativeAccessibilityProps } from '../utils/accessibility';
 
 const Tooltip = forwardRef<View, TooltipProps>(({
   content,
@@ -13,7 +14,23 @@ const Tooltip = forwardRef<View, TooltipProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
 }, ref) => {
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeAccessibilityProps({
+      accessibilityLabel,
+      accessibilityHint: accessibilityHint ?? (typeof content === 'string' ? content : undefined),
+      accessibilityDisabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'none',
+    });
+  }, [accessibilityLabel, accessibilityHint, content, accessibilityDisabled, accessibilityHidden, accessibilityRole]);
   const [visible, setVisible] = useState(false);
   const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0, width: 0 });
   const triggerRef = useRef<any>(null);
@@ -127,7 +144,7 @@ const Tooltip = forwardRef<View, TooltipProps>(({
 
   return (
     <>
-      <View ref={ref} nativeID={id} collapsable={false} style={style}>
+      <View ref={ref} nativeID={id} collapsable={false} style={style} {...nativeA11yProps}>
         {trigger}
       </View>
 

package/src/Tooltip/Tooltip.web.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { tooltipStyles } from './Tooltip.styles';
 import type { TooltipProps } from './types';
 import { PositionedPortal } from '../internal/PositionedPortal';
+import { getWebAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
 const Tooltip: React.FC<TooltipProps> = ({
   content,
@@ -14,11 +15,32 @@ const Tooltip: React.FC<TooltipProps> = ({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
 }) => {
   const [visible, setVisible] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const anchorRef = useRef<HTMLDivElement>(null);
 
+  // Generate unique ID for tooltip
+  const tooltipId = useMemo(() => id ? `${id}-tooltip` : generateAccessibilityId('tooltip'), [id]);
+  const triggerId = useMemo(() => id || generateAccessibilityId('tooltip-trigger'), [id]);
+
+  // Generate ARIA props for trigger
+  const ariaProps = useMemo(() => {
+    return getWebAriaProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled,
+      accessibilityHidden,
+      accessibilityRole,
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, accessibilityHidden, accessibilityRole]);
+
   // Apply variants - PositionedPortal handles positioning and visibility
   tooltipStyles.useVariants({
     size,
@@ -46,6 +68,28 @@ const Tooltip: React.FC<TooltipProps> = ({
     setVisible(false);
   };
 
+  // Keyboard accessibility - show on focus, hide on blur
+  const handleFocus = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setVisible(true);
+  };
+
+  const handleBlur = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setVisible(false);
+  };
+
+  // Handle Escape key to dismiss tooltip
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape' && visible) {
+      setVisible(false);
+    }
+  };
+
   useEffect(() => {
     return () => {
       if (timeoutRef.current) {
@@ -59,9 +103,15 @@ const Tooltip: React.FC<TooltipProps> = ({
       <div
         ref={anchorRef}
         {...containerProps}
+        {...ariaProps}
+        id={triggerId}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
-        id={id}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        tabIndex={0}
+        aria-describedby={visible ? tooltipId : undefined}
         data-testid={testID}
       >
         {children}
@@ -76,7 +126,9 @@ const Tooltip: React.FC<TooltipProps> = ({
       >
         <div
           {...tooltipContentProps}
+          id={tooltipId}
           role="tooltip"
+          aria-hidden={!visible}
           data-testid={`${testID}-tooltip`}
         >
           {content}

package/src/Tooltip/types.ts

@@ -1,13 +1,14 @@
 import { Intent, Size } from '@idealyst/theme';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { BaseProps } from '../utils/viewStyleProps';
+import { AccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type TooltipIntentVariant = Intent;
 export type TooltipSizeVariant = Size;
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 
-export interface TooltipProps extends BaseProps {
+export interface TooltipProps extends BaseProps, AccessibilityProps {
   content: string | React.ReactNode;
   children: React.ReactNode;
   placement?: TooltipPlacement;

package/src/Video/Video.native.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { videoStyles } from './Video.styles';
 import type { VideoProps, VideoSource } from './types';
+import { getNativeAccessibilityProps } from '../utils/accessibility';
 
 // Import react-native-video - it's a peer dependency
 let RNVideo: any;
@@ -33,11 +34,25 @@ const Video = React.forwardRef<View, VideoProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  accessibilityHidden,
 }, ref) => {
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeAccessibilityProps({
+      accessibilityLabel: accessibilityLabel ?? 'Video player',
+      accessibilityHint,
+      accessibilityRole: accessibilityRole ?? 'none',
+      accessibilityHidden,
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityHidden]);
 
   if (!RNVideo) {
     return (
-      <View ref={ref} nativeID={id} style={[videoStyles.container, { aspectRatio, borderRadius }, style]} testID={testID}>
+      <View ref={ref} nativeID={id} style={[videoStyles.container, { aspectRatio, borderRadius }, style]} testID={testID} {...nativeA11yProps}>
         <View style={videoStyles.fallback}>
           {/* Fallback when react-native-video is not installed */}
         </View>
@@ -80,7 +95,7 @@ const Video = React.forwardRef<View, VideoProps>(({
   };
 
   return (
-    <View ref={ref} nativeID={id} style={containerStyle} testID={testID}>
+    <View ref={ref} nativeID={id} style={containerStyle} testID={testID} {...nativeA11yProps}>
       <RNVideo
         source={videoSource}
         poster={poster}

package/src/Video/Video.web.tsx

@@ -1,8 +1,9 @@
-import React, { useRef } from 'react';
+import React, { useRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { videoStyles } from './Video.styles';
 import type { VideoProps, VideoSource } from './types';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { getWebAriaProps } from '../utils/accessibility';
 
 const Video: React.FC<VideoProps> = ({
   source,
@@ -26,7 +27,21 @@ const Video: React.FC<VideoProps> = ({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  accessibilityHidden,
 }) => {
+  // Generate ARIA props
+  const ariaProps = useMemo(() => {
+    return getWebAriaProps({
+      accessibilityLabel: accessibilityLabel ?? 'Video player',
+      accessibilityHint,
+      accessibilityRole,
+      accessibilityHidden,
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityHidden]);
   const videoRef = useRef<HTMLVideoElement>(null);
 
   const containerProps = getWebProps([videoStyles.container, style as any]);
@@ -85,6 +100,7 @@ const Video: React.FC<VideoProps> = ({
   return (
     <div
       {...containerProps}
+      {...ariaProps}
       style={containerStyle}
       id={id}
       data-testid={testID}

package/src/Video/types.ts

@@ -1,12 +1,13 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 import { BaseProps } from '../utils/viewStyleProps';
+import { AccessibilityProps } from '../utils/accessibility';
 
 export interface VideoSource {
   uri: string;
   type?: string;
 }
 
-export interface VideoProps extends BaseProps {
+export interface VideoProps extends BaseProps, AccessibilityProps {
   source: VideoSource | string;
   poster?: string;
   width?: number | string;

package/src/examples/InputExamples.tsx

@@ -186,6 +186,59 @@ export const InputExamples = () => {
           />
         </View>
       </View>
+
+      {/* Accessibility Examples */}
+      <View gap="md">
+        <Text typography="subtitle1">Accessibility</Text>
+        <View gap="sm" style={{ gap: 10 }}>
+          {/* Basic accessible input with label */}
+          <Input
+            leftIcon="email"
+            value={emailValue}
+            onChangeText={setEmailValue}
+            placeholder="Email address"
+            inputType="email"
+            accessibilityLabel="Email address"
+            accessibilityRequired
+          />
+          <Text id="email-helper" typography="caption" color="muted">
+            Enter your work email address
+          </Text>
+
+          {/* Input with error state and accessible error association */}
+          <Input
+            leftIcon="lock"
+            value={passwordValue}
+            onChangeText={setPasswordValue}
+            placeholder="Password"
+            inputType="password"
+            accessibilityLabel="Password"
+            accessibilityDescribedBy="password-helper"
+            accessibilityInvalid={passwordValue.length > 0 && passwordValue.length < 8}
+            accessibilityRequired
+            hasError={passwordValue.length > 0 && passwordValue.length < 8}
+          />
+          <Text
+            id="password-helper"
+            typography="caption"
+            color={passwordValue.length > 0 && passwordValue.length < 8 ? 'error' : 'muted'}
+          >
+            {passwordValue.length > 0 && passwordValue.length < 8
+              ? 'Password must be at least 8 characters'
+              : 'Enter a secure password'}
+          </Text>
+
+          {/* Disabled input with accessibility indication */}
+          <Input
+            leftIcon="account"
+            value="readonly@example.com"
+            placeholder="Readonly input"
+            disabled
+            accessibilityLabel="Email (read-only)"
+            accessibilityDisabled
+          />
+        </View>
+      </View>
     </View>
     </Screen>
   );

package/src/examples/ListExamples.tsx

@@ -134,6 +134,40 @@ export const ListExamples: React.FC = () => {
         </List>
       </View>
 
+      <View gap="md">
+        <Text typography="h5">Custom Icon Colors</Text>
+        <List type="bordered">
+          <ListItem
+            label="Primary Color"
+            leading="home"
+            trailing="chevron-right"
+            iconColor="primary"
+            onPress={() => {}}
+          />
+          <ListItem
+            label="Success Color"
+            leading="check-circle"
+            trailing="chevron-right"
+            iconColor="success"
+            onPress={() => {}}
+          />
+          <ListItem
+            label="Error Color"
+            leading="alert-circle"
+            trailing="chevron-right"
+            iconColor="error"
+            onPress={() => {}}
+          />
+          <ListItem
+            label="Warning Color"
+            leading="alert"
+            trailing="chevron-right"
+            iconColor="warning"
+            onPress={() => {}}
+          />
+        </List>
+      </View>
+
       <View gap="md">
         <Text typography="h5">Navigation Sidebar</Text>
         <List type="bordered">

package/src/internal/index.ts

@@ -0,0 +1,2 @@
+// Internal components - not part of public API, but exported for use by other @idealyst packages
+export { PositionedPortal } from './PositionedPortal';