Merge pull request #1118 from sebastianbarry/screen-reader

👤🔊 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",
@@ -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",

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'),
   },
 ];
 

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: {

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}

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 = () => {
       <Appbar.Header
         statusBarHeight={0}
         elevated={true}
-        style={{ height: 46, backgroundColor: colors.surface }}>
+        style={{ height: 46, backgroundColor: colors.surface }}
+        accessibilityRole="navigation">
         <Appbar.Content title={t('control.profile-tab')} />
-        <Text>{t('control.log-out')}</Text>
-        <IconButton icon="logout" onPress={() => setLogoutVis(true)}></IconButton>
+        <List.Item
+          style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}
+          title={t('control.log-out')}
+          titleStyle={{ fontSize: 14, color: 'black', paddingEnd: 5 }}
+          accessible={true}
+          accessibilityLabel={t('control.log-out')}
+          accessibilityRole="button"
+          onPress={() => setLogoutVis(true)}
+          right={() => <List.Icon icon="logout" aria-hidden={true} />}
+        />
       </Appbar.Header>
 
       <ScrollView>

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 = <List.Icon icon={iconName} />;
+    rightComponent = <List.Icon icon={iconName} aria-hidden={true} />;
   } else {
-    rightComponent = <Switch value={switchValue} />;
+    rightComponent = (
+      <Switch
+        value={switchValue}
+        accessibilityLabel={t(textKey as any)}
+        accessibilityHint={switchValue ? t('Currently enabled') : t('Currently disabled')}
+      />
+    );
   }
   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}
     />

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={t('join.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>