Implement Mobile Accessibility

package.json

@@ -30,6 +30,7 @@
     "expo-font": "~14.0.11",
     "expo-haptics": "~15.0.8",
     "expo-image": "~3.0.11",
+    "expo-image-picker": "^55.0.13",
     "expo-linear-gradient": "^15.0.8",
     "expo-linking": "~8.0.11",
     "expo-local-authentication": "~17.0.8",
@@ -54,6 +55,7 @@
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
+    "react-native-svg": "^15.15.4",
     "react-native-web": "~0.21.0",
     "react-native-worklets": "0.5.1",
     "socket.io-client": "^4.8.3",

src/components/mobile/AccessibleButton.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  TouchableOpacityProps,
+  StyleSheet,
+  ViewStyle,
+  StyleProp,
+} from 'react-native';
+import { getAccessibilityProps } from '../../utils/accessibility';
+
+interface AccessibleButtonProps extends TouchableOpacityProps {
+  label: string;
+  hint?: string;
+  role?: 'button' | 'link';
+  /**
+   * Optional custom styles for the button.
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A reusable accessible button component for TeachLink mobile.
+ * Ensures a minimum touch target of 44x44 and provides consistent accessibility props.
+ */
+export const AccessibleButton: React.FC<AccessibleButtonProps> = ({
+  label,
+  hint,
+  role = 'button',
+  children,
+  style,
+  containerStyle,
+  disabled,
+  activeOpacity = 0.7,
+  ...rest
+}: AccessibleButtonProps) => {
+  const accessibilityProps = getAccessibilityProps(label, role as 'button' | 'link', hint, {
+    disabled: !!disabled,
+  });
+
+  return (
+    <TouchableOpacity
+      {...rest}
+      {...accessibilityProps}
+      disabled={disabled}
+      activeOpacity={activeOpacity}
+      style={[styles.base, containerStyle, style]}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    minWidth: 44,
+    minHeight: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});