feat: improve PostForm tab order for better accessibility

- Make textarea first focusable element

- Optimize keyboard navigation flow

- Set logical tabIndex values

- Add tests to verify tab order behavior

Author: letam

app/src/components/PostForm.tsx

@@ -55,7 +55,7 @@ export default function PostForm(): ReactElement {
               }}
               placeholder="Share your thoughts..."
               aria-label="Post content"
-              tabIndex={0}
+              tabIndex={1}
             />
           </div>
           <div style={{ display: "none" }}>
@@ -78,7 +78,7 @@ export default function PostForm(): ReactElement {
             <button
               type="submit"
               className="px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:bg-indigo-800 md:px-5 md:text-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-              tabIndex={0}
+              tabIndex={2}
             >
               Send
             </button>

app/src/components/__tests__/PostForm.test.tsx

@@ -147,4 +147,58 @@ describe("PostForm", () => {
     expect(consoleErrorSpy).toHaveBeenCalledWith(new Error("API Error"));
     consoleErrorSpy.mockRestore();
   });
+
+  it("renders form elements with correct accessibility attributes", () => {
+    renderPostForm();
+
+    // Check if textarea is present and has correct tabIndex
+    const textarea = screen.getByRole('textbox', { name: /post content/i });
+    expect(textarea).toBeInTheDocument();
+    expect(textarea).toHaveAttribute('tabindex', '1');
+
+    // Check if submit button is present and has correct tabIndex
+    const submitButton = screen.getByRole('button', { name: /send/i });
+    expect(submitButton).toBeInTheDocument();
+    expect(submitButton).toHaveAttribute('tabindex', '2');
+  });
+
+  it("maintains correct tab order", async () => {
+    renderPostForm();
+
+    // Get all focusable elements
+    const textarea = screen.getByRole('textbox', { name: /post content/i });
+    const submitButton = screen.getByRole('button', { name: /send/i });
+
+    // Focus the textarea
+    textarea.focus();
+    expect(document.activeElement).toBe(textarea);
+
+    // Press Tab to move to submit button
+    await userEvent.tab();
+    expect(document.activeElement).toBe(submitButton);
+  });
+
+  it("applies focus styles when elements are focused", () => {
+    renderPostForm();
+
+    const textarea = screen.getByRole('textbox', { name: /post content/i });
+    const submitButton = screen.getByRole('button', { name: /send/i });
+
+    // Check if focus styles are applied
+    expect(textarea).toHaveClass('focus:ring-2', 'focus:ring-blue-500');
+    expect(submitButton).toHaveClass('focus:ring-2', 'focus:ring-offset-2', 'focus:ring-indigo-500');
+  });
+
+  it("focuses textarea first when pressing Tab on the page", async () => {
+    renderPostForm();
+
+    // Get the textarea
+    const textarea = screen.getByRole('textbox', { name: /post content/i });
+
+    // Press Tab on the page
+    await userEvent.tab();
+
+    // Verify textarea is focused first
+    expect(document.activeElement).toBe(textarea);
+  });
 });