👤🔊 OP Accessibility: Screen Reader Improvements

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",
@@ -380,7 +380,8 @@
     "all-green-status": "Make sure that all status checks are green",
     "dont-force-kill": "Do not force kill the app",
     "background-restrictions": "On Samsung and Huwaei phones, make sure that background restrictions are turned off",
-    "close": "Close"
+    "close": "Close",
+    "open-access-study": "Link to Open Access Study"
   },
   "config": {
     "unable-read-saved-config": "Unable to read saved config",
@@ -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",

www/js/App.tsx

@@ -27,18 +27,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'),
   },
 ];
 

www/js/components/ToggleSwitch.tsx

@@ -11,6 +11,7 @@ const ToggleSwitch = ({ value, buttons, ...rest }: SegmentedButtonsProps) => {
       buttons={buttons.map((o) => ({
         value: o.value,
         icon: o.icon,
+        accessibilityLabel: o.value,
         uncheckedColor: colors.onSurfaceDisabled,
         showSelectedCheck: true,
         style: {

www/js/control/ExpandMenu.jsx

@@ -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}

www/js/control/ProfileSettings.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
-import { Modal, StyleSheet, ScrollView } from 'react-native';
+import { Modal, StyleSheet, ScrollView, View, TouchableOpacity } from 'react-native';
 import { Dialog, Button, useTheme, Text, Appbar, IconButton, TextInput } from 'react-native-paper';
 import { getAngularService } from '../angular-react-helper';
 import { useTranslation } from 'react-i18next';
@@ -392,10 +392,19 @@ const ProfileSettings = () => {
       <Appbar.Header
         statusBarHeight={0}
         elevated={true}
-        style={{ height: 46, backgroundColor: 'white', elevation: 3 }}>
+        style={{ height: 46, backgroundColor: 'white', elevation: 3 }}
+        accessibilityRole="navigation">
         <Appbar.Content title={t('control.profile-tab')} />
-        <Text>{t('control.log-out')}</Text>
-        <IconButton icon="logout" onPress={() => setLogoutVis(true)}></IconButton>
+        <TouchableOpacity
+          onPress={() => setLogoutVis(true)}
+          style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}
+          aria-labelledby="logout-group"
+          accessible={true}>
+          <Text id="logout-group" focusable={false}>
+            {t('control.log-out')}
+          </Text>
+          <IconButton aria-hidden={true} icon="logout" />
+        </TouchableOpacity>
       </Appbar.Header>
 
       <ScrollView>

www/js/control/SettingRow.jsx

@@ -11,18 +11,24 @@ const SettingRow = ({
   switchValue = undefined,
   descStyle = undefined,
 }) => {
-  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 = <List.Icon icon={iconName} />;
+    rightComponent = <List.Icon icon={iconName} aria-hidden={true} />;
   } else {
-    rightComponent = <Switch value={switchValue} />;
+    rightComponent = (
+      <Switch
+        value={switchValue}
+        accessibilityLabel={t(textKey)}
+        accessibilityHint={switchValue ? t('Currently enabled') : t('Currently disabled')}
+      />
+    );
   }
   let descriptionText;
   if (desc) {
-    descriptionText = { desc };
+    descriptionText = desc;
   } else {
     descriptionText = '';
   }
@@ -32,14 +38,18 @@ const SettingRow = ({
       style={styles.item(colors.surface)}
       title={t(textKey)}
       titleStyle={styles.title}
-      description={desc}
+      description={descriptionText}
       descriptionStyle={descStyle ? descStyle : styles.description}
       descriptionNumberOfLines={4}
+      accessible={true}
+      accessibilityLabel={t(textKey)}
+      accessibilityRole="button"
       onPress={(e) => action(e)}
       right={() => rightComponent}
     />
   );
 };
+
 export const styles = StyleSheet.create({
   item: (surfaceColor) => ({
     justifyContent: 'space-between',

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 = () => {
       <Surface style={[onboardingStyles.page, { paddingVertical: 0 }]}>
         <View style={s.headerArea(windowWidth, colors)} aria-hidden={true} />
         <IconButton
+          accessibilityLabel="More info"
           icon="information-variant"
           containerColor={colors.onPrimary}
           iconColor={colors.primary}
@@ -125,16 +126,20 @@ const WelcomePage = () => {
           </View>
           <View style={s.buttonsSection}>
             <View style={{ width: windowWidth / 2 - 5, paddingHorizontal: 10, gap: 8 }}>
-              <WelcomePageButton onPress={scanCode} icon="qrcode">
-                {t('join.scan-code')}
-              </WelcomePageButton>
+              <View accessibilityRole="button">
+                <WelcomePageButton onPress={scanCode} icon="qrcode">
+                  {t('join.scan-code')}
+                </WelcomePageButton>
+              </View>
               <Text style={{ textAlign: 'center', margin: 'auto' }}>{t('join.scan-hint')}</Text>
             </View>
             <Divider style={{ width: 2, height: '100%' }} />
             <View style={{ width: windowWidth / 2 - 5, paddingHorizontal: 10, gap: 8 }}>
-              <WelcomePageButton onPress={() => setPasteModalVis(true)} icon="content-paste">
-                {t('join.paste-code')}
-              </WelcomePageButton>
+              <View accessibilityRole="button">
+                <WelcomePageButton onPress={() => setPasteModalVis(true)} icon="content-paste">
+                  {t('join.paste-code')}
+                </WelcomePageButton>
+              </View>
               <Text style={{ textAlign: 'center', margin: 'auto' }}>{t('join.paste-hint')}</Text>
             </View>
           </View>