diff --git a/native/src/components/Categories.tsx b/native/src/components/Categories.tsx
index 8ece483017..d5ef808579 100644
--- a/native/src/components/Categories.tsx
+++ b/native/src/components/Categories.tsx
@@ -9,7 +9,7 @@ import { URL_PREFIX } from '../constants/webview'
import TileModel from '../models/TileModel'
import testID from '../testing/testID'
import { LanguageResourceCacheStateType, PageResourceCacheStateType } from '../utils/DataContainer'
-import CategoryListItem from './CategoryListItem'
+import CategoryList from './CategoryList'
import OrganizationContentInfo from './OrganizationContentInfo'
import Page from './Page'
import Tiles from './Tiles'
@@ -81,7 +81,7 @@ const Categories = ({
path={category.path}
AfterContent={category.organization && }
Footer={children.map(it => (
-
)
-export default memo(CategoryListItem)
+export default memo(CategoryList)
diff --git a/native/src/components/LayoutedScrollView.tsx b/native/src/components/LayoutedScrollView.tsx
index 76fc9416cc..0bcfc18f93 100644
--- a/native/src/components/LayoutedScrollView.tsx
+++ b/native/src/components/LayoutedScrollView.tsx
@@ -7,20 +7,19 @@ import Layout from './Layout'
type LayoutedScrollViewProps = {
children?: React.ReactNode
refreshControl?: React.ReactElement
- nestedScrollEnabled?: boolean
}
const LayoutedScrollView = (props: LayoutedScrollViewProps): ReactElement => {
- const { children, refreshControl, nestedScrollEnabled = true } = props
+ const { children, refreshControl } = props
return (
+ }}>
{children}
diff --git a/native/src/components/List.tsx b/native/src/components/List.tsx
index cbebd96c0b..51dd5e468b 100644
--- a/native/src/components/List.tsx
+++ b/native/src/components/List.tsx
@@ -1,5 +1,5 @@
import React, { ReactElement } from 'react'
-import { FlatList, RefreshControl, AccessibilityRole } from 'react-native'
+import { FlatList, RefreshControl } from 'react-native'
import styled from 'styled-components/native'
const NoItemsMessage = styled.Text`
@@ -16,7 +16,7 @@ type ListProps = {
Header?: ReactElement
Footer?: ReactElement
scrollEnabled?: boolean
- accessibilityRole?: AccessibilityRole | undefined
+ accessibilityLabel?: string
refresh?: () => void
onEndReached?: () => void
}
@@ -28,7 +28,7 @@ const List = ({
Header,
Footer,
refresh,
- accessibilityRole,
+ accessibilityLabel,
onEndReached,
scrollEnabled,
}: ListProps): ReactElement => (
@@ -51,7 +51,8 @@ const List = ({
}}
onEndReachedThreshold={1}
scrollEnabled={scrollEnabled}
- accessibilityRole={accessibilityRole}
+ accessibilityRole='list'
+ accessibilityLabel={accessibilityLabel}
/>
)
diff --git a/native/src/components/SearchListItem.tsx b/native/src/components/SearchListItem.tsx
index b9bcc157c1..3d13d18f98 100644
--- a/native/src/components/SearchListItem.tsx
+++ b/native/src/components/SearchListItem.tsx
@@ -8,7 +8,7 @@ import { SEARCH_PREVIEW_MAX_CHARS } from '../constants'
import { contentDirection } from '../constants/contentDirection'
import { PageResourceCacheStateType } from '../utils/DataContainer'
import { getCachedThumbnail } from './Categories'
-import { CategoryThumbnail } from './CategoryListItem'
+import { CategoryThumbnail } from './CategoryList'
import Pressable from './base/Pressable'
const FlexStyledLink = styled(Pressable)`
diff --git a/native/src/components/SubCategoryListItem.tsx b/native/src/components/SubCategoryListItem.tsx
index d50d086a46..13992321d2 100644
--- a/native/src/components/SubCategoryListItem.tsx
+++ b/native/src/components/SubCategoryListItem.tsx
@@ -6,7 +6,7 @@ import { CategoryModel } from 'api-client'
import { contentDirection } from '../constants/contentDirection'
import { PageResourceCacheStateType } from '../utils/DataContainer'
import { getCachedThumbnail } from './Categories'
-import { CategoryThumbnail } from './CategoryListItem'
+import { CategoryThumbnail } from './CategoryList'
import Pressable from './base/Pressable'
const SubCategoryTitleContainer = styled.View<{ language: string }>`
diff --git a/native/src/components/__tests__/CategoryListItem.spec.tsx b/native/src/components/__tests__/CategoryList.spec.tsx
similarity index 91%
rename from native/src/components/__tests__/CategoryListItem.spec.tsx
rename to native/src/components/__tests__/CategoryList.spec.tsx
index 7da54da82e..80bf0fbc61 100644
--- a/native/src/components/__tests__/CategoryListItem.spec.tsx
+++ b/native/src/components/__tests__/CategoryList.spec.tsx
@@ -3,14 +3,14 @@ import React from 'react'
import { CategoriesMapModelBuilder, CityModelBuilder, LanguageModelBuilder } from 'api-client'
import render from '../../testing/render'
-import CategoryListItem from '../CategoryListItem'
+import CategoryList from '../CategoryList'
jest.mock('styled-components')
jest.mock('react-native-webview', () => ({
default: () => jest.fn(),
}))
-describe('CategoryListItem', () => {
+describe('CategoryList', () => {
const cityModel = new CityModelBuilder(1).build()[0]!
const language = new LanguageModelBuilder(1).build()[0]!
const { categories: categoriesMapModel, resourceCache } = new CategoriesMapModelBuilder(
@@ -29,7 +29,7 @@ describe('CategoryListItem', () => {
it('should render category and subcategories', () => {
const { getByText } = render(
- ({
describe('SearchListItem', () => {
const cityModel = new CityModelBuilder(1).build()[0]!
const language = new LanguageModelBuilder(1).build()[0]!
- const accessibilityHint = 'Navigates to the chosen item'
+ const accessibilityHint = 'Navigates to the chosen page'
const { categories: categoriesMapModel, resourceCache } = new CategoriesMapModelBuilder(
cityModel.code,
language.code,
diff --git a/native/src/components/base/TextButton.tsx b/native/src/components/base/TextButton.tsx
index 0303bd9bca..fbe202ad93 100644
--- a/native/src/components/base/TextButton.tsx
+++ b/native/src/components/base/TextButton.tsx
@@ -1,5 +1,5 @@
import React, { ReactElement } from 'react'
-import { StyleProp, ViewStyle, AccessibilityRole } from 'react-native'
+import { StyleProp, ViewStyle } from 'react-native'
import styled from 'styled-components/native'
import Pressable from './Pressable'
@@ -25,31 +25,17 @@ type TextButtonProps = {
text: string
onPress: () => Promise | void
disabled?: boolean
- accessible?: boolean
- focusable?: boolean
- accessibilityRole?: AccessibilityRole | undefined
type?: 'primary' | 'clear'
style?: StyleProp
}
-const TextButton = ({
- text,
- onPress,
- disabled = false,
- type = 'primary',
- style,
- accessible,
- accessibilityRole,
- focusable,
-}: TextButtonProps): ReactElement => (
+const TextButton = ({ text, onPress, disabled = false, type = 'primary', style }: TextButtonProps): ReactElement => (
+ accessibilityRole='button'>
{text}
)
diff --git a/native/src/routes/CityNotCooperating.tsx b/native/src/routes/CityNotCooperating.tsx
index 4b2e09d084..f91e8f9cd9 100644
--- a/native/src/routes/CityNotCooperating.tsx
+++ b/native/src/routes/CityNotCooperating.tsx
@@ -3,22 +3,19 @@ import React, { ReactElement, useState } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components/native'
-import List from '../components/List'
-import NothingFound from '../components/NothingFound'
import Icon from '../components/base/Icon'
import TextButton from '../components/base/TextButton'
import buildConfig, { buildConfigAssets } from '../constants/buildConfig'
-const Container = styled.View`
+const Container = styled.ScrollView`
display: flex;
- flex: 1;
- margin: 30px 30px 0 30px;
+ padding: 30px;
`
const Heading = styled.Text`
font-family: ${props => props.theme.fonts.native.decorativeFontBold};
font-size: 18px;
- margin: 20px 20px 30px;
+ padding: 20px 20px 40px;
text-align: center;
`
@@ -30,7 +27,6 @@ const ListHeading = styled(Heading)`
align-self: flex-start;
font-size: 15px;
padding: 10px 0;
- margin-bottom: -200px;
`
const ListItem = styled.View`
@@ -56,12 +52,6 @@ const StepExplanation = styled.Text`
padding-bottom: 4px;
`
-const FooterContainer = styled.View`
- display: flex;
- justify-content: flex-end;
- margin-bottom: 330px;
-`
-
const StyledButton = styled(TextButton)`
z-index: 1;
margin: 15px auto 0;
@@ -69,43 +59,24 @@ const StyledButton = styled(TextButton)`
`
const TemplateText = styled.Text`
+ top: -20px;
border: 1px solid ${props => props.theme.colors.themeColor};
padding: 50px 30px 30px;
- margin-top: -20px;
+ margin-bottom: 40px;
`
const StyledIcon = styled(Icon)`
- margin: 10px 0;
align-self: center;
width: 50%;
- height: 30%;
+ height: 20%;
`
-type Step = {
- number: string
- id: string
- explanation: string
-}
-
const CityNotCooperating = (): ReactElement | null => {
const { t } = useTranslation('cityNotCooperating')
const [isCopied, setIsCopied] = useState(false)
const template = buildConfig().featureFlags.cityNotCooperatingTemplate
const CityNotCooperatingIcon = buildConfigAssets().CityNotCooperatingIcon
- const steps: Step[] = [
- {
- id: '1',
- number: '1',
- explanation: 'findOutMail',
- },
- {
- id: '2',
- number: '2',
- explanation: 'sendText',
- },
- ]
-
if (!template) {
return null
}
@@ -115,43 +86,24 @@ const CityNotCooperating = (): ReactElement | null => {
setIsCopied(true)
}
- const renderStepsList = ({ item }: { item: Step; index: number }) => (
-
- {item.number}
- {t(item.explanation)}
-
- )
-
- const CooperationHeader = (
- <>
+ return (
+
{t('callToAction')}
+
{t('explanation')}
{CityNotCooperatingIcon && }
{t('whatToDo')}
- >
- )
-
- const CooperationFooter = (
-
-
+
+ 1
+ {t('findOutMail')}
+
+
+ 2
+ {t('sendText')}
+
+
+
{template}
-
- )
-
- return (
-
-
}
- />
)
}
diff --git a/native/src/routes/SearchModal.tsx b/native/src/routes/SearchModal.tsx
index 15f3b4b2d4..67f11f13e6 100644
--- a/native/src/routes/SearchModal.tsx
+++ b/native/src/routes/SearchModal.tsx
@@ -101,8 +101,8 @@ const SearchModal = ({
resourceCache={resourceCache[item.category.path] ?? {}}
contentWithoutHtml={item.contentWithoutHtml}
language={languageCode}
+ accessibilityHint={t('itemHint')}
query={query}
- accessibilityHint={t(`It navigates to the description of the item`)}
onItemPress={onItemPress}
/>
)
@@ -114,7 +114,7 @@ const SearchModal = ({
diff --git a/translations/translations.json b/translations/translations.json
index 5da4d8e8fd..4b6ca5e86b 100644
--- a/translations/translations.json
+++ b/translations/translations.json
@@ -8368,6 +8368,8 @@
"de": {
"nothingFound": "Es wurden leider keine passenden Ergebnisse gefunden.",
"searchPlaceholder": "Suche",
+ "itemHint": "Es navigiert zur Beschreibung der Seite",
+ "searchResults": "Suchergebnisse",
"pageTitle": "Suche",
"delete": "Eingabe löschen"
},
diff --git a/web/src/routes/CityNotCooperatingPage.tsx b/web/src/routes/CityNotCooperatingPage.tsx
index a73a32c978..de1b616fa1 100644
--- a/web/src/routes/CityNotCooperatingPage.tsx
+++ b/web/src/routes/CityNotCooperatingPage.tsx
@@ -13,7 +13,7 @@ const Container = styled.div`
flex-direction: column;
`
-const Heading = styled.h1`
+const Heading = styled.p`
font-weight: 600;
text-align: center;
font-size: 1.4rem;
@@ -34,26 +34,14 @@ const Icon = styled.img`
align-self: center;
`
-const ListHeading = styled.h2`
+const ListHeading = styled(Heading)`
padding: 0;
- font-weight: 600;
- text-align: center;
font-size: ${props => props.theme.fonts.decorativeFontSize};
- font-family: ${props => props.theme.fonts.web.decorativeFont};
- white-space: pre-line;
`
-const ListItem = styled.ul`
+const ListItem = styled.div`
display: flex;
- flex-direction: column;
- align-items: flex-start;
- margin: -3px 0 0 -37px;
- list-style: none;
-`
-
-const StepList = styled.li`
- display: flex;
- justify-content: row;
+ align-items: center;
`
const StepNumber = styled.div`
@@ -66,8 +54,7 @@ const StepNumber = styled.div`
`
const StepExplanation = styled(Text)`
- padding: 0 5px 10px 10px;
- line-height: 10px;
+ padding: 0 10px;
`
const StyledButton = styled(TextButton)`
@@ -119,14 +106,12 @@ const CityNotCooperatingPage = ({ languageCode }: CityNotCooperatingPageProps):
{t('whatToDo')}
-
- 1
- {t('findOutMail')}
-
-
- 2
- {t('sendText')}
-
+ 1
+ {t('findOutMail')}
+
+
+ 2
+ {t('sendText')}
{template}
@@ -134,5 +119,4 @@ const CityNotCooperatingPage = ({ languageCode }: CityNotCooperatingPageProps):
)
}
-
export default CityNotCooperatingPage