Feature/accessibility init

android/app/build.gradle

@@ -139,8 +139,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         missingDimensionStrategy 'react-native-camera', 'general'
-        versionCode 55
-        versionName "2.3.1"
+        versionCode 56
+        versionName "2.3.2"
 		buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

ios/pingpingNative.xcodeproj/project.pbxproj

@@ -529,7 +529,7 @@
 				CODE_SIGN_ENTITLEMENTS = pingpingNative/pingpingNative.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 55;
+				CURRENT_PROJECT_VERSION = 56;
 				DEVELOPMENT_TEAM = 39J4LQT4VN;
 				ENABLE_BITCODE = NO;
 				GCC_PREPROCESSOR_DEFINITIONS = (
@@ -561,7 +561,7 @@
 				CODE_SIGN_ENTITLEMENTS = pingpingNative/pingpingNative.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 55;
+				CURRENT_PROJECT_VERSION = 56;
 				DEVELOPMENT_TEAM = 39J4LQT4VN;
 				INFOPLIST_FILE = pingpingNative/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";

ios/pingpingNative/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>2.3.1</string>
+	<string>2.3.2</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -34,7 +34,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>55</string>
+	<string>56</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true />
 	<key>NSAppTransportSecurity</key>

ios/pingpingNativeTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>2.3.1</string>
+	<string>2.3.2</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>55</string>
+	<string>56</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pingpingNative",
-	"version": "2.3.1",
+	"version": "2.3.2",
 	"private": true,
 	"scripts": {
 		"android": "react-native run-android",

src/components/account/AccountBlockButton.js

@@ -1,25 +1,20 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import {
-	StyleSheet,
-	TouchableOpacity,
-} from 'react-native';
+import { StyleSheet, TouchableOpacity } from 'react-native';
 
 import theme from '../../config/theme';
 import Title from '../typography/Title';
 
-function AccountBlockButton({
-	button,
-	navigation,
-}) {
+function AccountBlockButton({ button, navigation }) {
 	return (
 		<TouchableOpacity
 			testID={button.testID}
 			style={styles.accountMainButton}
-			onPress={() =>
-				navigation.navigate(button.route)
-			}
+			onPress={() => navigation.navigate(button.route)}
+			accessibilityRole="button"
+			accessibilityLabel={button.title}
+			accessible
 		>
 			{button.image}
 			<Title variant="h6" align="center">

src/components/header/HeaderBackButton.js

@@ -9,7 +9,12 @@ import theme from '../../config/theme';
 
 function HeaderBackButton({ onPressAction = () => {}, color = 'light' }) {
 	return (
-		<TouchableOpacity onPress={onPressAction} testID={testIDs.NAVIGATION.HEADER_BACK_BUTTON}>
+		<TouchableOpacity
+			onPress={onPressAction}
+			testID={testIDs.NAVIGATION.HEADER_BACK_BUTTON}
+			accessible
+			accessibilityRole="button"
+		>
 			<ArrowBackIcon color={color === 'light' ? theme.colors.white : theme.colors.text} />
 		</TouchableOpacity>
 	);

src/components/header/ImageOverlayHeader.js

@@ -41,6 +41,7 @@ function ImageOverlayHeader({
 					backgroundColor={theme.colors.headerColor}
 					round
 					testID={testIDs.NAVIGATION.HEADER_BACK_BUTTON}
+					accessibilityLabel="Sluiten"
 				/>
 				<CitypingsChip value={cityPings} />
 			</View>

src/components/modals/ConfirmModal.js

@@ -27,6 +27,7 @@ function ConfirmModal({ open = false, setOpen = () => {}, doUpdateTask = () => {
 							action={closeModal}
 							style={styles.closeButton}
 							iconComponent={<CloseIcon style={styles.icon} />}
+							accessibilityLabel="Sluiten"
 						/>
 						<Title style={styles.title}>Vragen Overslaan</Title>
 

src/components/modals/DeleteDataModal.js

@@ -32,6 +32,7 @@ function DeleteDataModal({
 							action={closeModal}
 							style={styles.closeButton}
 							iconComponent={<CloseIcon style={styles.icon} />}
+							accessibilityLabel="Sluiten"
 						/>
 						<Title style={styles.title}>Gegevens Verwijderen</Title>
 						<Body variant="b3" style={styles.body}>

src/components/modals/ShowRewardCodeModal.js

@@ -25,6 +25,7 @@ function ShowRewardCodeModal({ open = false, setOpen = () => {}, expiryDate = ''
 							action={closeModal}
 							style={styles.closeButton}
 							iconComponent={<CloseIcon style={styles.icon} />}
+							accessibilityLabel="Sluiten"
 						/>
 
 						<Title style={styles.title}>Jouw Code</Title>

src/components/modals/UpdateAppModal.js

@@ -88,6 +88,7 @@ function UpdateAppModal() {
 							action={closeModal}
 							style={styles.closeButton}
 							iconComponent={<CloseIcon style={styles.icon} />}
+							accessibilityLabel="Sluiten"
 						/>
 						<Title variant="h3" style={styles.title}>
 							Hey! Er is een nieuwe versie

src/components/modals/UpdateAppModal/UpdateModal.js

@@ -23,6 +23,7 @@ function UpdateAppModal({ closeModal, openAppStore, open }) {
 							action={closeModal}
 							style={styles.closeButton}
 							iconComponent={<CloseIcon style={styles.icon} />}
+							accessibilityLabel="Sluiten"
 						/>
 						<Title variant="h3" style={styles.title}>
 							Hey! Er is een nieuwe versie

src/components/onboarding/AnswerButtonOnboarding.js

@@ -18,6 +18,9 @@ function AnswerButtonOnboarding({
 			style={[styles.button, active && styles.activeButton]}
 			variant="outline"
 			onPress={onPress}
+			accessibilityRole="button"
+			accessibilityLabel={label}
+			accessible
 		>
 			<Text style={[styles.label, active && styles.activeText]}>{label}</Text>
 		</TouchableOpacity>

src/components/onboarding/NextButtonQuestionScreen.js

@@ -15,6 +15,9 @@ function NextButtonQuestionScreen({ nextButtonDisabled, submitAnswer }) {
 			variant="text"
 			disabled={nextButtonDisabled}
 			style={styles.nextButton}
+			accessible
+			accessibilityState={{ disabled: nextButtonDisabled }}
+			accessibilityRole="button"
 		>
 			<Text
 				style={[

src/components/onboarding/OnboardingPage.js

@@ -21,7 +21,7 @@ function OnboardingItem({ pageContent: { svg, title, text } }) {
 
 	return (
 		<View style={styles.viewContainer}>
-			<View>
+			<View accessibilityRole="image">
 				<SvgIllustration />
 			</View>
 			<View>

src/components/onboarding/questionTypes/DateOfBirth.js

@@ -37,6 +37,8 @@ function DateOfBirth({
 								day: itemValue,
 							})
 						}
+						accessible
+						accessibilityLabel="Kies een dag"
 					>
 						<Picker.Item label="Dag" value="" />
 						{getDays()}

src/components/onboarding/questionTypes/DropDownSelect/InputComponent.js

@@ -112,10 +112,20 @@ function InputComponent({
 					onBlur={onBlur}
 					style={styles.input}
 				/>
-				<TouchableOpacity style={styles.clearButton} onPress={onClearPress}>
+				<TouchableOpacity
+					style={styles.clearButton}
+					onPress={onClearPress}
+					accessible
+					accessibilityRole="button"
+				>
 					{!!searchText && <CloseIcon />}
 				</TouchableOpacity>
-				<TouchableOpacity style={styles.chevronButton} onPress={toggle}>
+				<TouchableOpacity
+					style={styles.chevronButton}
+					onPress={toggle}
+					accessible
+					accessibilityRole="button"
+				>
 					{isOpened ? <ChevronUpIcon /> : <ChevronDownIcon />}
 				</TouchableOpacity>
 			</View>

src/components/onboarding/questionTypes/DropDownSelect/index.js

@@ -72,6 +72,9 @@ function DropDownSelect({
 					onPress={() => doUpdateTask()}
 					disabled={!selectedItem.value}
 					label="Volgende"
+					accessible
+					accessibilityRole="button"
+					accessibilityState={{ disabled: true }}
 				/>
 			</View>
 		</View>

src/components/route/RouteTaskRow.js

@@ -1,11 +1,7 @@
 import React, { memo } from 'react';
 
 import PropTypes from 'prop-types';
-import {
-	StyleSheet,
-	TouchableOpacity,
-	View,
-} from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { View as AnimatableView } from 'react-native-animatable';
 
 import routes from '../../App/stacks/routes';
@@ -15,64 +11,36 @@ import Title from '../typography/Title';
 
 const CIRCLE_RADIUS = 30;
 
-function RouteTaskRow({
-	task: { task, status },
-	index,
-	navigation,
-	routeId,
-	tasksToDo,
-}) {
+function RouteTaskRow({ task: { task, status }, index, navigation, routeId, tasksToDo }) {
 	const isCompleted = status === 'Completed';
-	const isCurrentTask =
-		tasksToDo.length > 0 &&
-		tasksToDo[0].task.taskId === task.taskId;
+	const isCurrentTask = tasksToDo.length > 0 && tasksToDo[0].task.taskId === task.taskId;
 
 	const doNavigate = () => {
-		navigation.navigate(
-			routes.routeStack.screens.taskScreen,
-			{
-				routeId,
-				task: { ...task, status },
-			},
-		);
+		navigation.navigate(routes.routeStack.screens.taskScreen, {
+			routeId,
+			task: { ...task, status },
+		});
 	};
 
 	return (
-		<TouchableOpacity onPress={doNavigate}>
-			<View
-				style={[
-					styles.container,
-					index % 2 === 0 && styles.background,
-				]}
-			>
+		<TouchableOpacity onPress={doNavigate} accessible accessibilityRole="button">
+			<View style={[styles.container, index % 2 === 0 && styles.background]}>
 				<View
 					style={[
 						styles.circleStepIndicator,
 						isCurrentTask && styles.circleActive,
 						isCompleted && styles.circleDisabled,
 					]}
 				>
-					<Title
-						variant="h6"
-						style={styles.label}
-					>
+					<Title variant="h6" style={styles.label}>
 						{index}
 					</Title>
 				</View>
-				<Title
-					style={[
-						styles.title,
-						isCompleted && styles.disabled,
-					]}
-					variant="h5"
-				>
+				<Title style={[styles.title, isCompleted && styles.disabled]} variant="h5">
 					{task.title}
 				</Title>
 				{isCompleted && (
-					<AnimatableView
-						animation="bounceIn"
-						delay={200}
-					>
+					<AnimatableView animation="bounceIn" delay={200}>
 						<Badge style={styles.badge} />
 					</AnimatableView>
 				)}
@@ -118,8 +86,7 @@ const styles = StyleSheet.create({
 		marginLeft: theme.spacing.xxs,
 	},
 	background: {
-		backgroundColor:
-			theme.colors.taskRowBackground,
+		backgroundColor: theme.colors.taskRowBackground,
 	},
 });
 

src/components/route/TipsChip.js

@@ -1,10 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import {
-	StyleSheet,
-	TouchableOpacity,
-} from 'react-native';
+import { StyleSheet, TouchableOpacity } from 'react-native';
 
 import routes from '../../App/stacks/routes';
 import LightBulb from '../../assets/svg/icons/LightBulb';
@@ -16,13 +13,12 @@ function TipsChip({ navigation, tips }) {
 		<TouchableOpacity
 			style={styles.container}
 			onPress={() =>
-				navigation.navigate(
-					routes.routeStack.screens.tipScreen,
-					{
-						tips,
-					},
-				)
+				navigation.navigate(routes.routeStack.screens.tipScreen, {
+					tips,
+				})
 			}
+			accessible
+			accessibilityRole="button"
 		>
 			<LightBulb />
 			<Title style={styles.title} variant="h5">

src/components/shared/Card.js

@@ -24,7 +24,14 @@ function Card({
 }) {
 	return (
 		<View style={[styles.paper, !disabled && styles.paperShadow, style]} testID={testID}>
-			<TouchableOpacity onPress={onPress}>
+			<TouchableOpacity
+				onPress={onPress}
+				accessibilityRole="button"
+				accessibilityLabel={`${
+					disabled ? 'Deze route is nog niet beschikbaar' : 'Route card'
+				}`}
+				accessibilityState={{ disabled }}
+			>
 				<View>
 					<View style={styles.imageContainer}>
 						<ProgressiveImage