From ab3986ba8dcf1a1e772f5ff734976e40a718555b Mon Sep 17 00:00:00 2001
From: "Dawid Wyrkowski (Dawqss)" <dawidwyrkowski@gmail.com>
Date: Sun, 17 Nov 2024 13:33:31 +0100
Subject: [PATCH] feat(): add accessibility info

---
 App.tsx                                       | 18 ++++++----
 app/contexts/AccessibilityInfoContext.tsx     | 34 +++++++++++++++++++
 .../MapCityListScreen/MapCityListScreen.tsx   |  1 +
 .../MapCityListBottomSheet.tsx                | 20 +++++++++--
 .../MapCityListItem/MapCityListItem.tsx       |  5 +++
 .../WeatherDetailsScreen.tsx                  | 10 ++++--
 babel.config.js                               |  3 +-
 tsconfig.json                                 |  3 +-
 8 files changed, 82 insertions(+), 12 deletions(-)
 create mode 100644 app/contexts/AccessibilityInfoContext.tsx

diff --git a/App.tsx b/App.tsx
index ab44081..4cbeb75 100644
--- a/App.tsx
+++ b/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>
   );
 }
diff --git a/app/contexts/AccessibilityInfoContext.tsx b/app/contexts/AccessibilityInfoContext.tsx
new file mode 100644
index 0000000..3dcefc0
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/screens/MapCityListScreen/MapCityListScreen.tsx b/app/screens/MapCityListScreen/MapCityListScreen.tsx
index aef120f..e022367 100644
--- a/app/screens/MapCityListScreen/MapCityListScreen.tsx
+++ b/app/screens/MapCityListScreen/MapCityListScreen.tsx
@@ -37,6 +37,7 @@ export function MapCityListScreen() {
 
   return (
     <MapView
+      attributionEnabled={false}
       style={mapCityListScreenStyles.map}
       onCameraChanged={onCameraChanged}
     >
diff --git a/app/screens/MapCityListScreen/components/MapCityListBottomSheet/MapCityListBottomSheet.tsx b/app/screens/MapCityListScreen/components/MapCityListBottomSheet/MapCityListBottomSheet.tsx
index 8da1f00..5030123 100644
--- a/app/screens/MapCityListScreen/components/MapCityListBottomSheet/MapCityListBottomSheet.tsx
+++ b/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,11 +8,23 @@ 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} />,
@@ -20,7 +32,11 @@ export function MapCityListBottomSheet() {
   );
 
   return (
-    <BottomSheet snapPoints={['20%', '50%', '90%']}>
+    <BottomSheet
+      accessible={false}
+      snapPoints={snapPoints}
+      handleComponent={handleComponent}
+    >
       <BottomSheetView style={mapCityListScreenStyles.contentContainer}>
         <FlatList
           data={cities}
diff --git a/app/screens/MapCityListScreen/components/MapCityListBottomSheet/MapCityListItem/MapCityListItem.tsx b/app/screens/MapCityListScreen/components/MapCityListBottomSheet/MapCityListItem/MapCityListItem.tsx
index cc19181..f99f507 100644
--- a/app/screens/MapCityListScreen/components/MapCityListBottomSheet/MapCityListItem/MapCityListItem.tsx
+++ b/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}
diff --git a/app/screens/WeatherDetailsScreen/WeatherDetailsScreen.tsx b/app/screens/WeatherDetailsScreen/WeatherDetailsScreen.tsx
index c9a320a..82dd589 100644
--- a/app/screens/WeatherDetailsScreen/WeatherDetailsScreen.tsx
+++ b/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>
diff --git a/babel.config.js b/babel.config.js
index b9b108a..3e88ed2 100644
--- a/babel.config.js
+++ b/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'
         }
       }
     ],
diff --git a/tsconfig.json b/tsconfig.json
index 1f36645..fb01df2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,8 @@
       "@screens/*": ["screens/*"],
       "@state/*": ["state/*"],
       "@types/*": ["types/*"],
-      "@utils/*": ["utils/*"]
+      "@utils/*": ["utils/*"],
+      "@contexts/*": ["contexts/*"]
     },
   },
   "include": ["app/**/*.ts", "app/**/*.tsx"],