fix(web): Fix layout for subkey menus with unusually-sized keys

[ermshiperete]

The previous code didn't check that the keys we put in a subkey menu actually fit within the width of the osk. Additionally the subkey menu was limited to two rows. This change checks the total width of the keys in a row. If it gets too wide we continue in the next row.

Also update the diacritic_rota test keyboard by adding two longpress menus:

• longpress on 1: one subkey that is too wide to fit in the osk. Keyman is expected to resize the key so that it does fit.
• longpress on 2: Subkeys for A-Z. Subkeys B and Y are double wide. The keys are expected to be displayed in multiple rows so that each row fits within the width. Note that there are too many keys so that the rows don't fit vertically.

Already existing is the longpress on .. Since the base keys are wider they won't fit in one row. Keyman is expected to display them in two rows.

Fixes #10126.

User Testing

All the tests below can be done with the "Test inline OSK (# 5665)" test page from the KeymanWeb Test Home page ("View Keymanweb website-oriented manual test pages." link).

On the "Test inline OSK (# 5665)" test page select the "English - Diacritic 10-key Rota" keyboard and display the iOS OSK by clicking on the the "setOSK(iOS)" button.

Tests

TEST_MONSTER:

• longpress on 1
• verify that the submenu is within the limits of the displayed OSK
• verify that the "Monster" subkey can be pressed

TEST_MANYKEYS:

• longpress on 2
• verify that the width of the submenu is within the limits of the displayed OSK. The top of the submenu will be not visible, but that is acceptable for this PR.
• verify that you can press a key of this submenu.

TEST_TWOROWS:

• longpress on .
• verify that the submenu is within the limits of the displayed OSK and displayed in two rows
• verify that you can press a key of this submenu.

[keymanapp-test-bot[bot]]

User Test Results

Test specification and instructions

• ✅ TEST_MONSTER (PASSED): Tested using the KeymanWeb Test Home page on Windows 10 OS and here is my observation: 1. Long pressed on 1. Verified that the submenu is within the limits of the displayed OSK. 2. Verified that the "Monster" subkey can be pressed. (notes)
• ✅ TEST_MANYKEYS (PASSED): 1. Long pressed on 2. Verified that the width of the submenu is within the limits of the displayed OSK. Verified that we can press any key of this submenu. (notes)
• ✅ TEST_TWOROWS (PASSED): 1. Long pressed on . 2. Verified that the submenu is within the limits of the displayed OSK and displayed in two rows. Also, verified that we can press a key of this submenu. (notes)

Test Artifacts

• Android
  • Keyman for Android apk
  • FirstVoices for Android 16.0 apk
  • FirstVoices Keyboards for Android apk
  • KeyboardHarness apk
  • Keyman for Android 16.0 apk
  • KMSample1 apk
  • KMSample2 apk
• Developer
  • Keyman Developer
  • Compiler Regression Tests
  • kmcomp.zip
• iOS
  • Keyman for iOS (simulator image)
  • FirstVoices Keyboards for iOS (simulator image)
  • TestFlight internal PR build version - 18.0.21 (0.11266.10817)
• Keyboards
  • Test Keyboards
• Web
  • KeymanWeb Test Home
• Windows
  • Keyman for Windows
  • FirstVoices Keyboards for Windows
  • Text Editor (32 bit)
  • Text Editor (64 bit)

[jahorton]

On the punctuation key:

Each subkey is displaying with the same width as what's used for the base key, though with thinner padding between each.

An alternative approach would be to define the 'standard' width as ~ 1/10th the keyboard width, since most of our keyboards are ten keys wide. Just noting the difference here, as it has to do with default width. I suppose there is a reason we never did that in the first place.

[jahorton]

For "Many Keys":

Yup, that would indeed be "many, many" keys. They all appear to be properly functional and responsive to input; glad to see that part worked out well.

Just thought the screenshot might help.

[bharanidharanj]

Test Results

• TEST_MONSTER (PASSED): Tested using the KeymanWeb Test Home page on Windows 10 OS and here is my observation: 1. Long pressed on 1. Verified that the submenu is within the limits of the displayed OSK. 2. Verified that the "Monster" subkey can be pressed.

  

• TEST_MANYKEYS (PASSED): 1. Long pressed on 2. Verified that the width of the submenu is within the limits of the displayed OSK. Verified that we can press any key of this submenu.

  

• TEST_TWOROWS (PASSED): 1. Long pressed on . 2. Verified that the submenu is within the limits of the displayed OSK and displayed in two rows. Also, verified that we can press a key of this submenu.

  

[keyman-server]

Changes in this pull request will be available for download in Keyman version 18.0.23-alpha