EPUB3 interactive Javascript form elements are not responsive to touch (most touches toggle the action bar, repeated effort is required to get touch through to control)

[sumahadevan]

Issue was seen on the following build.

Version and Device Details:
R2 Reader Android App version: 2.0.0
GitHub Tag: V2.0.0-beta.4
Android mobile devices: Moto G3 running Android 6.0.1, and also Nokia 6.1 Plus running Android 9.0.

After setting the scroll mode to ON (currently a pre-requisite on Android), touch handling is enabled. However, it is very difficult to touch form controls successfully as most touches just toggle the action bar.

This is true not just for Javascript controls with tag 'button', but also for all other interactive controls, including those with tag 'input' such as text boxes and 'a' such as hyperlinks. Thus it takes a lot of effort to get the focus on a text box or click a button (forcing one to use workarounds with tab and Enter keys!).

On iOS, 'input' tags were already correctly handing in specific Javascript code, and now more interactive tags are supported in the navigator, although 'button' tag is still to be added (issue below). On Android, no interactive Javascript tags appear to be specifically handled, and 'input', 'button' and 'a' (hyperlink) tags require repeated touches to just get beyond toggling the action bar. It is also not clear where the Android code is handling the Javascript controls at all (which would ideally be in a specific .JS file).

readium/swift-toolkit#143
readium/r2-testapp-swift#239

[sumahadevan]

Referencing the following Android issue:

readium/r2-testapp-kotlin#190

It is correct that there is no difference on Android between buttons with HTML tag 'input' and those with tag 'button', but that is because BOTH of them are not responsive to touch (while in the case of iOS the buttons with tag 'input' had been handled previously). The issue still exists, not just for buttons but for ALL interactive HTML elements, that touches on them mostly toggle the action bar, as no special Javascript code for their handling appears to be there (of course if such Javascript code exists, it would just need to be made consistent with iOS version).

[sumahadevan]

@aferditamuriqi I checked the latest Android build which has your fixes with the same test file button-click-epub3.epub.

R2 Reader Android App version: 2.0.0
GitHub Tag: V2.0.0-beta.6
Android mobile devices: Moto G3 running Android 6.0.1, and also Nokia 6.1 Plus running Android 9.0.

The related Android issues for rendition layout (#251 and #183) are indeed fixed. However, as can be seen with the above-mentioned test file (which I am re-attaching) the Android app does not take the touches to be on the form controls except for the very first control (on which the form has already set the focus, this may have caused the false impression that touches are getting to the controls). Instead, touches are processed by the R2 Reader app and toggle the action bar rahter than getting to the controls (this is true for ALL controls, whether text inputs or buttons). Hence getting the controls to respond requires a great deal of effort and repeated hard presses.

For comparison, the latest R2 Reader iOS app (Apple Release Version 2.0.1 - Build 4), after the fixes recently made for interactive form elements (readium/swift-toolkit#143), responds IMMEDIATELY to touches on ALL form controls. This is essential for ease of use of an interactive Javascript form within the ePUB3, and is exactly what is not working properly on Android.

Note: I had to rename the .epub as a .zip to upload it (you may unpack it or rename it as .epub and then look at the code of individual XHTML pages, which is just basic Javascript).

button-click-epub3.zip