From 052aca31195a5ce768f34daeacc6eac30c107666 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Tue, 9 May 2023 11:52:03 -0400
Subject: [PATCH] Enhance super tab

---
 _locales/en/messages.json               |  4 +
 ts/background.ts                        | 98 +++++++++++--------------
 ts/components/CompositionInput.tsx      |  1 +
 ts/components/LeftPane.tsx              |  1 +
 ts/components/MainHeader.tsx            |  3 +-
 ts/components/SearchInput.tsx           |  2 +-
 ts/components/ShortcutGuide.tsx         | 11 ++-
 ts/components/conversation/Timeline.tsx |  9 +++
 8 files changed, 69 insertions(+), 60 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 19da046d85..54e173e3ee 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -5182,6 +5182,10 @@
     "messageformat": "(draft)",
     "description": "Text shown in left pane as preview for conversation with saved a saved draft message"
   },
+  "icu:Keyboard--focus-most-recent-message": {
+    "messageformat": "Focus oldest unread or last message",
+    "description": "Shown in shortcuts guide"
+  },
   "Keyboard--navigate-by-section": {
     "message": "Navigate by section",
     "description": "(deleted 03/29/2023) Shown in the shortcuts guide"
diff --git a/ts/background.ts b/ts/background.ts
index 5cf5e60018..a122a2de74 100644
--- a/ts/background.ts
+++ b/ts/background.ts
@@ -1354,13 +1354,15 @@ export async function startApp(): Promise<void> {
       }
 
       // Super tab :)
-      if (commandOrCtrl && key === 'F6') {
+      if (
+        (commandOrCtrl && key === 'F6') ||
+        (commandOrCtrl && !shiftKey && (key === 't' || key === 'T'))
+      ) {
         window.enterKeyboardMode();
         const focusedElement = document.activeElement;
         const targets: Array<HTMLElement> = Array.from(
           document.querySelectorAll('[data-supertab="true"]')
         );
-
         const focusedIndex = targets.findIndex(target => {
           if (!target || !focusedElement) {
             return false;
@@ -1394,65 +1396,30 @@ export async function startApp(): Promise<void> {
           }
         }
 
-        targets[index]
-          .querySelectorAll<HTMLElement>(focusableSelectors.join(','))[0]
-          ?.focus();
-      }
+        const node = targets[index];
+        const firstFocusableElement = node.querySelectorAll<HTMLElement>(
+          focusableSelectors.join(',')
+        )[0];
 
-      // Navigate by section
-      if (commandOrCtrl && !shiftKey && (key === 't' || key === 'T')) {
-        window.enterKeyboardMode();
-        const focusedElement = document.activeElement;
-
-        const targets: Array<HTMLElement | null> = [
-          document.querySelector('.module-main-header .module-avatar-button'),
-          document.querySelector(
-            '.module-left-pane__header__contents__back-button'
-          ),
-          document.querySelector('.LeftPaneSearchInput__input'),
-          document.querySelector('.module-main-header__compose-icon'),
-          document.querySelector(
-            '.module-left-pane__compose-search-form__input'
-          ),
-          document.querySelector(
-            '.module-conversation-list__item--contact-or-conversation'
-          ),
-          document.querySelector('.module-search-results'),
-          document.querySelector('.CompositionArea .ql-editor'),
-        ];
-        const focusedIndex = targets.findIndex(target => {
-          if (!target || !focusedElement) {
-            return false;
-          }
-
-          if (target === focusedElement) {
-            return true;
-          }
-
-          if (target.contains(focusedElement)) {
-            return true;
-          }
-
-          return false;
-        });
-        const lastIndex = targets.length - 1;
-
-        let index;
-        if (focusedIndex < 0 || focusedIndex >= lastIndex) {
-          index = 0;
+        if (firstFocusableElement) {
+          firstFocusableElement.focus();
         } else {
-          index = focusedIndex + 1;
-        }
-
-        while (!targets[index]) {
-          index += 1;
-          if (index > lastIndex) {
-            index = 0;
+          const nodeInfo = Array.from(node.attributes)
+            .map(attr => `${attr.name}=${attr.value}`)
+            .join(',');
+          log.warn(
+            `supertab: could not find focus for DOM node ${node.nodeName}<${nodeInfo}>`
+          );
+          window.enterMouseMode();
+          const { activeElement } = document;
+          if (
+            activeElement &&
+            'blur' in activeElement &&
+            typeof activeElement.blur === 'function'
+          ) {
+            activeElement.blur();
           }
         }
-
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        targets[index]!.focus();
       }
 
       // Cancel out of keyboard shortcut screen - has first precedence
@@ -1611,6 +1578,23 @@ export async function startApp(): Promise<void> {
         return;
       }
 
+      if (
+        conversation &&
+        commandOrCtrl &&
+        !shiftKey &&
+        (key === 'j' || key === 'J')
+      ) {
+        window.enterKeyboardMode();
+        const item: HTMLElement | null =
+          document.querySelector(
+            '.module-last-seen-indicator ~ div .module-message'
+          ) ||
+          document.querySelector(
+            '.module-timeline__last-message .module-message'
+          );
+        item?.focus();
+      }
+
       // Open all media
       if (
         conversation &&
diff --git a/ts/components/CompositionInput.tsx b/ts/components/CompositionInput.tsx
index 81c70dd0d1..bdb27c61e6 100644
--- a/ts/components/CompositionInput.tsx
+++ b/ts/components/CompositionInput.tsx
@@ -781,6 +781,7 @@ export function CompositionInput(props: Props): React.ReactElement {
         {({ ref }) => (
           <div
             className={getClassName('__input')}
+            data-supertab
             ref={ref}
             data-testid="CompositionInput"
             data-enabled={disabled ? 'false' : 'true'}
diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx
index 4c3a17c5e4..c526f2cd09 100644
--- a/ts/components/LeftPane.tsx
+++ b/ts/components/LeftPane.tsx
@@ -659,6 +659,7 @@ export function LeftPane({
               <div
                 aria-live="polite"
                 className="module-left-pane__list"
+                data-supertab
                 key={listKey}
                 role="presentation"
                 tabIndex={-1}
diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx
index 0cc834cef5..711eb707f0 100644
--- a/ts/components/MainHeader.tsx
+++ b/ts/components/MainHeader.tsx
@@ -118,6 +118,7 @@ export function MainHeader({
     <div className="module-main-header">
       <div
         className="module-main-header__avatar--container"
+        data-supertab
         ref={setTargetElement}
       >
         <Avatar
@@ -190,7 +191,7 @@ export function MainHeader({
           </div>,
           portalElement
         )}
-      <div className="module-main-header__icon-container">
+      <div className="module-main-header__icon-container" data-supertab>
         {areStoriesEnabled && (
           <button
             aria-label={i18n('icu:stories')}
diff --git a/ts/components/SearchInput.tsx b/ts/components/SearchInput.tsx
index 9b9a3b583c..6876d4af45 100644
--- a/ts/components/SearchInput.tsx
+++ b/ts/components/SearchInput.tsx
@@ -49,7 +49,7 @@ export const SearchInput = forwardRef<HTMLInputElement, PropTypes>(
   ) {
     const getClassName = getClassNamesFor(BASE_CLASS_NAME, moduleClassName);
     return (
-      <div className={getClassName('__container')}>
+      <div className={getClassName('__container')} data-supertab>
         {hasSearchIcon && <i className={getClassName('__icon')} />}
         {children}
         <input
diff --git a/ts/components/ShortcutGuide.tsx b/ts/components/ShortcutGuide.tsx
index 9b0771699e..435a551afb 100644
--- a/ts/components/ShortcutGuide.tsx
+++ b/ts/components/ShortcutGuide.tsx
@@ -23,6 +23,7 @@ type KeyType =
   | 'enter'
   | 'tab'
   | 'ctrl'
+  | 'F6'
   | '↑'
   | '↓'
   | ','
@@ -60,7 +61,10 @@ function getNavigationShortcuts(i18n: LocalizerType): Array<ShortcutType> {
     {
       id: 'Keyboard--navigate-by-section',
       description: i18n('icu:Keyboard--navigate-by-section'),
-      keys: [['commandOrCtrl', 'T']],
+      keys: [
+        ['commandOrCtrl', 'T'],
+        ['commandOrCtrl', 'F6'],
+      ],
     },
     {
       id: 'Keyboard--previous-conversation',
@@ -93,6 +97,11 @@ function getNavigationShortcuts(i18n: LocalizerType): Array<ShortcutType> {
       description: i18n('icu:Keyboard--conversation-by-index'),
       keys: [['commandOrCtrl', '1 to 9']],
     },
+    {
+      id: 'Keyboard--most-recent-message',
+      description: i18n('icu:Keyboard--focus-most-recent-message'),
+      keys: [['commandOrCtrl', 'J']],
+    },
     {
       id: 'Keyboard--preferences',
       description: i18n('icu:Keyboard--preferences'),
diff --git a/ts/components/conversation/Timeline.tsx b/ts/components/conversation/Timeline.tsx
index 215394f09c..44c0dbc3ff 100644
--- a/ts/components/conversation/Timeline.tsx
+++ b/ts/components/conversation/Timeline.tsx
@@ -885,6 +885,15 @@ export class Timeline extends React.Component<
       messageNodes.push(
         <div
           key={messageId}
+          className={
+            itemIndex === items.length - 1
+              ? 'module-timeline__last-message'
+              : undefined
+          }
+          data-supertab={
+            oldestUnseenIndex === itemIndex ||
+            (!oldestUnseenIndex && itemIndex === items.length - 1)
+          }
           data-item-index={itemIndex}
           data-message-id={messageId}
           role="listitem"