Merge https://github.com/signalapp/Signal-Desktop/pull/5842

ts/components/CompositionArea.tsx

@@ -56,6 +56,7 @@ import {
 import { MediaEditor } from './MediaEditor';
 import { IMAGE_PNG } from '../types/MIME';
 import { isImageTypeSupported } from '../util/GoogleChrome';
+import * as KeyboardLayout from '../services/keyboardLayout';
 
 export type CompositionAPIType =
   | {
@@ -451,7 +452,8 @@ export const CompositionArea = ({
   // Listen for cmd/ctrl-shift-x to toggle large composition mode
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
-      const { key, shiftKey, ctrlKey, metaKey } = e;
+      const { shiftKey, ctrlKey, metaKey } = e;
+      const key = KeyboardLayout.lookup(e);
       // When using the ctrl key, `key` is `'X'`. When using the cmd key, `key` is `'x'`
       const xKey = key === 'x' || key === 'X';
       const commandKey = get(window, 'platform') === 'darwin' && metaKey;

ts/components/LeftPane.tsx

@@ -30,6 +30,7 @@ import { usePrevious } from '../hooks/usePrevious';
 import { missingCaseError } from '../util/missingCaseError';
 import type { WidthBreakpoint } from './_util';
 import { getConversationListWidthBreakpoint } from './_util';
+import * as KeyboardLayout from '../services/keyboardLayout';
 import {
   MIN_WIDTH,
   SNAP_WIDTH,
@@ -292,10 +293,11 @@ export const LeftPane: React.FC<PropsType> = ({
 
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
-      const { ctrlKey, shiftKey, altKey, metaKey, key } = event;
+      const { ctrlKey, shiftKey, altKey, metaKey } = event;
       const commandOrCtrl = OS.isMacOS() ? metaKey : ctrlKey;
+      const key = KeyboardLayout.lookup(event);
 
-      if (event.key === 'Escape') {
+      if (key === 'Escape') {
         const backAction = helper.getBackAction({
           showInbox,
           startComposing,

ts/components/emoji/EmojiButton.tsx

@@ -10,6 +10,7 @@ import { Emoji } from './Emoji';
 import type { Props as EmojiPickerProps } from './EmojiPicker';
 import { EmojiPicker } from './EmojiPicker';
 import type { LocalizerType } from '../../types/Util';
+import * as KeyboardLayout from '../../services/keyboardLayout';
 
 export type OwnProps = {
   readonly className?: string;
@@ -86,10 +87,11 @@ export const EmojiButton = React.memo(
     // Install keyboard shortcut to open emoji picker
     React.useEffect(() => {
       const handleKeydown = (event: KeyboardEvent) => {
-        const { ctrlKey, key, metaKey, shiftKey } = event;
+        const { ctrlKey, metaKey, shiftKey } = event;
         const commandKey = get(window, 'platform') === 'darwin' && metaKey;
         const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey;
         const commandOrCtrl = commandKey || controlKey;
+        const key = KeyboardLayout.lookup(event);
 
         // We don't want to open up if the conversation has any panels open
         const panels = document.querySelectorAll('.conversation .panel');

ts/components/leftPane/LeftPaneArchiveHelper.tsx

@@ -16,6 +16,7 @@ import type { ConversationType } from '../../state/ducks/conversations';
 import { LeftPaneSearchInput } from '../LeftPaneSearchInput';
 import type { LeftPaneSearchPropsType } from './LeftPaneSearchHelper';
 import { LeftPaneSearchHelper } from './LeftPaneSearchHelper';
+import * as KeyboardLayout from '../../services/keyboardLayout';
 
 type LeftPaneArchiveBasePropsType = {
   archivedConversations: ReadonlyArray<ConversationListItemPropsType>;
@@ -219,17 +220,18 @@ export class LeftPaneArchiveHelper extends LeftPaneHelper<LeftPaneArchivePropsTy
       return;
     }
 
-    const { ctrlKey, metaKey, shiftKey, key } = event;
+    const { ctrlKey, metaKey, shiftKey } = event;
     const commandKey = window.platform === 'darwin' && metaKey;
     const controlKey = window.platform !== 'darwin' && ctrlKey;
     const commandOrCtrl = commandKey || controlKey;
     const commandAndCtrl = commandKey && ctrlKey;
+    const key = KeyboardLayout.lookup(event);
 
     if (
       commandOrCtrl &&
       !commandAndCtrl &&
       shiftKey &&
-      key.toLowerCase() === 'f' &&
+      (key === 'f' || key === 'F') &&
       this.archivedConversations.some(({ id }) => id === selectedConversationId)
     ) {
       searchInConversation(selectedConversationId);

ts/components/leftPane/handleKeydownForSearch.ts

@@ -1,6 +1,8 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import * as KeyboardLayout from '../../services/keyboardLayout';
+
 export function handleKeydownForSearch(
   event: Readonly<KeyboardEvent>,
   {
@@ -13,13 +15,14 @@ export function handleKeydownForSearch(
     startSearch: () => unknown;
   }>
 ): void {
-  const { ctrlKey, metaKey, shiftKey, key } = event;
+  const { ctrlKey, metaKey, shiftKey } = event;
   const commandKey = window.platform === 'darwin' && metaKey;
   const controlKey = window.platform !== 'darwin' && ctrlKey;
   const commandOrCtrl = commandKey || controlKey;
   const commandAndCtrl = commandKey && ctrlKey;
+  const key = KeyboardLayout.lookup(event);
 
-  if (commandOrCtrl && !commandAndCtrl && key.toLowerCase() === 'f') {
+  if (commandOrCtrl && !commandAndCtrl && (key === 'f' || key === 'F')) {
     if (!shiftKey) {
       startSearch();
       event.preventDefault();

ts/components/stickers/StickerButton.tsx

@@ -14,6 +14,7 @@ import { StickerPicker } from './StickerPicker';
 import { countStickers } from './lib';
 import { offsetDistanceModifier } from '../../util/popperUtil';
 import { themeClassName } from '../../util/theme';
+import * as KeyboardLayout from '../../services/keyboardLayout';
 
 export type OwnProps = {
   readonly className?: string;
@@ -151,10 +152,11 @@ export const StickerButton = React.memo(
     // Install keyboard shortcut to open sticker picker
     React.useEffect(() => {
       const handleKeydown = (event: KeyboardEvent) => {
-        const { ctrlKey, key, metaKey, shiftKey } = event;
+        const { ctrlKey, metaKey, shiftKey } = event;
         const commandKey = get(window, 'platform') === 'darwin' && metaKey;
         const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey;
         const commandOrCtrl = commandKey || controlKey;
+        const key = KeyboardLayout.lookup(event);
 
         // We don't want to open up if the conversation has any panels open
         const panels = document.querySelectorAll('.conversation .panel');