diff --git a/www/i18n/en.json b/www/i18n/en.json index aa41988f3..9a1fadec7 100644 --- a/www/i18n/en.json +++ b/www/i18n/en.json @@ -128,13 +128,13 @@ "to-label": "To Label", "show-all": "All Trips", "no-trips-found": "No trips found", - "choose-mode": "Mode 📝 ", - "choose-replaced-mode": "Replaces 📝", - "choose-purpose": "Purpose 📝", - "choose-survey": "Add Trip Details 📝 ", - "select-mode-scroll": "Mode (👇 for more)", - "select-replaced-mode-scroll": "Replaces (👇 for more)", - "select-purpose-scroll": "Purpose (👇 for more)", + "choose-mode": "Mode", + "choose-replaced-mode": "Replaces", + "choose-purpose": "Purpose", + "choose-survey": "Add Trip Details", + "select-mode-scroll": "Mode (scroll for more)", + "select-replaced-mode-scroll": "Replaces (scroll for more)", + "select-purpose-scroll": "Purpose (scroll for more)", "delete-entry-confirm": "Are you sure you wish to delete this entry?", "detected": "Detected:", "labeled-mode": "Labeled Mode", @@ -372,6 +372,7 @@ "paste-code": "Paste code", "scan-hint": "Scan the barcode with your phone camera", "paste-hint": "Or, paste the code as text", + "more-info": "More Info", "about-app-title": "About {{appName}}", "about-app-para-1": "The National Renewable Energy Laboratory’s Open Platform for Agile Trip Heuristics (NREL OpenPATH) enables people to track their travel modes—car, bus, bike, walking, etc.—and measure their associated energy use and carbon footprint.", "about-app-para-2": "The app empowers communities to understand their travel mode choices and patterns, experiment with options to make them more sustainable, and evaluate the results. Such results can inform effective transportation policy and planning and be used to build more sustainable and accessible cities.", @@ -441,8 +442,8 @@ "header": "Who gets to see the information", "public-dash": "Aggregate metrics derived from the travel patterns will be made available on a public dashboard to provide transparency into the impact of the program. These metrics will focus on information summaries such as counts, distances and durations, and will not display individual travel locations or times.", "individual-info": "Individual labeling rates and trip level information will only be made available to:", - "program-admins": "🧑 Program administrators from {{deployment_partner_name}} to {{raw_data_use}}, and", - "nrel-devs": "💻 NREL OpenPATH developers for debugging", + "program-admins": "Program administrators from {{deployment_partner_name}} to {{raw_data_use}}, and", + "nrel-devs": "NREL OpenPATH developers for debugging", "TSDC-info": "The data will also be periodically archived in NREL’s Transportation Secure Data Center (TSDC) after a delay of 3 to 6 months. It will then be made available for legitimate research through existing, privacy-preserving TSDC operating procedures. Further information on the procedures is available", "on-website": " on the website ", "and-in": "and in", diff --git a/www/js/App.tsx b/www/js/App.tsx index f43f006d9..c3854dbf0 100644 --- a/www/js/App.tsx +++ b/www/js/App.tsx @@ -26,18 +26,21 @@ const defaultRoutes = (t) => [ title: t('diary.label-tab'), focusedIcon: 'check-bold', unfocusedIcon: 'check-outline', + accessibilityLabel: t('diary.label-tab'), }, { key: 'metrics', title: t('metrics.dashboard-tab'), focusedIcon: 'chart-box', unfocusedIcon: 'chart-box-outline', + accessibilityLabel: t('metrics.dashboard-tab'), }, { key: 'control', title: t('control.profile-tab'), focusedIcon: 'account', unfocusedIcon: 'account-outline', + accessibilityLabel: t('control.profile-tab'), }, ]; diff --git a/www/js/components/ToggleSwitch.tsx b/www/js/components/ToggleSwitch.tsx index 1b5134d97..671228b36 100644 --- a/www/js/components/ToggleSwitch.tsx +++ b/www/js/components/ToggleSwitch.tsx @@ -9,6 +9,7 @@ const ToggleSwitch = ({ value, buttons, ...rest }: SegmentedButtonsProps) => { value={value as any} buttons={buttons.map((o) => ({ icon: o.icon, + accessibilityLabel: o.value, uncheckedColor: colors.onSurfaceDisabled, showSelectedCheck: true, style: { diff --git a/www/js/control/ExpandMenu.tsx b/www/js/control/ExpandMenu.tsx index 65c2fb3b3..d1a744b5a 100644 --- a/www/js/control/ExpandMenu.tsx +++ b/www/js/control/ExpandMenu.tsx @@ -16,6 +16,8 @@ const ExpansionSection = (props) => { style={styles.section(colors.surface)} title={t(props.sectionTitle)} titleStyle={rowStyles.title} + accessible={true} + accessibilityLabel={t(props.sectionTitle) + ' spinbutton'} expanded={expanded} onPress={handlePress}> {props.children} diff --git a/www/js/control/ProfileSettings.tsx b/www/js/control/ProfileSettings.tsx index 56c19efe9..0c6101c48 100644 --- a/www/js/control/ProfileSettings.tsx +++ b/www/js/control/ProfileSettings.tsx @@ -1,6 +1,15 @@ import React, { useState, useEffect, useContext, useRef } from 'react'; import { Modal, StyleSheet, ScrollView } from 'react-native'; -import { Dialog, Button, useTheme, Text, Appbar, IconButton, TextInput } from 'react-native-paper'; +import { + Dialog, + Button, + useTheme, + Text, + Appbar, + IconButton, + TextInput, + List, +} from 'react-native-paper'; import { useTranslation } from 'react-i18next'; import ExpansionSection from './ExpandMenu'; import SettingRow from './SettingRow'; @@ -420,10 +429,19 @@ const ProfileSettings = () => { + style={{ height: 46, backgroundColor: colors.surface }} + accessibilityRole="navigation"> - {t('control.log-out')} - setLogoutVis(true)}> + setLogoutVis(true)} + right={() => } + /> diff --git a/www/js/control/SettingRow.tsx b/www/js/control/SettingRow.tsx index 7569f1614..3e4f77bf0 100644 --- a/www/js/control/SettingRow.tsx +++ b/www/js/control/SettingRow.tsx @@ -12,14 +12,20 @@ type Props = { descStyle?: any; }; const SettingRow = ({ textKey, iconName, action, desc, switchValue, descStyle }: Props) => { - const { t } = useTranslation(); //this accesses the translations - const { colors } = useTheme(); // use this to get the theme colors instead of hardcoded #hex colors + const { t } = useTranslation(); // Access translations + const { colors } = useTheme(); // Get theme colors let rightComponent; if (iconName) { - rightComponent = ; + rightComponent = ; } else { - rightComponent = ; + rightComponent = ( + + ); } let descriptionText; if (desc) { @@ -36,6 +42,9 @@ const SettingRow = ({ textKey, iconName, action, desc, switchValue, descStyle }: description={desc} descriptionStyle={descStyle ? descStyle : styles.description} descriptionNumberOfLines={4} + accessible={true} + accessibilityLabel={t(textKey as any)} + accessibilityRole="button" onPress={(e) => action(e)} right={() => rightComponent} /> diff --git a/www/js/onboarding/WelcomePage.tsx b/www/js/onboarding/WelcomePage.tsx index 7c09a21d3..f552a56a7 100644 --- a/www/js/onboarding/WelcomePage.tsx +++ b/www/js/onboarding/WelcomePage.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useState } from 'react'; +import React, { useContext, useState, useEffect } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { View, @@ -100,6 +100,7 @@ const WelcomePage = () => { { - - {t('join.scan-code')} - + + + {t('join.scan-code')} + + {t('join.scan-hint')} - setPasteModalVis(true)} icon="content-paste"> - {t('join.paste-code')} - + + setPasteModalVis(true)} icon="content-paste"> + {t('join.paste-code')} + + {t('join.paste-hint')}