From 7e45d3d2da51f8a2ce15034a69390148031c4ab6 Mon Sep 17 00:00:00 2001
From: lunars97 <alekbarova.aizhana@gmail.com>
Date: Thu, 2 Nov 2023 01:04:58 +0100
Subject: [PATCH] 1233: additional changes to accessibility

---
 native/src/components/CategoryListItem.tsx    | 25 ++++++++++++-------
 native/src/components/LayoutedScrollView.tsx  |  6 +++--
 native/src/components/List.tsx                |  3 +++
 native/src/components/SearchListItem.tsx      |  4 ++-
 .../__tests__/SearchListItem.spec.tsx         |  5 ++++
 native/src/routes/SearchModal.tsx             |  1 +
 6 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/native/src/components/CategoryListItem.tsx b/native/src/components/CategoryListItem.tsx
index 137e84562b..5974453e17 100644
--- a/native/src/components/CategoryListItem.tsx
+++ b/native/src/components/CategoryListItem.tsx
@@ -7,6 +7,8 @@ import { contentDirection, isContentDirectionReversalRequired } from '../constan
 import dimensions from '../constants/dimensions'
 import { LanguageResourceCacheStateType } from '../utils/DataContainer'
 import { getCachedThumbnail } from './Categories'
+import List from './List'
+import NothingFound from './NothingFound'
 import SimpleImage from './SimpleImage'
 import SubCategoryListItem from './SubCategoryListItem'
 import Pressable from './base/Pressable'
@@ -82,15 +84,20 @@ const CategoryListItem = ({
         </CategoryEntryContainer>
       </DirectionContainer>
     </FlexStyledLink>
-    {subCategories.map(subCategory => (
-      <SubCategoryListItem
-        key={subCategory.path}
-        subCategory={subCategory}
-        resourceCache={resourceCache[subCategory.path] ?? {}}
-        onItemPress={onItemPress}
-        language={language}
-      />
-    ))}
+    <List
+      items={subCategories}
+      renderItem={({ item: subCategory }) => (
+        <SubCategoryListItem
+          key={subCategory.path}
+          subCategory={subCategory}
+          resourceCache={resourceCache[subCategory.path] ?? {}}
+          onItemPress={onItemPress}
+          language={language}
+        />
+      )}
+      scrollEnabled={false}
+      noItemsMessage={<NothingFound />}
+    />
   </>
 )
 
diff --git a/native/src/components/LayoutedScrollView.tsx b/native/src/components/LayoutedScrollView.tsx
index 1bbbbe8216..76fc9416cc 100644
--- a/native/src/components/LayoutedScrollView.tsx
+++ b/native/src/components/LayoutedScrollView.tsx
@@ -7,10 +7,11 @@ import Layout from './Layout'
 type LayoutedScrollViewProps = {
   children?: React.ReactNode
   refreshControl?: React.ReactElement<RefreshControlProps>
+  nestedScrollEnabled?: boolean
 }
 
 const LayoutedScrollView = (props: LayoutedScrollViewProps): ReactElement => {
-  const { children, refreshControl } = props
+  const { children, refreshControl, nestedScrollEnabled = true } = props
   return (
     <Layout>
       <ScrollView
@@ -18,7 +19,8 @@ const LayoutedScrollView = (props: LayoutedScrollViewProps): ReactElement => {
         refreshControl={refreshControl}
         contentContainerStyle={{
           flexGrow: 1,
-        }}>
+        }}
+        nestedScrollEnabled={nestedScrollEnabled}>
         {children}
       </ScrollView>
     </Layout>
diff --git a/native/src/components/List.tsx b/native/src/components/List.tsx
index b3b8bc8174..107129c274 100644
--- a/native/src/components/List.tsx
+++ b/native/src/components/List.tsx
@@ -15,6 +15,7 @@ type ListProps<T> = {
   renderItem: (props: { item: T; index: number }) => ReactElement
   Header?: ReactElement
   Footer?: ReactElement
+  scrollEnabled?: boolean
   refresh?: () => void
   onEndReached?: () => void
 }
@@ -27,6 +28,7 @@ const List = <T,>({
   Footer,
   refresh,
   onEndReached,
+  scrollEnabled,
 }: ListProps<T>): ReactElement => (
   <FlatList
     data={items}
@@ -45,6 +47,7 @@ const List = <T,>({
       paddingHorizontal: 10,
     }}
     onEndReachedThreshold={1}
+    scrollEnabled={scrollEnabled}
   />
 )
 
diff --git a/native/src/components/SearchListItem.tsx b/native/src/components/SearchListItem.tsx
index baf48ce1ee..583f025141 100644
--- a/native/src/components/SearchListItem.tsx
+++ b/native/src/components/SearchListItem.tsx
@@ -46,6 +46,7 @@ type SearchListItemProps = {
   contentWithoutHtml: string
   resourceCache: PageResourceCacheStateType
   onItemPress: (category: CategoryModel) => void
+  accessibilityLabel: string
   language: string
   query: string
 }
@@ -55,6 +56,7 @@ const SearchListItem = ({
   category,
   resourceCache,
   contentWithoutHtml,
+  accessibilityLabel,
   onItemPress,
   query,
 }: SearchListItemProps): ReactElement => {
@@ -86,7 +88,7 @@ const SearchListItem = ({
     />
   )
   return (
-    <FlexStyledLink onPress={() => onItemPress(category)}>
+    <FlexStyledLink onPress={() => onItemPress(category)} accessibilityLabel={accessibilityLabel}>
       <DirectionContainer language={language}>
         <SearchEntryContainer>
           <TitleDirectionContainer language={language}>
diff --git a/native/src/components/__tests__/SearchListItem.spec.tsx b/native/src/components/__tests__/SearchListItem.spec.tsx
index 55b82172a2..e7a22b8452 100644
--- a/native/src/components/__tests__/SearchListItem.spec.tsx
+++ b/native/src/components/__tests__/SearchListItem.spec.tsx
@@ -14,6 +14,7 @@ jest.mock('react-native-webview', () => ({
 describe('SearchListItem', () => {
   const cityModel = new CityModelBuilder(1).build()[0]!
   const language = new LanguageModelBuilder(1).build()[0]!
+  const accessibilityLabel = 'This is an example category label'
   const { categories: categoriesMapModel, resourceCache } = new CategoriesMapModelBuilder(
     cityModel.code,
     language.code,
@@ -46,6 +47,7 @@ describe('SearchListItem', () => {
         onItemPress={onItemPress}
         language={language.code}
         query={query}
+        accessibilityLabel={accessibilityLabel}
       />,
     )
 
@@ -64,6 +66,7 @@ describe('SearchListItem', () => {
         onItemPress={onItemPress}
         language={language.code}
         query={category.title}
+        accessibilityLabel={accessibilityLabel}
       />,
     )
 
@@ -84,6 +87,7 @@ describe('SearchListItem', () => {
         onItemPress={onItemPress}
         language={language.code}
         query={query}
+        accessibilityLabel={accessibilityLabel}
       />,
     )
 
@@ -104,6 +108,7 @@ describe('SearchListItem', () => {
         onItemPress={onItemPress}
         language={language.code}
         query={query}
+        accessibilityLabel={accessibilityLabel}
       />,
     )
 
diff --git a/native/src/routes/SearchModal.tsx b/native/src/routes/SearchModal.tsx
index 34e173104d..79de0c1880 100644
--- a/native/src/routes/SearchModal.tsx
+++ b/native/src/routes/SearchModal.tsx
@@ -102,6 +102,7 @@ const SearchModal = ({
       contentWithoutHtml={item.contentWithoutHtml}
       language={languageCode}
       query={query}
+      accessibilityLabel={t(`Category ${item.category.title}`)}
       onItemPress={onItemPress}
     />
   )