feat: setup eslint-plugin-react-native-a11y for accessibility linting

eslint.config.mjs

@@ -4,6 +4,7 @@ import jest from 'eslint-plugin-jest';
 import prettier from 'eslint-plugin-prettier/recommended';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
+import reactNativeA11y from 'eslint-plugin-react-native-a11y';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import testingLibrary from 'eslint-plugin-testing-library';
 import tseslint from 'typescript-eslint';
@@ -59,6 +60,24 @@ export default tseslint.config(
       'react/self-closing-comp': 'error',
     },
   },
+  {
+    plugins: {
+      'react-native-a11y': reactNativeA11y,
+    },
+    rules: {
+      'react-native-a11y/has-accessibility-hint': 'off',
+      'react-native-a11y/has-accessibility-props': 'error',
+      'react-native-a11y/has-valid-accessibility-actions': 'error',
+      'react-native-a11y/has-valid-accessibility-descriptors': 'error',
+      'react-native-a11y/has-valid-accessibility-ignores-invert-colors': 'error',
+      'react-native-a11y/has-valid-accessibility-live-region': 'error',
+      'react-native-a11y/has-valid-accessibility-role': 'error',
+      'react-native-a11y/has-valid-accessibility-state': 'error',
+      'react-native-a11y/has-valid-accessibility-value': 'error',
+      'react-native-a11y/has-valid-important-for-accessibility': 'error',
+      'react-native-a11y/no-nested-touchables': 'error',
+    },
+  },
   {
     plugins: {
       'simple-import-sort': simpleImportSort,

package.json

@@ -31,7 +31,7 @@
     "@react-navigation/native": "^7.1.33",
     "@react-navigation/native-stack": "^7.14.4",
     "@reduxjs/toolkit": "^2.11.2",
-    "react": "^19.2.3",
+    "react": "19.2.3",
     "react-native": "0.84.1",
     "react-native-background-actions": "^4.0.1",
     "react-native-gesture-handler": "^2.10.1",
@@ -69,13 +69,14 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-native-a11y": "^3.5.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-testing-library": "^7.16.0",
     "husky": "^9.1.7",
     "jest": "^29.6.3",
     "lint-staged": "^16.3.1",
     "prettier": "^3.8.1",
-    "react-test-renderer": "^19.2.3",
+    "react-test-renderer": "19.2.3",
     "redux-mock-store": "^1.5.4",
     "ts-jest": "^29.1.0",
     "typescript": "^5.8.3",
@@ -84,6 +85,11 @@
   "engines": {
     "node": ">=20.19.4"
   },
+  "overrides": {
+    "eslint-plugin-react-native-a11y": {
+      "eslint": "$eslint"
+    }
+  },
   "lint-staged": {
     "*.{ts,tsx}": [
       "eslint --fix",

src/components/molecules/ExpandableCard/ExpandableCard.tsx

@@ -16,7 +16,12 @@ export const ExpandableCard: FunctionComponent<{
   const styles = useMemo(() => makeStyles(colors), [colors]);
 
   return (
-    <Pressable testID={testID} style={styles.card} onPress={onPress}>
+    <Pressable
+      testID={testID}
+      style={styles.card}
+      onPress={onPress}
+      role='button'
+    >
       {header}
       {expanded && <View>{children}</View>}
     </Pressable>

src/components/molecules/InfoSidebar/InfoSidebar.tsx

@@ -65,7 +65,7 @@ export const InfoSidebar: FunctionComponent<InfoSidebarProps> = ({
       onRequestClose={dismiss}
     >
       <View style={styles.overlay}>
-        <Pressable style={styles.backdrop} onPress={dismiss} />
+        <Pressable style={styles.backdrop} onPress={dismiss} role='none' />
         <Animated.View
           testID={INFO_SIDEBAR}
           style={[styles.sidebar, { transform: [{ translateX }] }]}

src/components/organisms/CribStructuralFallback/CribStructuralFallback.tsx

@@ -44,6 +44,7 @@ export const CribStructuralFallback: FunctionComponent<{
           testID={`${CRIB_POSITION_CARD}_${pos}`}
           onPress={() => onTogglePosition(pos)}
           style={styles.resultCard}
+          role='button'
         >
           <Text style={styles.resultText}>
             {POSITION_LABEL} {pos}

src/components/organisms/Keyboard/Keyboard.tsx

@@ -206,6 +206,7 @@ export const Keyboard: FunctionComponent = () => {
             outlineColor={colors.border}
             activeOutlineColor={colors.accent}
             theme={{ colors: { onSurfaceVariant: colors.textSecondary } }}
+            accessibilityRole='search'
           />
           <View style={keyboardStyles.pasteButtonRow}>
             <Button
@@ -261,6 +262,7 @@ export const Keyboard: FunctionComponent = () => {
             outlineColor={colors.border}
             activeOutlineColor={colors.accent}
             theme={{ colors: { onSurfaceVariant: colors.textSecondary } }}
+            accessibilityRole='text'
           />
           <View style={keyboardStyles.pasteButtonRow}>
             <Button

src/components/pages/breakCipher/BreakCipher.tsx

@@ -156,6 +156,7 @@ export const BreakCipher: FunctionComponent = () => {
             background: cribModalVisible ? 'transparent' : colors.surface,
           },
         }}
+        accessibilityRole='text'
       />
 
       <TextInput
@@ -175,6 +176,7 @@ export const BreakCipher: FunctionComponent = () => {
             background: cribModalVisible ? 'transparent' : colors.surface,
           },
         }}
+        accessibilityRole='text'
       />
 
       <Button