🏷 Accessibility and Usability Improvements on Label Tab

package.cordovabuild.json

@@ -165,7 +165,7 @@
     "react-native-safe-area-context": "^4.6.3",
     "react-native-screens": "^3.22.0",
     "react-native-vector-icons": "^9.2.0",
-    "react-native-web": "^0.18.10",
+    "react-native-web": "^0.19.7",
     "react-native-web-webview": "^1.0.2",
     "react-qr-code": "^2.0.11",
     "shelljs": "^0.8.5"

package.serve.json

@@ -87,7 +87,7 @@
     "react-native-safe-area-context": "^4.6.3",
     "react-native-screens": "^3.22.0",
     "react-native-vector-icons": "^9.2.0",
-    "react-native-web": "^0.18.10",
+    "react-native-web": "^0.19.7",
     "react-native-web-webview": "^1.0.2",
     "react-qr-code": "^2.0.11",
     "shelljs": "^0.8.5"

www/css/style.css

@@ -2,6 +2,16 @@
 /* if we don't contain them here, they will leak into the rest of the app */
 .enketo-plugin {
   @import 'enketo-core/src/sass/formhub/formhub.scss';
+  flex: 1;
+  .question.non-select {
+    display: inline-block;
+  }
+  .question input[name*="_date"],
+  .question input[name*="_time"] {
+    width: calc(40vw - 10px);
+    margin-right: 5px;
+    display: flex;
+  }
 }
 
 .enketo-plugin .form-header {
@@ -1471,16 +1481,3 @@ svg {
   width: 3ch;
   left: calc(8px + 2.5ch);
 }
-
-.enketo-plugin .question.inline-datetime > input[name*="_date"],
-.enketo-plugin .question.inline-datetime > input[name*="_time"] {
-  display: flex;
-  width: auto;
-  min-width: 65%;
-  max-width: 85%;
-}
-
-.enketo-plugin .question.inline-datetime {
-  display: inline-grid;
-  width: 50%;
-}

www/index.js

@@ -26,10 +26,8 @@ import './js/services.js';
 import './js/i18n-utils.js';
 import './js/intro.js';
 import './js/main.js';
-import './js/survey/survey.js';
 import './js/survey/input-matcher.js';
 import './js/survey/multilabel/infinite_scroll_filters.js';
-import './js/survey/multilabel/trip-confirm-services.js';
 import './js/survey/multilabel/multi-label-ui.js';
 import './js/diary.js';
 import './js/recent.js';
@@ -50,6 +48,6 @@ import './js/control/collect-settings.js';
 import './js/control/sync-settings.js';
 import './js/metrics-factory.js';
 import './js/metrics-mappings.js';
-import './js/plugin/logger.js';
+import './js/plugin/logger.ts';
 import './js/plugin/storage.js';
 import './js/appstatus/permissioncheck.js';

www/js/appTheme.ts

@@ -57,13 +57,13 @@ const flavorOverrides = {
       },
     }
   },
-  draft: { // for draft TripCards; a greenish color scheme
+  draft: { // for draft TripCards; a greyish color scheme
     colors: {
-      primary: '#637d6a', // lch(50 15 150)
-      primaryContainer: '#b8cbbd', // lch(80 10 150)
+      primary: '#616971', // lch(44 6 250)
+      primaryContainer: '#b6bcc2', // lch(76 4 250)
       elevation: {
-        level1: '#e1e3e1', // lch(90 1 150)
-        level2: '#d7dbd8', // lch(87 2 150)
+        level1: '#dbddde', // lch(88 1 250)
+        level2: '#d2d5d8', // lch(85 2 250)
       },
     }
   },

www/js/commHelper.ts

@@ -0,0 +1,19 @@
+import { logDebug } from "./plugin/logger";
+
+/**
+ * @param url URL endpoint for the request
+ * @returns Promise of the fetched response (as text) or cached text from local storage
+ */
+export async function fetchUrlCached(url) {
+  const stored = localStorage.getItem(url);
+  if (stored) {
+    logDebug(`fetchUrlCached: found cached data for url ${url}, returning`);
+    return Promise.resolve(stored);
+  }
+  logDebug(`fetchUrlCached: found no cached data for url ${url}, fetching`);
+  const response = await fetch(url);
+  const text = await response.text();
+  localStorage.setItem(url, text);
+  logDebug(`fetchUrlCached: fetched data for url ${url}, returning`);
+  return text;
+}

www/js/components/Icon.tsx

@@ -0,0 +1,26 @@
+/* React Native Paper provides an IconButton component, but it doesn't provide a plain Icon.
+  We want a plain Icon that is 'presentational' - not seen as interactive to the user or screen readers, and
+  it should not have any extra padding or margins around it. */
+/* Using the underlying Icon from React Native Paper doesn't bundle correctly, so the easiest thing to do
+  for now is wrap an IconButton and remove its interactivity and padding. */
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { IconButton } from 'react-native-paper';
+import { Props as IconButtonProps } from 'react-native-paper/lib/typescript/src/components/IconButton/IconButton'
+
+export const Icon = ({style, ...rest}: IconButtonProps) => {
+  return (
+    <IconButton style={[s.icon, style]} {...rest}
+      role='none' focusable={false} accessibilityHidden={true} />
+  );
+}
+
+const s = StyleSheet.create({
+  icon: {
+    width: 'unset',
+    height: 'unset',
+    padding: 0,
+    margin: 0,
+  },
+});

www/js/components/LeafletView.jsx

@@ -50,7 +50,7 @@ const LeafletView = ({ geojson, opts, ...otherProps }) => {
   const mapElId = `map-${geojson.data.id.replace(/[^a-zA-Z0-9]/g, '')}`;
 
   return (
-    <View {...otherProps}>
+    <View {...otherProps} accessibilityRole='img' aria-label='Map'>
       <style>{`
         .leaflet-bottom {
           max-width: 100%;
@@ -87,7 +87,7 @@ const LeafletView = ({ geojson, opts, ...otherProps }) => {
           content: "󰈻"; ${/* glyph for 'flag' from https://pictogrammers.com/library/mdi/icon/flag/ */''}
         }
       `}</style>
-      <div id={mapElId} ref={mapElRef} data-tap-disabled="true"
+      <div id={mapElId} ref={mapElRef} data-tap-disabled="true" aria-hidden={true}
             style={{width: '100%', height: '100%', zIndex: 0}}></div>
     </View>
   );

www/js/components/NavBarButton.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
 import color from "color";
-import { Button, IconButton, useTheme } from "react-native-paper";
+import { Button, useTheme } from "react-native-paper";
+import { Icon } from "./Icon";
 
-const NavBarButton = ({ children, icon, onPressAction }) => {
+const NavBarButton = ({ children, icon, onPressAction, ...otherProps }) => {
 
   const { colors } = useTheme();
   const buttonColor = color(colors.onBackground).alpha(.07).rgb().string();
@@ -13,14 +14,14 @@ const NavBarButton = ({ children, icon, onPressAction }) => {
     <Button mode="outlined" buttonColor={buttonColor} textColor={colors.onBackground}
       contentStyle={{ flexDirection: 'row', height: 36 }}
       style={[s.btn, {borderColor: outlineColor}]}
-      labelStyle={s.label} onPress={() => onPressAction()}>
+      labelStyle={s.label} onPress={() => onPressAction()}
+      {...otherProps}>
       <View style={s.textWrapper}>
         {children}
       </View>
       {icon &&
         <View>
-          <IconButton icon={icon} color={colors.onBackground} size={20}
-            style={s.icon} />
+          <Icon icon={icon} color={colors.onBackground} size={20} style={{marginVertical: 'auto'}}/>
         </View>
       }
     </Button>

www/js/config/dynamic_config.js

@@ -1,6 +1,9 @@
 'use strict';
 
 import angular from 'angular';
+import { displayError, logDebug } from '../plugin/logger';
+import i18next from 'i18next';
+import { fetchUrlCached } from '../commHelper';
 
 angular.module('emission.config.dynamic', ['emission.plugin.logger',
     'emission.plugin.kvstore'])
@@ -43,23 +46,60 @@ angular.module('emission.config.dynamic', ['emission.plugin.logger',
         }
     }
 
-    var readConfigFromServer = function(label) {
-        Logger.log("Received request to join "+label);
-        // The URL prefix from which config files will be downloaded and read.
-        // Change this if you supply your own config files.
-        const downloadURL = "https://raw.githubusercontent.com/e-mission/nrel-openpath-deploy-configs/main/configs/"+label+".nrel-op.json"
-        Logger.log("Downloading data from "+downloadURL);
-        return $http.get(downloadURL).then((result) => {
-            Logger.log("Successfully found the "+downloadURL+", result is " + JSON.stringify(result.data).substring(0,10));
-            const parsedConfig = result.data;
-            const connectionURL = parsedConfig.server? parsedConfig.server.connectUrl : "dev defaults";
-            _fillStudyName(parsedConfig);
-            _backwardsCompatSurveyFill(parsedConfig);
-            Logger.log("Successfully downloaded config with version "+parsedConfig.version
-                +" for "+parsedConfig.intro.translated_text.en.deployment_name
-                +" and data collection URL "+connectionURL);
-            return parsedConfig;
+    /* Fetch and cache any surveys resources that are referenced by URL in the config,
+      as well as the label_options config if it is present.
+      This way they will be available when the user needs them, and we won't have to
+      fetch them again unless local storage is cleared. */
+    const cacheResourcesFromConfig = (config) => {
+      if (config.survey_info?.surveys) {
+        Object.values(config.survey_info.surveys).forEach((survey) => {
+          if (!survey?.formPath)
+            throw new Error('while fetching resources in config, survey_info.surveys has a survey without a formPath');
+          fetchUrlCached(survey.formPath);
         });
+      }
+      if (config.label_options) {
+        fetchUrlCached(config.label_options);
+      }
+    }
+
+    const readConfigFromServer = async (label) => {
+      const config = await fetchConfig(label);
+      Logger.log("Successfully found config, result is " + JSON.stringify(config).substring(0, 10));
+
+      // fetch + cache any resources referenced in the config, but don't 'await' them so we don't block
+      // the config loading process
+      cacheResourcesFromConfig(config);
+
+      const connectionURL = config.server ? config.server.connectUrl : "dev defaults";
+      _fillStudyName(config);
+      _backwardsCompatSurveyFill(config);
+      Logger.log("Successfully downloaded config with version " + config.version
+        + " for " + config.intro.translated_text.en.deployment_name
+        + " and data collection URL " + connectionURL);
+      return config;
+    }
+
+    const fetchConfig = async (label, alreadyTriedLocal=false) => {
+        Logger.log("Received request to join "+label);
+        const downloadURL = `https://raw.githubusercontent.com/e-mission/nrel-openpath-deploy-configs/main/configs/${label}.nrel-op.json`;
+        if (!__DEV__ || alreadyTriedLocal) {
+            Logger.log("Fetching config from github");
+            const r = await fetch(downloadURL);
+            if (!r.ok) throw new Error('Unable to fetch config from github');
+            return r.json();
+        }
+        else {
+            Logger.log("Running in dev environment, checking for locally hosted config");
+            try {
+                const r = await fetch('http://localhost:9090/configs/'+label+'.nrel-op.json');
+                if (!r.ok) throw new Error('Local config not found');
+                return r.json();
+            } catch (err) {
+                Logger.log("Local config not found");
+                return fetchConfig(label, true);
+            }
+        }
     }
 
     dc.loadSavedConfig = function() {
@@ -139,6 +179,8 @@ angular.module('emission.config.dynamic', ['emission.plugin.logger',
                 return true;
             }).catch((storeError) =>
                 Logger.displayError(i18next.t('config.unable-to-store-config'), storeError));
+        }).catch((fetchErr) => {
+            displayError(fetchErr, i18next.t('config.unable-download-config'));
         });
     }