mirror of
https://github.com/streamyfin/streamyfin.git
synced 2026-03-20 16:26:24 +00:00
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.
This commit is contained in:
@@ -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"}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user