fix: accessibility & android talkback

lrtlt · Jan 20, 2025 · 8c9a1ad · 8c9a1ad
1 parent 110002c
commit 8c9a1ad
Show file tree

Hide file tree

Showing 29 changed files with 165 additions and 176 deletions.
diff --git a/app/components/actionButton/ActionButton.tsx b/app/components/actionButton/ActionButton.tsx
@@ -1,16 +1,23 @@
 import React from 'react';
 import {View, StyleSheet} from 'react-native';
-import {BorderlessButton} from 'react-native-gesture-handler';
+import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 
 interface Props {
   onPress: () => void;
+  accessibilityLabel: string;
+  accessibilityHint?: string;
 }
 
 const ActionButton: React.FC<React.PropsWithChildren<Props>> = (props) => {
   return (
-    <BorderlessButton style={styles.root} onPress={props.onPress}>
-      <View style={styles.clickArea}>{props.children}</View>
-    </BorderlessButton>
+    <View accessible={true} accessibilityRole="button" style={styles.root}>
+      <TouchableWithoutFeedback
+        onPress={props.onPress}
+        accessibilityLabel={props.accessibilityLabel}
+        accessibilityHint={props.accessibilityHint}>
+        <View style={styles.clickArea}>{props.children}</View>
+      </TouchableWithoutFeedback>
+    </View>
   );
 };
 

diff --git a/app/components/appBar/AnimatedAppBar.tsx b/app/components/appBar/AnimatedAppBar.tsx
@@ -76,6 +76,7 @@ const AnimatedAppBar: React.FC<Props> = ({translateY, onBackPress, actions, subH
             <HeaderBackButton tintColor={colors.headerTint} onPress={onBackPress} displayMode="minimal" />
           </View>
           <View
+            accessible={false}
             style={{
               height: actionBarHeigh,
               paddingEnd: 4,

diff --git a/app/components/article/article/ArticleBadges.tsx b/app/components/article/article/ArticleBadges.tsx
@@ -21,7 +21,7 @@ const ArticleBadges: React.FC<ArticleBadgesProps> = ({style, article}) => {
   );
 
   return (
-    <View style={[styles.container, style]}>
+    <View style={[styles.container, style]} importantForAccessibility="no">
       {photoCount}
       {photoCount && facebookReactions && <View style={styles.badgeSpace} />}
       {facebookReactions}

diff --git a/app/components/article/article/ArticleComponent.tsx b/app/components/article/article/ArticleComponent.tsx
@@ -50,7 +50,7 @@ const ArticleComponent: React.FC<React.PropsWithChildren<Props>> = ({
   }, [onPress, article]);
 
   const date = Boolean(article.item_date) && Boolean(dateEnabled) && (
-    <TextComponent style={style.categoryTitle} type="secondary">
+    <TextComponent style={style.categoryTitle} type="secondary" importantForAccessibility="no">
       {article.item_date}
     </TextComponent>
   );
@@ -70,7 +70,9 @@ const ArticleComponent: React.FC<React.PropsWithChildren<Props>> = ({
   );
 
   const mediaDuration = Boolean(article.media_duration) && (
-    <TextComponent style={{...style.mediaDurationText, color: themeLight.colors.text}}>
+    <TextComponent
+      style={{...style.mediaDurationText, color: themeLight.colors.text}}
+      importantForAccessibility="no">
       {article.media_duration}
     </TextComponent>
   );
@@ -92,8 +94,12 @@ const ArticleComponent: React.FC<React.PropsWithChildren<Props>> = ({
 
   return (
     <View style={[style.container, styleProp]}>
-      <TouchableDebounce debounceTime={500} onPress={onPressHandler} activeOpacity={0.8}>
-        <View>
+      <TouchableDebounce
+        debounceTime={500}
+        onPress={onPressHandler}
+        activeOpacity={0.8}
+        accessibilityRole="link">
+        <View accessible={false}>
           <View
             // eslint-disable-next-line react-native/no-inline-styles
             style={{

diff --git a/app/components/article/article/ListenCount.tsx b/app/components/article/article/ListenCount.tsx
@@ -26,7 +26,7 @@ const ListenCount: React.FC<ListenCountProps> = ({style, visible, article}) => {
           style,
         ]}>
         <IconAudioReadCount size={16} color={colors.darkIcon} />
-        <TextComponent style={{...styles.countText, color: colors.darkIcon}}>
+        <TextComponent style={{...styles.countText, color: colors.darkIcon}} importantForAccessibility="no">
           {article.read_count}
         </TextComponent>
       </View>

diff --git a/app/components/article/article/ViewCount.tsx b/app/components/article/article/ViewCount.tsx
@@ -26,7 +26,7 @@ const ViewCount: React.FC<ViewCountProps> = ({style, visible = true, article}) =
           style,
         ]}>
         <IconView size={16} color={colors.darkIcon} />
-        <TextComponent style={{...styles.countText, color: colors.darkIcon}}>
+        <TextComponent style={{...styles.countText, color: colors.darkIcon}} importantForAccessibility="no">
           {article.read_count}
         </TextComponent>
       </View>

diff --git a/app/components/badge/Badge.tsx b/app/components/badge/Badge.tsx
@@ -14,6 +14,7 @@ const Badge: React.FC<React.PropsWithChildren<Props>> = ({style, type, label, si
   return (
     <View style={[styles.container, style]}>
       <TextComponent
+        importantForAccessibility="no"
         numberOfLines={2}
         fontFamily={size === 'big' ? 'SourceSansPro-Regular' : 'SourceSansPro-SemiBold'}
         style={{

diff --git a/app/components/drawer/components/DrawerBlockChannels.tsx b/app/components/drawer/components/DrawerBlockChannels.tsx
@@ -30,7 +30,8 @@ const DrawerBlockChannels: React.FC<React.PropsWithChildren<Props>> = ({channels
             key={channel.channel_id}
             style={{
               transform: [{scale: 0.9}, {translateX: -12}],
-            }}>
+            }}
+            accessibilityLabel={channel.channel_title}>
             <DrawerItem
               key={channel.channel_title}
               // text={channel.channel_title}

diff --git a/app/components/drawer/components/DrawerBlockPages.tsx b/app/components/drawer/components/DrawerBlockPages.tsx
@@ -4,6 +4,7 @@ import {MenuItemPage} from '../../../api/Types';
 import DrawerItem from '../../drawerItem/DrawerItem';
 import {IconLituanica} from '../../svg';
 import {MainStackParamList} from '../../../navigation/MainStack';
+import {View} from 'react-native';
 
 interface Props {
   navigation: DrawerNavigationProp<MainStackParamList>;
@@ -19,12 +20,14 @@ const DrawerBlockPages: React.FC<React.PropsWithChildren<Props>> = ({navigation,
   return (
     <>
       {pages.map((page) => (
-        <DrawerItem
-          key={page.name}
-          // text={page.name}
-          iconComponent={<IconLituanica width={120} />}
-          onPress={() => navigation.navigate('Page', {page})}
-        />
+        <View accessibilityLabel={`${page.name} polapis`}>
+          <DrawerItem
+            key={page.name}
+            // text={page.name}
+            iconComponent={<IconLituanica width={120} />}
+            onPress={() => navigation.navigate('Page', {page})}
+          />
+        </View>
       ))}
     </>
   );

diff --git a/app/components/facebookReactions/FacebookReactions.tsx b/app/components/facebookReactions/FacebookReactions.tsx
@@ -15,12 +15,14 @@ const FacebookReactions: React.FC<React.PropsWithChildren<Props>> = ({style, cou
   const textSizeMultiplier = useSettingsStore((state) => state.textSizeMultiplier);
 
   return (
-    <View style={{...styles.root, ...style}}>
+    <View style={{...styles.root, ...style}} importantForAccessibility="no">
       <View style={{...styles.container, borderColor: colors.buttonBorder}}>
         <View style={styles.iconHolder}>
           <IconFacebook size={16 + textSizeMultiplier} color={colors.facebook} />
         </View>
-        <TextComponent style={{...styles.countText, color: colors.facebook}}>{count}</TextComponent>
+        <TextComponent style={{...styles.countText, color: colors.facebook}} importantForAccessibility="no">
+          {count}
+        </TextComponent>
       </View>
     </View>
   );

diff --git a/app/components/notificationsModal/NotificationsModal.tsx b/app/components/notificationsModal/NotificationsModal.tsx
@@ -48,6 +48,7 @@ const NotificationsModal: React.FC<NotificationsModalProps> = ({visible, onClose
 
   return (
     <Modal
+      accessible={false}
       style={{
         ...styles.modal,
         // backgroundColor: colors.slugBackground,
@@ -71,7 +72,11 @@ const NotificationsModal: React.FC<NotificationsModalProps> = ({visible, onClose
             flexDirection: 'row',
           }}>
           <View style={{alignItems: 'flex-end'}}>
-            <TouchableDebounce onPress={() => onClose()}>
+            <TouchableDebounce
+              onPress={() => onClose()}
+              accessibilityLabel="Uždaryti"
+              accessibilityHint="Uždaryti dialogo langą"
+              accessibilityLanguage="lt">
               <View style={{justifyContent: 'flex-start'}}>
                 <Text
                   style={[
@@ -87,9 +92,29 @@ const NotificationsModal: React.FC<NotificationsModalProps> = ({visible, onClose
           </View>
         </View>
         <PagerView ref={pagerRef} style={styles.flex} initialPage={pageIndex} scrollEnabled={false}>
-          <Page1 />
-          <Page2 />
-          <Page3 />
+          <View
+            accessibilityState={{
+              selected: pageIndex === 0,
+              disabled: pageIndex !== 0,
+            }}>
+            <Page1 />
+          </View>
+
+          <View
+            accessibilityState={{
+              selected: pageIndex === 1,
+              disabled: pageIndex !== 1,
+            }}>
+            <Page2 />
+          </View>
+
+          <View
+            accessibilityState={{
+              selected: pageIndex === 2,
+              disabled: pageIndex !== 2,
+            }}>
+            <Page3 />
+          </View>
         </PagerView>
         <View
           style={{
@@ -110,7 +135,10 @@ const NotificationsModal: React.FC<NotificationsModalProps> = ({visible, onClose
           </View>
           <PagerDots count={3} currentIndex={pageIndex} />
           <View style={{flex: 1, alignItems: 'flex-end'}}>
-            <TouchableDebounce onPress={increment}>
+            <TouchableDebounce
+              onPress={increment}
+              accessibilityLabel="Toliau"
+              accessibilityHint="Eiti į kitą puslapį">
               <View style={{justifyContent: 'flex-start'}}>
                 <Text
                   style={[

diff --git a/app/components/photoCount/PhotoCount.tsx b/app/components/photoCount/PhotoCount.tsx
@@ -19,7 +19,9 @@ const PhotoCount: React.FC<React.PropsWithChildren<Props>> = ({style, count}) =>
       <View style={styles.iconHolder}>
         <IconPhotoCamera size={18 + textSizeMultiplier} color={colors.darkIcon} />
       </View>
-      <TextComponent style={{...styles.countText, color: colors.darkIcon}}>{count}</TextComponent>
+      <TextComponent style={{...styles.countText, color: colors.darkIcon}} importantForAccessibility="no">
+        {count}
+      </TextComponent>
     </View>
   );
 };

diff --git a/app/components/scrollingChannels/channel_v2/Channel_v2.tsx b/app/components/scrollingChannels/channel_v2/Channel_v2.tsx
@@ -47,7 +47,10 @@ const ChannelV2: React.FC<React.PropsWithChildren<Props>> = ({data, onPress}) =>
 
   return (
     <Box flex={'fluid'}>
-      <TouchableDebounce debounceTime={500} onPress={onPressHandler}>
+      <TouchableDebounce
+        debounceTime={500}
+        onPress={onPressHandler}
+        accessibilityLabel={`${(data as TVChannel).channel_title ?? ''} ${data.title}`}>
         <View
           style={{
             height: '100%',
@@ -64,7 +67,7 @@ const ChannelV2: React.FC<React.PropsWithChildren<Props>> = ({data, onPress}) =>
             {getIconForChannel(data.channel, {height: 24}, dark ? colors.text : colorsSet.secondary)}
           </View>
           <View style={{flexDirection: 'row', alignItems: 'center', gap: 8}}>
-            <TextComponent style={{...styles.timeText, color: colors.text}}>
+            <TextComponent style={{...styles.timeText, color: colors.text}} importantForAccessibility="no">
               {data.time_start + ' - ' + data.time_end}
             </TextComponent>
             {bottomBarContainer}

diff --git a/app/components/sectionHeader/SectionHeader.tsx b/app/components/sectionHeader/SectionHeader.tsx
@@ -17,7 +17,16 @@ const SectionHeader: React.FC<React.PropsWithChildren<Props>> = ({category, colo
       <DefaultHeader title={category.name} />
     );
 
-  return onPress ? <TouchableOpacity onPress={onPress}>{header}</TouchableOpacity> : header;
+  return onPress ? (
+    <TouchableOpacity
+      onPress={onPress}
+      accessibilityLabel={category.name}
+      accessibilityHint="Atidaryti kategoriją">
+      {header}
+    </TouchableOpacity>
+  ) : (
+    header
+  );
 };
 
 export default SectionHeader;
diff --git a/app/components/settingsToggleButton/SettingsToggleButton.tsx b/app/components/settingsToggleButton/SettingsToggleButton.tsx
@@ -1,24 +1,30 @@
 import React from 'react';
 import {View, StyleSheet, ViewStyle} from 'react-native';
-import {RectButton} from 'react-native-gesture-handler';
 import {useTheme} from '../../Theme';
+import TouchableDebounce from '../touchableDebounce/TouchableDebounce';
 
 interface Props {
   style?: ViewStyle;
   selected: boolean;
   onPress: () => void;
+  accessibilityLabel: string;
 }
 const ToggleButton: React.FC<React.PropsWithChildren<Props>> = ({style, selected, onPress, ...props}) => {
   const {colors} = useTheme();
 
   const backgroundColor = selected ? colors.toggleButtonSelected : colors.background;
 
   return (
-    <View style={style}>
-      <View style={{...styles.container, backgroundColor, borderColor: colors.buttonBorder}}>
-        <RectButton style={styles.touchArea} rippleColor={colors.ripple} onPress={onPress}>
+    <View style={style} accessible={false}>
+      <View
+        style={{...styles.container, backgroundColor, borderColor: colors.buttonBorder}}
+        accessible={false}>
+        <TouchableDebounce
+          style={styles.touchArea}
+          onPress={onPress}
+          accessibilityLabel={props.accessibilityLabel}>
           {props.children}
-        </RectButton>
+        </TouchableDebounce>
       </View>
     </View>
   );

diff --git a/app/components/touchableDebounce/TouchableDebounce.tsx b/app/components/touchableDebounce/TouchableDebounce.tsx
@@ -11,7 +11,8 @@ type Props = TouchableOpacityProps &
 const noOp = () => {};
 
 const TouchableDebounce: React.FC<React.PropsWithChildren<Props>> = ({
-  debounceTime,
+  debounceTime = 500,
+  activeOpacity = 0.7,
   onPress,
   children,
   ...rest
@@ -26,14 +27,10 @@ const TouchableDebounce: React.FC<React.PropsWithChildren<Props>> = ({
   );
 
   return (
-    <TouchableOpacity {...rest} onPress={debouncedOnPress}>
+    <TouchableOpacity {...rest} onPress={debouncedOnPress} activeOpacity={activeOpacity}>
       {children}
     </TouchableOpacity>
   );
 };
 
-TouchableDebounce.defaultProps = {
-  activeOpacity: 0.7,
-  debounceTime: 500,
-};
 export default TouchableDebounce;
diff --git a/app/navigation/MainStack.tsx b/app/navigation/MainStack.tsx
@@ -70,6 +70,10 @@ const MainDrawer = createDrawerNavigator<MainDrawerParamList>();
 const MainDrawerNavigator: React.FC<React.PropsWithChildren<{}>> = () => {
   return (
     <MainDrawer.Navigator
+      screenOptions={{
+        overlayAccessibilityLabel: 'Uždaryti meniu',
+        freezeOnBlur: true,
+      }}
       drawerContent={(props) => (
         <Drawer navigation={props.navigation as unknown as DrawerNavigationProp<MainStackParamList>} />
       )}>
@@ -100,6 +104,7 @@ const SearchDrawerNavigator: React.FC<React.PropsWithChildren<{}>> = () => {
       <SearchDrawer.Navigator
         backBehavior="initialRoute"
         screenOptions={{
+          overlayAccessibilityLabel: 'Uždaryti meniu',
           drawerPosition: 'right',
           drawerType: 'slide',
           drawerHideStatusBarOnOpen: false,

diff --git a/app/screens/article/header/Header.tsx b/app/screens/article/header/Header.tsx
@@ -37,7 +37,11 @@ const ArticleHeader: React.FC<React.PropsWithChildren<Props>> = ({
   }, [isText2SpeechPlaying, onPlayStateChange]);
 
   const text2SpeechComponent = text2SpeechEnabled ? (
-    <TouchableDebounce style={styles.text2SpeechContainer} onPress={text2SpeechPlayHander}>
+    <TouchableDebounce
+      style={styles.text2SpeechContainer}
+      onPress={text2SpeechPlayHander}
+      accessibilityLabel="Skaityti straipsnį garsu"
+      accessibilityLanguage="lt">
       <View
         style={{
           ...styles.iconButton,