Learn Mores aren't opening in "mobile view" or "reduced user interface"

[JessicaFrank]

Learn mores are appearing as clickable links in the mobile view or reduced user interface version of the A2J Viewer, but the links aren't actually clickable.

End users aren't able to access to the content in the Learn More in any way.

No errors in the console

Pop ups are clickable and working as expected.

[JessicaFrank]

Mobile view test April 2023.zip

https://a2j.org/guide/go/78d5f5ff-10b0-46e2-870a-7a8811708712

[tobiasnteireho]

confirmed to fail in Safari 16.3, Chrome 111, and Firefox 111 on Ventura 13.2. Only firefox displays a console error: Error: Promised response from onMessage listener went out of scope [init.js:79:27](moz-extension://baf7f2fa-6c58-224a-aa8b-68278b7c0c3a/background/init.js)

[tobiasnteireho]

related to #248

[tobiasnteireho]

html differs significantly between mobile view and desktop. This is for a learn-more in this gi Desktop view:

<button class="learn-more" aria-label="What does a learn more look like in mobile view?" target="_blank" on:click="../fireLearnMoreModal()" on:keydown="keydownFireClickHandler(scope.event, ../fireLearnMoreModal)" aui-action="help">What does a learn more look like in mobile view?</button>

mobile view:

<a class="learn-more" aria-label="Why does this matter?">Why does this matter?</a>

The mobile view is missing code to create the Modal

[JessicaFrank]

Learn Mores in reduced interface work on LHI's instance of the viewer (7.2.3, 2022-02-10 version of the viewer)

[tobiasnteireho]

@JessicaFrank try this https://viewerdev.a2jauthor.org/a2j-viewer/viewer/viewer.html?templateURL=../guides/6570d359bbf02-mobileviewtestapril2023/Guide.xml&fileDataURL=../guides/6570d359bbf02-mobileviewtestapril2023/

[JessicaFrank]

The learn more and the pop up open @tobiasnteireho in the viewerdev version, but there's still something wrong with it. At the end of the learn more (and on every page of the interview, even if no learn more associated with that page) aui-action="help" displays in that space as a hyperlink.

On the page with a learn more, it just appears at the end of the learn more link (see image above).

On the pages with out learn mores, it is a standalone clickable link. When I click it, the learn more modal opens, but it's blank.

[tobiasnteireho]

@JessicaFrank Updated and ready for retesting.

[JessicaFrank]

@tobiasnteireho tested viewerdev on my phone and desktop. Confirmed learn mores are working as expected in reduced interface and mobile version. I tested on two GIs. Can you please test in Safari? Once that's done, I'm good locking this for a code push.

[tobiasnteireho]

works in mobile and desktop safari