Use normalizeKeyName for remaining keydown events (#2063)

This normalizes the key names for events from non-standard browsers like IE11

src/shared/shortcut.js

 import { useEffect } from 'preact/hooks';
 
+import { normalizeKeyName } from './browser-compatibility-utils.js';
+
 // Bit flags indicating modifiers required by a shortcut or pressed in a key event.
 const modifiers = {
   alt: 1,
@@ -49,7 +51,7 @@ export function matchShortcut(event, shortcut) {
 
   return (
     actualModifiers === requiredModifiers &&
-    event.key.toLowerCase() === requiredKey
+    normalizeKeyName(event.key).toLowerCase() === requiredKey
   );
 }
 

src/sidebar/components/annotation.js

@@ -2,6 +2,7 @@ import classnames from 'classnames';
 import { createElement } from 'preact';
 import propTypes from 'prop-types';
 
+import { normalizeKeyName } from '../../shared/browser-compatibility-utils';
 import useStore from '../store/use-store';
 import { isReply, quote } from '../util/annotation-metadata';
 import { isShared } from '../util/permissions';
@@ -75,10 +76,11 @@ function Annotation({
 
   // Allow saving of annotation by pressing CMD/CTRL-Enter
   const onKeyDown = event => {
+    const key = normalizeKeyName(event.key);
     if (isEmpty || !isEditing) {
       return;
     }
-    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+    if ((event.metaKey || event.ctrlKey) && key === 'Enter') {
       event.stopPropagation();
       event.preventDefault();
       onSave();

src/sidebar/components/hooks/use-element-should-close.js

 import { useEffect } from 'preact/hooks';
 
+import { normalizeKeyName } from '../../../shared/browser-compatibility-utils';
 import { listen } from '../../util/dom';
 
 /**
@@ -67,7 +68,7 @@ export default function useElementShouldClose(
 
     // Close element when user presses Escape key, regardless of focus.
     const removeKeyDownListener = listen(document.body, ['keydown'], event => {
-      if (event.key === 'Escape') {
+      if (normalizeKeyName(event.key) === 'Escape') {
         handleClose();
       }
     });

src/sidebar/components/markdown-editor.js

@@ -406,7 +406,7 @@ export default function MarkdownEditor({
     }
 
     for (let [command, key] of Object.entries(SHORTCUT_KEYS)) {
-      if (key === event.key) {
+      if (key === normalizeKeyName(event.key)) {
         event.stopPropagation();
         event.preventDefault();
         handleCommand(command);

src/sidebar/util/on-activate.js

+import { normalizeKeyName } from '../../shared/browser-compatibility-utils';
+
 /**
  * Return a set of props that can be applied to a React DOM element to make
  * it activateable like a button.
@@ -16,7 +18,8 @@ export function onActivate(role, handler) {
 
     // Support keyboard activation.
     onKeyDown: event => {
-      if (event.key === 'Enter' || event.key === ' ') {
+      const key = normalizeKeyName(event.key);
+      if (key === 'Enter' || key === ' ') {
         handler(event);
       }
     },