From 6c249ee45114b09ce1cbdce8a2e860eeaf9161d5 Mon Sep 17 00:00:00 2001
From: Rik Scheffer <r.scheffer@amsterdam.nl>
Date: Mon, 2 Sep 2024 16:48:14 +0200
Subject: [PATCH] Add accessibilityLanguage

---
 src/components/ui/text/list/List.tsx                |  9 ++++++++-
 .../about/screens/AboutTheAppEnglish.screen.tsx     | 13 +++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/text/list/List.tsx b/src/components/ui/text/list/List.tsx
index 4d46f8e5f..e7f3f9229 100644
--- a/src/components/ui/text/list/List.tsx
+++ b/src/components/ui/text/list/List.tsx
@@ -26,11 +26,17 @@ const getItems = (items: Item[]) => {
 }
 
 type Props = {
+  accessibilityLanguage?: string
   items: Item[]
 } & Partial<ListMarkerProp> &
   TestProps
 
-export const List = ({items, marker = 'square', testID}: Props) => {
+export const List = ({
+  items,
+  marker = 'square',
+  testID,
+  accessibilityLanguage,
+}: Props) => {
   const {textItems, accessibilityLabelItems} = useMemo(
     () => getItems(items),
     [items],
@@ -39,6 +45,7 @@ export const List = ({items, marker = 'square', testID}: Props) => {
   return (
     <SingleSelectable
       accessibilityLabel={accessibleText(...accessibilityLabelItems)}
+      accessibilityLanguage={accessibilityLanguage}
       testID={testID}>
       <Column gutter="md">
         {textItems.map((text, index) => (
diff --git a/src/modules/about/screens/AboutTheAppEnglish.screen.tsx b/src/modules/about/screens/AboutTheAppEnglish.screen.tsx
index 1858132ac..bc17ecc65 100644
--- a/src/modules/about/screens/AboutTheAppEnglish.screen.tsx
+++ b/src/modules/about/screens/AboutTheAppEnglish.screen.tsx
@@ -29,19 +29,24 @@ export const AboutTheAppEnglishScreen = () => {
           <Box>
             <Column gutter="lg">
               <Title
+                accessibilityLanguage="en-US"
                 testID="AboutAboutTheAppEnglishTitle"
                 text="One app for all Amsterdam residents"
               />
               <Paragraph
+                accessibilityLanguage="en-US"
                 testID="AboutAboutTheAppEnglishIntroParagraph"
                 variant="intro">
                 With the Amsterdam app, you can have information at your
                 fingertips and get in touch with the City.
               </Paragraph>
-              <Paragraph testID="AboutAboutTheAppEnglishSummaryParagraph">
+              <Paragraph
+                accessibilityLanguage="en-US"
+                testID="AboutAboutTheAppEnglishSummaryParagraph">
                 With the app you can:
               </Paragraph>
               <List
+                accessibilityLanguage="en-US"
                 items={[
                   'View the rules about waste in your neighbourhood',
                   'Follow and receive notifications about works in your area',
@@ -52,17 +57,21 @@ export const AboutTheAppEnglishScreen = () => {
               />
               <Column>
                 <Title
+                  accessibilityLanguage="en-US"
                   level="h2"
                   testID="AboutAboutTheAppEnglishLaterMoreTitle"
                   text="More features are coming soon"
                 />
-                <Paragraph testID="AboutAboutTheAppEnglishFutureFeaturesParagraph">
+                <Paragraph
+                  accessibilityLanguage="en-US"
+                  testID="AboutAboutTheAppEnglishFutureFeaturesParagraph">
                   The Amsterdam app is a work in progress. Your opinion is
                   important to improve the app. Please let us know.
                 </Paragraph>
               </Column>
               {!isLoading && !isError && (
                 <Button
+                  accessibilityLanguage="en-US"
                   label="Your opinion"
                   onPress={() => {
                     if (redirectUrls?.feedbackForm) {