From 9201f7a1180caf3505e0597253471d355e06e267 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 30 Dec 2022 20:37:57 +0800
Subject: [PATCH] First step in making things focusable

---
 src/app.jsx                 | 27 ++++++++++++++++++++++++---
 src/components/account.jsx  |  3 +--
 src/components/modal.jsx    | 14 +++++++++++++-
 src/components/status.jsx   | 11 +++++++++--
 src/index.css               |  4 ++++
 src/pages/home.jsx          |  1 +
 src/pages/notifications.jsx |  7 ++++++-
 src/pages/status.jsx        |  4 ++++
 8 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index c2548ccb..5bf428de 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -298,6 +298,26 @@ export function App() {
   }, []);
 
   const [currentDeck, setCurrentDeck] = useState('home');
+  const focusDeck = () => {
+    let timer = setTimeout(() => {
+      const page = document.getElementById(`${currentDeck}-page`);
+      console.log('focus', currentDeck, page);
+      if (page) {
+        page.focus();
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  };
+  useEffect(focusDeck, [currentDeck]);
+  useEffect(() => {
+    if (
+      !snapStates.showCompose &&
+      !snapStates.showSettings &&
+      !snapStates.showAccount
+    ) {
+      focusDeck();
+    }
+  }, [snapStates.showCompose, snapStates.showSettings, snapStates.showAccount]);
 
   useEffect(() => {
     // HACK: prevent this from running again due to HMR
@@ -324,7 +344,7 @@ export function App() {
 
   return (
     <>
-      {isLoggedIn && currentDeck && (
+      {isLoggedIn && (
         <>
           <button
             type="button"
@@ -345,7 +365,7 @@ export function App() {
           </button>
           <div class="decks">
             {/* Home will never be unmounted */}
-            <Home hidden={currentDeck !== 'home'} />
+            <Home />
             {/* Notifications can be unmounted */}
             {currentDeck === 'notifications' && <Notifications />}
           </div>
@@ -355,6 +375,7 @@ export function App() {
       <Router
         history={createHashHistory()}
         onChange={(e) => {
+          console.log('router onChange', e);
           // Special handling for Home and Notifications
           const { url } = e;
           if (/notifications/i.test(url)) {
@@ -362,7 +383,7 @@ export function App() {
           } else if (url === '/') {
             setCurrentDeck('home');
             document.title = `Home / ${CLIENT_NAME}`;
-          } else if (url === '/login' || url === '/welcome') {
+          } else {
             setCurrentDeck(null);
           }
           states.history.push(url);
diff --git a/src/components/account.jsx b/src/components/account.jsx
index ecf54006..831e93c2 100644
--- a/src/components/account.jsx
+++ b/src/components/account.jsx
@@ -102,7 +102,6 @@ function Account({ account }) {
   return (
     <div
       id="account-container"
-      tabIndex="-1"
       class={`sheet ${uiState === 'loading' ? 'skeleton' : ''}`}
     >
       {!info || uiState === 'loading' ? (
@@ -129,7 +128,7 @@ function Account({ account }) {
             <Avatar url={avatar} size="xxxl" />
             <NameText account={info} showAcct external />
           </header>
-          <main>
+          <main tabIndex="-1">
             {bot && (
               <>
                 <span class="tag">
diff --git a/src/components/modal.jsx b/src/components/modal.jsx
index 327cd404..a70aad57 100644
--- a/src/components/modal.jsx
+++ b/src/components/modal.jsx
@@ -1,14 +1,26 @@
 import './modal.css';
 
 import { createPortal } from 'preact/compat';
+import { useEffect, useRef } from 'preact/hooks';
 
 const $modalContainer = document.getElementById('modal-container');
 
 function Modal({ children, onClick, class: className }) {
   if (!children) return null;
 
+  const modalRef = useRef();
+  useEffect(() => {
+    let timer = setTimeout(() => {
+      const focusElement = modalRef.current?.querySelector('[tabindex="-1"]');
+      if (focusElement) {
+        focusElement.focus();
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, []);
+
   const Modal = (
-    <div className={className} onClick={onClick}>
+    <div ref={modalRef} className={className} onClick={onClick}>
       {children}
     </div>
   );
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 697f2601..15444109 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -186,8 +186,12 @@ function Status({
   });
   const readMoreText = 'Read more →';
 
+  const statusRef = useRef(null);
+
   return (
     <article
+      ref={statusRef}
+      tabindex="-1"
       class={`status ${
         !withinContext && inReplyToAccount ? 'status-reply-to' : ''
       } visibility-${visibility} ${
@@ -653,6 +657,7 @@ function Status({
             index={showMediaModal}
             onClose={() => {
               setShowMediaModal(false);
+              statusRef.current?.focus();
             }}
           />
         </Modal>
@@ -662,6 +667,7 @@ function Status({
           onClick={(e) => {
             if (e.target === e.currentTarget) {
               setShowEdited(false);
+              statusRef.current?.focus();
             }
           }}
         >
@@ -669,6 +675,7 @@ function Status({
             statusID={showEdited}
             onClose={() => {
               setShowEdited(false);
+              statusRef.current?.focus();
             }}
           />
         </Modal>
@@ -1153,7 +1160,7 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
   const currentYear = new Date().getFullYear();
 
   return (
-    <div id="edit-history" class="sheet" tabIndex="-1">
+    <div id="edit-history" class="sheet">
       <header>
         {/* <button type="button" class="close-button plain large" onClick={onClose}>
         <Icon icon="x" alt="Close" />
@@ -1166,7 +1173,7 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
           </p>
         )}
       </header>
-      <main>
+      <main tabIndex="-1">
         {editHistory.length > 0 && (
           <ol>
             {editHistory.map((status) => {
diff --git a/src/index.css b/src/index.css
index 91a4dd22..c97c455b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -242,6 +242,10 @@ code {
   }
 }
 
+[tabindex='-1'] {
+  outline: 0;
+}
+
 /* UTILS */
 
 .ib {
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index afe15937..e9423f8e 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -73,6 +73,7 @@ function Home({ hidden }) {
 
   return (
     <div
+      id="home-page"
       class="deck-container"
       hidden={hidden}
       ref={scrollableRef}
diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index eabd1251..d538c632 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -290,7 +290,12 @@ function Notifications() {
   );
   // console.log(groupedNotifications);
   return (
-    <div class="deck-container" ref={scrollableRef} tabIndex="-1">
+    <div
+      id="notifications-page"
+      class="deck-container"
+      ref={scrollableRef}
+      tabIndex="-1"
+    >
       <div class={`timeline-deck deck ${onlyMentions ? 'only-mentions' : ''}`}>
         <header
           onClick={() => {
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 0c82355b..8f696e2b 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -33,6 +33,9 @@ function StatusPage({ id }) {
   const heroStatusRef = useRef();
 
   const scrollableRef = useRef();
+  useEffect(() => {
+    scrollableRef.current?.focus();
+  }, []);
   useEffect(() => {
     const onScroll = debounce(() => {
       // console.log('onScroll');
@@ -279,6 +282,7 @@ function StatusPage({ id }) {
     <div class="deck-backdrop">
       <Link href={closeLink}></Link>
       <div
+        tabIndex="-1"
         ref={scrollableRef}
         class={`status-deck deck contained ${
           statuses.length > 1 ? 'padded-bottom' : ''