<, >, and | are mapped incorrectly on Chrome and Safari (German keyboard layout)

[db39]

Description

Typing <, >, and | doesn't input the correct characters to a target machine with a German keyboard layout. This has been tested using a Mac as a client machine, with the German - Standard keyboard layout, on Chrome and Safari. Firefox does not have this issue.

What's the behavior that you expect?

We expect that hitting the < key (directly to the right of left-shift) produces a < on the target machine. Additionally, we expect < and shift to produce a >, and we expect < and right-hand Option (on Mac) to produce |.

What's happening instead?

On Chrome and Safari, typing < instead produces ^ , < and shift produces °, and < and right-hand Option produces ′.

The underlying issue seems to be the way each browser interprets the keycode for the < key.

Firefox correctly identifies the keycode as 60:

{
  "key": "<",
  "keyCode": 60,
  "which": 60,
  "code": "IntlBackslash",
  "location": 0,
  "altKey": false,
  "ctrlKey": false,
  "metaKey": false,
  "shiftKey": false,
  "repeat": false
}

On Chrome and Safari, < is interpreted as keycode 188, > as keycode 190, and | as keycode 220. These appear to be the keycodes used for an English layout, but they're incorrect for the German layout.

What are the steps to reproduce this behavior?

1. Set your Mac's keyboard layout to "German - Standard"
2. Open TinyPilot in Chrome or Safari
3. Open a text editor on the target machine (with a German keyboard layout)
4. Hit the < key
5. See ^

Screenshots

[mtlynch]

We should be able to work around this on the server. We should be able to detect the browser and client language from the HTTP request, and then the TinyPilot server can remap the keys when we recognize that it's German keyboard layout + buggy browser.