feat(): add accessibility info

App.tsx

@@ -1,9 +1,13 @@
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-
 import React, { ReactElement } from 'react';
+import { AccessibilityInfo } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { Provider } from 'react-redux';
+
 import { store } from '@state/store';
-import { MainRouterNavigation } from './app/navigation/MainRouter.tsx';
+import { MainRouterNavigation } from '@navigation/MainRouter.tsx';
+import { AccessibilityInfoProvider } from '@contexts/AccessibilityInfoContext';
+
+AccessibilityInfo.isScreenReaderEnabled().then();
 
 /**
  * This is main app point
@@ -12,9 +16,11 @@ import { MainRouterNavigation } from './app/navigation/MainRouter.tsx';
 function App(): ReactElement {
   return (
     <GestureHandlerRootView>
-      <Provider store={store}>
-        <MainRouterNavigation />
-      </Provider>
+      <AccessibilityInfoProvider>
+        <Provider store={store}>
+          <MainRouterNavigation />
+        </Provider>
+      </AccessibilityInfoProvider>
     </GestureHandlerRootView>
   );
 }

app/contexts/AccessibilityInfoContext.tsx

@@ -0,0 +1,34 @@
+import React, { createContext, ReactNode, useMemo, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+interface AccessibilityInfoContextProps {
+  isScreenReaderEnabled: boolean;
+}
+export const AccessibilityInfoContext =
+  createContext<AccessibilityInfoContextProps>({
+    isScreenReaderEnabled: false
+  });
+
+interface AccessibilityInfoProviderProps {
+  children: ReactNode | null;
+}
+
+export function AccessibilityInfoProvider({
+  children
+}: AccessibilityInfoProviderProps) {
+  const [isScreenReaderEnabled, setIsScreenReaderEnabled] = useState(false);
+  const contextValue = useMemo(
+    () => ({
+      isScreenReaderEnabled
+    }),
+    [isScreenReaderEnabled]
+  );
+
+  AccessibilityInfo.isScreenReaderEnabled().then(setIsScreenReaderEnabled);
+
+  return (
+    <AccessibilityInfoContext.Provider value={contextValue}>
+      {children}
+    </AccessibilityInfoContext.Provider>
+  );
+}

app/screens/MapCityListScreen/MapCityListScreen.tsx

@@ -37,6 +37,7 @@ export function MapCityListScreen() {
 
   return (
     <MapView
+      attributionEnabled={false}
       style={mapCityListScreenStyles.map}
       onCameraChanged={onCameraChanged}
     >

app/screens/MapCityListScreen/components/MapCityListBottomSheet/MapCityListBottomSheet.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
 import { FlatList } from 'react-native-gesture-handler';
 
@@ -8,19 +8,35 @@ import { weatherCityListSelector } from '@state/features/weatherCityList/weather
 import { MapCityListItem } from '@screens/MapCityListScreen/components/MapCityListBottomSheet/MapCityListItem/MapCityListItem.tsx';
 import type { ListRenderItem } from '@react-native/virtualized-lists';
 import { WeatherItem } from '@http/types.ts';
+import { AccessibilityInfoContext } from '@contexts/AccessibilityInfoContext.tsx';
 
 const keyExtractor = (item: WeatherItem) => String(item.id);
 
 export function MapCityListBottomSheet() {
   const cities = useAppSelector(weatherCityListSelector);
+  const { isScreenReaderEnabled } = useContext(AccessibilityInfoContext);
+
+  const handleComponent = useMemo(
+    () => (isScreenReaderEnabled ? () => null : undefined),
+    [isScreenReaderEnabled]
+  );
+
+  const snapPoints = useMemo(
+    () => (isScreenReaderEnabled ? ['95%'] : ['20%', '50%', '90%']),
+    [isScreenReaderEnabled]
+  );
 
   const renderItem: ListRenderItem<WeatherItem> = useCallback(
     ({ ...info }) => <MapCityListItem {...info} />,
     []
   );
 
   return (
-    <BottomSheet snapPoints={['20%', '50%', '90%']}>
+    <BottomSheet
+      accessible={false}
+      snapPoints={snapPoints}
+      handleComponent={handleComponent}
+    >
       <BottomSheetView style={mapCityListScreenStyles.contentContainer}>
         <FlatList
           data={cities}

app/screens/MapCityListScreen/components/MapCityListBottomSheet/MapCityListItem/MapCityListItem.tsx

@@ -32,6 +32,11 @@ export function MapCityListItem({
     <TouchableOpacity
       style={mapCityListItemStyles.container}
       onPress={onItemPress}
+      accessible
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      accessibilityRole="button"
+      accessibilityLabel={`${name}..${temp}°C`}
     >
       <Image
         source={source}

app/screens/WeatherDetailsScreen/WeatherDetailsScreen.tsx

@@ -94,7 +94,10 @@ export function WeatherDetailsScreen({
       <View style={weatherDetailsScreensStyles.titleContainer}>
         <View>
           <Text style={weatherDetailsScreensStyles.title}>{name}</Text>
-          <Text style={weatherDetailsScreensStyles.subTitle}>
+          <Text
+            style={weatherDetailsScreensStyles.subTitle}
+            accessibilityLanguage="EN"
+          >
             {description}
           </Text>
         </View>
@@ -106,7 +109,10 @@ export function WeatherDetailsScreen({
             style={weatherDetailsScreensStyles.rowNameValue}
             key={rowName + value}
           >
-            <Text style={weatherDetailsScreensStyles.textValueName}>
+            <Text
+              style={weatherDetailsScreensStyles.textValueName}
+              accessibilityLanguage="EN"
+            >
               {rowName}
             </Text>
             <Text style={weatherDetailsScreensStyles.textValue}>{value}</Text>

babel.config.js

@@ -19,7 +19,8 @@ module.exports = {
           '@screens': './app/screens',
           '@state': './app/state',
           '@types': './app/types',
-          '@utils': './app/utils'
+          '@utils': './app/utils',
+          '@contexts': './app/contexts'
         }
       }
     ],

tsconfig.json

@@ -13,7 +13,8 @@
       "@screens/*": ["screens/*"],
       "@state/*": ["state/*"],
       "@types/*": ["types/*"],
-      "@utils/*": ["utils/*"]
+      "@utils/*": ["utils/*"],
+      "@contexts/*": ["contexts/*"]
     },
   },
   "include": ["app/**/*.ts", "app/**/*.tsx"],