refactor: enhance accessibility and code consistency across components

Junyi-99 · Junyi-99 · commit 19269cc86f33 · 2026-02-19T01:44:53.000+08:00
- Improved accessibility by standardizing `onKeyDown` event handlers to use consistent formatting for key checks across multiple components.
- Refactored layout of JSX elements for better readability in `chat.pb.go`, `embed-sidebar`, and various components in the message entry container.
- General code cleanup to enhance maintainability and readability.
diff --git a/pkg/gen/api/chat/v2/chat.pb.go b/pkg/gen/api/chat/v2/chat.pb.go
diff --git a/webapp/_webapp/src/components/message-entry-container/assistant.tsx b/webapp/_webapp/src/components/message-entry-container/assistant.tsx
@@ -147,7 +147,17 @@ export const AssistantMessageContainer = ({
           {((parsedMessage.regularContent?.length || 0) > 0 || parsedMessage.paperDebuggerContent.length > 0) && (
             <div className="actions rnd-cancel noselect">
               <Tooltip content="Copy" placement="bottom" size="sm" delay={1000}>
-                <span onClick={handleCopy} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { handleCopy(); } }} tabIndex={0} role="button" aria-label="Copy message">
+                <span
+                  onClick={handleCopy}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      handleCopy();
+                    }
+                  }}
+                  tabIndex={0}
+                  role="button"
+                  aria-label="Copy message"
+                >
                   <Icon icon={copySuccess ? "tabler:copy-check" : "tabler:copy"} className="icon" />
                 </span>
               </Tooltip>
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/general.tsx b/webapp/_webapp/src/components/message-entry-container/tools/general.tsx
@@ -95,7 +95,17 @@ export const GeneralToolCard = ({
   // When there is a message, show the compact card with collapsible content
   return (
     <div className={cn("tool-card noselect compact", { animated: animated })}>
-      <div className="flex items-center gap-1 cursor-pointer" role="button" tabIndex={0} onClick={toggleCollapse} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { toggleCollapse(); } }}>
+      <div
+        className="flex items-center gap-1 cursor-pointer"
+        role="button"
+        tabIndex={0}
+        onClick={toggleCollapse}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            toggleCollapse();
+          }
+        }}
+      >
         <button
           className="text-gray-400 hover:text-gray-600 transition-colors duration-200 rounded flex"
           aria-label={isCollapsed ? "Expand" : "Collapse"}
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/paper-score-comment/filter-controls.tsx b/webapp/_webapp/src/components/message-entry-container/tools/paper-score-comment/filter-controls.tsx
@@ -41,7 +41,11 @@ export const FilterControls = ({
         role="button"
         tabIndex={0}
         onClick={() => setIsSuggestionsExpanded(!isSuggestionsExpanded)}
-        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsSuggestionsExpanded(!isSuggestionsExpanded); } }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            setIsSuggestionsExpanded(!isSuggestionsExpanded);
+          }
+        }}
       >
         <button className="!flex !items-center !gap-2 !text-sm !font-semibold !text-gray-800 hover:!text-gray-600 !transition-colors truncate">
           <Icon
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/generate-citations.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/generate-citations.tsx
@@ -43,7 +43,11 @@ export const GenerateCitationsCard = ({ functionName, message, preparing, animat
           role="button"
           tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsMetadataCollapsed(!isMetadataCollapsed);
+            }
+          }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -74,7 +78,11 @@ export const GenerateCitationsCard = ({ functionName, message, preparing, animat
             role="button"
             tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setIsMetadataCollapsed(!isMetadataCollapsed);
+              }
+            }}
           >
             <button
               className="text-gray-400 hover:text-gray-600 transition-colors duration-200 rounded flex"
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/online-search-papers.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/online-search-papers.tsx
@@ -43,7 +43,11 @@ export const OnlineSearchPapersCard = ({ functionName, message, preparing, anima
           role="button"
           tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsMetadataCollapsed(!isMetadataCollapsed);
+            }
+          }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -78,7 +82,11 @@ export const OnlineSearchPapersCard = ({ functionName, message, preparing, anima
             role="button"
             tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setIsMetadataCollapsed(!isMetadataCollapsed);
+              }
+            }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/review-paper.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/review-paper.tsx
@@ -84,7 +84,11 @@ export const ReviewPaperCard = ({ functionName, message, preparing, animated }:
           role="button"
           tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsMetadataCollapsed(!isMetadataCollapsed);
+            }
+          }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -119,7 +123,11 @@ export const ReviewPaperCard = ({ functionName, message, preparing, animated }:
             role="button"
             tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setIsMetadataCollapsed(!isMetadataCollapsed);
+              }
+            }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/search-relevant-papers.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/search-relevant-papers.tsx
@@ -51,7 +51,11 @@ export const SearchRelevantPapersCard = ({ functionName, message, preparing, ani
           role="button"
           tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsMetadataCollapsed(!isMetadataCollapsed);
+            }
+          }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -86,7 +90,11 @@ export const SearchRelevantPapersCard = ({ functionName, message, preparing, ani
             role="button"
             tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setIsMetadataCollapsed(!isMetadataCollapsed);
+              }
+            }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/verify-citations.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/verify-citations.tsx
@@ -43,7 +43,11 @@ export const VerifyCitationsCard = ({ functionName, message, preparing, animated
           role="button"
           tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsMetadataCollapsed(!isMetadataCollapsed);
+            }
+          }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -78,7 +82,11 @@ export const VerifyCitationsCard = ({ functionName, message, preparing, animated
             role="button"
             tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setIsMetadataCollapsed(!isMetadataCollapsed);
+              }
+            }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/xtramcp-generic-card.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/xtramcp-generic-card.tsx
@@ -43,7 +43,11 @@ export const XtraMcpGenericCard = ({ functionName, message, preparing, animated
           role="button"
           tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsMetadataCollapsed(!isMetadataCollapsed);
+            }
+          }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -77,7 +81,11 @@ export const XtraMcpGenericCard = ({ functionName, message, preparing, animated
             role="button"
             tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setIsMetadataCollapsed(!isMetadataCollapsed);
+              }
+            }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton
@@ -148,7 +156,11 @@ export const XtraMcpGenericCard = ({ functionName, message, preparing, animated
           role="button"
           tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsMetadataCollapsed(!isMetadataCollapsed);
+            }
+          }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
         </div>
diff --git a/webapp/_webapp/src/components/onboarding-guide.tsx b/webapp/_webapp/src/components/onboarding-guide.tsx
@@ -205,7 +205,11 @@ function OnboardingStep({ step, imageUrl, imageError, onImageClick, onImageError
             role="button"
             tabIndex={0}
             onClick={onImageClick}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { onImageClick(); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                onImageClick();
+              }
+            }}
             onError={onImageError}
           />
         </div>
@@ -241,7 +245,11 @@ function ImageModal({
             role="button"
             tabIndex={0}
             onClick={onClose}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { onClose(); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                onClose();
+              }
+            }}
             onError={onImageError}
           />
         )}
diff --git a/webapp/_webapp/src/components/tabs.tsx b/webapp/_webapp/src/components/tabs.tsx
@@ -151,7 +151,13 @@ export const Tabs = forwardRef<TabRef, TabProps>(({ items }, ref) => {
     <>
       <div className="pd-app-tab-items noselect relative" style={{ width: `${tabItemsWidth}px` }}>
         {/* Resize handle on the right edge */}
-        <div ref={resizeHandleRef} className="pd-tab-items-resize-handle" role="separator" aria-label="Resize tabs" onMouseDown={handleMouseDown}>
+        <div
+          ref={resizeHandleRef}
+          className="pd-tab-items-resize-handle"
+          role="separator"
+          aria-label="Resize tabs"
+          onMouseDown={handleMouseDown}
+        >
           {/* Visual indicator line */}
           <div className="resize-handle-indicator" />
         </div>
diff --git a/webapp/_webapp/src/libs/inline-suggestion.ts b/webapp/_webapp/src/libs/inline-suggestion.ts
@@ -52,9 +52,7 @@ async function completeCitationKeys(state: EditorState, triggerText: string): Pr
   const textBefore = state.doc.sliceString(textBeforeStart, cursorPos - triggerText.length);
 
   // Split by sentence-ending punctuation and get the last sentence
-  const sentences = textBefore
-    .split(/(?<=[.!?])\s+/)
-    .filter((s) => s.trim().length > 0);
+  const sentences = textBefore.split(/(?<=[.!?])\s+/).filter((s) => s.trim().length > 0);
   // Fall back to the bounded window if no sentence boundary found
   const lastSentence = sentences.length > 0 ? sentences[sentences.length - 1] : textBefore.trim();
   if (!lastSentence) {
@@ -636,8 +634,7 @@ export function createAutocompleteSuppressor(
         this.handleKeydown = (e: KeyboardEvent) => {
           if (e.key !== "Tab") return;
 
-          const suggestion =
-            this.view.state.field<SuggestionState>(suggestionState);
+          const suggestion = this.view.state.field<SuggestionState>(suggestionState);
           if (!suggestion?.suggestion) return;
 
           e.preventDefault();
@@ -663,8 +660,7 @@ export function createAutocompleteSuppressor(
       }
 
       update(update: ViewUpdate) {
-        const suggestion =
-          update.state.field<SuggestionState>(suggestionState);
+        const suggestion = update.state.field<SuggestionState>(suggestionState);
         if (suggestion?.suggestion || isTriggerAtCursor(update.state)) {
           suppress();
         } else {
@@ -703,5 +699,12 @@ export function createSuggestionExtension(overleafCm: OverleafCodeMirror, config
   const keymapBindingExtension = createExtensionKeymapBinding(overleafCm, suggestionAcceptanceEffect, suggestionState);
   const autocompleteSuppressor = createAutocompleteSuppressor(overleafCm, suggestionState, suggestionAcceptanceEffect);
 
-  return [suggestionState, pluginConfigState, suggestionFetchPlugin, suggestionRenderingPlugin, keymapBindingExtension, autocompleteSuppressor];
+  return [
+    suggestionState,
+    pluginConfigState,
+    suggestionFetchPlugin,
+    suggestionRenderingPlugin,
+    keymapBindingExtension,
+    autocompleteSuppressor,
+  ];
 }
diff --git a/webapp/_webapp/src/views/chat/body/index.tsx b/webapp/_webapp/src/views/chat/body/index.tsx
@@ -134,7 +134,7 @@ export const ChatBody = ({ conversation }: ChatBodyProps) => {
                 }
               }}
               onKeyDown={async (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
+                if (e.key === "Enter" || e.key === " ") {
                   try {
                     const response = await getConversation({ conversationId: conversation?.id ?? "" });
                     if (!response.conversation) {
diff --git a/webapp/_webapp/src/views/chat/footer/toolbar/selection.tsx b/webapp/_webapp/src/views/chat/footer/toolbar/selection.tsx
@@ -27,7 +27,13 @@ export function Selection<T>({ items, initialValue, onSelect, onClose }: Selecti
   const { user } = useAuthStore();
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [{ selectedIdx, isKeyboardNavigation }, dispatchSelection] = useReducer(
-    (state: { selectedIdx: number; isKeyboardNavigation: boolean }, action: { type: "SET_IDX"; idx: number } | { type: "SET_KEYBOARD_NAV"; value: boolean } | { type: "SET_IDX_WITH_KEYBOARD_NAV"; idx: number }) => {
+    (
+      state: { selectedIdx: number; isKeyboardNavigation: boolean },
+      action:
+        | { type: "SET_IDX"; idx: number }
+        | { type: "SET_KEYBOARD_NAV"; value: boolean }
+        | { type: "SET_IDX_WITH_KEYBOARD_NAV"; idx: number },
+    ) => {
       switch (action.type) {
         case "SET_IDX":
           return { ...state, selectedIdx: action.idx };
@@ -182,7 +188,7 @@ export function Selection<T>({ items, initialValue, onSelect, onClose }: Selecti
             onSelect?.(item);
           }}
           onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
+            if (e.key === "Enter" || e.key === " ") {
               if (item.disabled) return;
               googleAnalytics.fireEvent(user?.id, `select_${normalizeName(item.title)}`, {});
               onSelect?.(item);
diff --git a/webapp/_webapp/src/views/chat/header/chat-button.tsx b/webapp/_webapp/src/views/chat/header/chat-button.tsx
@@ -74,7 +74,7 @@ export const ChatButton = ({
         onClick?.();
       }}
       onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
+        if (e.key === "Enter" || e.key === " ") {
           if (disabled) return;
           googleAnalytics.fireEvent(user?.id, "click_chat_button_" + normalizeName(text ?? alt ?? icon), {});
           onClick?.();
diff --git a/webapp/_webapp/src/views/devtools/index.tsx b/webapp/_webapp/src/views/devtools/index.tsx
@@ -310,7 +310,9 @@ export const DevTools = () => {
 
             {/* Preparing delay */}
             <div className="flex flex-row gap-2 items-center pt-2 border-t !border-orange-200">
-              <label htmlFor="preparing-delay-input" className="text-sm text-gray-700 whitespace-nowrap">Preparing delay (seconds):</label>
+              <label htmlFor="preparing-delay-input" className="text-sm text-gray-700 whitespace-nowrap">
+                Preparing delay (seconds):
+              </label>
               <Input
                 id="preparing-delay-input"
                 size="sm"
diff --git a/webapp/_webapp/src/views/embed-sidebar.tsx b/webapp/_webapp/src/views/embed-sidebar.tsx
@@ -264,7 +264,13 @@ export const EmbedSidebar = () => {
       }}
     >
       {/* Resize handle on the left */}
-      <div ref={resizeHandleRef} className="pd-embed-resize-handle" role="separator" aria-label="Resize sidebar" onMouseDown={handleMouseDown}>
+      <div
+        ref={resizeHandleRef}
+        className="pd-embed-resize-handle"
+        role="separator"
+        aria-label="Resize sidebar"
+        onMouseDown={handleMouseDown}
+      >
         {/* Visual indicator line */}
         <div className="resize-handle-indicator" />
       </div>
diff --git a/webapp/_webapp/src/views/login/index.tsx b/webapp/_webapp/src/views/login/index.tsx
diff --git a/webapp/_webapp/src/views/login/login-with-overleaf.tsx b/webapp/_webapp/src/views/login/login-with-overleaf.tsx
diff --git a/webapp/_webapp/src/views/office/app.tsx b/webapp/_webapp/src/views/office/app.tsx
diff --git a/webapp/_webapp/src/views/settings/sections/footer.tsx b/webapp/_webapp/src/views/settings/sections/footer.tsx
