From 86e7d8eaf81005ae922f59ed441de638d114dad9 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Thu, 21 May 2026 14:38:02 +0200
Subject: [PATCH 1/2] fix: focus comment composer when ready

---
 .../MarkdownInput/CommentMarkdownInput.tsx    |  17 ++-
 .../components/fields/RichTextInput.spec.tsx  | 135 ++++++++++++++++++
 .../src/components/fields/RichTextInput.tsx   |   6 +-
 .../src/components/post/NewComment.spec.tsx   |  91 ++++++++++++
 .../shared/src/components/post/NewComment.tsx |  26 +++-
 5 files changed, 269 insertions(+), 6 deletions(-)
 create mode 100644 packages/shared/src/components/fields/RichTextInput.spec.tsx
 create mode 100644 packages/shared/src/components/post/NewComment.spec.tsx

diff --git a/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx b/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx
index 403fdb432e9..e0dd5547fcd 100644
--- a/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx
+++ b/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx
@@ -1,8 +1,8 @@
 import type {
   CSSProperties,
+  ForwardedRef,
   FormEventHandler,
   FormHTMLAttributes,
-  MutableRefObject,
   ReactElement,
 } from 'react';
 import React, { forwardRef, useRef } from 'react';
@@ -25,6 +25,7 @@ export interface CommentClassName {
 
 export interface CommentMarkdownInputProps {
   post: Post;
+  inputId?: string;
   editCommentId?: string;
   parentCommentId?: string;
   initialContent?: string;
@@ -38,6 +39,7 @@ export interface CommentMarkdownInputProps {
   ) => void;
   showSubmit?: boolean;
   showUserAvatar?: boolean;
+  autoFocus?: boolean;
   onChange?: (value: string) => void;
   formProps?: FormHTMLAttributes<HTMLFormElement>;
   onClose?: () => void;
@@ -46,6 +48,7 @@ export interface CommentMarkdownInputProps {
 export function CommentMarkdownInputComponent(
   {
     post,
+    inputId,
     initialContent,
     replyTo,
     editCommentId,
@@ -55,18 +58,23 @@ export function CommentMarkdownInputComponent(
     onChange,
     showSubmit = true,
     showUserAvatar = true,
+    autoFocus = true,
     formProps = {},
     onClose,
   }: CommentMarkdownInputProps,
-  ref: MutableRefObject<HTMLFormElement>,
+  ref: ForwardedRef<HTMLFormElement>,
 ): ReactElement {
-  const shouldFocus = useRef(true);
+  const shouldFocus = useRef(autoFocus);
   const postId = post?.id;
   const sourceId = post?.source?.id;
   const {
     mutateComment: { mutateComment, isLoading, isSuccess },
   } = useWriteCommentContext();
   const richTextRef = useRef<RichTextInputRef | null>(null);
+  let submitCopy: string | undefined;
+  if (showSubmit) {
+    submitCopy = editCommentId ? 'Update' : 'Comment';
+  }
 
   const onSubmitForm: FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
@@ -114,6 +122,7 @@ export function CommentMarkdownInputComponent(
       ref={ref}
     >
       <RichTextInput
+        inputId={inputId}
         ref={(richTextRefInstance) => {
           if (richTextRefInstance) {
             richTextRef.current = richTextRefInstance;
@@ -143,7 +152,7 @@ export function CommentMarkdownInputComponent(
         }}
         onSubmit={onKeyboardSubmit}
         enabledCommand={{ ...defaultMarkdownCommands, upload: true }}
-        submitCopy={showSubmit && (editCommentId ? 'Update' : 'Comment')}
+        submitCopy={submitCopy}
         timeline={
           replyTo ? (
             <span className="py-1.5 pl-12 text-text-tertiary typo-caption1">
diff --git a/packages/shared/src/components/fields/RichTextInput.spec.tsx b/packages/shared/src/components/fields/RichTextInput.spec.tsx
new file mode 100644
index 00000000000..e03577d2d93
--- /dev/null
+++ b/packages/shared/src/components/fields/RichTextInput.spec.tsx
@@ -0,0 +1,135 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import RichTextInput from './RichTextInput';
+
+const mockFocus = jest.fn();
+const mockUseEditor = jest.fn();
+const mockEditor = {
+  commands: {
+    focus: mockFocus,
+    setContent: jest.fn(),
+  },
+};
+
+jest.mock('next/dynamic', () => () => () => null);
+
+jest.mock('@tiptap/core', () => ({
+  Extension: { create: jest.fn((config) => config) },
+  markInputRule: jest.fn(),
+  nodeInputRule: jest.fn(),
+}));
+
+jest.mock('@tiptap/starter-kit', () => ({
+  __esModule: true,
+  default: { configure: jest.fn(() => ({})) },
+}));
+
+jest.mock('@tiptap/extension-link', () => ({
+  __esModule: true,
+  default: { configure: jest.fn(() => ({})) },
+}));
+
+jest.mock('@tiptap/extension-placeholder', () => ({
+  __esModule: true,
+  default: { configure: jest.fn(() => ({})) },
+}));
+
+jest.mock('@tiptap/extension-character-count', () => ({
+  __esModule: true,
+  default: { configure: jest.fn(() => ({})) },
+}));
+
+jest.mock('@tiptap/extension-image', () => ({
+  __esModule: true,
+  default: {},
+}));
+
+jest.mock('@tiptap/react', () => ({
+  __esModule: true,
+  useEditor: (options: unknown) => {
+    mockUseEditor(options);
+    return mockEditor;
+  },
+  EditorContent: () => {
+    const react = jest.requireActual('react') as typeof React;
+    return react.createElement('div', { 'data-testid': 'editor-content' });
+  },
+}));
+
+jest.mock('../../contexts/AuthContext', () => ({
+  useAuthContext: () => ({ user: null }),
+}));
+
+jest.mock('../../hooks/usePopupSelector', () => ({
+  __esModule: true,
+  usePopupSelector: () => ({ parentSelector: undefined }),
+}));
+
+jest.mock('../../hooks/useToastNotification', () => ({
+  useToastNotification: () => ({ displayToast: jest.fn() }),
+}));
+
+jest.mock('./RichTextEditor/useDraftStorage', () => ({
+  useDraftStorage: () => ({
+    getInitialValue: (initialContent = '') => initialContent,
+    clearDraft: jest.fn(),
+  }),
+}));
+
+jest.mock('./RichTextEditor/useImageUpload', () => ({
+  useImageUpload: () => ({
+    queueCount: 0,
+    uploadRef: { current: null },
+    insertImage: jest.fn(),
+    handleDrop: jest.fn(),
+    handlePaste: jest.fn(),
+    onUpload: jest.fn(),
+  }),
+}));
+
+jest.mock('./RichTextEditor/useMentionAutocomplete', () => ({
+  useMentionAutocomplete: () => ({
+    queryRef: { current: undefined },
+    mentionsRef: { current: [] },
+    selectedRef: { current: 0 },
+    mentions: [],
+    selected: 0,
+    query: undefined,
+    updateFromEditor: jest.fn(),
+    clearMention: jest.fn(),
+    applyMention: jest.fn(),
+  }),
+}));
+
+jest.mock('./RichTextEditor/useEmojiAutocomplete', () => ({
+  useEmojiAutocomplete: () => ({
+    emojiQueryRef: { current: undefined },
+    emojiDataRef: { current: [] },
+    selectedEmojiRef: { current: 0 },
+    emojiQuery: undefined,
+    emojiData: [],
+    selectedEmoji: 0,
+    updateFromEditor: jest.fn(),
+    clearEmoji: jest.fn(),
+    applyEmoji: jest.fn(),
+    setSelectedEmoji: jest.fn(),
+  }),
+}));
+
+describe('RichTextInput', () => {
+  beforeEach(() => {
+    mockUseEditor.mockClear();
+  });
+
+  it('exposes the input id on the rich editor DOM attributes', () => {
+    render(<RichTextInput inputId="comment-editor" hideFooter hideToolbar />);
+
+    expect(mockUseEditor).toHaveBeenCalledWith(
+      expect.objectContaining({
+        editorProps: expect.objectContaining({
+          attributes: { id: 'comment-editor' },
+        }),
+      }),
+    );
+  });
+});
diff --git a/packages/shared/src/components/fields/RichTextInput.tsx b/packages/shared/src/components/fields/RichTextInput.tsx
index 97234a0b442..2a1eb9f2c88 100644
--- a/packages/shared/src/components/fields/RichTextInput.tsx
+++ b/packages/shared/src/components/fields/RichTextInput.tsx
@@ -122,6 +122,7 @@ interface ClassName {
 
 interface RichTextInputProps {
   className?: ClassName;
+  inputId?: string;
   footer?: ReactNode;
   textareaProps?: Omit<
     TextareaHTMLAttributes<HTMLTextAreaElement>,
@@ -169,6 +170,7 @@ export interface RichTextInputRef {
 function RichTextInput(
   {
     className = {},
+    inputId,
     footer,
     textareaProps = {},
     submitCopy,
@@ -365,6 +367,7 @@ function RichTextInput(
       updateSuggestionsFromEditor(updatedEditor);
     },
     editorProps: {
+      attributes: inputId ? { id: inputId } : undefined,
       handlePaste: (_view, event) => {
         const hasFiles = (event.clipboardData?.files?.length ?? 0) > 0;
         if (hasFiles) {
@@ -671,7 +674,7 @@ function RichTextInput(
         return;
       }
 
-      editor?.commands.focus();
+      editor?.commands.focus('end');
     },
     toggleMarkdownMode,
   }));
@@ -863,6 +866,7 @@ function RichTextInput(
               >
                 <textarea
                   {...textareaProps}
+                  id={inputId}
                   name={undefined}
                   ref={markdownTextareaRef}
                   value={input}
diff --git a/packages/shared/src/components/post/NewComment.spec.tsx b/packages/shared/src/components/post/NewComment.spec.tsx
new file mode 100644
index 00000000000..86dc395b421
--- /dev/null
+++ b/packages/shared/src/components/post/NewComment.spec.tsx
@@ -0,0 +1,91 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { NewComment } from './NewComment';
+
+const mockShowLogin = jest.fn();
+const mockLogEvent = jest.fn();
+const mockUser = {
+  id: 'user-1',
+  name: 'User',
+  username: 'user',
+  image: '',
+  permalink: '#',
+};
+
+jest.mock('../../contexts/AuthContext', () => ({
+  useAuthContext: () => ({
+    user: mockUser,
+    showLogin: mockShowLogin,
+  }),
+}));
+
+jest.mock('../../contexts/LogContext', () => ({
+  useLogContext: () => ({ logEvent: mockLogEvent }),
+}));
+
+jest.mock('../../contexts', () => ({
+  useActiveFeedContext: () => ({ logOpts: undefined }),
+}));
+
+jest.mock('../../lib/feed', () => ({
+  postLogEvent: jest.fn(() => ({ event_name: 'open comment' })),
+}));
+
+jest.mock('../ProfilePicture', () => ({
+  ProfileImageSize: {
+    Large: 'large',
+    Medium: 'medium',
+  },
+  ProfilePicture: () => <span />,
+  getProfilePictureClasses: () => '',
+}));
+
+jest.mock('../image/Image', () => ({
+  Image: () => null,
+}));
+
+const CommentInputOrModal = ({
+  inputId,
+}: {
+  inputId: string;
+}): React.ReactElement => (
+  <div data-testid="comment-input" id={inputId} tabIndex={-1} />
+);
+
+describe('NewComment', () => {
+  const originalRequestAnimationFrame = window.requestAnimationFrame;
+  const originalCancelAnimationFrame = window.cancelAnimationFrame;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.requestAnimationFrame = ((callback: FrameRequestCallback) =>
+      window.setTimeout(
+        () => callback(0),
+        0,
+      )) as typeof window.requestAnimationFrame;
+    window.cancelAnimationFrame = ((id: number) =>
+      window.clearTimeout(id)) as typeof window.cancelAnimationFrame;
+  });
+
+  afterEach(() => {
+    window.requestAnimationFrame = originalRequestAnimationFrame;
+    window.cancelAnimationFrame = originalCancelAnimationFrame;
+  });
+
+  it('focuses the composer input from the comment click handler', async () => {
+    render(
+      <NewComment
+        post={{ id: 'post-1' } as never}
+        CommentInputOrModal={CommentInputOrModal}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /share your thoughts/i }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('comment-input')).toHaveFocus();
+    });
+  });
+});
diff --git a/packages/shared/src/components/post/NewComment.tsx b/packages/shared/src/components/post/NewComment.tsx
index 8f1bd5ab0bc..705f41c3580 100644
--- a/packages/shared/src/components/post/NewComment.tsx
+++ b/packages/shared/src/components/post/NewComment.tsx
@@ -3,6 +3,7 @@ import React, {
   forwardRef,
   useCallback,
   useEffect,
+  useId,
   useImperativeHandle,
   useState,
 } from 'react';
@@ -44,6 +45,24 @@ const buttonSize: Partial<Record<ProfileImageSize, ButtonSize>> = {
   medium: ButtonSize.Small,
 };
 
+const focusInputById = (inputId: string, remainingFrames = 30): void => {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  const input = document.getElementById(inputId);
+  if (input) {
+    input.focus();
+    return;
+  }
+
+  if (remainingFrames <= 0) {
+    return;
+  }
+
+  requestAnimationFrame(() => focusInputById(inputId, remainingFrames - 1));
+};
+
 export interface NewCommentRef {
   onShowInput: (origin: Origin) => void;
 }
@@ -66,6 +85,7 @@ function NewCommentComponent(
   const { logEvent } = useLogContext();
   const { logOpts } = useActiveFeedContext();
   const { user, showLogin } = useAuthContext();
+  const inputId = `comment-input-${useId()}`;
   const [inputContent, setInputContent] = useState<string | undefined>(
     undefined,
   );
@@ -123,7 +143,9 @@ function NewCommentComponent(
       return showLogin({ trigger: AuthTriggers.NewComment });
     }
 
-    return onShowComment(origin);
+    onShowComment(origin);
+    focusInputById(inputId);
+    return undefined;
   };
 
   useImperativeHandle(ref, () => ({
@@ -135,6 +157,8 @@ function NewCommentComponent(
       <CommentInputOrModal
         {...props}
         post={post}
+        inputId={inputId}
+        autoFocus={false}
         className={{ input: { container: 'my-4', tab: className?.tab } }}
         onCommented={onSuccess}
         initialContent={inputContent}

From 89c5f84abca4b6513bcf9d2b4a436f9ad3f41f4a Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Thu, 21 May 2026 15:49:28 +0200
Subject: [PATCH 2/2] fix: expose rich editor textbox role

---
 .../components/fields/RichTextInput.spec.tsx    | 17 ++++++++++++++++-
 .../src/components/fields/RichTextInput.tsx     |  6 +++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/shared/src/components/fields/RichTextInput.spec.tsx b/packages/shared/src/components/fields/RichTextInput.spec.tsx
index e03577d2d93..cdf23f4e1b3 100644
--- a/packages/shared/src/components/fields/RichTextInput.spec.tsx
+++ b/packages/shared/src/components/fields/RichTextInput.spec.tsx
@@ -127,7 +127,22 @@ describe('RichTextInput', () => {
     expect(mockUseEditor).toHaveBeenCalledWith(
       expect.objectContaining({
         editorProps: expect.objectContaining({
-          attributes: { id: 'comment-editor' },
+          attributes: expect.objectContaining({ id: 'comment-editor' }),
+        }),
+      }),
+    );
+  });
+
+  it('exposes the rich editor as a multiline textbox', () => {
+    render(<RichTextInput hideFooter hideToolbar />);
+
+    expect(mockUseEditor).toHaveBeenCalledWith(
+      expect.objectContaining({
+        editorProps: expect.objectContaining({
+          attributes: expect.objectContaining({
+            role: 'textbox',
+            'aria-multiline': 'true',
+          }),
         }),
       }),
     );
diff --git a/packages/shared/src/components/fields/RichTextInput.tsx b/packages/shared/src/components/fields/RichTextInput.tsx
index 2a1eb9f2c88..0001e52d080 100644
--- a/packages/shared/src/components/fields/RichTextInput.tsx
+++ b/packages/shared/src/components/fields/RichTextInput.tsx
@@ -367,7 +367,11 @@ function RichTextInput(
       updateSuggestionsFromEditor(updatedEditor);
     },
     editorProps: {
-      attributes: inputId ? { id: inputId } : undefined,
+      attributes: {
+        ...(inputId ? { id: inputId } : {}),
+        role: 'textbox',
+        'aria-multiline': 'true',
+      },
       handlePaste: (_view, event) => {
         const hasFiles = (event.clipboardData?.files?.length ?? 0) > 0;
         if (hasFiles) {