diff --git a/frontend/src/components/Chat/ConversationPanel.styles.ts b/frontend/src/components/Chat/ConversationPanel.styles.ts
index b8c0daf98b..d821b33580 100644
--- a/frontend/src/components/Chat/ConversationPanel.styles.ts
+++ b/frontend/src/components/Chat/ConversationPanel.styles.ts
@@ -41,6 +41,10 @@ export const useConversationPanelStyles = makeStyles({
'&:hover': {
backgroundColor: tokens.colorNeutralBackground1Hover,
},
+ '&:focus-visible': {
+ outline: `2px solid ${tokens.colorStrokeFocus2}`,
+ outlineOffset: '-2px',
+ },
},
conversationItemActive: {
backgroundColor: tokens.colorNeutralBackground1Selected,
diff --git a/frontend/src/components/Chat/ConversationPanel.test.tsx b/frontend/src/components/Chat/ConversationPanel.test.tsx
index d7c8f134bb..286a23ed63 100644
--- a/frontend/src/components/Chat/ConversationPanel.test.tsx
+++ b/frontend/src/components/Chat/ConversationPanel.test.tsx
@@ -217,6 +217,46 @@ describe("ConversationPanel", () => {
expect(onSelectConversation).toHaveBeenCalledWith("branch-1");
});
+ it("should be keyboard accessible for conversation selection", async () => {
+ const user = userEvent.setup();
+ const onSelectConversation = jest.fn();
+
+ mockedAttacksApi.getConversations.mockResolvedValue({
+ attack_result_id: "ar-attack-123",
+ main_conversation_id: "attack-123",
+ conversations: [
+ {
+ conversation_id: "branch-1",
+ message_count: 2,
+ last_message_preview: null,
+ created_at: "2026-02-18T11:00:00Z",
+ },
+ ],
+ });
+
+ render(
+