From 9178685b2c6dfdfb3ac8123a48b921b79268ad23 Mon Sep 17 00:00:00 2001 From: Jack Greenlee Date: Tue, 20 Feb 2024 12:10:05 -0500 Subject: [PATCH] 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 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 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. --- www/js/survey/enketo/EnketoModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/js/survey/enketo/EnketoModal.tsx b/www/js/survey/enketo/EnketoModal.tsx index e2e4b5baa..c7e8bfc95 100644 --- 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 = ( -
+
{/* 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 (