From 243ed63077eb1a4d063c8236b17c8fe7ee02d8ad Mon Sep 17 00:00:00 2001 From: Egemen Uzunali Date: Thu, 15 Sep 2022 12:31:47 +0200 Subject: [PATCH 1/5] Init accessibility features --- src/components/account/AccountBlockButton.js | 17 ++++++----------- .../onboarding/AnswerButtonOnboarding.js | 3 +++ .../onboarding/questionTypes/DateOfBirth.js | 2 ++ src/components/shared/ProgressBar.js | 3 +++ src/components/shared/TextButton.js | 13 +++++-------- src/components/typography/Title.js | 1 + 6 files changed, 20 insertions(+), 19 deletions(-) diff --git a/src/components/account/AccountBlockButton.js b/src/components/account/AccountBlockButton.js index 2582f63c..1f40af06 100644 --- a/src/components/account/AccountBlockButton.js +++ b/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 ( - navigation.navigate(button.route) - } + onPress={() => navigation.navigate(button.route)} + accessibilityRole="button" + accessibilityLabel={button.title} + accessible > {button.image} diff --git a/src/components/onboarding/AnswerButtonOnboarding.js b/src/components/onboarding/AnswerButtonOnboarding.js index eb75093e..c1a7a58f 100644 --- a/src/components/onboarding/AnswerButtonOnboarding.js +++ b/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> diff --git a/src/components/onboarding/questionTypes/DateOfBirth.js b/src/components/onboarding/questionTypes/DateOfBirth.js index 3974cb55..f1cd734f 100644 --- a/src/components/onboarding/questionTypes/DateOfBirth.js +++ b/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()} diff --git a/src/components/shared/ProgressBar.js b/src/components/shared/ProgressBar.js index 17aa2517..3ef22ec9 100644 --- a/src/components/shared/ProgressBar.js +++ b/src/components/shared/ProgressBar.js @@ -16,6 +16,9 @@ function ProgressBar({ progress }) { unfilledColor={theme.colors.subtleGrey} useNativeDriver animationType="timing" + accessible + accessibilityLabel={`Progress bar - voortgang ${(progress * 100).toFixed(0)}%`} + accessibliltyRole="progressbar" /> ); } diff --git a/src/components/shared/TextButton.js b/src/components/shared/TextButton.js index 27ab8be4..c12a788a 100644 --- a/src/components/shared/TextButton.js +++ b/src/components/shared/TextButton.js @@ -1,10 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { - TouchableOpacity, - StyleSheet, -} from 'react-native'; +import { TouchableOpacity, StyleSheet } from 'react-native'; import theme from '../../config/theme'; import Title from '../typography/Title'; @@ -14,11 +11,11 @@ function TextButton({ onPress, testID, label }) { <TouchableOpacity onPress={onPress} testID={testID} + accessibilityLabel={label} + accessible + accessibilityRole="button" > - <Title - style={styles.buttonLabel} - variant="h7" - > + <Title style={styles.buttonLabel} variant="h7"> {label} diff --git a/src/components/typography/Title.js b/src/components/typography/Title.js index 7955f7f3..6cc98e9a 100644 --- a/src/components/typography/Title.js +++ b/src/components/typography/Title.js @@ -49,6 +49,7 @@ function Title({ numberOfLines={numberOfLines} ellipsizeMode={ellipsizeMode} selectable={selectable} + accessibilityRole="header" > {children} From 642e1d2b98a40a3b927f90d757a9d52de6e3f0f6 Mon Sep 17 00:00:00 2001 From: Egemen Uzunali Date: Tue, 20 Sep 2022 12:07:15 +0200 Subject: [PATCH 2/5] improvements to voice over accessibility --- src/components/header/HeaderBackButton.js | 7 ++- src/components/onboarding/OnboardingPage.js | 2 +- .../DropDownSelect/InputComponent.js | 14 ++++- .../questionTypes/DropDownSelect/index.js | 2 + src/components/route/RouteTaskRow.js | 59 ++++--------------- src/components/route/TipsChip.js | 16 ++--- src/components/shared/IconButton.js | 2 + .../shared/PrivacyPolicyAccordion.js | 2 +- src/components/shared/RoundedButton.js | 2 + 9 files changed, 45 insertions(+), 61 deletions(-) diff --git a/src/components/header/HeaderBackButton.js b/src/components/header/HeaderBackButton.js index 4266d1da..f164a89b 100644 --- a/src/components/header/HeaderBackButton.js +++ b/src/components/header/HeaderBackButton.js @@ -9,7 +9,12 @@ import theme from '../../config/theme'; function HeaderBackButton({ onPressAction = () => {}, color = 'light' }) { return ( - + ); diff --git a/src/components/onboarding/OnboardingPage.js b/src/components/onboarding/OnboardingPage.js index f0994a2c..53a7033a 100644 --- a/src/components/onboarding/OnboardingPage.js +++ b/src/components/onboarding/OnboardingPage.js @@ -21,7 +21,7 @@ function OnboardingItem({ pageContent: { svg, title, text } }) { return ( - + diff --git a/src/components/onboarding/questionTypes/DropDownSelect/InputComponent.js b/src/components/onboarding/questionTypes/DropDownSelect/InputComponent.js index 0ea26790..0d77b10e 100644 --- a/src/components/onboarding/questionTypes/DropDownSelect/InputComponent.js +++ b/src/components/onboarding/questionTypes/DropDownSelect/InputComponent.js @@ -112,10 +112,20 @@ function InputComponent({ onBlur={onBlur} style={styles.input} /> - + {!!searchText && } - + {isOpened ? : } diff --git a/src/components/onboarding/questionTypes/DropDownSelect/index.js b/src/components/onboarding/questionTypes/DropDownSelect/index.js index 499aff31..a2c73118 100644 --- a/src/components/onboarding/questionTypes/DropDownSelect/index.js +++ b/src/components/onboarding/questionTypes/DropDownSelect/index.js @@ -72,6 +72,8 @@ function DropDownSelect({ onPress={() => doUpdateTask()} disabled={!selectedItem.value} label="Volgende" + accessible + accessibilityRole="button" /> diff --git a/src/components/route/RouteTaskRow.js b/src/components/route/RouteTaskRow.js index ac5d36f7..a48019de 100644 --- a/src/components/route/RouteTaskRow.js +++ b/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,36 +11,20 @@ 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 ( - - + + - + <Title variant="h6" style={styles.label}> {index} - + <Title style={[styles.title, isCompleted && styles.disabled]} variant="h5"> {task.title} {isCompleted && ( - + )} @@ -118,8 +86,7 @@ const styles = StyleSheet.create({ marginLeft: theme.spacing.xxs, }, background: { - backgroundColor: - theme.colors.taskRowBackground, + backgroundColor: theme.colors.taskRowBackground, }, }); diff --git a/src/components/route/TipsChip.js b/src/components/route/TipsChip.js index 3f714da7..db651a58 100644 --- a/src/components/route/TipsChip.js +++ b/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 }) { - navigation.navigate( - routes.routeStack.screens.tipScreen, - { - tips, - }, - ) + navigation.navigate(routes.routeStack.screens.tipScreen, { + tips, + }) } + accessible + accessibilityRole="button" > diff --git a/src/components/shared/IconButton.js b/src/components/shared/IconButton.js index ed316caf..8a5baa94 100644 --- a/src/components/shared/IconButton.js +++ b/src/components/shared/IconButton.js @@ -16,6 +16,8 @@ function IconButton({ style, iconComponent, action, round, backgroundColor }) { backgroundColor && { backgroundColor }, style, ]} + accessible + accessibilityRole="button" > {iconComponent} </TouchableOpacity> diff --git a/src/components/shared/PrivacyPolicyAccordion.js b/src/components/shared/PrivacyPolicyAccordion.js index 2a4466ae..fd958f0b 100644 --- a/src/components/shared/PrivacyPolicyAccordion.js +++ b/src/components/shared/PrivacyPolicyAccordion.js @@ -13,7 +13,7 @@ import Title from '../typography/Title'; function PrivacyPolicyAccordion({ open, toggleOpen }) { return ( <View style={styles.policyContainer}> - <TouchableWithoutFeedback onPress={toggleOpen}> + <TouchableWithoutFeedback onPress={toggleOpen} accessible accessibilityRole="button"> <View style={styles.iconButton}> <Title style={styles.title} variant="h7" align="center"> Privacy Policy diff --git a/src/components/shared/RoundedButton.js b/src/components/shared/RoundedButton.js index b37f6093..d8cec279 100644 --- a/src/components/shared/RoundedButton.js +++ b/src/components/shared/RoundedButton.js @@ -29,6 +29,8 @@ function RoundedButton({ activeOpacity={0.1} disabled={disabled} onPress={onPress} + accessible + accessibilityRole="button" > <View style={styles.innerContainer}> {loading ? ( From 8a47c636d68f95846e7bd45248ea3c719573e986 Mon Sep 17 00:00:00 2001 From: Egemen Uzunali <uzunaliegemen@gmail.com> Date: Tue, 27 Sep 2022 13:54:41 +0200 Subject: [PATCH 3/5] accessibility upgrades --- android/app/build.gradle | 4 ++-- ios/pingpingNative.xcodeproj/project.pbxproj | 4 ++-- ios/pingpingNative/Info.plist | 4 ++-- ios/pingpingNativeTests/Info.plist | 4 ++-- package.json | 2 +- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/android/app/build.gradle b/android/app/build.gradle index 2ccee560..7917ca20 100644 --- a/android/app/build.gradle +++ b/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()) { diff --git a/ios/pingpingNative.xcodeproj/project.pbxproj b/ios/pingpingNative.xcodeproj/project.pbxproj index 27b5f794..fcc0445e 100644 --- a/ios/pingpingNative.xcodeproj/project.pbxproj +++ b/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"; diff --git a/ios/pingpingNative/Info.plist b/ios/pingpingNative/Info.plist index 7c26bbba..e341c69a 100644 --- a/ios/pingpingNative/Info.plist +++ b/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> diff --git a/ios/pingpingNativeTests/Info.plist b/ios/pingpingNativeTests/Info.plist index d8c75d38..2c132c93 100644 --- a/ios/pingpingNativeTests/Info.plist +++ b/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> diff --git a/package.json b/package.json index 8444f3f4..c86fbb8b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pingpingNative", - "version": "2.3.1", + "version": "2.3.2", "private": true, "scripts": { "android": "react-native run-android", From 0046810e71bb4d3cd523d927e14b1eaf54db088e Mon Sep 17 00:00:00 2001 From: Egemen Uzunali <uzunaliegemen@gmail.com> Date: Thu, 13 Oct 2022 11:31:36 +0200 Subject: [PATCH 4/5] Add accessibility labels to iconbuttons --- src/components/header/ImageOverlayHeader.js | 1 + src/components/modals/ConfirmModal.js | 1 + src/components/modals/DeleteDataModal.js | 1 + src/components/modals/ShowRewardCodeModal.js | 1 + src/components/modals/UpdateAppModal.js | 1 + src/components/modals/UpdateAppModal/UpdateModal.js | 1 + src/components/shared/Card.js | 8 +++++++- src/components/shared/IconButton.js | 6 ++++-- src/screens/CompletedRouteCelebrationModalScreen.js | 1 + 9 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/header/ImageOverlayHeader.js b/src/components/header/ImageOverlayHeader.js index 5744a077..d143d362 100644 --- a/src/components/header/ImageOverlayHeader.js +++ b/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> diff --git a/src/components/modals/ConfirmModal.js b/src/components/modals/ConfirmModal.js index b0d4f60c..4c0489c6 100644 --- a/src/components/modals/ConfirmModal.js +++ b/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 diff --git a/src/components/modals/DeleteDataModal.js b/src/components/modals/DeleteDataModal.js index 2fa352a2..cfd4340c 100644 --- a/src/components/modals/DeleteDataModal.js +++ b/src/components/modals/DeleteDataModal.js @@ -32,6 +32,7 @@ function DeleteDataModal({ action={closeModal} style={styles.closeButton} iconComponent={} + accessibilityLabel="Sluiten" /> Gegevens Verwijderen diff --git a/src/components/modals/ShowRewardCodeModal.js b/src/components/modals/ShowRewardCodeModal.js index 8261d8a0..6155f4e7 100644 --- a/src/components/modals/ShowRewardCodeModal.js +++ b/src/components/modals/ShowRewardCodeModal.js @@ -25,6 +25,7 @@ function ShowRewardCodeModal({ open = false, setOpen = () => {}, expiryDate = '' action={closeModal} style={styles.closeButton} iconComponent={} + accessibilityLabel="Sluiten" /> Jouw Code diff --git a/src/components/modals/UpdateAppModal.js b/src/components/modals/UpdateAppModal.js index e3f36dbd..6f936409 100644 --- a/src/components/modals/UpdateAppModal.js +++ b/src/components/modals/UpdateAppModal.js @@ -88,6 +88,7 @@ function UpdateAppModal() { action={closeModal} style={styles.closeButton} iconComponent={} + accessibilityLabel="Sluiten" /> Hey! Er is een nieuwe versie diff --git a/src/components/modals/UpdateAppModal/UpdateModal.js b/src/components/modals/UpdateAppModal/UpdateModal.js index d0e22762..77fbbe4d 100644 --- a/src/components/modals/UpdateAppModal/UpdateModal.js +++ b/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 diff --git a/src/components/shared/Card.js b/src/components/shared/Card.js index f01c218d..2cb362a9 100644 --- a/src/components/shared/Card.js +++ b/src/components/shared/Card.js @@ -24,7 +24,13 @@ 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' + }`} + > <View> <View style={styles.imageContainer}> <ProgressiveImage diff --git a/src/components/shared/IconButton.js b/src/components/shared/IconButton.js index 8a5baa94..680aad6b 100644 --- a/src/components/shared/IconButton.js +++ b/src/components/shared/IconButton.js @@ -6,10 +6,11 @@ import { TouchableOpacity, StyleSheet } from 'react-native'; import theme from '../../config/theme'; import normalizeValue from '../../helpers/normalizeValue'; -function IconButton({ style, iconComponent, action, round, backgroundColor }) { +function IconButton({ style, iconComponent, action, round, backgroundColor, accessibilityLabel }) { return ( <TouchableOpacity onPress={action} + accessibilityLabel={accessibilityLabel} style={[ styles.container, round && { borderRadius: 100 }, @@ -37,8 +38,9 @@ const styles = StyleSheet.create({ IconButton.propTypes = { iconComponent: PropTypes.element.isRequired, action: PropTypes.func.isRequired, - round: PropTypes.bool, + accessibilityLabel: PropTypes.string.isRequired, backgroundColor: PropTypes.string, + round: PropTypes.bool, style: PropTypes.object, }; diff --git a/src/screens/CompletedRouteCelebrationModalScreen.js b/src/screens/CompletedRouteCelebrationModalScreen.js index 12d6d1c6..8d44133a 100644 --- a/src/screens/CompletedRouteCelebrationModalScreen.js +++ b/src/screens/CompletedRouteCelebrationModalScreen.js @@ -68,6 +68,7 @@ function CompletedRouteCelebrationModalScreen({ navigation, route }) { action={() => navigation.navigate(routes.citypingsStack.screens.homeScreen)} backgroundColor={theme.colors.headerColor} round + accessibilityLabel="Sluiten" /> <ContentLayout> <LottieCelebration balance={balance} pings={pings} /> From 3f008aebbe95fcbaa26018c4f017cbf2228e4196 Mon Sep 17 00:00:00 2001 From: Egemen Uzunali <uzunaliegemen@gmail.com> Date: Thu, 13 Oct 2022 13:47:36 +0200 Subject: [PATCH 5/5] Add accessibilityState to buttons --- src/components/onboarding/NextButtonQuestionScreen.js | 3 +++ .../onboarding/questionTypes/DropDownSelect/index.js | 1 + src/components/shared/Card.js | 1 + src/components/shared/RoundedButton.js | 1 + 4 files changed, 6 insertions(+) diff --git a/src/components/onboarding/NextButtonQuestionScreen.js b/src/components/onboarding/NextButtonQuestionScreen.js index 63085925..635fb930 100644 --- a/src/components/onboarding/NextButtonQuestionScreen.js +++ b/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={[ diff --git a/src/components/onboarding/questionTypes/DropDownSelect/index.js b/src/components/onboarding/questionTypes/DropDownSelect/index.js index a2c73118..bb7424e5 100644 --- a/src/components/onboarding/questionTypes/DropDownSelect/index.js +++ b/src/components/onboarding/questionTypes/DropDownSelect/index.js @@ -74,6 +74,7 @@ function DropDownSelect({ label="Volgende" accessible accessibilityRole="button" + accessibilityState={{ disabled: true }} /> </View> </View> diff --git a/src/components/shared/Card.js b/src/components/shared/Card.js index 2cb362a9..21c4ff8b 100644 --- a/src/components/shared/Card.js +++ b/src/components/shared/Card.js @@ -30,6 +30,7 @@ function Card({ accessibilityLabel={`${ disabled ? 'Deze route is nog niet beschikbaar' : 'Route card' }`} + accessibilityState={{ disabled }} > <View> <View style={styles.imageContainer}> diff --git a/src/components/shared/RoundedButton.js b/src/components/shared/RoundedButton.js index d8cec279..927f603e 100644 --- a/src/components/shared/RoundedButton.js +++ b/src/components/shared/RoundedButton.js @@ -31,6 +31,7 @@ function RoundedButton({ onPress={onPress} accessible accessibilityRole="button" + accessibilityState={{ disabled }} > <View style={styles.innerContainer}> {loading ? (