hotkey: Correct Mac equivalent of Alt and handle exceptions separately.

Though the correct mapping for Alt in Mac is Option, we had so far been
mapping it to Command, since for the 2 pre-existing shortcuts that used
Alt, Command was the only key that worked on Mac. However, these are
exceptions.

Now we map Alt to Option, and handle the 2 exceptions separately, using
data attributes on those shortcut elements.

This is a prep commit for introducing a hotkey that uses Alt / Option.

help/keyboard-shortcuts.md

@@ -73,10 +73,10 @@ in the Zulip app to add more to your repertoire as needed.
 * **Scroll down**: <kbd>PgDn</kbd>, <kbd>Shift</kbd> + <kbd>J</kbd>, or
   <kbd>Spacebar</kbd>
 
-* **Go back through viewing history**: <kbd>Alt</kbd> +
+* **Go back through viewing history**: <kbd data-mac-key="⌘">Alt</kbd> +
   <kbd class="arrow-key">←</kbd>
 
-* **Go forward through viewing history**: <kbd>Alt</kbd> +
+* **Go forward through viewing history**: <kbd data-mac-key="⌘">Alt</kbd> +
   <kbd class="arrow-key">→</kbd>
 
 ## Narrowing

web/src/common.ts

@@ -45,7 +45,7 @@ const keys_map = new Map([
     ["PgUp", "↑"],
     ["PgDn", "↓"],
     ["Ctrl", "⌘"],
-    ["Alt", "⌘"],
+    ["Alt", "⌥"],
 ]);
 
 const fn_shortcuts = new Set(["Home", "End", "PgUp", "PgDn"]);
@@ -69,7 +69,12 @@ export function adjust_mac_kbd_tags(kbd_elem_class: string): void {
             $(this).addClass("arrow-key");
         }
 
-        const replace_key = keys_map.get(key_text);
+        // We use data-mac-key attribute to override the default key in case
+        // of exceptions. Currently, there are 2 shortcuts (for navigating back
+        // and forth in browser history) which need `Cmd` instead of the expected
+        // mapping (`Opt`) for the `Alt` key, so we use this attribute to override
+        // `Opt` with `Cmd`.
+        const replace_key = $(this).attr("data-mac-key") ?? keys_map.get(key_text);
         if (replace_key !== undefined) {
             key_text = replace_key;
         }

web/templates/keyboard_shortcuts.hbs

@@ -107,11 +107,11 @@
                 </tr>
                 <tr>
                     <td class="definition">{{t 'Go back through viewing history' }}</td>
-                    <td><span class="hotkey"><kbd>Alt</kbd> + <kbd class="arrow-key">←</kbd></span></td>
+                    <td><span class="hotkey"><kbd data-mac-key="⌘">Alt</kbd> + <kbd class="arrow-key">←</kbd></span></td>
                 </tr>
                 <tr>
                     <td class="definition">{{t 'Go forward through viewing history' }}</td>
-                    <td><span class="hotkey"><kbd>Alt</kbd> + <kbd class="arrow-key">→</kbd></span></td>
+                    <td><span class="hotkey"><kbd data-mac-key="⌘">Alt</kbd> + <kbd class="arrow-key">→</kbd></span></td>
                 </tr>
             </table>
         </div>

web/tests/common.test.js

@@ -89,7 +89,7 @@ run_test("adjust_mac_kbd_tags mac", ({override}) => {
         ["PgUp", "↑"],
         ["PgDn", "↓"],
         ["Ctrl", "⌘"],
-        ["Alt", "⌘"],
+        ["Alt", "⌥"],
         ["#stream_name", "#stream_name"],
         ["Ctrl+K", "Ctrl+K"],
         ["[", "["],
@@ -153,7 +153,6 @@ run_test("adjust_mac_tooltip_keys mac expected", ({override}) => {
         [["PgUp"], ["Fn", "↑"]],
         [["PgDn"], ["Fn", "↓"]],
         [["Ctrl"], ["⌘"]],
-        [["Alt"], ["⌘"]],
     ]);
 
     override(navigator, "platform", "MacIntel");
@@ -191,14 +190,6 @@ run_test("adjust_mac_tooltip_keys mac random", ({override}) => {
             ["Shift", "G"],
         ],
         [["Space"], ["Space"]],
-        [
-            ["Alt", "←"],
-            ["⌘", "←"],
-        ],
-        [
-            ["Alt", "→"],
-            ["⌘", "→"],
-        ],
     ]);
 
     override(navigator, "platform", "MacIntel");