1233: Implement lists as actual list (#2521)

* 1233: Implement lists as actual list * 1233: ts error * 1233: linting error is resolved * 1233: additional changes to accessibility * 1233: improved accessibility on native and web * 1233: Removed some unnessary props and renamed the file * 1233: implemented suggestion related to prop * 1233: added pluralization and implemented suggestions * 1233: added translation and implemented suggestions
digitalfabrik · Dec 6, 2023 · 65b07ca · 65b07ca
1 parent 8f5cf57
commit 65b07ca
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 21 deletions.
diff --git a/native/src/components/Categories.tsx b/native/src/components/Categories.tsx
@@ -10,6 +10,7 @@ import TileModel from '../models/TileModel'
 import testID from '../testing/testID'
 import { LanguageResourceCacheStateType, PageResourceCacheStateType } from '../utils/DataContainer'
 import CategoryListItem from './CategoryListItem'
+import List from './List'
 import OrganizationContentInfo from './OrganizationContentInfo'
 import Page from './Page'
 import Tiles from './Tiles'
@@ -80,16 +81,23 @@ const Categories = ({
       language={language}
       path={category.path}
       AfterContent={category.organization && <OrganizationContentInfo organization={category.organization} />}
-      Footer={children.map(it => (
-        <CategoryListItem
-          key={it.path}
-          category={it}
-          subCategories={categories.getChildren(it)}
-          resourceCache={resourceCache}
-          language={language}
-          onItemPress={navigateToCategory}
+      Footer={
+        <List
+          items={children}
+          renderItem={({ item: it }) => (
+            <CategoryListItem
+              key={it.path}
+              category={it}
+              subCategories={categories.getChildren(it)}
+              resourceCache={resourceCache}
+              language={language}
+              onItemPress={navigateToCategory}
+            />
+          )}
+          // Fixes VirtualizedLists nesting error
+          scrollEnabled={false}
         />
-      ))}
+      }
     />
   )
 }

diff --git a/native/src/components/CategoryListItem.tsx b/native/src/components/CategoryListItem.tsx
@@ -7,6 +7,7 @@ import { contentDirection, isContentDirectionReversalRequired } from '../constan
 import dimensions from '../constants/dimensions'
 import { LanguageResourceCacheStateType } from '../utils/DataContainer'
 import { getCachedThumbnail } from './Categories'
+import List from './List'
 import SimpleImage from './SimpleImage'
 import SubCategoryListItem from './SubCategoryListItem'
 import Pressable from './base/Pressable'
@@ -82,15 +83,19 @@ 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}
+    />
   </>
 )
 

diff --git a/native/src/components/LayoutedScrollView.tsx b/native/src/components/LayoutedScrollView.tsx
@@ -15,6 +15,9 @@ const LayoutedScrollView = (props: LayoutedScrollViewProps): ReactElement => {
     <Layout>
       <ScrollView
         keyboardShouldPersistTaps='always'
+        // Fixes VirtualizedLists nesting error
+        // See https://github.com/facebook/react-native/issues/31697#issuecomment-1742437232
+        nestedScrollEnabled
         refreshControl={refreshControl}
         contentContainerStyle={{
           flexGrow: 1,

diff --git a/native/src/components/List.tsx b/native/src/components/List.tsx
@@ -11,10 +11,12 @@ const NoItemsMessage = styled.Text`
 
 type ListProps<T> = {
   items: Array<T>
-  noItemsMessage: ReactElement | string
+  noItemsMessage?: ReactElement | string
   renderItem: (props: { item: T; index: number }) => ReactElement
   Header?: ReactElement
   Footer?: ReactElement
+  scrollEnabled?: boolean
+  accessibilityLabel?: string
   refresh?: () => void
   onEndReached?: () => void
 }
@@ -26,7 +28,9 @@ const List = <T,>({
   Header,
   Footer,
   refresh,
+  accessibilityLabel,
   onEndReached,
+  scrollEnabled,
 }: ListProps<T>): ReactElement => (
   <FlatList
     data={items}
@@ -46,6 +50,9 @@ const List = <T,>({
       paddingHorizontal: 10,
     }}
     onEndReachedThreshold={1}
+    scrollEnabled={scrollEnabled}
+    accessibilityRole='list'
+    accessibilityLabel={accessibilityLabel}
   />
 )
 

diff --git a/native/src/components/SearchListItem.tsx b/native/src/components/SearchListItem.tsx
@@ -1,4 +1,5 @@
 import React, { memo, ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
 import Highlighter from 'react-native-highlight-words'
 import styled, { useTheme } from 'styled-components/native'
 
@@ -58,6 +59,7 @@ const SearchListItem = ({
   onItemPress,
   query,
 }: SearchListItemProps): ReactElement => {
+  const { t } = useTranslation('search')
   const theme = useTheme()
   const { title, thumbnail } = category
   const excerpt = getExcerpt(contentWithoutHtml, { query, maxChars: SEARCH_PREVIEW_MAX_CHARS })
@@ -86,7 +88,7 @@ const SearchListItem = ({
     />
   )
   return (
-    <FlexStyledLink onPress={() => onItemPress(category)}>
+    <FlexStyledLink onPress={() => onItemPress(category)} accessibilityHint={t('itemHint')}>
       <DirectionContainer language={language}>
         <SearchEntryContainer>
           <TitleDirectionContainer language={language}>

diff --git a/native/src/components/base/TextButton.tsx b/native/src/components/base/TextButton.tsx
@@ -30,7 +30,12 @@ type TextButtonProps = {
 }
 
 const TextButton = ({ text, onPress, disabled = false, type = 'primary', style }: TextButtonProps): ReactElement => (
-  <StyledPressable onPress={onPress} primary={type === 'primary'} disabled={disabled} style={style}>
+  <StyledPressable
+    onPress={onPress}
+    primary={type === 'primary'}
+    disabled={disabled}
+    style={style}
+    accessibilityRole='button'>
     <StyledText>{text}</StyledText>
   </StyledPressable>
 )

diff --git a/native/src/routes/SearchModal.tsx b/native/src/routes/SearchModal.tsx
@@ -114,6 +114,7 @@ const SearchModal = ({
         <List
           items={searchResults}
           renderItem={renderItem}
+          accessibilityLabel={t('searchResultsCount', { count: searchResults.length })}
           noItemsMessage={
             <>
               <NothingFound />

diff --git a/translations/translations.json b/translations/translations.json
@@ -8412,6 +8412,13 @@
     "de": {
       "nothingFound": "Es wurden leider keine passenden Ergebnisse gefunden.",
       "searchPlaceholder": "Suche",
+      "itemHint": "Suchergebnis öffnen",
+      "searchResultsCount_zero": "0 Suchergebnisse",
+      "searchResultsCount_one": "1 Suchergebnis",
+      "searchResultsCount_two": "2 Suchergebnisse",
+      "searchResultsCount_few": "{{count}} Suchergebnisse",
+      "searchResultsCount_many": "{{count}} Suchergebnisse",
+      "searchResultsCount_other": "{{count}} Suchergebnisse",
       "pageTitle": "Suche",
       "delete": "Eingabe löschen"
     },
@@ -8454,6 +8461,13 @@
     "en": {
       "nothingFound": "Sorry, we could not find any matching results.",
       "searchPlaceholder": "Search",
+      "itemHint": "View search result",
+      "searchResultsCount_zero": "0 search results",
+      "searchResultsCount_one": "1 search result",
+      "searchResultsCount_two": "2 search results",
+      "searchResultsCount_few": "{{count}} search results",
+      "searchResultsCount_many": "{{count}} search results",
+      "searchResultsCount_other": "{{count}} search results",
       "pageTitle": "Search",
       "delete": "Delete input"
     },