From 38e6eaf3f4ab124d5bfff452cad5efcc2d2a56c1 Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Tue, 7 Jan 2025 16:38:24 +0400
Subject: [PATCH] improvement: a11y RovingTabindex for loading msgs

---
 .../src/components/message/MessageList.tsx    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/message/MessageList.tsx b/packages/frontend/src/components/message/MessageList.tsx
index 4007061ba2..c570df6342 100644
--- a/packages/frontend/src/components/message/MessageList.tsx
+++ b/packages/frontend/src/components/message/MessageList.tsx
@@ -827,7 +827,6 @@ export const MessageListInner = React.memo(
                     />
                   )
                 } else if (message?.kind === 'loadingError') {
-                  // TODO shall we add `useRovingTabindex` here as well?
                   return (
                     <MessageLoadingError
                       messageId={messageId}
@@ -838,7 +837,6 @@ export const MessageListInner = React.memo(
                   // setTimeout tells it to call method in next event loop iteration, so after rendering
                   // it is debounced later so we can call it here multiple times and it's ok
                   setTimeout(loadMissingMessages)
-                  // TODO shall we add `useRovingTabindex` here as well?
                   return <MessageLoading messageId={messageId} />
                 }
               }
@@ -866,13 +864,20 @@ function MessageLoadingError({
   messageId: T.MessageListItem & { kind: 'message' }
   message: T.MessageLoadResult
 }) {
+  const ref = useRef<HTMLDivElement>(null)
+  const rovingTabindex = useRovingTabindex(ref)
+
   return (
     <div className='info-message' id={String(messageId.msg_id)}>
       <div
-        className='bubble'
+        ref={ref}
+        className={'bubble ' + rovingTabindex.className}
         style={{
           backgroundColor: 'rgba(55,0,0,0.5)',
         }}
+        tabIndex={rovingTabindex.tabIndex}
+        onKeyDown={rovingTabindex.onKeydown}
+        onFocus={rovingTabindex.setAsActiveElement}
       >
         loading message {messageId.msg_id} failed: {message.error}
       </div>
@@ -884,13 +889,20 @@ function MessageLoading({
 }: {
   messageId: T.MessageListItem & { kind: 'message' }
 }) {
+  const ref = useRef<HTMLDivElement>(null)
+  const rovingTabindex = useRovingTabindex(ref)
+
   return (
     <div className='info-message' id={String(messageId.msg_id)}>
       <div
-        className='bubble'
+        ref={ref}
+        className={'bubble ' + rovingTabindex.className}
         style={{
           backgroundColor: 'rgba(55,0,0,0.5)',
         }}
+        tabIndex={rovingTabindex.tabIndex}
+        onKeyDown={rovingTabindex.onKeydown}
+        onFocus={rovingTabindex.setAsActiveElement}
       >
         Loading Message {messageId.msg_id}
       </div>