Fix keypad and tab navigation issues in exercises

[rtibbles]

Summary

• Prevents the container divs around the keypad element from capturing click events, allowing the check button behind to still be clicked
• Ensures that when an answer is submitted - either through the 'check' button being pressed, or by 'enter' being pressed within the perseus question, that the 'next' button is then focused if the question is completed

References

Bug reported on slack
Issue observed while manually testing fix

Reviewer guidance

Ensure that the keypad is still completely usable.
Ensure that the 'Check' button can be clicked while the keypad is open.
Ensure that using keyboard navigation to press the check button keeps the next button focused if the answer was correct.
Ensure that pressing enter while the question is in focus and correct causes the next button to display focused.

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[marcellamaki]

Is adding onClick specifically here allowing the click events to propagate properly?

[rtibbles]

Hrm, that might be unnecessary - it was definitely one of the things I tried. Will double check.

[rtibbles]

Yes, it is unnecessary, removing.

[rtibbles]

Updated.

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.17.0rc1.dev0_git.3.g7324788e.pex
Windows Installer (EXE)	kolibri-0.17.0rc1.dev0+git.3.g7324788e-windows-setup-unsigned.exe
Debian Package	kolibri_0.17.0rc1.dev0+git.3.g7324788e-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.17.0rc1.dev0+git.3.g7324788e.dmg
Android Package (APK)	kolibri-0.17.0rc1.dev0+git.3.g7324788e-0.1.4-debug.apk
TAR file	kolibri-0.17.0rc1.dev0+git.3.g7324788e.tar.gz
WHL file	kolibri-0.17.0rc1.dev0+git.3.g7324788e-py2.py3-none-any.whl

[marcellamaki]

Code changes seem reasonable to me -- will wait for Radina's QA approval

[radinamatic]

• Ensure that the keypad is still completely usable. ✔️
• Ensure that the 'Check' button can be clicked while the keypad is open. ✔️
• Ensure that using keyboard navigation to press the check button keeps the next button focused if the answer was correct. ✔️
• Ensure that pressing enter while the question is in focus and correct causes the next button to display focused. ✔️

Tested on a practice quiz too, both buttons are keyboard navigable, and mouse navigable, even when obscured by the keypad:

practice-quiz2.mp4

[radinamatic]

LGTM! 👍🏽 💯