aria: use 'touch' style for Enketo forms

As it turns out, Enketo supports a more mobile-friendly forms interface than we've been using. I noticed the mobile-friendly interface whle using Kobotoolbox, and I wondered why it didn't show up the same in e-mission-phone. I dug into Enketo source code and found that it automatically detects mobile devices by inspecting the user agent and platform info. (e.g. if it contains "iPhone", then mobile=true). It applies "touch" class to the <html> element to flag this. This is indeed observed in e-mission-phone, but because we only inject Enketo styles into the views they open in (i.e. we scope those styles under .enketo-plugin in styles), the <html> element's "touch" class has no effect. An easy solution is to just add the "touch" class at the root of our enketo content (for our purposes, we can assume e-mission-phone will always be on a phone / tablet a since it's a mobile app. We don't really need the 'mobile detection' that Enketo does) The result of this is that the enketo forms have larger click areas on multiple-choice / multi-select questions, which is better for accessibility.
e-mission · Feb 20, 2024 · 9178685 · 9178685
1 parent f9c3c57
commit 9178685
Showing 1 changed file with 1 addition and 1 deletion.
diff --git a/www/js/survey/enketo/EnketoModal.tsx b/www/js/survey/enketo/EnketoModal.tsx
@@ -68,7 +68,7 @@ const EnketoModal = ({ surveyName, onResponseSaved, opts, ...rest }: Props) => {
   /* adapted from the template given by enketo-core:
     https://github.com/enketo/enketo-core/blob/master/src/index.html */
   const enketoContent = (
-    <div className="main" style={{ height: '100%' }}>
+    <div className="main touch" style={{ height: '100%' }}>
       <article className="paper" data-tap-disabled="true">
         {/* This form header (markup/css) can be changed in the application.
         Just make sure to keep a .form-language-selector element into which the form language selector (<select>)