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

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

Start by reproducing the German - Standard keyboard behavior on macOS in Chrome and Safari, comparing their key events with Firefox. Trace the existing browser keyboard-input handling, then verify that <, >, and | reach the target machine correctly in both affected browsers.