From 4b2fcee460185a397a9480dbca2d872c3169aaac Mon Sep 17 00:00:00 2001
From: Uruk <contact@uruk.dev>
Date: Mon, 1 Sep 2025 23:19:12 +0200
Subject: [PATCH] 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            |  9 +++++++++
 components/list/ListItem.tsx            | 14 +++++++-------
 components/settings/GestureControls.tsx |  6 +++---
 translations/en.json                    |  5 ++++-
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/components/PasswordInput.tsx b/components/PasswordInput.tsx
index ab4e4c0a..62c16583 100644
--- a/components/PasswordInput.tsx
+++ b/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"}
diff --git a/components/list/ListItem.tsx b/components/list/ListItem.tsx
index 0770bbe5..ae0d2b89 100644
--- a/components/list/ListItem.tsx
+++ b/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
diff --git a/components/settings/GestureControls.tsx b/components/settings/GestureControls.tsx
index f6c1e226..983d4169 100644
--- a/components/settings/GestureControls.tsx
+++ b/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}
diff --git a/translations/en.json b/translations/en.json
index b1ccbb80..c1defa02 100644
--- a/translations/en.json
+++ b/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",