feat: add accessibility support for password toggle

Enhances password input component with proper accessibility attributes including role, label, hint, and state to improve screen reader experience.

Adjusts minimum height handling for Android platform compatibility in list items and replaces Tailwind classes with inline styles for gesture control settings to ensure consistent styling across platforms.

Adds translation keys for password visibility toggle functionality.

components/PasswordInput.tsx

@@ -1,6 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import type React from "react";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { TouchableOpacity } from "react-native";
 import { Input } from "./common/Input";
 
@@ -31,6 +32,7 @@ type PasswordInputProps =
   | PasswordVisibilityUncontrolled;
 
 export const PasswordInput: React.FC<PasswordInputProps> = (props) => {
+  const { t } = useTranslation();
   const {
     value = "",
     onChangeText,
@@ -90,6 +92,13 @@ export const PasswordInput: React.FC<PasswordInputProps> = (props) => {
           layout === "tv" ? "h-10 justify-center" : ""
         }`}
         style={getTopStyle()}
+        accessible={true}
+        accessibilityRole='button'
+        accessibilityLabel={
+          showPassword ? t("login.hide_password") : t("login.show_password")
+        }
+        accessibilityHint={t("login.toggle_password_visibility")}
+        accessibilityState={{ checked: showPassword }}
       >
         <Ionicons
           name={showPassword ? "eye-off" : "eye"}

components/list/ListItem.tsx

@@ -1,6 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { PropsWithChildren, ReactNode } from "react";
-import { TouchableOpacity, View, type ViewProps } from "react-native";
+import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
 import { Text } from "../common/Text";
 
 interface Props extends ViewProps {
@@ -34,9 +34,9 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
       <TouchableOpacity
         disabled={disabled}
         onPress={onPress}
-        className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[44px] pr-4 pl-4 ${
-          disabled ? "opacity-50" : ""
-        }`}
+        className={`flex flex-row items-center justify-between bg-neutral-900 ${
+          Platform.OS === "android" ? "min-h-12" : "min-h-[44px]"
+        } pr-4 pl-4 ${disabled ? "opacity-50" : ""}`}
         {...(viewProps as any)}
       >
         <ListItemContent
@@ -54,9 +54,9 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
     );
   return (
     <View
-      className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[44px] pr-4 pl-4 ${
-        disabled ? "opacity-50" : ""
-      }`}
+      className={`flex flex-row items-center justify-between bg-neutral-900 ${
+        Platform.OS === "android" ? "min-h-12" : "min-h-[44px]"
+      } pr-4 pl-4 ${disabled ? "opacity-50" : ""}`}
       {...viewProps}
     >
       <ListItemContent

components/settings/GestureControls.tsx

@@ -36,7 +36,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
             "home.settings.gesture_controls.horizontal_swipe_skip_description",
           )}
           disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
-          className='min-h-[72px] py-3'
+          style={{ minHeight: 72, paddingTop: 12, paddingBottom: 12 }}
         >
           <Switch
             value={settings.enableHorizontalSwipeSkip}
@@ -53,7 +53,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
             "home.settings.gesture_controls.left_side_brightness_description",
           )}
           disabled={pluginSettings?.enableLeftSideBrightnessSwipe?.locked}
-          className='min-h-[72px] py-3'
+          style={{ minHeight: 72, paddingTop: 12, paddingBottom: 12 }}
         >
           <Switch
             value={settings.enableLeftSideBrightnessSwipe}
@@ -70,7 +70,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
             "home.settings.gesture_controls.right_side_volume_description",
           )}
           disabled={pluginSettings?.enableRightSideVolumeSwipe?.locked}
-          className='min-h-[72px] py-3'
+          style={{ minHeight: 72, paddingTop: 12, paddingBottom: 12 }}
         >
           <Switch
             value={settings.enableRightSideVolumeSwipe}

translations/en.json

@@ -22,7 +22,10 @@
     "there_is_a_server_error": "There is a server error",
     "an_unexpected_error_occured_did_you_enter_the_correct_url": "An unexpected error occurred. Did you enter the server URL correctly?",
     "too_old_server_text": "Unsupported jellyfin server discovered",
-    "too_old_server_description": "Please update jellyfin to the latest version"
+    "too_old_server_description": "Please update jellyfin to the latest version",
+    "show_password": "Show password",
+    "hide_password": "Hide password",
+    "toggle_password_visibility": "Toggles password visibility"
   },
   "server": {
     "enter_url_to_jellyfin_server": "Enter the URL to your Jellyfin server",