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