1233: additional changes to accessibility

digitalfabrik · Nov 2, 2023 · 7e45d3d · 7e45d3d
1 parent d935507
commit 7e45d3d
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 12 deletions.
diff --git 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
@@ -7,18 +7,20 @@ 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
         keyboardShouldPersistTaps='always'
         refreshControl={refreshControl}
         contentContainerStyle={{
           flexGrow: 1,
-        }}>
+        }}
+        nestedScrollEnabled={nestedScrollEnabled}>
         {children}
       </ScrollView>
     </Layout>

diff --git 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
@@ -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
@@ -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
@@ -102,6 +102,7 @@ const SearchModal = ({
       contentWithoutHtml={item.contentWithoutHtml}
       language={languageCode}
       query={query}
+      accessibilityLabel={t(`Category ${item.category.title}`)}
       onItemPress={onItemPress}
     />
   )