Keyboard remapper to offer a fallback for non latin keyboard users

ui/lib/src/keyboardRemapper.ts

@@ -0,0 +1,78 @@
+export type KeyboardMapping = 'NONE' | 'QWERTY';
+
+interface Mapping {
+  key: string;
+  code: string;
+  shiftKey: boolean;
+}
+
+export class KeyboardRemapper {
+  mapping: KeyboardMapping = 'NONE';
+
+  constructor(mapping?: KeyboardMapping) {
+    if (mapping !== undefined) this.mapping = mapping;
+  }
+
+  map(e: KeyboardEvent): { mapped: boolean; key: string } {
+    let mappingFound: Mapping | undefined = undefined;
+    if (this.mapping === 'QWERTY') {
+      mappingFound = qwertyMappings.find(item => item.code === e.code && item.shiftKey === e.shiftKey);
+    }
+    if (mappingFound != undefined) return { mapped: true, key: mappingFound.key };
+    else return { mapped: false, key: e.key };
+  }
+}
+
+const alphabet: string[] = Array.from(
+  { length: 26 },
+  (_, i) => String.fromCharCode(97 + i), // 'a' is char code 97
+);
+
+const digits: string[] = Array.from(
+  { length: 10 },
+  (_, i) => String.fromCharCode(48 + i), // '0' is char code 48
+);
+
+const qwertyMapLowerCaseLetters: Mapping[] = alphabet.map(
+  (letter: string) => <Mapping>{ key: letter, code: 'Key' + letter.toUpperCase(), shiftKey: false },
+);
+
+const qwertyMapUpperCaseLetters: Mapping[] = alphabet.map(
+  (letter: string) =>
+    <Mapping>{ key: letter.toUpperCase(), code: 'Key' + letter.toUpperCase(), shiftKey: true },
+);
+
+const qwertyMapDigits: Mapping[] = digits.map(
+  (letter: string) => <Mapping>{ key: letter, code: 'Digit' + letter.toUpperCase(), shiftKey: false },
+);
+
+const qwertyMappings: Mapping[] = [
+  ...qwertyMapUpperCaseLetters,
+  ...qwertyMapLowerCaseLetters,
+  ...qwertyMapDigits,
+  {
+    key: '?',
+    code: 'Slash',
+    shiftKey: true,
+  },
+  {
+    key: '=',
+    code: 'Equal',
+    shiftKey: false,
+  },
+  {
+    key: '-',
+    code: 'Minus',
+    shiftKey: false,
+  },
+  {
+    key: '+',
+    code: 'Equal',
+    shiftKey: true,
+  },
+  {
+    key: '#',
+    code: 'Digit3 ',
+    shiftKey: true,
+  },
+];

ui/site/src/mousetrap.ts

@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+import { KeyboardRemapper } from 'lib/keyboardRemapper';
+
 type Action = 'keypress' | 'keydown' | 'keyup';
 
 type Callback = (e: KeyboardEvent) => void;
@@ -32,6 +34,8 @@ interface Binding {
   action: Action;
 }
 
+const qwertyRemapper = new KeyboardRemapper('QWERTY');
+
 const MAP: Record<string, string> = {
   8: 'backspace',
   9: 'tab',
@@ -209,10 +213,11 @@ export default class Mousetrap {
   };
 
   private getMatches = (e: KeyboardEvent): Binding[] => {
+    const { mapped: mapped, key: mappedKey } = qwertyRemapper.map(e);
     const key = keyFromEvent(e);
     const action = e.type;
     const modifiers = action === 'keyup' && isModifier(key) ? [key] : eventModifiers(e);
-    return (this.bindings[key] || []).filter(
+    return (this.bindings[key] || (mapped && this.bindings[mappedKey]) || []).filter(
       binding =>
         action === binding.action &&
         // Chrome will not fire a keypress if meta or control is down,