fix: fix icon in new docs page (#5836)

Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>

.cursor/rules/testing.mdc

@@ -0,0 +1,6 @@
+---
+description: Whenever the user asks to write or update a test file for .tsx or .ts files.
+globs: 
+alwaysApply: false
+---
+Use the rules in this file when writing tests [copilot-instructions.md](mdc:.github/copilot-instructions.md)

apps/storybook/package.json

@@ -11,9 +11,7 @@
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
   "dependencies": {
-    "eslint-plugin-react-refresh": "0.4.20",
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "eslint-plugin-react-refresh": "0.4.20"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.6",

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTable.test.tsx

@@ -1,487 +1,494 @@
-import { generateResponseTableColumns } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableColumns";
-import { deleteResponseAction } from "@/modules/analysis/components/SingleResponseCard/actions";
-import type { DragEndEvent } from "@dnd-kit/core";
-import { act, cleanup, render, screen } from "@testing-library/react";
+import { ResponseTable } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTable";
+import { getResponsesDownloadUrlAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/actions";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, test, vi } from "vitest";
+import toast from "react-hot-toast";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { TEnvironment } from "@formbricks/types/environment";
-import { TResponse, TResponseTableData } from "@formbricks/types/responses";
-import { TSurvey, TSurveyQuestion, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+import { TResponse } from "@formbricks/types/responses";
+import { TSurvey } from "@formbricks/types/surveys/types";
 import { TTag } from "@formbricks/types/tags";
-import { TUser, TUserLocale } from "@formbricks/types/user";
-import { ResponseTable } from "./ResponseTable";
+import { TUserLocale } from "@formbricks/types/user";
 
-// Hoist variables used in mock factories
-const { DndContextMock, SortableContextMock, arrayMoveMock } = vi.hoisted(() => {
-  const dndMock = vi.fn(({ children, onDragEnd }) => {
-    // Store the onDragEnd prop to allow triggering it in tests
-    (dndMock as any).lastOnDragEnd = onDragEnd;
-    return <div data-testid="dnd-context">{children}</div>;
-  });
-  const sortableMock = vi.fn(({ children }) => <>{children}</>);
-  const moveMock = vi.fn((array, from, to) => {
-    const newArray = [...array];
-    const [item] = newArray.splice(from, 1);
-    newArray.splice(to, 0, item);
-    return newArray;
-  });
-  return {
-    DndContextMock: dndMock,
-    SortableContextMock: sortableMock,
-    arrayMoveMock: moveMock,
-  };
-});
+// Mock react-hot-toast
+vi.mock("react-hot-toast", () => ({
+  default: {
+    error: vi.fn(),
+    success: vi.fn(),
+    dismiss: vi.fn(),
+  },
+}));
 
-vi.mock("@dnd-kit/core", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@dnd-kit/core")>();
-  return {
-    ...actual,
-    DndContext: DndContextMock,
-    useSensor: vi.fn(),
-    useSensors: vi.fn(),
-    closestCenter: vi.fn(),
-  };
-});
+// Mock components
+vi.mock("@/modules/ui/components/button", () => ({
+  Button: ({ children, onClick, ...props }: any) => (
+    <button onClick={onClick} data-testid="button" {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+// Mock DndContext/SortableContext
+vi.mock("@dnd-kit/core", () => ({
+  DndContext: ({ children }: any) => <div>{children}</div>,
+  useSensor: vi.fn(),
+  useSensors: vi.fn(() => "sensors"),
+  closestCenter: vi.fn(),
+  MouseSensor: vi.fn(),
+  TouchSensor: vi.fn(),
+  KeyboardSensor: vi.fn(),
+}));
 
 vi.mock("@dnd-kit/modifiers", () => ({
-  restrictToHorizontalAxis: vi.fn(),
+  restrictToHorizontalAxis: "restrictToHorizontalAxis",
 }));
 
 vi.mock("@dnd-kit/sortable", () => ({
-  SortableContext: SortableContextMock,
-  arrayMove: arrayMoveMock,
-  horizontalListSortingStrategy: vi.fn(),
+  SortableContext: ({ children }: any) => <>{children}</>,
+  horizontalListSortingStrategy: "horizontalListSortingStrategy",
+  arrayMove: vi.fn((arr, oldIndex, newIndex) => {
+    const result = [...arr];
+    const [removed] = result.splice(oldIndex, 1);
+    result.splice(newIndex, 0, removed);
+    return result;
+  }),
+}));
+
+// Mock AutoAnimate
+vi.mock("@formkit/auto-animate/react", () => ({
+  useAutoAnimate: () => [vi.fn()],
+}));
+
+// Mock UI components
+vi.mock("@/modules/ui/components/data-table", () => ({
+  DataTableHeader: ({ header }: any) => <th data-testid={`header-${header.id}`}>{header.id}</th>,
+  DataTableSettingsModal: ({ open, setOpen }: any) =>
+    open ? (
+      <div data-testid="settings-modal">
+        Settings Modal <button onClick={() => setOpen(false)}>Close</button>
+      </div>
+    ) : null,
+  DataTableToolbar: ({
+    table,
+    deleteRowsAction,
+    downloadRowsAction,
+    setIsTableSettingsModalOpen,
+    setIsExpanded,
+    isExpanded,
+  }: any) => (
+    <div data-testid="table-toolbar">
+      <button
+        data-testid="toggle-expand"
+        onClick={() => setIsExpanded(!isExpanded)}
+        aria-pressed={isExpanded}>
+        Toggle Expand
+      </button>
+      <button data-testid="open-settings" onClick={() => setIsTableSettingsModalOpen(true)}>
+        Open Settings
+      </button>
+      <button
+        data-testid="delete-rows"
+        onClick={() => deleteRowsAction(Object.keys(table.getState().rowSelection))}>
+        Delete Selected
+      </button>
+      <button
+        data-testid="download-csv"
+        onClick={() => downloadRowsAction(Object.keys(table.getState().rowSelection), "csv")}>
+        Download CSV
+      </button>
+      <button
+        data-testid="download-xlsx"
+        onClick={() => downloadRowsAction(Object.keys(table.getState().rowSelection), "xlsx")}>
+        Download XLSX
+      </button>
+    </div>
+  ),
 }));
 
-// Mock child components and hooks
 vi.mock(
   "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseCardModal",
   () => ({
-    ResponseCardModal: vi.fn(({ open, setOpen, selectedResponseId }) =>
+    ResponseCardModal: ({ open, setOpen }: any) =>
       open ? (
-        <div data-testid="response-card-modal">
-          Selected Response ID: {selectedResponseId}
-          <button onClick={() => setOpen(false)}>Close ResponseCardModal</button>
+        <div data-testid="response-modal">
+          Response Modal <button onClick={() => setOpen(false)}>Close</button>
         </div>
-      ) : null
-    ),
+      ) : null,
   })
 );
 
 vi.mock(
   "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableCell",
   () => ({
-    ResponseTableCell: vi.fn(({ cell, row, setSelectedResponseId }) => (
-      <td data-testid={`cell-${cell.id}`} onClick={() => setSelectedResponseId(row.original.responseId)}>
-        {typeof cell.getValue === "function" ? cell.getValue() : JSON.stringify(cell.getValue())}
+    ResponseTableCell: ({ cell, row, setSelectedResponseId }: any) => (
+      <td data-testid={`cell-${cell.id}-${row.id}`} onClick={() => setSelectedResponseId(row.id)}>
+        Cell Content
       </td>
-    )),
+    ),
   })
 );
 
-const mockGeneratedColumns = [
-  {
-    id: "select",
-    header: () => "Select",
-    cell: vi.fn(() => "SelectCell"),
-    enableSorting: false,
-    meta: { type: "select", questionType: null, hidden: false },
-  },
-  {
-    id: "createdAt",
-    header: () => "Created At",
-    cell: vi.fn(({ row }) => new Date(row.original.createdAt).toISOString()),
-    enableSorting: true,
-    meta: { type: "createdAt", questionType: null, hidden: false },
-  },
-  {
-    id: "q1",
-    header: () => "Question 1",
-    cell: vi.fn(({ row }) => row.original.responseData.q1),
-    enableSorting: true,
-    meta: { type: "question", questionType: "openText", hidden: false },
-  },
-];
 vi.mock(
   "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableColumns",
   () => ({
-    generateResponseTableColumns: vi.fn(() => mockGeneratedColumns),
+    generateResponseTableColumns: vi.fn(() => [
+      { id: "select", accessorKey: "select", header: "Select" },
+      { id: "createdAt", accessorKey: "createdAt", header: "Created At" },
+      { id: "person", accessorKey: "person", header: "Person" },
+      { id: "status", accessorKey: "status", header: "Status" },
+    ]),
   })
 );
 
+vi.mock("@/modules/ui/components/table", () => ({
+  Table: ({ children, ...props }: any) => <table {...props}>{children}</table>,
+  TableBody: ({ children, ...props }: any) => <tbody {...props}>{children}</tbody>,
+  TableCell: ({ children, ...props }: any) => <td {...props}>{children}</td>,
+  TableHeader: ({ children, ...props }: any) => <thead {...props}>{children}</thead>,
+  TableRow: ({ children, ...props }: any) => <tr {...props}>{children}</tr>,
+}));
+
+vi.mock("@/modules/ui/components/skeleton", () => ({
+  Skeleton: ({ children }: any) => <div data-testid="skeleton">{children}</div>,
+}));
+
+// Mock the actions
+vi.mock("@/app/(app)/environments/[environmentId]/surveys/[surveyId]/actions", () => ({
+  getResponsesDownloadUrlAction: vi.fn(),
+}));
+
 vi.mock("@/modules/analysis/components/SingleResponseCard/actions", () => ({
   deleteResponseAction: vi.fn(),
 }));
 
-vi.mock("@/modules/ui/components/data-table", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@/modules/ui/components/data-table")>();
-  return {
-    ...actual,
-    DataTableToolbar: vi.fn((props) => (
-      <div data-testid="data-table-toolbar">
-        <button data-testid="toolbar-expand-toggle" onClick={() => props.setIsExpanded(!props.isExpanded)}>
-          Toggle Expand
-        </button>
-        <button data-testid="toolbar-open-settings" onClick={() => props.setIsTableSettingsModalOpen(true)}>
-          Open Settings
-        </button>
-        <button
-          data-testid="toolbar-delete-selected"
-          onClick={() => props.deleteRows(props.table.getSelectedRowModel().rows.map((r) => r.id))}>
-          Delete Selected
-        </button>
-        <button data-testid="toolbar-delete-single" onClick={() => props.deleteAction("single_response_id")}>
-          Delete Single Action
-        </button>
-      </div>
-    )),
-    DataTableHeader: vi.fn(({ header }) => (
-      <th
-        data-testid={`header-${header.id}`}
-        onClick={() => header.column.getToggleSortingHandler()?.(new MouseEvent("click"))}>
-        {typeof header.column.columnDef.header === "function"
-          ? header.column.columnDef.header(header.getContext())
-          : header.column.columnDef.header}
-        <button
-          onMouseDown={header.getResizeHandler()}
-          onTouchStart={header.getResizeHandler()}
-          data-testid={`resize-${header.id}`}>
-          Resize
-        </button>
-      </th>
-    )),
-    DataTableSettingsModal: vi.fn(({ open, setOpen }) =>
-      open ? (
-        <div data-testid="data-table-settings-modal">
-          <button onClick={() => setOpen(false)}>Close Settings</button>
-        </div>
-      ) : null
-    ),
-  };
-});
-
-vi.mock("@formkit/auto-animate/react", () => ({
-  useAutoAnimate: vi.fn(() => [vi.fn()]),
+// Mock helper functions
+vi.mock("@/lib/utils/helper", () => ({
+  getFormattedErrorMessage: vi.fn(),
 }));
 
-vi.mock("@tolgee/react", () => ({
-  useTranslate: () => ({
-    t: vi.fn((key) => key), // Simple pass-through mock
-  }),
-}));
-
-const localStorageMock = (() => {
+// Mock localStorage
+const mockLocalStorage = (() => {
   let store: Record<string, string> = {};
   return {
-    getItem: vi.fn((key: string) => store[key] || null),
-    setItem: vi.fn((key: string, value: string) => {
-      store[key] = value.toString();
+    getItem: vi.fn((key) => store[key] || null),
+    setItem: vi.fn((key, value) => {
+      store[key] = String(value);
     }),
-    clear: () => {
+    clear: vi.fn(() => {
       store = {};
-    },
-    removeItem: vi.fn((key: string) => {
+    }),
+    removeItem: vi.fn((key) => {
       delete store[key];
     }),
   };
 })();
-Object.defineProperty(window, "localStorage", { value: localStorageMock });
+Object.defineProperty(window, "localStorage", { value: mockLocalStorage });
 
-const mockSurvey = {
-  id: "survey1",
-  name: "Test Survey",
-  type: "app",
-  status: "inProgress",
-  questions: [
-    {
-      id: "q1",
-      type: TSurveyQuestionTypeEnum.OpenText,
-      headline: { default: "Question 1" },
-      required: true,
-    } as unknown as TSurveyQuestion,
-  ],
-  hiddenFields: { enabled: true, fieldIds: ["hidden1"] },
-  variables: [{ id: "var1", name: "Variable 1", type: "text", value: "default" }],
-  createdAt: new Date(),
-  updatedAt: new Date(),
-  environmentId: "env1",
-  welcomeCard: {
-    enabled: false,
-    headline: { default: "" },
-    html: { default: "" },
-    timeToFinish: false,
-    showResponseCount: false,
-  },
-  autoClose: null,
-  delay: 0,
-  autoComplete: null,
-  closeOnDate: null,
-  displayOption: "displayOnce",
-  recontactDays: null,
-  singleUse: { enabled: false, isEncrypted: true },
-  triggers: [],
-  languages: [],
-  styling: null,
-  surveyClosedMessage: null,
-  resultShareKey: null,
-  displayPercentage: null,
-} as unknown as TSurvey;
+// Mock Tolgee
+vi.mock("@tolgee/react", () => ({
+  useTranslate: () => ({
+    t: (key: string) => key,
+  }),
+}));
 
-const mockResponses: TResponse[] = [
-  {
-    id: "res1",
-    surveyId: "survey1",
-    finished: true,
-    data: { q1: "Response 1 Text" },
-    createdAt: new Date("2023-01-01T10:00:00.000Z"),
+// Define mock data for tests
+const mockProps = {
+  data: [
+    { responseId: "resp1", createdAt: new Date().toISOString(), status: "completed", person: "Person 1" },
+    { responseId: "resp2", createdAt: new Date().toISOString(), status: "completed", person: "Person 2" },
+  ] as any[],
+  survey: {
+    id: "survey1",
+    createdAt: new Date(),
     updatedAt: new Date(),
-    meta: {},
-    singleUseId: null,
-    ttc: {},
-    tags: [],
-    notes: [],
-    variables: {},
-    language: "en",
-    contact: null,
-    contactAttributes: null,
-  },
-  {
-    id: "res2",
-    surveyId: "survey1",
-    finished: false,
-    data: { q1: "Response 2 Text" },
-    createdAt: new Date("2023-01-02T10:00:00.000Z"),
-    updatedAt: new Date(),
-    meta: {},
-    singleUseId: null,
-    ttc: {},
-    tags: [],
-    notes: [],
-    variables: {},
-    language: "en",
-    contact: null,
-    contactAttributes: null,
-  },
-];
-
-const mockResponseTableData: TResponseTableData[] = [
-  {
-    responseId: "res1",
-    responseData: { q1: "Response 1 Text" },
-    createdAt: new Date("2023-01-01T10:00:00.000Z"),
-    status: "Completed",
-    tags: [],
-    notes: [],
-    variables: {},
-    verifiedEmail: "",
-    language: "en",
-    person: null,
-    contactAttributes: null,
-  },
-  {
-    responseId: "res2",
-    responseData: { q1: "Response 2 Text" },
-    createdAt: new Date("2023-01-02T10:00:00.000Z"),
-    status: "Not Completed",
-    tags: [],
-    notes: [],
-    variables: {},
-    verifiedEmail: "",
-    language: "en",
-    person: null,
-    contactAttributes: null,
-  },
-];
-
-const mockEnvironment = {
-  id: "env1",
-  createdAt: new Date(),
-  updatedAt: new Date(),
-  type: "development",
-  appSetupCompleted: false,
-} as unknown as TEnvironment;
-
-const mockUser = {
-  id: "user1",
-  name: "Test User",
-  email: "user@test.com",
-  emailVerified: new Date(),
-  imageUrl: "",
-  twoFactorEnabled: false,
-  identityProvider: "email",
-  createdAt: new Date(),
-  updatedAt: new Date(),
-  role: "project_manager",
-  objective: "other",
-  notificationSettings: { alert: {}, weeklySummary: {} },
-} as unknown as TUser;
-
-const mockEnvironmentTags: TTag[] = [
-  { id: "tag1", name: "Tag 1", environmentId: "env1", createdAt: new Date(), updatedAt: new Date() },
-];
-const mockLocale: TUserLocale = "en-US";
-
-const defaultProps = {
-  data: mockResponseTableData,
-  survey: mockSurvey,
-  responses: mockResponses,
-  environment: mockEnvironment,
-  user: mockUser,
-  environmentTags: mockEnvironmentTags,
+    name: "name",
+    type: "link",
+    environmentId: "env-1",
+    createdBy: null,
+    status: "draft",
+  } as TSurvey,
+  responses: [
+    { id: "resp1", surveyId: "survey1", data: {}, createdAt: new Date(), updatedAt: new Date() },
+    { id: "resp2", surveyId: "survey1", data: {}, createdAt: new Date(), updatedAt: new Date() },
+  ] as TResponse[],
+  environment: { id: "env1" } as TEnvironment,
+  environmentTags: [] as TTag[],
   isReadOnly: false,
   fetchNextPage: vi.fn(),
-  hasMore: true,
+  hasMore: false,
   deleteResponses: vi.fn(),
   updateResponse: vi.fn(),
   isFetchingFirstPage: false,
-  locale: mockLocale,
+  locale: "en" as TUserLocale,
 };
 
+// Setup a container for React Testing Library before each test
+beforeEach(() => {
+  const container = document.createElement("div");
+  container.id = "test-container";
+  document.body.appendChild(container);
+
+  // Reset all toast mocks before each test
+  vi.mocked(toast.error).mockClear();
+  vi.mocked(toast.success).mockClear();
+
+  // Create a mock anchor element for download tests
+  const mockAnchor = {
+    href: "",
+    click: vi.fn(),
+    style: {},
+  };
+
+  // Update how we mock the document methods to avoid infinite recursion
+  const originalCreateElement = document.createElement.bind(document);
+  vi.spyOn(document, "createElement").mockImplementation((tagName) => {
+    if (tagName === "a") return mockAnchor as any;
+    return originalCreateElement(tagName);
+  });
+
+  vi.spyOn(document.body, "appendChild").mockReturnValue(null as any);
+  vi.spyOn(document.body, "removeChild").mockReturnValue(null as any);
+});
+
+// Cleanup after each test
+afterEach(() => {
+  const container = document.getElementById("test-container");
+  if (container) {
+    document.body.removeChild(container);
+  }
+  cleanup();
+  vi.restoreAllMocks(); // Restore mocks after each test
+});
+
 describe("ResponseTable", () => {
   afterEach(() => {
-    cleanup();
-    localStorageMock.clear();
-    vi.clearAllMocks();
+    cleanup(); // Keep cleanup within describe as per instructions
   });
 
-  test("renders skeleton when isFetchingFirstPage is true", () => {
-    render(<ResponseTable {...defaultProps} isFetchingFirstPage={true} />);
-    // Check for skeleton elements (implementation detail, might need adjustment)
-    // For now, check that data is not directly rendered
-    expect(screen.queryByText("Response 1 Text")).not.toBeInTheDocument();
-    // Check if table headers are still there
-    expect(screen.getByText("Created At")).toBeInTheDocument();
+  test("renders the table with data", () => {
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    expect(screen.getByRole("table")).toBeInTheDocument();
+    expect(screen.getByTestId("table-toolbar")).toBeInTheDocument();
   });
 
-  test("loads settings from localStorage on mount", () => {
-    const savedOrder = ["q1", "createdAt", "select"];
-    const savedVisibility = { createdAt: false };
-    const savedExpanded = true;
-    localStorageMock.setItem(`${mockSurvey.id}-columnOrder`, JSON.stringify(savedOrder));
-    localStorageMock.setItem(`${mockSurvey.id}-columnVisibility`, JSON.stringify(savedVisibility));
-    localStorageMock.setItem(`${mockSurvey.id}-rowExpand`, JSON.stringify(savedExpanded));
-
-    render(<ResponseTable {...defaultProps} />);
-
-    // Check if generateResponseTableColumns was called with the loaded expanded state
-    expect(vi.mocked(generateResponseTableColumns)).toHaveBeenCalledWith(
-      mockSurvey,
-      savedExpanded,
-      false,
-      expect.any(Function)
-    );
-  });
-
-  test("saves settings to localStorage when they change", async () => {
-    const { rerender } = render(<ResponseTable {...defaultProps} />);
-
-    // Simulate column order change via DND
-    const dragEvent: DragEndEvent = {
-      active: { id: "createdAt" },
-      over: { id: "q1" },
-      delta: { x: 0, y: 0 },
-      activators: { x: 0, y: 0 },
-      collisions: null,
-      overNode: null,
-      activeNode: null,
-    } as any;
-    act(() => {
-      (DndContextMock as any).lastOnDragEnd?.(dragEvent);
-    });
-    rerender(<ResponseTable {...defaultProps} />); // Rerender to reflect state change if necessary for useEffect
-    expect(localStorageMock.setItem).toHaveBeenCalledWith(
-      `${mockSurvey.id}-columnOrder`,
-      JSON.stringify(["select", "q1", "createdAt"])
-    );
-
-    // Simulate visibility change (e.g. via settings modal - direct state change for test)
-    // This would typically happen via table.setColumnVisibility, which is internal to useReactTable
-    // For this test, we'll assume a mechanism changes columnVisibility state
-    // This part is hard to test without deeper mocking of useReactTable or exposing setColumnVisibility
-
-    // Simulate row expansion change
-    await userEvent.click(screen.getByTestId("toolbar-expand-toggle")); // Toggle to true
-    expect(localStorageMock.setItem).toHaveBeenCalledWith(`${mockSurvey.id}-rowExpand`, "true");
-  });
-
-  test("handles column drag and drop", () => {
-    render(<ResponseTable {...defaultProps} />);
-    const dragEvent: DragEndEvent = {
-      active: { id: "createdAt" },
-      over: { id: "q1" },
-      delta: { x: 0, y: 0 },
-      activators: { x: 0, y: 0 },
-      collisions: null,
-      overNode: null,
-      activeNode: null,
-    } as any;
-    act(() => {
-      (DndContextMock as any).lastOnDragEnd?.(dragEvent);
-    });
-    expect(arrayMoveMock).toHaveBeenCalledWith(expect.arrayContaining(["createdAt", "q1"]), 1, 2); // Example indices
-    expect(localStorageMock.setItem).toHaveBeenCalledWith(
-      `${mockSurvey.id}-columnOrder`,
-      JSON.stringify(["select", "q1", "createdAt"]) // Based on initial ['select', 'createdAt', 'q1']
-    );
-  });
-
-  test("interacts with DataTableToolbar: toggle expand, open settings, delete", async () => {
-    const deleteResponsesMock = vi.fn();
-    const deleteResponseActionMock = vi.mocked(deleteResponseAction);
-    render(<ResponseTable {...defaultProps} deleteResponses={deleteResponsesMock} />);
-
-    // Toggle expand
-    await userEvent.click(screen.getByTestId("toolbar-expand-toggle"));
-    expect(vi.mocked(generateResponseTableColumns)).toHaveBeenCalledWith(
-      mockSurvey,
-      true,
-      false,
-      expect.any(Function)
-    );
-    expect(localStorageMock.setItem).toHaveBeenCalledWith(`${mockSurvey.id}-rowExpand`, "true");
-
-    // Open settings
-    await userEvent.click(screen.getByTestId("toolbar-open-settings"));
-    expect(screen.getByTestId("data-table-settings-modal")).toBeInTheDocument();
-    await userEvent.click(screen.getByText("Close Settings"));
-    expect(screen.queryByTestId("data-table-settings-modal")).not.toBeInTheDocument();
-
-    // Delete selected (mock table selection)
-    // This requires mocking table.getSelectedRowModel().rows
-    // For simplicity, we assume the toolbar button calls deleteRows correctly
-    // The mock for DataTableToolbar calls props.deleteRows with hardcoded IDs for now.
-    // To test properly, we'd need to mock table.getSelectedRowModel
-    // For now, let's assume the mock toolbar calls it.
-    // await userEvent.click(screen.getByTestId("toolbar-delete-selected"));
-    // expect(deleteResponsesMock).toHaveBeenCalledWith(["row1_id", "row2_id"]); // From mock toolbar
-
-    // Delete single action
-    await userEvent.click(screen.getByTestId("toolbar-delete-single"));
-    expect(deleteResponseActionMock).toHaveBeenCalledWith({ responseId: "single_response_id" });
-  });
-
-  test("calls fetchNextPage when 'Load More' is clicked", async () => {
-    const fetchNextPageMock = vi.fn();
-    render(<ResponseTable {...defaultProps} fetchNextPage={fetchNextPageMock} />);
-    await userEvent.click(screen.getByText("common.load_more"));
-    expect(fetchNextPageMock).toHaveBeenCalled();
-  });
-
-  test("does not show 'Load More' if hasMore is false", () => {
-    render(<ResponseTable {...defaultProps} hasMore={false} />);
-    expect(screen.queryByText("common.load_more")).not.toBeInTheDocument();
-  });
-
-  test("shows 'No results' when data is empty", () => {
-    render(<ResponseTable {...defaultProps} data={[]} responses={[]} />);
+  test("renders no results message when data is empty", () => {
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} data={[]} responses={[]} />, { container: container! });
     expect(screen.getByText("common.no_results")).toBeInTheDocument();
   });
 
-  test("deleteResponse function calls deleteResponseAction", async () => {
-    render(<ResponseTable {...defaultProps} />);
-    // This function is called by DataTableToolbar's deleteAction prop
-    // We can trigger it via the mocked DataTableToolbar
-    await userEvent.click(screen.getByTestId("toolbar-delete-single"));
-    expect(vi.mocked(deleteResponseAction)).toHaveBeenCalledWith({ responseId: "single_response_id" });
+  test("renders load more button when hasMore is true", () => {
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} hasMore={true} />, { container: container! });
+    expect(screen.getByText("common.load_more")).toBeInTheDocument();
+  });
+
+  test("calls fetchNextPage when load more button is clicked", async () => {
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} hasMore={true} />, { container: container! });
+    const loadMoreButton = screen.getByText("common.load_more");
+    await userEvent.click(loadMoreButton);
+    expect(mockProps.fetchNextPage).toHaveBeenCalledTimes(1);
+  });
+
+  test("opens settings modal when toolbar button is clicked", async () => {
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const openSettingsButton = screen.getByTestId("open-settings");
+    await userEvent.click(openSettingsButton);
+    expect(screen.getByTestId("settings-modal")).toBeInTheDocument();
+  });
+
+  test("toggles expanded state when toolbar button is clicked", async () => {
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const toggleExpandButton = screen.getByTestId("toggle-expand");
+
+    // Initially might be null, first click should set it to true
+    await userEvent.click(toggleExpandButton);
+    expect(mockLocalStorage.setItem).toHaveBeenCalledWith("survey1-rowExpand", expect.any(String));
+  });
+
+  test("calls downloadSelectedRows with csv format when toolbar button is clicked", async () => {
+    vi.mocked(getResponsesDownloadUrlAction).mockResolvedValueOnce({
+      data: "https://download.url/file.csv",
+    });
+
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const downloadCsvButton = screen.getByTestId("download-csv");
+    await userEvent.click(downloadCsvButton);
+
+    expect(getResponsesDownloadUrlAction).toHaveBeenCalledWith({
+      surveyId: "survey1",
+      format: "csv",
+      filterCriteria: { responseIds: [] },
+    });
+
+    // Check if link was created and clicked
+    expect(document.createElement).toHaveBeenCalledWith("a");
+    const mockLink = document.createElement("a");
+    expect(mockLink.href).toBe("https://download.url/file.csv");
+    expect(document.body.appendChild).toHaveBeenCalled();
+    expect(mockLink.click).toHaveBeenCalled();
+    expect(document.body.removeChild).toHaveBeenCalled();
+  });
+
+  test("calls downloadSelectedRows with xlsx format when toolbar button is clicked", async () => {
+    vi.mocked(getResponsesDownloadUrlAction).mockResolvedValueOnce({
+      data: "https://download.url/file.xlsx",
+    });
+
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const downloadXlsxButton = screen.getByTestId("download-xlsx");
+    await userEvent.click(downloadXlsxButton);
+
+    expect(getResponsesDownloadUrlAction).toHaveBeenCalledWith({
+      surveyId: "survey1",
+      format: "xlsx",
+      filterCriteria: { responseIds: [] },
+    });
+
+    // Check if link was created and clicked
+    expect(document.createElement).toHaveBeenCalledWith("a");
+    const mockLink = document.createElement("a");
+    expect(mockLink.href).toBe("https://download.url/file.xlsx");
+    expect(document.body.appendChild).toHaveBeenCalled();
+    expect(mockLink.click).toHaveBeenCalled();
+    expect(document.body.removeChild).toHaveBeenCalled();
+  });
+
+  // Test response modal
+  test("opens and closes response modal when a cell is clicked", async () => {
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const cell = screen.getByTestId("cell-resp1_select-resp1");
+    await userEvent.click(cell);
+    expect(screen.getByTestId("response-modal")).toBeInTheDocument();
+    // Close the modal
+    const closeButton = screen.getByText("Close");
+    await userEvent.click(closeButton);
+
+    // Modal should be closed now
+    expect(screen.queryByTestId("response-modal")).not.toBeInTheDocument();
+  });
+
+  test("shows error toast when download action returns error", async () => {
+    const errorMsg = "Download failed";
+    vi.mocked(getResponsesDownloadUrlAction).mockResolvedValueOnce({
+      data: undefined,
+      serverError: errorMsg,
+    });
+    vi.mocked(getFormattedErrorMessage).mockReturnValueOnce(errorMsg);
+
+    // Reset document.createElement spy to fix the last test
+    vi.mocked(document.createElement).mockClear();
+
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const downloadCsvButton = screen.getByTestId("download-csv");
+    await userEvent.click(downloadCsvButton);
+
+    await waitFor(() => {
+      expect(getResponsesDownloadUrlAction).toHaveBeenCalled();
+      expect(toast.error).toHaveBeenCalledWith("environments.surveys.responses.error_downloading_responses");
+    });
+  });
+
+  test("shows default error toast when download action returns no data", async () => {
+    vi.mocked(getResponsesDownloadUrlAction).mockResolvedValueOnce({
+      data: undefined,
+    });
+    vi.mocked(getFormattedErrorMessage).mockReturnValueOnce("");
+
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const downloadCsvButton = screen.getByTestId("download-csv");
+    await userEvent.click(downloadCsvButton);
+
+    await waitFor(() => {
+      expect(getResponsesDownloadUrlAction).toHaveBeenCalled();
+      expect(toast.error).toHaveBeenCalledWith("environments.surveys.responses.error_downloading_responses");
+    });
+  });
+
+  test("shows error toast when download action throws exception", async () => {
+    vi.mocked(getResponsesDownloadUrlAction).mockRejectedValueOnce(new Error("Network error"));
+
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const downloadCsvButton = screen.getByTestId("download-csv");
+    await userEvent.click(downloadCsvButton);
+
+    await waitFor(() => {
+      expect(getResponsesDownloadUrlAction).toHaveBeenCalled();
+      expect(toast.error).toHaveBeenCalledWith("environments.surveys.responses.error_downloading_responses");
+    });
+  });
+
+  test("does not create download link when download action fails", async () => {
+    // Clear any previous calls to document.createElement
+    vi.mocked(document.createElement).mockClear();
+
+    vi.mocked(getResponsesDownloadUrlAction).mockResolvedValueOnce({
+      data: undefined,
+      serverError: "Download failed",
+    });
+
+    // Create a fresh spy for createElement for this test only
+    const createElementSpy = vi.spyOn(document, "createElement");
+
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+    const downloadCsvButton = screen.getByTestId("download-csv");
+    await userEvent.click(downloadCsvButton);
+
+    await waitFor(() => {
+      expect(getResponsesDownloadUrlAction).toHaveBeenCalled();
+      // Check specifically for "a" element creation, not any element
+      expect(createElementSpy).not.toHaveBeenCalledWith("a");
+    });
+  });
+
+  test("loads saved settings from localStorage on mount", () => {
+    const columnOrder = ["status", "person", "createdAt", "select"];
+    const columnVisibility = { status: false };
+    const isExpanded = true;
+
+    mockLocalStorage.getItem.mockImplementation((key) => {
+      if (key === "survey1-columnOrder") return JSON.stringify(columnOrder);
+      if (key === "survey1-columnVisibility") return JSON.stringify(columnVisibility);
+      if (key === "survey1-rowExpand") return JSON.stringify(isExpanded);
+      return null;
+    });
+
+    const container = document.getElementById("test-container");
+    render(<ResponseTable {...mockProps} />, { container: container! });
+
+    // Verify localStorage calls
+    expect(mockLocalStorage.getItem).toHaveBeenCalledWith("survey1-columnOrder");
+    expect(mockLocalStorage.getItem).toHaveBeenCalledWith("survey1-columnVisibility");
+    expect(mockLocalStorage.getItem).toHaveBeenCalledWith("survey1-rowExpand");
+
+    // The mock for generateResponseTableColumns returns this order:
+    // ["select", "createdAt", "person", "status"]
+    // Only visible columns should be rendered, in this order
+    const expectedHeaders = ["select", "createdAt", "person"];
+    const headers = screen.getAllByTestId(/^header-/);
+    expect(headers).toHaveLength(expectedHeaders.length);
+    expectedHeaders.forEach((columnId, index) => {
+      expect(headers[index]).toHaveAttribute("data-testid", `header-${columnId}`);
+    });
+
+    // Verify column visibility is applied
+    const statusHeader = screen.queryByTestId("header-status");
+    expect(statusHeader).not.toBeInTheDocument();
+
+    // Verify row expansion is applied
+    const toggleExpandButton = screen.getByTestId("toggle-expand");
+    expect(toggleExpandButton).toHaveAttribute("aria-pressed", "true");
   });
 });

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTable.tsx

@@ -3,6 +3,7 @@
 import { ResponseCardModal } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseCardModal";
 import { ResponseTableCell } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableCell";
 import { generateResponseTableColumns } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableColumns";
+import { getResponsesDownloadUrlAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/actions";
 import { deleteResponseAction } from "@/modules/analysis/components/SingleResponseCard/actions";
 import { Button } from "@/modules/ui/components/button";
 import {
@@ -25,15 +26,16 @@ import {
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, arrayMove, horizontalListSortingStrategy } from "@dnd-kit/sortable";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
+import * as Sentry from "@sentry/nextjs";
 import { VisibilityState, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { useTranslate } from "@tolgee/react";
 import { useEffect, useMemo, useState } from "react";
+import toast from "react-hot-toast";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TResponse, TResponseTableData } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TTag } from "@formbricks/types/tags";
-import { TUser } from "@formbricks/types/user";
-import { TUserLocale } from "@formbricks/types/user";
+import { TUser, TUserLocale } from "@formbricks/types/user";
 
 interface ResponseTableProps {
   data: TResponseTableData[];
@@ -180,6 +182,32 @@ export const ResponseTable = ({
     await deleteResponseAction({ responseId });
   };
 
+  // Handle downloading selected responses
+  const downloadSelectedRows = async (responseIds: string[], format: "csv" | "xlsx") => {
+    try {
+      const downloadResponse = await getResponsesDownloadUrlAction({
+        surveyId: survey.id,
+        format: format,
+        filterCriteria: { responseIds },
+      });
+
+      if (downloadResponse?.data) {
+        const link = document.createElement("a");
+        link.href = downloadResponse.data;
+        link.download = "";
+
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      } else {
+        toast.error(t("environments.surveys.responses.error_downloading_responses"));
+      }
+    } catch (error) {
+      Sentry.captureException(error);
+      toast.error(t("environments.surveys.responses.error_downloading_responses"));
+    }
+  };
+
   return (
     <div>
       <DndContext
@@ -193,9 +221,10 @@ export const ResponseTable = ({
           setIsTableSettingsModalOpen={setIsTableSettingsModalOpen}
           isExpanded={isExpanded ?? false}
           table={table}
-          deleteRows={deleteResponses}
+          deleteRowsAction={deleteResponses}
           type="response"
           deleteAction={deleteResponse}
+          downloadRowsAction={downloadSelectedRows}
         />
         <div className="w-fit max-w-full overflow-hidden overflow-x-auto rounded-xl border border-slate-200">
           <div className="w-full overflow-x-auto">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.test.tsx

@@ -11,7 +11,11 @@ vi.mock("lucide-react", () => ({
 vi.mock("@/modules/ui/components/tooltip", () => ({
   TooltipProvider: ({ children }) => <>{children}</>,
   Tooltip: ({ children }) => <>{children}</>,
-  TooltipTrigger: ({ children }) => <>{children}</>,
+  TooltipTrigger: ({ children, onClick }) => (
+    <button tabIndex={0} onClick={onClick} style={{ display: "inline-block" }}>
+      {children}
+    </button>
+  ),
   TooltipContent: ({ children }) => <>{children}</>,
 }));
 
@@ -67,8 +71,10 @@ describe("SummaryMetadata", () => {
     expect(screen.getByText("25%")).toBeInTheDocument();
     expect(screen.getByText("1")).toBeInTheDocument();
     expect(screen.getByText("1m 5.00s")).toBeInTheDocument();
-    const btn = screen.getByRole("button");
-    expect(screen.queryByTestId("down")).toBeInTheDocument();
+    const btn = screen
+      .getAllByRole("button")
+      .find((el) => el.textContent?.includes("environments.surveys.summary.drop_offs"));
+    if (!btn) throw new Error("DropOffs toggle button not found");
     await userEvent.click(btn);
     expect(screen.queryByTestId("up")).toBeInTheDocument();
   });
@@ -101,8 +107,10 @@ describe("SummaryMetadata", () => {
     };
     render(<Wrapper />);
     expect(screen.getAllByText("-")).toHaveLength(1);
-    const btn = screen.getByRole("button");
-    expect(screen.queryByTestId("down")).toBeInTheDocument();
+    const btn = screen
+      .getAllByRole("button")
+      .find((el) => el.textContent?.includes("environments.surveys.summary.drop_offs"));
+    if (!btn) throw new Error("DropOffs toggle button not found");
     await userEvent.click(btn);
     expect(screen.queryByTestId("up")).toBeInTheDocument();
   });

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx

@@ -100,8 +100,8 @@ export const SummaryMetadata = ({
 
         <TooltipProvider delayDuration={50}>
           <Tooltip>
-            <TooltipTrigger>
-              <div className="flex h-full cursor-default flex-col justify-between space-y-2 rounded-xl border border-slate-200 bg-white p-4 text-left shadow-sm">
+            <TooltipTrigger onClick={() => setShowDropOffs(!showDropOffs)} data-testid="dropoffs-toggle">
+              <div className="flex h-full cursor-pointer flex-col justify-between space-y-2 rounded-xl border border-slate-200 bg-white p-4 text-left shadow-sm">
                 <span className="text-sm text-slate-600">
                   {t("environments.surveys.summary.drop_offs")}
                   {`${Math.round(dropOffPercentage)}%` !== "NaN%" && !isLoading && (
@@ -117,15 +117,13 @@ export const SummaryMetadata = ({
                     )}
                   </span>
                   {!isLoading && (
-                    <button
-                      className="ml-1 flex items-center rounded-md bg-slate-800 px-2 py-1 text-xs text-slate-50 group-hover:bg-slate-700"
-                      onClick={() => setShowDropOffs(!showDropOffs)}>
+                    <span className="ml-1 flex items-center rounded-md bg-slate-800 px-2 py-1 text-xs text-slate-50 group-hover:bg-slate-700">
                       {showDropOffs ? (
                         <ChevronUpIcon className="h-4 w-4" />
                       ) : (
                         <ChevronDownIcon className="h-4 w-4" />
                       )}
-                    </button>
+                    </span>
                   )}
                 </div>
               </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx

@@ -250,6 +250,7 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
       if (responsesDownloadUrlResponse?.data) {
         const link = document.createElement("a");
         link.href = responsesDownloadUrlResponse.data;
+        link.download = "";
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);

apps/web/app/api/v1/og/route.tsx

@@ -7,39 +7,133 @@ export const GET = async (req: NextRequest) => {
 
   return new ImageResponse(
     (
-      <div tw={`flex flex-col w-full h-full items-center  bg-[${brandColor}]/75 rounded-xl `}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          backgroundColor: brandColor ? brandColor + "BF" : "#0000BFBF", // /75 opacity is approximately BF in hex
+          borderRadius: "0.75rem",
+        }}>
         <div
-          tw="flex flex-col w-[80%] h-[60%] bg-white rounded-xl mt-13 absolute left-12 top-3 opacity-20"
           style={{
+            display: "flex",
+            flexDirection: "column",
+            width: "80%",
+            height: "60%",
+            backgroundColor: "white",
+            borderRadius: "0.75rem",
+            marginTop: "3.25rem",
+            position: "absolute",
+            left: "3rem",
+            top: "0.75rem",
+            opacity: 0.2,
             transform: "rotate(356deg)",
           }}></div>
         <div
-          tw="flex flex-col w-[84%] h-[60%] bg-white rounded-xl mt-12 absolute top-5 left-13  border-2 opacity-60"
           style={{
+            display: "flex",
+            flexDirection: "column",
+            width: "84%",
+            height: "60%",
+            backgroundColor: "white",
+            borderRadius: "0.75rem",
+            marginTop: "3rem",
+            position: "absolute",
+            top: "1.25rem",
+            left: "3.25rem",
+            borderWidth: "2px",
+            opacity: 0.6,
             transform: "rotate(357deg)",
           }}></div>
         <div
-          tw="flex flex-col w-[85%] h-[67%] items-center  bg-white rounded-xl  mt-8 absolute top-[2.3rem] left-14"
           style={{
+            display: "flex",
+            flexDirection: "column",
+            width: "85%",
+            height: "67%",
+            alignItems: "center",
+            backgroundColor: "white",
+            borderRadius: "0.75rem",
+            marginTop: "2rem",
+            position: "absolute",
+            top: "2.3rem",
+            left: "3.5rem",
             transform: "rotate(360deg)",
           }}>
-          <div tw="flex flex-col w-full">
-            <div tw="flex flex-col md:flex-row w-full md:items-center justify-between ">
-              <div tw="flex flex-col  px-8">
-                <h2 tw="flex flex-col text-[8] sm:text-4xl font-bold tracking-tight text-slate-900 text-left mt-15">
+          <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
+                justifyContent: "space-between",
+              }}>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  paddingLeft: "2rem",
+                  paddingRight: "2rem",
+                }}>
+                <h2
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    fontSize: "2rem",
+                    fontWeight: "700",
+                    letterSpacing: "-0.025em",
+                    color: "#0f172a",
+                    textAlign: "left",
+                    marginTop: "3.75rem",
+                  }}>
                   {name}
                 </h2>
               </div>
             </div>
-            <div tw="flex justify-end mr-10 ">
-              <div tw="flex rounded-2xl absolute -right-2 mt-2">
-                <a tw={`rounded-xl border border-transparent bg-[${brandColor}] h-18 w-38 opacity-50`}></a>
+            <div style={{ display: "flex", justifyContent: "flex-end", marginRight: "2.5rem" }}>
+              <div
+                style={{
+                  display: "flex",
+                  borderRadius: "1rem",
+                  position: "absolute",
+                  right: "-0.5rem",
+                  marginTop: "0.5rem",
+                }}>
+                <div
+                  content=""
+                  style={{
+                    borderRadius: "0.75rem",
+                    border: "1px solid transparent",
+                    backgroundColor: brandColor ?? "#000",
+                    height: "4.5rem",
+                    width: "9.5rem",
+                    opacity: 0.5,
+                  }}></div>
               </div>
-              <div tw="flex rounded-2xl shadow ">
-                <a
-                  tw={`flex items-center justify-center rounded-xl border border-transparent bg-[${brandColor}] text-2xl text-white h-18 w-38`}>
+              <div
+                style={{
+                  display: "flex",
+                  borderRadius: "1rem",
+                  boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+                }}>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "0.75rem",
+                    border: "1px solid transparent",
+                    backgroundColor: brandColor ?? "#000",
+                    fontSize: "1.5rem",
+                    color: "white",
+                    height: "4.5rem",
+                    width: "9.5rem",
+                  }}>
                   Begin!
-                </a>
+                </div>
               </div>
             </div>
           </div>

apps/web/app/sentry/SentryProvider.test.tsx

@@ -38,7 +38,7 @@ describe("SentryProvider", () => {
     expect(initSpy).toHaveBeenCalledWith(
       expect.objectContaining({
         dsn: sentryDsn,
-        tracesSampleRate: 1,
+        tracesSampleRate: 0,
         debug: false,
         replaysOnErrorSampleRate: 1.0,
         replaysSessionSampleRate: 0.1,
@@ -81,6 +81,26 @@ describe("SentryProvider", () => {
     expect(screen.getByTestId("child")).toHaveTextContent("Test Content");
   });
 
+  test("does not reinitialize Sentry when props change after initial render", () => {
+    const initSpy = vi.spyOn(Sentry, "init").mockImplementation(() => undefined);
+
+    const { rerender } = render(
+      <SentryProvider sentryDsn={sentryDsn} isEnabled>
+        <div data-testid="child">Test Content</div>
+      </SentryProvider>
+    );
+
+    expect(initSpy).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <SentryProvider sentryDsn="https://newDsn@o0.ingest.sentry.io/0" isEnabled={false}>
+        <div data-testid="child">Test Content</div>
+      </SentryProvider>
+    );
+
+    expect(initSpy).toHaveBeenCalledTimes(1);
+  });
+
   test("processes beforeSend correctly", () => {
     const initSpy = vi.spyOn(Sentry, "init").mockImplementation(() => undefined);
 
@@ -109,4 +129,36 @@ describe("SentryProvider", () => {
     const hintWithoutError = { originalException: undefined };
     expect(beforeSend(dummyEvent, hintWithoutError)).toEqual(dummyEvent);
   });
+
+  test("processes beforeSend correctly when hint.originalException is not an Error object", () => {
+    const initSpy = vi.spyOn(Sentry, "init").mockImplementation(() => undefined);
+
+    render(
+      <SentryProvider sentryDsn={sentryDsn} isEnabled>
+        <div data-testid="child">Test Content</div>
+      </SentryProvider>
+    );
+
+    const config = initSpy.mock.calls[0][0];
+    expect(config).toHaveProperty("beforeSend");
+    const beforeSend = config.beforeSend;
+
+    if (!beforeSend) {
+      throw new Error("beforeSend is not defined");
+    }
+
+    const dummyEvent = { some: "event" } as unknown as Sentry.ErrorEvent;
+
+    const hintWithString = { originalException: "string exception" };
+    expect(() => beforeSend(dummyEvent, hintWithString)).not.toThrow();
+    expect(beforeSend(dummyEvent, hintWithString)).toEqual(dummyEvent);
+
+    const hintWithNumber = { originalException: 123 };
+    expect(() => beforeSend(dummyEvent, hintWithNumber)).not.toThrow();
+    expect(beforeSend(dummyEvent, hintWithNumber)).toEqual(dummyEvent);
+
+    const hintWithNull = { originalException: null };
+    expect(() => beforeSend(dummyEvent, hintWithNull)).not.toThrow();
+    expect(beforeSend(dummyEvent, hintWithNull)).toEqual(dummyEvent);
+  });
 });

apps/web/app/sentry/SentryProvider.tsx

@@ -15,8 +15,8 @@ export const SentryProvider = ({ children, sentryDsn, isEnabled }: SentryProvide
       Sentry.init({
         dsn: sentryDsn,
 
-        // Adjust this value in production, or use tracesSampler for greater control
-        tracesSampleRate: 1,
+        // No tracing while Sentry doesn't update to telemetry 2.0.0 - https://github.com/getsentry/sentry-javascript/issues/15737
+        tracesSampleRate: 0,
 
         // Setting this option to true will print useful information to the console while you're setting up Sentry.
         debug: false,

apps/web/lib/response/utils.ts

@@ -22,6 +22,43 @@ export const calculateTtcTotal = (ttc: TResponseTtc) => {
   return result;
 };
 
+const createFilterTags = (tags: TResponseFilterCriteria["tags"]) => {
+  if (!tags) return [];
+
+  const filterTags: Record<string, any>[] = [];
+
+  if (tags?.applied) {
+    const appliedTags = tags.applied.map((name) => ({
+      tags: {
+        some: {
+          tag: {
+            name,
+          },
+        },
+      },
+    }));
+    filterTags.push(appliedTags);
+  }
+
+  if (tags?.notApplied) {
+    const notAppliedTags = {
+      tags: {
+        every: {
+          tag: {
+            name: {
+              notIn: tags.notApplied,
+            },
+          },
+        },
+      },
+    };
+
+    filterTags.push(notAppliedTags);
+  }
+
+  return filterTags.flat();
+};
+
 export const buildWhereClause = (survey: TSurvey, filterCriteria?: TResponseFilterCriteria) => {
   const whereClause: Prisma.ResponseWhereInput["AND"] = [];
 
@@ -49,39 +86,9 @@ export const buildWhereClause = (survey: TSurvey, filterCriteria?: TResponseFilt
 
   // For Tags
   if (filterCriteria?.tags) {
-    const tags: Record<string, any>[] = [];
-
-    if (filterCriteria?.tags?.applied) {
-      const appliedTags = filterCriteria.tags.applied.map((name) => ({
-        tags: {
-          some: {
-            tag: {
-              name,
-            },
-          },
-        },
-      }));
-      tags.push(appliedTags);
-    }
-
-    if (filterCriteria?.tags?.notApplied) {
-      const notAppliedTags = {
-        tags: {
-          every: {
-            tag: {
-              name: {
-                notIn: filterCriteria.tags.notApplied,
-              },
-            },
-          },
-        },
-      };
-
-      tags.push(notAppliedTags);
-    }
-
+    const tagFilters = createFilterTags(filterCriteria.tags);
     whereClause.push({
-      AND: tags.flat(),
+      AND: tagFilters,
     });
   }
 
@@ -442,6 +449,13 @@ export const buildWhereClause = (survey: TSurvey, filterCriteria?: TResponseFilt
       AND: data,
     });
   }
+
+  // filter by explicit response IDs
+  if (filterCriteria?.responseIds) {
+    whereClause.push({
+      id: { in: filterCriteria.responseIds },
+    });
+  }
   return { AND: whereClause };
 };
 

apps/web/lib/time.test.ts

@@ -15,12 +15,20 @@ import {
 describe("Time Utilities", () => {
   describe("convertDateString", () => {
     test("should format date string correctly", () => {
-      expect(convertDateString("2024-03-20")).toBe("Mar 20, 2024");
+      expect(convertDateString("2024-03-20:12:30:00")).toBe("Mar 20, 2024");
     });
 
     test("should return empty string for empty input", () => {
       expect(convertDateString("")).toBe("");
     });
+
+    test("should return null for null input", () => {
+      expect(convertDateString(null as any)).toBe(null);
+    });
+
+    test("should handle invalid date strings", () => {
+      expect(convertDateString("not-a-date")).toBe("Invalid Date");
+    });
   });
 
   describe("convertDateTimeString", () => {
@@ -73,7 +81,7 @@ describe("Time Utilities", () => {
 
   describe("formatDate", () => {
     test("should format date correctly", () => {
-      const date = new Date("2024-03-20");
+      const date = new Date(2024, 2, 20); // March is month 2 (0-based)
       expect(formatDate(date)).toBe("March 20, 2024");
     });
   });

apps/web/lib/time.ts

@@ -2,11 +2,16 @@ import { formatDistance, intlFormat } from "date-fns";
 import { de, enUS, fr, pt, ptBR, zhTW } from "date-fns/locale";
 import { TUserLocale } from "@formbricks/types/user";
 
-export const convertDateString = (dateString: string) => {
+export const convertDateString = (dateString: string | null) => {
+  if (dateString === null) return null;
   if (!dateString) {
     return dateString;
   }
+
   const date = new Date(dateString);
+  if (isNaN(date.getTime())) {
+    return "Invalid Date";
+  }
   return intlFormat(
     date,
     {

apps/web/lib/utils/action-client.ts

@@ -1,5 +1,6 @@
 import { getUser } from "@/lib/user/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
+import * as Sentry from "@sentry/nextjs";
 import { getServerSession } from "next-auth";
 import { DEFAULT_SERVER_ERROR_MESSAGE, createSafeActionClient } from "next-safe-action";
 import { logger } from "@formbricks/logger";
@@ -14,6 +15,8 @@ import {
 
 export const actionClient = createSafeActionClient({
   handleServerError(e) {
+    Sentry.captureException(e);
+
     if (
       e instanceof ResourceNotFoundError ||
       e instanceof AuthorizationError ||

apps/web/locales/de-DE.json

@@ -1667,6 +1667,7 @@
         "device": "Gerät",
         "device_info": "Geräteinfo",
         "email": "E-Mail",
+        "error_downloading_responses": "Beim Herunterladen der Antworten ist ein Fehler aufgetreten",
         "first_name": "Vorname",
         "how_to_identify_users": "Wie man Benutzer identifiziert",
         "last_name": "Nachname",
@@ -1764,6 +1765,8 @@
         "quickstart_web_apps": "Schnellstart: Web-Apps",
         "quickstart_web_apps_description": "Bitte folge der Schnellstartanleitung, um loszulegen:",
         "results_are_public": "Ergebnisse sind öffentlich",
+        "selected_responses_csv": "Ausgewählte Antworten (CSV)",
+        "selected_responses_excel": "Ausgewählte Antworten (Excel)",
         "send_preview": "Vorschau senden",
         "send_to_panel": "An das Panel senden",
         "setup_instructions": "Einrichtung",

apps/web/locales/en-US.json

@@ -1667,6 +1667,7 @@
         "device": "Device",
         "device_info": "Device info",
         "email": "Email",
+        "error_downloading_responses": "An error occured while downloading responses",
         "first_name": "First Name",
         "how_to_identify_users": "How to identify users",
         "last_name": "Last Name",
@@ -1764,6 +1765,8 @@
         "quickstart_web_apps": "Quickstart: Web apps",
         "quickstart_web_apps_description": "Please follow the Quickstart guide to get started:",
         "results_are_public": "Results are public",
+        "selected_responses_csv": "Selected responses (CSV)",
+        "selected_responses_excel": "Selected responses (Excel)",
         "send_preview": "Send preview",
         "send_to_panel": "Send to panel",
         "setup_instructions": "Setup instructions",

apps/web/locales/fr-FR.json

@@ -1667,6 +1667,7 @@
         "device": "Dispositif",
         "device_info": "Informations sur l'appareil",
         "email": "Email",
+        "error_downloading_responses": "Une erreur s'est produite lors du téléchargement des réponses",
         "first_name": "Prénom",
         "how_to_identify_users": "Comment identifier les utilisateurs",
         "last_name": "Nom de famille",
@@ -1764,6 +1765,8 @@
         "quickstart_web_apps": "Démarrage rapide : Applications web",
         "quickstart_web_apps_description": "Veuillez suivre le guide de démarrage rapide pour commencer :",
         "results_are_public": "Les résultats sont publics.",
+        "selected_responses_csv": "Réponses sélectionnées (CSV)",
+        "selected_responses_excel": "Réponses sélectionnées (Excel)",
         "send_preview": "Envoyer un aperçu",
         "send_to_panel": "Envoyer au panneau",
         "setup_instructions": "Instructions d'installation",

apps/web/locales/pt-BR.json

@@ -1667,6 +1667,7 @@
         "device": "dispositivo",
         "device_info": "Informações do dispositivo",
         "email": "Email",
+        "error_downloading_responses": "Ocorreu um erro ao baixar respostas",
         "first_name": "Primeiro Nome",
         "how_to_identify_users": "Como identificar usuários",
         "last_name": "Sobrenome",
@@ -1764,6 +1765,8 @@
         "quickstart_web_apps": "Início rápido: Aplicativos web",
         "quickstart_web_apps_description": "Por favor, siga o guia de início rápido para começar:",
         "results_are_public": "Os resultados são públicos",
+        "selected_responses_csv": "Respostas selecionadas (CSV)",
+        "selected_responses_excel": "Respostas selecionadas (Excel)",
         "send_preview": "Enviar prévia",
         "send_to_panel": "Enviar para o painel",
         "setup_instructions": "Instruções de configuração",

apps/web/locales/pt-PT.json

@@ -1667,6 +1667,7 @@
         "device": "Dispositivo",
         "device_info": "Informações do dispositivo",
         "email": "Email",
+        "error_downloading_responses": "Ocorreu um erro ao transferir respostas",
         "first_name": "Primeiro Nome",
         "how_to_identify_users": "Como identificar utilizadores",
         "last_name": "Apelido",
@@ -1764,6 +1765,8 @@
         "quickstart_web_apps": "Início rápido: Aplicações web",
         "quickstart_web_apps_description": "Por favor, siga o guia de início rápido para começar:",
         "results_are_public": "Os resultados são públicos",
+        "selected_responses_csv": "Respostas selecionadas (CSV)",
+        "selected_responses_excel": "Respostas selecionadas (Excel)",
         "send_preview": "Enviar pré-visualização",
         "send_to_panel": "Enviar para painel",
         "setup_instructions": "Instruções de configuração",

apps/web/locales/zh-Hant-TW.json

@@ -1667,6 +1667,7 @@
         "device": "裝置",
         "device_info": "裝置資訊",
         "email": "電子郵件",
+        "error_downloading_responses": "下載回應時發生錯誤",
         "first_name": "名字",
         "how_to_identify_users": "如何識別使用者",
         "last_name": "姓氏",
@@ -1764,6 +1765,8 @@
         "quickstart_web_apps": "快速入門：Web apps",
         "quickstart_web_apps_description": "請按照 Quickstart 指南開始：",
         "results_are_public": "結果是公開的",
+        "selected_responses_csv": "選擇的回應 (CSV)",
+        "selected_responses_excel": "選擇的回應 (Excel)",
         "send_preview": "發送預覽",
         "send_to_panel": "發送到小組",
         "setup_instructions": "設定說明",

apps/web/modules/analysis/components/SingleResponseCard/components/ResponseNote.test.tsx

@@ -189,4 +189,30 @@ describe("ResponseNotes", () => {
       expect(updateFetchedResponses).toHaveBeenCalled();
     });
   });
+
+  test("pressing Enter in textarea only submits form and doesn't trigger parent button onClick", async () => {
+    vi.mocked(createResponseNoteAction).mockResolvedValueOnce("createdNote" as any);
+    render(
+      <ResponseNotes
+        user={dummyUser}
+        responseId={dummyResponseId}
+        notes={[]}
+        isOpen={true}
+        setIsOpen={setIsOpen}
+        updateFetchedResponses={updateFetchedResponses}
+        locale={dummyLocale}
+      />
+    );
+    const textarea = screen.getByRole("textbox");
+    await userEvent.type(textarea, "New note");
+    await userEvent.type(textarea, "{enter}");
+    await waitFor(() => {
+      expect(createResponseNoteAction).toHaveBeenCalledWith({
+        responseId: dummyResponseId,
+        text: "New note",
+      });
+      expect(updateFetchedResponses).toHaveBeenCalled();
+      expect(setIsOpen).not.toHaveBeenCalled();
+    });
+  });
 });

apps/web/modules/analysis/components/SingleResponseCard/components/ResponseNote.tsx

@@ -98,49 +98,56 @@ export const ResponseNotes = ({
   const unresolvedNotes = useMemo(() => notes.filter((note) => !note.isResolved), [notes]);
 
   return (
-    <div
-      className={clsx(
-        "absolute w-1/4 rounded-lg border border-slate-200 shadow-sm transition-all",
-        !isOpen && unresolvedNotes.length && "group/hint cursor-pointer bg-white hover:-right-3",
-        !isOpen && !unresolvedNotes.length && "cursor-pointer bg-slate-50",
-        isOpen
-          ? "-right-2 top-0 h-5/6 max-h-[600px] w-1/4 bg-white"
-          : unresolvedNotes.length
-            ? "right-0 top-[8.33%] h-5/6 max-h-[600px] w-1/12"
-            : "right-[120px] top-[8.333%] h-5/6 max-h-[600px] w-1/12 group-hover:right-[0]"
-      )}
-      onClick={() => {
-        if (!isOpen) setIsOpen(true);
-      }}>
+    <>
       {!isOpen ? (
-        <div className="flex h-full flex-col">
-          <div
-            className={clsx(
-              "space-y-2 rounded-t-lg px-2 pb-2 pt-2",
-              unresolvedNotes.length ? "flex h-12 items-center justify-end bg-amber-50" : "bg-slate-200"
-            )}>
-            {!unresolvedNotes.length ? (
-              <div className="flex items-center justify-end">
-                <div className="group flex items-center">
-                  <h3 className="float-left ml-4 pb-1 text-sm text-slate-600">{t("common.note")}</h3>
+        <button
+          className={clsx(
+            "absolute w-1/4 rounded-lg border border-slate-200 shadow-sm transition-all",
+            unresolvedNotes.length
+              ? "group/hint cursor-pointer bg-white hover:-right-3"
+              : "cursor-pointer bg-slate-50",
+            unresolvedNotes.length
+              ? "right-0 top-[8.33%] h-5/6 max-h-[600px] w-1/12"
+              : "right-[120px] top-[8.333%] h-5/6 max-h-[600px] w-1/12 group-hover:right-[0]"
+          )}
+          onClick={() => setIsOpen(true)}
+          aria-label="Open notes"
+          type="button"
+          tabIndex={0}
+          style={{ outline: "none" }}>
+          <div className="flex h-full flex-col">
+            <div
+              className={clsx(
+                "space-y-2 rounded-t-lg px-2 pb-2 pt-2",
+                unresolvedNotes.length ? "flex h-12 items-center justify-end bg-amber-50" : "bg-slate-200"
+              )}>
+              {!unresolvedNotes.length ? (
+                <div className="flex items-center justify-end">
+                  <div className="group flex items-center">
+                    <h3 className="float-left ml-4 pb-1 text-sm text-slate-600">{t("common.note")}</h3>
+                  </div>
                 </div>
-              </div>
-            ) : (
-              <div className="float-left mr-1.5">
-                <Maximize2Icon className="h-4 w-4 text-amber-500 hover:text-amber-600 group-hover/hint:scale-110" />
-              </div>
-            )}
-          </div>
-          {!unresolvedNotes.length ? (
-            <div className="flex flex-1 items-center justify-end pr-3">
-              <span>
-                <PlusIcon className="h-5 w-5 text-slate-400" />
-              </span>
+              ) : (
+                <div className="float-left mr-1.5">
+                  <Maximize2Icon className="h-4 w-4 text-amber-500 hover:text-amber-600 group-hover/hint:scale-110" />
+                </div>
+              )}
             </div>
-          ) : null}
-        </div>
+            {!unresolvedNotes.length ? (
+              <div className="flex flex-1 items-center justify-end pr-3">
+                <span>
+                  <PlusIcon className="h-5 w-5 text-slate-400" />
+                </span>
+              </div>
+            ) : null}
+          </div>
+        </button>
       ) : (
-        <div className="relative flex h-full flex-col">
+        <div
+          className={clsx(
+            "absolute w-1/4 rounded-lg border border-slate-200 shadow-sm transition-all",
+            "-right-2 top-0 h-5/6 max-h-[600px] w-1/4 bg-white"
+          )}>
           <div className="rounded-t-lg bg-amber-50 px-4 pb-3 pt-4">
             <div className="flex items-center justify-between">
               <div className="group flex items-center">
@@ -254,6 +261,6 @@ export const ResponseNotes = ({
           </div>
         </div>
       )}
-    </div>
+    </>
   );
 };

apps/web/modules/ee/billing/components/pricing-table.test.tsx

@@ -0,0 +1,174 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { TOrganizationBillingPeriod } from "@formbricks/types/organizations";
+import { PricingTable } from "./pricing-table";
+
+// Mock the env module
+vi.mock("@/lib/env", () => ({
+  env: {
+    IS_FORMBRICKS_CLOUD: "0",
+    NODE_ENV: "test",
+  },
+}));
+
+// Mock the useRouter hook
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+  }),
+}));
+
+// Mock the actions module
+vi.mock("@/modules/ee/billing/actions", () => {
+  const mockDate = new Date("2024-03-15T00:00:00.000Z");
+  return {
+    isSubscriptionCancelledAction: vi.fn(() => Promise.resolve({ data: { date: mockDate } })),
+    manageSubscriptionAction: vi.fn(() => Promise.resolve({ data: null })),
+    upgradePlanAction: vi.fn(() => Promise.resolve({ data: null })),
+  };
+});
+
+// Mock the useTranslate hook
+vi.mock("@tolgee/react", () => ({
+  useTranslate: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+describe("PricingTable", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("should display a 'Cancelling' badge with the correct date if the subscription is being cancelled", async () => {
+    const mockOrganization = {
+      id: "org-123",
+      name: "Test Organization",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      billing: {
+        plan: "free",
+        period: "yearly",
+        periodStart: new Date(),
+        stripeCustomerId: null,
+        limits: {
+          monthly: {
+            responses: 100,
+            miu: 100,
+          },
+          projects: 1,
+        },
+      },
+      isAIEnabled: false,
+    };
+
+    const mockStripePriceLookupKeys = {
+      STARTUP_MONTHLY: "startup_monthly",
+      STARTUP_YEARLY: "startup_yearly",
+      SCALE_MONTHLY: "scale_monthly",
+      SCALE_YEARLY: "scale_yearly",
+    };
+
+    const mockProjectFeatureKeys = {
+      FREE: "free",
+      STARTUP: "startup",
+      SCALE: "scale",
+      ENTERPRISE: "enterprise",
+    };
+
+    render(
+      <PricingTable
+        organization={mockOrganization as any}
+        environmentId="env-123"
+        peopleCount={50}
+        responseCount={75}
+        projectCount={1}
+        stripePriceLookupKeys={mockStripePriceLookupKeys}
+        projectFeatureKeys={mockProjectFeatureKeys}
+        hasBillingRights={true}
+      />
+    );
+
+    const expectedDate = new Date("2024-03-15T00:00:00.000Z").toLocaleDateString("en-US", {
+      weekday: "short",
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      timeZone: "UTC",
+    });
+    const cancellingBadge = await screen.findByText(`Cancelling: ${expectedDate}`);
+    expect(cancellingBadge).toBeInTheDocument();
+  });
+
+  test("billing period toggle buttons have correct aria-pressed attributes", async () => {
+    const MockPricingTable = () => {
+      const [planPeriod, setPlanPeriod] = useState<TOrganizationBillingPeriod>("yearly");
+
+      const mockOrganization = {
+        id: "org-123",
+        name: "Test Organization",
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        billing: {
+          plan: "free",
+          period: "yearly",
+          periodStart: new Date(),
+          stripeCustomerId: null,
+          limits: {
+            monthly: {
+              responses: 100,
+              miu: 100,
+            },
+            projects: 1,
+          },
+        },
+        isAIEnabled: false,
+      };
+
+      const mockStripePriceLookupKeys = {
+        STARTUP_MONTHLY: "startup_monthly",
+        STARTUP_YEARLY: "startup_yearly",
+        SCALE_MONTHLY: "scale_monthly",
+        SCALE_YEARLY: "scale_yearly",
+      };
+
+      const mockProjectFeatureKeys = {
+        FREE: "free",
+        STARTUP: "startup",
+        SCALE: "scale",
+        ENTERPRISE: "enterprise",
+      };
+
+      const handleMonthlyToggle = (period: TOrganizationBillingPeriod) => {
+        setPlanPeriod(period);
+      };
+
+      return (
+        <PricingTable
+          organization={mockOrganization as any}
+          environmentId="env-123"
+          peopleCount={50}
+          responseCount={75}
+          projectCount={1}
+          stripePriceLookupKeys={mockStripePriceLookupKeys}
+          projectFeatureKeys={mockProjectFeatureKeys}
+          hasBillingRights={true}
+        />
+      );
+    };
+
+    render(<MockPricingTable />);
+
+    const monthlyButton = screen.getByText("environments.settings.billing.monthly");
+    const yearlyButton = screen.getByText("environments.settings.billing.annually");
+
+    expect(yearlyButton).toHaveAttribute("aria-pressed", "true");
+    expect(monthlyButton).toHaveAttribute("aria-pressed", "false");
+
+    fireEvent.click(monthlyButton);
+
+    expect(yearlyButton).toHaveAttribute("aria-pressed", "false");
+    expect(monthlyButton).toHaveAttribute("aria-pressed", "true");
+  });
+});

apps/web/modules/ee/billing/components/pricing-table.tsx

@@ -154,7 +154,17 @@ export const PricingTable = ({
                   className="mx-2"
                   size="normal"
                   type="warning"
-                  text={`Cancelling: ${cancellingOn ? cancellingOn.toDateString() : ""}`}
+                  text={`Cancelling: ${
+                    cancellingOn
+                      ? cancellingOn.toLocaleDateString("en-US", {
+                          weekday: "short",
+                          year: "numeric",
+                          month: "short",
+                          day: "numeric",
+                          timeZone: "UTC",
+                        })
+                      : ""
+                  }`}
                 />
               )}
             </h2>
@@ -252,14 +262,16 @@ export const PricingTable = ({
           <div className="mx-auto mb-12">
             <div className="gap-x-2">
               <div className="mb-4 flex w-fit cursor-pointer overflow-hidden rounded-lg border border-slate-200 p-1 lg:mb-0">
-                <div
+                <button
+                  aria-pressed={planPeriod === "monthly"}
                   className={`flex-1 rounded-md px-4 py-0.5 text-center ${
                     planPeriod === "monthly" ? "bg-slate-200 font-semibold" : "bg-transparent"
                   }`}
                   onClick={() => handleMonthlyToggle("monthly")}>
                   {t("environments.settings.billing.monthly")}
-                </div>
-                <div
+                </button>
+                <button
+                  aria-pressed={planPeriod === "yearly"}
                   className={`flex-1 items-center whitespace-nowrap rounded-md py-0.5 pl-4 pr-2 text-center ${
                     planPeriod === "yearly" ? "bg-slate-200 font-semibold" : "bg-transparent"
                   }`}
@@ -268,7 +280,7 @@ export const PricingTable = ({
                   <span className="ml-2 inline-flex items-center rounded-full border border-green-200 bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
                     {t("environments.settings.billing.get_2_months_free")} 🔥
                   </span>
-                </div>
+                </button>
               </div>
               <div className="relative mx-auto grid max-w-md grid-cols-1 gap-y-8 lg:mx-0 lg:-mb-14 lg:max-w-none lg:grid-cols-4">
                 <div

apps/web/modules/ee/contacts/api/v1/client/[environmentId]/user/lib/update-user.test.ts

@@ -240,4 +240,126 @@ describe("updateUser", () => {
     expect(result.state.data).toEqual(expect.objectContaining(mockUserState));
     expect(result.messages).toEqual([]);
   });
+
+  test("should handle email attribute update with ignoreEmailAttribute flag", async () => {
+    vi.mocked(getContactByUserIdWithAttributes).mockResolvedValue(mockContact);
+    const newAttributes = { email: "new@example.com", name: "John Doe" };
+    vi.mocked(updateAttributes).mockResolvedValue({
+      success: true,
+      messages: [],
+      ignoreEmailAttribute: true,
+    });
+
+    vi.mocked(getUserState).mockResolvedValue({
+      ...mockUserState,
+    });
+
+    const result = await updateUser(mockEnvironmentId, mockUserId, "desktop", newAttributes);
+
+    expect(updateAttributes).toHaveBeenCalledWith(
+      mockContactId,
+      mockUserId,
+      mockEnvironmentId,
+      newAttributes
+    );
+    // Email should not be included in the final attributes
+    expect(result.state.data).toEqual(
+      expect.objectContaining({
+        ...mockUserState,
+      })
+    );
+  });
+
+  test("should handle failed attribute update gracefully", async () => {
+    vi.mocked(getContactByUserIdWithAttributes).mockResolvedValue(mockContact);
+    const newAttributes = { company: "Formbricks" };
+    vi.mocked(updateAttributes).mockResolvedValue({
+      success: false,
+      messages: ["Update failed"],
+    });
+
+    const result = await updateUser(mockEnvironmentId, mockUserId, "desktop", newAttributes);
+
+    expect(updateAttributes).toHaveBeenCalledWith(
+      mockContactId,
+      mockUserId,
+      mockEnvironmentId,
+      newAttributes
+    );
+    // Should still return state even if update failed
+    expect(result.state.data).toEqual(expect.objectContaining(mockUserState));
+    expect(result.messages).toEqual(["Update failed"]);
+  });
+
+  test("should handle multiple attribute updates correctly", async () => {
+    vi.mocked(getContactByUserIdWithAttributes).mockResolvedValue(mockContact);
+    const newAttributes = {
+      company: "Formbricks",
+      role: "Developer",
+      language: "en",
+      country: "US",
+    };
+    vi.mocked(updateAttributes).mockResolvedValue({
+      success: true,
+      messages: ["Attributes updated successfully"],
+    });
+
+    const result = await updateUser(mockEnvironmentId, mockUserId, "desktop", newAttributes);
+
+    expect(updateAttributes).toHaveBeenCalledWith(
+      mockContactId,
+      mockUserId,
+      mockEnvironmentId,
+      newAttributes
+    );
+    expect(result.state.data?.language).toBe("en");
+    expect(result.messages).toEqual(["Attributes updated successfully"]);
+  });
+
+  test("should handle contact creation with multiple initial attributes", async () => {
+    vi.mocked(getContactByUserIdWithAttributes).mockResolvedValue(null);
+    const initialAttributes = {
+      userId: mockUserId,
+      email: "test@example.com",
+      name: "Test User",
+    };
+    vi.mocked(prisma.contact.create).mockResolvedValue({
+      id: mockContactId,
+      attributes: [
+        { attributeKey: { key: "userId" }, value: mockUserId },
+        { attributeKey: { key: "email" }, value: "test@example.com" },
+        { attributeKey: { key: "name" }, value: "Test User" },
+      ],
+    } as any);
+
+    const result = await updateUser(mockEnvironmentId, mockUserId, "desktop", initialAttributes);
+
+    expect(prisma.contact.create).toHaveBeenCalledWith({
+      data: {
+        environment: { connect: { id: mockEnvironmentId } },
+        attributes: {
+          create: [
+            {
+              attributeKey: {
+                connect: { key_environmentId: { key: "userId", environmentId: mockEnvironmentId } },
+              },
+              value: mockUserId,
+            },
+          ],
+        },
+      },
+      select: {
+        id: true,
+        attributes: {
+          select: { attributeKey: { select: { key: true } }, value: true },
+        },
+      },
+    });
+    expect(contactCache.revalidate).toHaveBeenCalledWith({
+      environmentId: mockEnvironmentId,
+      userId: mockUserId,
+      id: mockContactId,
+    });
+    expect(result.state.data).toEqual(expect.objectContaining(mockUserState));
+  });
 });

apps/web/modules/ee/contacts/api/v1/client/[environmentId]/user/lib/update-user.ts

@@ -85,20 +85,26 @@ export const updateUser = async (
     }
 
     if (shouldUpdate) {
-      const { success, messages: updateAttrMessages } = await updateAttributes(
-        contact.id,
-        userId,
-        environmentId,
-        attributes
-      );
+      const {
+        success,
+        messages: updateAttrMessages,
+        ignoreEmailAttribute,
+      } = await updateAttributes(contact.id, userId, environmentId, attributes);
 
       messages = updateAttrMessages ?? [];
 
       // If the attributes update was successful and the language attribute was provided, set the language
       if (success) {
+        let attributesToUpdate = { ...attributes };
+
+        if (ignoreEmailAttribute) {
+          const { email, ...rest } = attributes;
+          attributesToUpdate = rest;
+        }
+
         contactAttributes = {
           ...contactAttributes,
-          ...attributes,
+          ...attributesToUpdate,
         };
 
         if (attributes.language) {

apps/web/modules/ee/contacts/components/contacts-table.tsx

@@ -236,7 +236,7 @@ export const ContactsTable = ({
           setIsTableSettingsModalOpen={setIsTableSettingsModalOpen}
           isExpanded={isExpanded ?? false}
           table={table}
-          deleteRows={deleteContacts}
+          deleteRowsAction={deleteContacts}
           type="contact"
           deleteAction={deleteContact}
           refreshContacts={refreshContacts}

apps/web/modules/ee/contacts/lib/attributes.ts

@@ -13,7 +13,7 @@ export const updateAttributes = async (
   userId: string,
   environmentId: string,
   contactAttributesParam: TContactAttributes
-): Promise<{ success: boolean; messages?: string[] }> => {
+): Promise<{ success: boolean; messages?: string[]; ignoreEmailAttribute?: boolean }> => {
   validateInputs(
     [contactId, ZId],
     [userId, ZString],
@@ -21,6 +21,8 @@ export const updateAttributes = async (
     [contactAttributesParam, ZContactAttributes]
   );
 
+  let ignoreEmailAttribute = false;
+
   // Fetch contact attribute keys and email check in parallel
   const [contactAttributeKeys, existingEmailAttribute] = await Promise.all([
     getContactAttributeKeys(environmentId),
@@ -58,6 +60,10 @@ export const updateAttributes = async (
     ? ["The email already exists for this environment and was not updated."]
     : [];
 
+  if (emailExists) {
+    ignoreEmailAttribute = true;
+  }
+
   // First, update all existing attributes
   if (existingAttributes.length > 0) {
     await prisma.$transaction(
@@ -124,5 +130,6 @@ export const updateAttributes = async (
   return {
     success: true,
     messages,
+    ignoreEmailAttribute,
   };
 };

apps/web/modules/ee/contacts/segments/components/add-filter-modal.test.tsx

@@ -8,8 +8,28 @@ import { TSegment } from "@formbricks/types/segment";
 
 // Mock the Modal component
 vi.mock("@/modules/ui/components/modal", () => ({
-  Modal: ({ children, open }: { children: React.ReactNode; open: boolean }) => {
-    return open ? <div>{children}</div> : null; // NOSONAR // This is a mock
+  Modal: ({
+    children,
+    open,
+    closeOnOutsideClick,
+    setOpen,
+  }: {
+    children: React.ReactNode;
+    open: boolean;
+    closeOnOutsideClick?: boolean;
+    setOpen?: (open: boolean) => void;
+  }) => {
+    return open ? ( // NOSONAR // This is a mock
+      <button
+        data-testid="modal-overlay"
+        onClick={(e) => {
+          if (closeOnOutsideClick && e.target === e.currentTarget && setOpen) {
+            setOpen(false);
+          }
+        }}>
+        <div data-testid="modal-content">{children}</div>
+      </button>
+    ) : null; // NOSONAR // This is a mock
   },
 }));
 
@@ -280,7 +300,7 @@ describe("AddFilterModal", () => {
 
     test("handles Person (userId) filter add (click/keydown)", async () => {
       await testFilterInteraction(
-        () => screen.getByText("userId"),
+        () => screen.getByTestId("filter-btn-person-userId"),
         "person",
         { personIdentifier: "userId" },
         "equals",
@@ -290,7 +310,7 @@ describe("AddFilterModal", () => {
 
     test("handles Attribute (Email Address) filter add (click/keydown)", async () => {
       await testFilterInteraction(
-        () => screen.getByText("Email Address"),
+        () => screen.getByTestId("filter-btn-attribute-email"),
         "attribute",
         { contactAttributeKey: "email" },
         "equals",
@@ -300,7 +320,7 @@ describe("AddFilterModal", () => {
 
     test("handles Attribute (Plan Type) filter add (click/keydown)", async () => {
       await testFilterInteraction(
-        () => screen.getByText("Plan Type"),
+        () => screen.getByTestId("filter-btn-attribute-plan"),
         "attribute",
         { contactAttributeKey: "plan" },
         "equals",
@@ -310,7 +330,7 @@ describe("AddFilterModal", () => {
 
     test("handles Segment (Active Users) filter add (click/keydown)", async () => {
       await testFilterInteraction(
-        () => screen.getByText("Active Users"),
+        () => screen.getByTestId("filter-btn-segment-seg1"),
         "segment",
         { segmentId: "seg1" },
         "userIsIn",
@@ -320,7 +340,7 @@ describe("AddFilterModal", () => {
 
     test("handles Segment (Paying Customers) filter add (click/keydown)", async () => {
       await testFilterInteraction(
-        () => screen.getByText("Paying Customers"),
+        () => screen.getByTestId("filter-btn-segment-seg2"),
         "segment",
         { segmentId: "seg2" },
         "userIsIn",
@@ -330,7 +350,7 @@ describe("AddFilterModal", () => {
 
     test("handles Device (Phone) filter add (click/keydown)", async () => {
       await testFilterInteraction(
-        () => screen.getByText("environments.segments.phone"),
+        () => screen.getByTestId("filter-btn-device-phone"),
         "device",
         { deviceType: "phone" },
         "equals",
@@ -340,7 +360,7 @@ describe("AddFilterModal", () => {
 
     test("handles Device (Desktop) filter add (click/keydown)", async () => {
       await testFilterInteraction(
-        () => screen.getByText("environments.segments.desktop"),
+        () => screen.getByTestId("filter-btn-device-desktop"),
         "device",
         { deviceType: "desktop" },
         "equals",
@@ -366,7 +386,7 @@ describe("AddFilterModal", () => {
 
     test("handles Person (userId) filter add (click/keydown)", async () => {
       await testFilterInteraction(
-        () => screen.getByTestId("person-filter-item"), // Use testid from component
+        () => screen.getByTestId("filter-btn-person-userId"),
         "person",
         { personIdentifier: "userId" },
         "equals",
@@ -376,7 +396,7 @@ describe("AddFilterModal", () => {
 
     test("handles Attribute (Email Address) filter add (click/keydown)", async () => {
       await testFilterInteraction(
-        () => screen.getByText("Email Address"),
+        () => screen.getByTestId("filter-btn-attribute-email"),
         "attribute",
         { contactAttributeKey: "email" },
         "equals",
@@ -386,7 +406,7 @@ describe("AddFilterModal", () => {
 
     test("handles Attribute (Plan Type) filter add (click/keydown)", async () => {
       await testFilterInteraction(
-        () => screen.getByText("Plan Type"),
+        () => screen.getByTestId("filter-btn-attribute-plan"),
         "attribute",
         { contactAttributeKey: "plan" },
         "equals",
@@ -412,7 +432,7 @@ describe("AddFilterModal", () => {
 
     test("handles Segment (Active Users) filter add (click/keydown)", async () => {
       await testFilterInteraction(
-        () => screen.getByText("Active Users"),
+        () => screen.getByTestId("filter-btn-segment-seg1"),
         "segment",
         { segmentId: "seg1" },
         "userIsIn",
@@ -422,7 +442,7 @@ describe("AddFilterModal", () => {
 
     test("handles Segment (Paying Customers) filter add (click/keydown)", async () => {
       await testFilterInteraction(
-        () => screen.getByText("Paying Customers"),
+        () => screen.getByTestId("filter-btn-segment-seg2"),
         "segment",
         { segmentId: "seg2" },
         "userIsIn",
@@ -448,7 +468,7 @@ describe("AddFilterModal", () => {
 
     test("handles Device (Phone) filter add (click/keydown)", async () => {
       await testFilterInteraction(
-        () => screen.getByText("environments.segments.phone"),
+        () => screen.getByTestId("filter-btn-device-phone"),
         "device",
         { deviceType: "phone" },
         "equals",
@@ -458,7 +478,7 @@ describe("AddFilterModal", () => {
 
     test("handles Device (Desktop) filter add (click/keydown)", async () => {
       await testFilterInteraction(
-        () => screen.getByText("environments.segments.desktop"),
+        () => screen.getByTestId("filter-btn-device-desktop"),
         "device",
         { deviceType: "desktop" },
         "equals",
@@ -510,4 +530,86 @@ describe("AddFilterModal", () => {
     await user.type(searchInput, "nonexistentfilter");
     expect(await screen.findByText("environments.segments.no_filters_yet")).toBeInTheDocument();
   });
+
+  test("verifies keyboard navigation through filter buttons", async () => {
+    render(
+      <AddFilterModal
+        open={true}
+        setOpen={setOpen}
+        onAddFilter={onAddFilter}
+        contactAttributeKeys={mockContactAttributeKeys}
+        segments={mockSegments}
+      />
+    );
+
+    // Get the search input to start tabbing from
+    const searchInput = screen.getByPlaceholderText("Browse filters...");
+    searchInput.focus();
+
+    // Tab to the first tab button ("all")
+    await user.tab();
+    expect(document.activeElement).toHaveTextContent(/common\.all/);
+
+    // Tab to the second tab button ("attributes")
+    await user.tab();
+    expect(document.activeElement).toHaveTextContent(/person_and_attributes/);
+
+    // Tab to the third tab button ("segments")
+    await user.tab();
+    expect(document.activeElement).toHaveTextContent(/common\.segments/);
+
+    // Tab to the fourth tab button ("devices")
+    await user.tab();
+    expect(document.activeElement).toHaveTextContent(/environments\.segments\.devices/);
+
+    // Tab to the first filter button ("Email Address")
+    await user.tab();
+    expect(document.activeElement).toHaveTextContent("Email Address");
+
+    // Tab to the second filter button ("Plan Type")
+    await user.tab();
+    expect(document.activeElement).toHaveTextContent("Plan Type");
+
+    // Tab to the third filter button ("userId")
+    await user.tab();
+    expect(document.activeElement).toHaveTextContent("userId");
+  });
+
+  test("button elements are accessible to screen readers", () => {
+    render(
+      <AddFilterModal
+        open={true}
+        setOpen={setOpen}
+        onAddFilter={onAddFilter}
+        contactAttributeKeys={mockContactAttributeKeys}
+        segments={mockSegments}
+      />
+    );
+
+    const buttons = screen.getAllByRole("button");
+    expect(buttons.length).toBeGreaterThan(0); // Verify buttons exist
+
+    // Check that buttons are focusable (they should be by default)
+    buttons.forEach((button) => {
+      expect(button).not.toHaveAttribute("aria-hidden", "true");
+      expect(button).not.toHaveAttribute("tabIndex", "-1"); // Should not be unfocusable
+    });
+  });
+
+  test("closes the modal when clicking outside the content area", async () => {
+    render(
+      <AddFilterModal
+        open={true}
+        setOpen={setOpen}
+        onAddFilter={onAddFilter}
+        contactAttributeKeys={mockContactAttributeKeys}
+        segments={mockSegments}
+      />
+    );
+
+    const modalOverlay = screen.getByTestId("modal-overlay");
+    await user.click(modalOverlay);
+
+    expect(setOpen).toHaveBeenCalledWith(false);
+  });
 });

apps/web/modules/ee/contacts/segments/components/add-filter-modal.tsx

@@ -15,6 +15,8 @@ import type {
   TSegmentAttributeFilter,
   TSegmentPersonFilter,
 } from "@formbricks/types/segment";
+import AttributeTabContent from "./attribute-tab-content";
+import FilterButton from "./filter-button";
 
 interface TAddFilterModalProps {
   open: boolean;
@@ -26,7 +28,7 @@ interface TAddFilterModalProps {
 
 type TFilterType = "attribute" | "segment" | "device" | "person";
 
-const handleAddFilter = ({
+export const handleAddFilter = ({
   type,
   onAddFilter,
   setOpen,
@@ -132,92 +134,8 @@ const handleAddFilter = ({
   }
 };
 
-interface AttributeTabContentProps {
-  contactAttributeKeys: TContactAttributeKey[];
-  onAddFilter: (filter: TBaseFilter) => void;
-  setOpen: (open: boolean) => void;
-}
-
-function AttributeTabContent({ contactAttributeKeys, onAddFilter, setOpen }: AttributeTabContentProps) {
-  const { t } = useTranslate();
-
-  return (
-    <div className="flex flex-col gap-2">
-      <div>
-        <h2 className="text-base font-medium">{t("common.person")}</h2>
-        <div>
-          <div
-            className="flex cursor-pointer items-center gap-4 rounded-lg px-2 py-1 text-sm hover:bg-slate-50"
-            tabIndex={0}
-            data-testid="person-filter-item"
-            onClick={() => {
-              handleAddFilter({
-                type: "person",
-                onAddFilter,
-                setOpen,
-              });
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                handleAddFilter({
-                  type: "person",
-                  onAddFilter,
-                  setOpen,
-                });
-              }
-            }}>
-            <FingerprintIcon className="h-4 w-4" />
-            <p>{t("common.user_id")}</p>
-          </div>
-        </div>
-      </div>
-
-      <hr className="my-2" />
-
-      <div>
-        <h2 className="text-base font-medium">{t("common.attributes")}</h2>
-      </div>
-      {contactAttributeKeys.length === 0 && (
-        <div className="flex w-full items-center justify-center gap-4 rounded-lg px-2 py-1 text-sm">
-          <p>{t("environments.segments.no_attributes_yet")}</p>
-        </div>
-      )}
-      {contactAttributeKeys.map((attributeKey) => {
-        return (
-          <div
-            className="flex cursor-pointer items-center gap-4 rounded-lg px-2 py-1 text-sm hover:bg-slate-50"
-            key={attributeKey.id}
-            tabIndex={0}
-            onClick={() => {
-              handleAddFilter({
-                type: "attribute",
-                onAddFilter,
-                setOpen,
-                contactAttributeKey: attributeKey.key,
-              });
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                handleAddFilter({
-                  type: "attribute",
-                  onAddFilter,
-                  setOpen,
-                  contactAttributeKey: attributeKey.key,
-                });
-              }
-            }}>
-            <TagIcon className="h-4 w-4" />
-            <p>{attributeKey.name ?? attributeKey.key}</p>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
 export function AddFilterModal({
+  // NOSONAR // the read-only attribute doesn't work as expected yet
   onAddFilter,
   open,
   setOpen,
@@ -315,161 +233,68 @@ export function AddFilterModal({
           </div>
         ) : null}
 
-        {allFiltersFiltered.map((filters, index) => {
-          return (
-            <div key={index}>
-              {filters.attributes.map((attributeKey) => {
-                return (
-                  <div
-                    className="flex cursor-pointer items-center gap-4 rounded-lg px-2 py-1 text-sm hover:bg-slate-50"
-                    key={attributeKey.id}
-                    tabIndex={0}
-                    onClick={() => {
-                      handleAddFilter({
-                        type: "attribute",
-                        onAddFilter,
-                        setOpen,
-                        contactAttributeKey: attributeKey.key,
-                      });
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleAddFilter({
-                          type: "attribute",
-                          onAddFilter,
-                          setOpen,
-                          contactAttributeKey: attributeKey.key,
-                        });
-                      }
-                    }}>
-                    <TagIcon className="h-4 w-4" />
-                    <p>{attributeKey.name ?? attributeKey.key}</p>
-                  </div>
-                );
-              })}
-
-              {filters.contactAttributeFiltered.map((personAttribute) => {
-                return (
-                  <div
-                    className="flex cursor-pointer items-center gap-4 rounded-lg px-2 py-1 text-sm hover:bg-slate-50"
-                    key={personAttribute.name}
-                    tabIndex={0}
-                    onClick={() => {
-                      handleAddFilter({
-                        type: "person",
-                        onAddFilter,
-                        setOpen,
-                      });
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleAddFilter({
-                          type: "person",
-                          onAddFilter,
-                          setOpen,
-                        });
-                      }
-                    }}>
-                    <FingerprintIcon className="h-4 w-4" />
-                    <p>{personAttribute.name}</p>
-                  </div>
-                );
-              })}
-
-              {filters.segments.map((segment) => {
-                return (
-                  <div
-                    className="flex cursor-pointer items-center gap-4 rounded-lg px-2 py-1 text-sm hover:bg-slate-50"
-                    key={segment.id}
-                    tabIndex={0}
-                    onClick={() => {
-                      handleAddFilter({
-                        type: "segment",
-                        onAddFilter,
-                        setOpen,
-                        segmentId: segment.id,
-                      });
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleAddFilter({
-                          type: "segment",
-                          onAddFilter,
-                          setOpen,
-                          segmentId: segment.id,
-                        });
-                      }
-                    }}>
-                    <Users2Icon className="h-4 w-4" />
-                    <p>{segment.title}</p>
-                  </div>
-                );
-              })}
-
-              {filters.devices.map((deviceType) => (
-                <div
-                  className="flex cursor-pointer items-center gap-4 rounded-lg px-2 py-1 text-sm hover:bg-slate-50"
-                  key={deviceType.id}
-                  tabIndex={0}
-                  onClick={() => {
+        {allFiltersFiltered.map((filters, index) => (
+          <div key={index}>
+            {filters.attributes.map((attributeKey) => (
+              <FilterButton
+                key={attributeKey.id}
+                data-testid={`filter-btn-attribute-${attributeKey.key}`}
+                icon={<TagIcon className="h-4 w-4" />}
+                label={attributeKey.name ?? attributeKey.key}
+                onClick={() => {
+                  handleAddFilter({
+                    type: "attribute",
+                    onAddFilter,
+                    setOpen,
+                    contactAttributeKey: attributeKey.key,
+                  });
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
                     handleAddFilter({
-                      type: "device",
+                      type: "attribute",
                       onAddFilter,
                       setOpen,
-                      deviceType: deviceType.id,
+                      contactAttributeKey: attributeKey.key,
                     });
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      handleAddFilter({
-                        type: "device",
-                        onAddFilter,
-                        setOpen,
-                        deviceType: deviceType.id,
-                      });
-                    }
-                  }}>
-                  <MonitorSmartphoneIcon className="h-4 w-4" />
-                  <span>{deviceType.name}</span>
-                </div>
-              ))}
-            </div>
-          );
-        })}
-      </>
-    );
-  };
+                  }
+                }}
+              />
+            ))}
 
-  const getAttributesTabContent = () => {
-    return (
-      <AttributeTabContent
-        contactAttributeKeys={contactAttributeKeysFiltered}
-        onAddFilter={onAddFilter}
-        setOpen={setOpen}
-      />
-    );
-  };
+            {filters.contactAttributeFiltered.map((personAttribute) => (
+              <FilterButton
+                key={personAttribute.name}
+                data-testid={`filter-btn-person-${personAttribute.name}`}
+                icon={<FingerprintIcon className="h-4 w-4" />}
+                label={personAttribute.name}
+                onClick={() => {
+                  handleAddFilter({
+                    type: "person",
+                    onAddFilter,
+                    setOpen,
+                  });
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleAddFilter({
+                      type: "person",
+                      onAddFilter,
+                      setOpen,
+                    });
+                  }
+                }}
+              />
+            ))}
 
-  const getSegmentsTabContent = () => {
-    return (
-      <>
-        {segmentsFiltered.length === 0 && (
-          <div className="flex w-full items-center justify-center gap-4 rounded-lg px-2 py-1 text-sm">
-            <p>{t("environments.segments.no_segments_yet")}</p>
-          </div>
-        )}
-        {segmentsFiltered
-          .filter((segment) => !segment.isPrivate)
-          .map((segment) => {
-            return (
-              <div
-                className="flex cursor-pointer items-center gap-4 rounded-lg px-2 py-1 text-sm hover:bg-slate-50"
+            {filters.segments.map((segment) => (
+              <FilterButton
                 key={segment.id}
-                tabIndex={0}
+                data-testid={`filter-btn-segment-${segment.id}`}
+                icon={<Users2Icon className="h-4 w-4" />}
+                label={segment.title}
                 onClick={() => {
                   handleAddFilter({
                     type: "segment",
@@ -488,12 +313,91 @@ export function AddFilterModal({
                       segmentId: segment.id,
                     });
                   }
-                }}>
-                <Users2Icon className="h-4 w-4" />
-                <p>{segment.title}</p>
-              </div>
-            );
-          })}
+                }}
+              />
+            ))}
+
+            {filters.devices.map((deviceType) => (
+              <FilterButton
+                key={deviceType.id}
+                data-testid={`filter-btn-device-${deviceType.id}`}
+                icon={<MonitorSmartphoneIcon className="h-4 w-4" />}
+                label={deviceType.name}
+                onClick={() => {
+                  handleAddFilter({
+                    type: "device",
+                    onAddFilter,
+                    setOpen,
+                    deviceType: deviceType.id,
+                  });
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleAddFilter({
+                      type: "device",
+                      onAddFilter,
+                      setOpen,
+                      deviceType: deviceType.id,
+                    });
+                  }
+                }}
+              />
+            ))}
+          </div>
+        ))}
+      </>
+    );
+  };
+
+  const getAttributesTabContent = () => {
+    return (
+      <AttributeTabContent
+        contactAttributeKeys={contactAttributeKeysFiltered}
+        onAddFilter={onAddFilter}
+        setOpen={setOpen}
+        handleAddFilter={handleAddFilter}
+      />
+    );
+  };
+
+  const getSegmentsTabContent = () => {
+    return (
+      <>
+        {segmentsFiltered.length === 0 && (
+          <div className="flex w-full items-center justify-center gap-4 rounded-lg px-2 py-1 text-sm">
+            <p>{t("environments.segments.no_segments_yet")}</p>
+          </div>
+        )}
+        {segmentsFiltered
+          .filter((segment) => !segment.isPrivate)
+          .map((segment) => (
+            <FilterButton
+              key={segment.id}
+              data-testid={`filter-btn-segment-${segment.id}`}
+              icon={<Users2Icon className="h-4 w-4" />}
+              label={segment.title}
+              onClick={() => {
+                handleAddFilter({
+                  type: "segment",
+                  onAddFilter,
+                  setOpen,
+                  segmentId: segment.id,
+                });
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleAddFilter({
+                    type: "segment",
+                    onAddFilter,
+                    setOpen,
+                    segmentId: segment.id,
+                  });
+                }
+              }}
+            />
+          ))}
       </>
     );
   };
@@ -502,10 +406,11 @@ export function AddFilterModal({
     return (
       <div className="flex flex-col">
         {deviceTypesFiltered.map((deviceType) => (
-          <div
-            className="flex cursor-pointer items-center gap-4 rounded-lg px-2 py-1 text-sm hover:bg-slate-50"
+          <FilterButton
             key={deviceType.id}
-            tabIndex={0}
+            data-testid={`filter-btn-device-${deviceType.id}`}
+            icon={<MonitorSmartphoneIcon className="h-4 w-4" />}
+            label={deviceType.name}
             onClick={() => {
               handleAddFilter({
                 type: "device",
@@ -524,10 +429,8 @@ export function AddFilterModal({
                   deviceType: deviceType.id,
                 });
               }
-            }}>
-            <MonitorSmartphoneIcon className="h-4 w-4" />
-            <span>{deviceType.name}</span>
-          </div>
+            }}
+          />
         ))}
       </div>
     );

apps/web/modules/ee/contacts/segments/components/attribute-tab-content.test.tsx

@@ -0,0 +1,72 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { TContactAttributeKey } from "@formbricks/types/contact-attribute-key";
+import AttributeTabContent from "./attribute-tab-content";
+
+describe("AttributeTabContent", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  const mockContactAttributeKeys: TContactAttributeKey[] = [
+    { id: "attr1", key: "email", name: "Email Address", environmentId: "env1" } as TContactAttributeKey,
+    { id: "attr2", key: "plan", name: "Plan Type", environmentId: "env1" } as TContactAttributeKey,
+  ];
+
+  test("renders person and attribute buttons", () => {
+    render(
+      <AttributeTabContent
+        contactAttributeKeys={mockContactAttributeKeys}
+        onAddFilter={vi.fn()}
+        setOpen={vi.fn()}
+        handleAddFilter={vi.fn()}
+      />
+    );
+    expect(screen.getByTestId("filter-btn-person-userId")).toBeInTheDocument();
+    expect(screen.getByTestId("filter-btn-attribute-email")).toBeInTheDocument();
+    expect(screen.getByTestId("filter-btn-attribute-plan")).toBeInTheDocument();
+  });
+
+  test("shows empty state when no attributes", () => {
+    render(
+      <AttributeTabContent
+        contactAttributeKeys={[]}
+        onAddFilter={vi.fn()}
+        setOpen={vi.fn()}
+        handleAddFilter={vi.fn()}
+      />
+    );
+    expect(screen.getByText(/no_attributes_yet/i)).toBeInTheDocument();
+  });
+
+  test("calls handleAddFilter with correct args for person", async () => {
+    const handleAddFilter = vi.fn();
+    render(
+      <AttributeTabContent
+        contactAttributeKeys={mockContactAttributeKeys}
+        onAddFilter={vi.fn()}
+        setOpen={vi.fn()}
+        handleAddFilter={handleAddFilter}
+      />
+    );
+    await userEvent.click(screen.getByTestId("filter-btn-person-userId"));
+    expect(handleAddFilter).toHaveBeenCalledWith(expect.objectContaining({ type: "person" }));
+  });
+
+  test("calls handleAddFilter with correct args for attribute", async () => {
+    const handleAddFilter = vi.fn();
+    render(
+      <AttributeTabContent
+        contactAttributeKeys={mockContactAttributeKeys}
+        onAddFilter={vi.fn()}
+        setOpen={vi.fn()}
+        handleAddFilter={handleAddFilter}
+      />
+    );
+    await userEvent.click(screen.getByTestId("filter-btn-attribute-email"));
+    expect(handleAddFilter).toHaveBeenCalledWith(
+      expect.objectContaining({ type: "attribute", contactAttributeKey: "email" })
+    );
+  });
+});

apps/web/modules/ee/contacts/segments/components/attribute-tab-content.tsx

@@ -0,0 +1,124 @@
+import { useTranslate } from "@tolgee/react";
+import { FingerprintIcon, TagIcon } from "lucide-react";
+import { TContactAttributeKey } from "@formbricks/types/contact-attribute-key";
+import type { TBaseFilter } from "@formbricks/types/segment";
+import FilterButton from "./filter-button";
+
+interface AttributeTabContentProps {
+  contactAttributeKeys: TContactAttributeKey[];
+  onAddFilter: (filter: TBaseFilter) => void;
+  setOpen: (open: boolean) => void;
+  handleAddFilter: (args: {
+    type: "attribute" | "person";
+    onAddFilter: (filter: TBaseFilter) => void;
+    setOpen: (open: boolean) => void;
+    contactAttributeKey?: string;
+  }) => void;
+}
+
+// Helper component to render a FilterButton with common handlers
+function FilterButtonWithHandler({
+  dataTestId,
+  icon,
+  label,
+  type,
+  onAddFilter,
+  setOpen,
+  handleAddFilter,
+  contactAttributeKey,
+}: {
+  dataTestId: string;
+  icon: React.ReactNode;
+  label: React.ReactNode;
+  type: "attribute" | "person";
+  onAddFilter: (filter: TBaseFilter) => void;
+  setOpen: (open: boolean) => void;
+  handleAddFilter: (args: {
+    type: "attribute" | "person";
+    onAddFilter: (filter: TBaseFilter) => void;
+    setOpen: (open: boolean) => void;
+    contactAttributeKey?: string;
+  }) => void;
+  contactAttributeKey?: string;
+}) {
+  return (
+    <FilterButton
+      data-testid={dataTestId}
+      icon={icon}
+      label={label}
+      onClick={() => {
+        handleAddFilter({
+          type,
+          onAddFilter,
+          setOpen,
+          ...(type === "attribute" ? { contactAttributeKey } : {}),
+        });
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleAddFilter({
+            type,
+            onAddFilter,
+            setOpen,
+            ...(type === "attribute" ? { contactAttributeKey } : {}),
+          });
+        }
+      }}
+    />
+  );
+}
+
+function AttributeTabContent({
+  contactAttributeKeys,
+  onAddFilter,
+  setOpen,
+  handleAddFilter,
+}: AttributeTabContentProps) {
+  const { t } = useTranslate();
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div>
+        <h2 className="text-base font-medium">{t("common.person")}</h2>
+        <div>
+          <FilterButtonWithHandler
+            dataTestId="filter-btn-person-userId"
+            icon={<FingerprintIcon className="h-4 w-4" />}
+            label={t("common.user_id")}
+            type="person"
+            onAddFilter={onAddFilter}
+            setOpen={setOpen}
+            handleAddFilter={handleAddFilter}
+          />
+        </div>
+      </div>
+
+      <hr className="my-2" />
+
+      <div>
+        <h2 className="text-base font-medium">{t("common.attributes")}</h2>
+      </div>
+      {contactAttributeKeys.length === 0 && (
+        <div className="flex w-full items-center justify-center gap-4 rounded-lg px-2 py-1 text-sm">
+          <p>{t("environments.segments.no_attributes_yet")}</p>
+        </div>
+      )}
+      {contactAttributeKeys.map((attributeKey) => (
+        <FilterButtonWithHandler
+          key={attributeKey.id}
+          dataTestId={`filter-btn-attribute-${attributeKey.key}`}
+          icon={<TagIcon className="h-4 w-4" />}
+          label={attributeKey.name ?? attributeKey.key}
+          type="attribute"
+          onAddFilter={onAddFilter}
+          setOpen={setOpen}
+          handleAddFilter={handleAddFilter}
+          contactAttributeKey={attributeKey.key}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default AttributeTabContent;

apps/web/modules/ee/contacts/segments/components/filter-button.test.tsx

@@ -0,0 +1,38 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import FilterButton from "./filter-button";
+
+describe("FilterButton", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("renders icon and label", () => {
+    render(
+      <FilterButton icon={<span data-testid="icon">icon</span>} label="Test Label" onClick={() => {}} />
+    );
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+  });
+
+  test("calls onClick when clicked", async () => {
+    const onClick = vi.fn();
+    render(<FilterButton icon={<span />} label="Click Me" onClick={onClick} />);
+    const button = screen.getByRole("button");
+    await userEvent.click(button);
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  test("calls onKeyDown when Enter or Space is pressed", async () => {
+    const onKeyDown = vi.fn();
+    render(<FilterButton icon={<span />} label="Key Test" onClick={() => {}} onKeyDown={onKeyDown} />);
+    const button = screen.getByRole("button");
+    button.focus();
+    await userEvent.keyboard("{Enter}");
+    expect(onKeyDown).toHaveBeenCalled();
+    onKeyDown.mockClear();
+    await userEvent.keyboard(" ");
+    expect(onKeyDown).toHaveBeenCalled();
+  });
+});

apps/web/modules/ee/contacts/segments/components/filter-button.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+function FilterButton({
+  icon,
+  label,
+  onClick,
+  onKeyDown,
+  tabIndex = 0,
+  className = "",
+  ...props
+}: {
+  icon: React.ReactNode;
+  label: React.ReactNode;
+  onClick: () => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  tabIndex?: number;
+  className?: string;
+  [key: string]: any;
+}) {
+  return (
+    <button
+      className={`flex w-full cursor-pointer items-center gap-4 rounded-lg px-2 py-1 text-sm hover:bg-slate-50 ${className}`}
+      tabIndex={tabIndex}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      {...props}>
+      {icon}
+      <span>{label}</span>
+    </button>
+  );
+}
+
+export default FilterButton;

apps/web/modules/ee/contacts/segments/components/segment-editor.test.tsx

@@ -385,4 +385,113 @@ describe("SegmentEditor", () => {
 
     // Dropdown menu trigger is disabled, so no need to test clicking items inside
   });
+
+  test("connector button is focusable and activates on Enter/Space", async () => {
+    const user = userEvent.setup();
+    const segment = { ...mockSegmentBase, filters: [groupResource1] };
+    render(
+      <SegmentEditor
+        group={[groupResource1]}
+        environmentId={mockEnvironmentId}
+        segment={segment}
+        segments={mockSegments}
+        contactAttributeKeys={mockContactAttributeKeys}
+        setSegment={mockSetSegment}
+      />
+    );
+
+    const connectorButton = screen.getByText("and");
+    // Focus the button directly instead of tabbing to it
+    connectorButton.focus();
+
+    // Simulate pressing Enter
+    await user.keyboard("[Enter]");
+    expect(segmentUtils.toggleGroupConnector).toHaveBeenCalledWith(
+      expect.any(Array),
+      groupResource1.id,
+      "or"
+    );
+
+    vi.mocked(segmentUtils.toggleGroupConnector).mockClear(); // Clear mock for next assertion
+
+    // Simulate pressing Space
+    await user.keyboard(" ");
+    expect(segmentUtils.toggleGroupConnector).toHaveBeenCalledWith(
+      expect.any(Array),
+      groupResource1.id,
+      "or"
+    );
+  });
+
+  test("connector button has accessibility attributes", () => {
+    const segment = { ...mockSegmentBase, filters: [groupResource1] };
+    render(
+      <SegmentEditor
+        group={[groupResource1]}
+        environmentId={mockEnvironmentId}
+        segment={segment}
+        segments={mockSegments}
+        contactAttributeKeys={mockContactAttributeKeys}
+        setSegment={mockSetSegment}
+      />
+    );
+
+    const connectorElement = screen.getByText("and");
+    expect(connectorElement.tagName.toLowerCase()).toBe("button");
+  });
+
+  test("connector button and add filter button are both keyboard focusable and reachable via tabbing", async () => {
+    const user = userEvent.setup();
+    const segment = { ...mockSegmentBase, filters: [groupResource1] };
+    render(
+      <SegmentEditor
+        group={[groupResource1]}
+        environmentId={mockEnvironmentId}
+        segment={segment}
+        segments={mockSegments}
+        contactAttributeKeys={mockContactAttributeKeys}
+        setSegment={mockSetSegment}
+      />
+    );
+
+    const connectorButton = screen.getByText("and");
+    const addFilterButton = screen.getByTestId("add-filter-button");
+
+    // Tab through the page and collect focusable elements
+    const focusable: (Element | null)[] = [];
+    for (let i = 0; i < 10; i++) {
+      // Arbitrary upper bound to avoid infinite loop
+      await user.tab();
+      focusable.push(document.activeElement);
+      if (document.activeElement === document.body) break;
+    }
+
+    // Filter out nulls for the assertion
+    const nonNullFocusable = focusable.filter((el): el is Element => el !== null);
+    expect(nonNullFocusable).toContain(connectorButton);
+    expect(nonNullFocusable).toContain(addFilterButton);
+  });
+
+  test("connector button and add filter button can be focused independently", () => {
+    const segment = { ...mockSegmentBase, filters: [groupResource1] };
+    render(
+      <SegmentEditor
+        group={[groupResource1]}
+        environmentId={mockEnvironmentId}
+        segment={segment}
+        segments={mockSegments}
+        contactAttributeKeys={mockContactAttributeKeys}
+        setSegment={mockSetSegment}
+      />
+    );
+
+    const connectorButton = screen.getByText("and");
+    const addFilterButton = screen.getByTestId("add-filter-button");
+
+    connectorButton.focus();
+    expect(document.activeElement).toBe(connectorButton);
+
+    addFilterButton.focus();
+    expect(document.activeElement).toBe(addFilterButton);
+  });
 });

apps/web/modules/ee/contacts/segments/components/segment-editor.tsx

@@ -149,7 +149,7 @@ export function SegmentEditor({
           <div key={groupId}>
             <div className="flex items-start gap-2">
               <div className="w-auto" key={connector}>
-                <span
+                <button
                   className={cn(
                     Boolean(connector) && "cursor-pointer underline",
                     "text-sm",
@@ -159,8 +159,8 @@ export function SegmentEditor({
                     if (viewOnly) return;
                     onConnectorChange(groupId, connector);
                   }}>
-                  {connector ? connector : t("environments.segments.where")}
-                </span>
+                  {connector ?? t("environments.segments.where")}
+                </button>
               </div>
 
               <div className="rounded-lg border-2 border-slate-300 bg-white p-4">
@@ -176,6 +176,7 @@ export function SegmentEditor({
 
                 <div className="mt-4">
                   <Button
+                    data-testid="add-filter-button"
                     disabled={viewOnly}
                     onClick={() => {
                       if (viewOnly) return;

apps/web/modules/ee/contacts/segments/components/segment-filter.test.tsx

@@ -1,7 +1,6 @@
 import { SegmentFilter } from "@/modules/ee/contacts/segments/components/segment-filter";
 import * as segmentUtils from "@/modules/ee/contacts/segments/lib/utils";
 import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
-// Added fireEvent
 import userEvent from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { TContactAttributeKey } from "@formbricks/types/contact-attribute-key";
@@ -127,6 +126,16 @@ const segments: TSegment[] = [
     createdAt: new Date(),
     updatedAt: new Date(),
   } as unknown as TSegment,
+  {
+    id: "seg3",
+    environmentId,
+    title: "Third Segment",
+    isPrivate: false,
+    filters: [],
+    surveys: ["survey1"],
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  } as unknown as TSegment,
 ];
 const contactAttributeKeys: TContactAttributeKey[] = [
   {
@@ -178,6 +187,226 @@ describe("SegmentFilter", () => {
     // vi.clearAllMocks() in afterEach handles mock reset.
   });
 
+  test("SegmentFilterItemConnector displays correct connector value or default text", async () => {
+    const attributeFilterResource: TSegmentAttributeFilter = {
+      id: "filter-attr-1",
+      root: {
+        type: "attribute",
+        contactAttributeKey: "email",
+      },
+      qualifier: {
+        operator: "equals",
+      },
+      value: "test@example.com",
+    };
+    const segmentWithAttributeFilter: TSegment = {
+      ...segment,
+      filters: [
+        {
+          id: "group-1",
+          connector: "and",
+          resource: attributeFilterResource,
+        },
+      ],
+    };
+
+    const currentProps = { ...baseProps, segment: segmentWithAttributeFilter };
+
+    render(<SegmentFilter {...currentProps} connector="and" resource={attributeFilterResource} />);
+    expect(screen.getByText("and")).toBeInTheDocument();
+
+    cleanup();
+    render(<SegmentFilter {...currentProps} connector={null} resource={attributeFilterResource} />);
+    expect(screen.getByText("environments.segments.where")).toBeInTheDocument();
+  });
+
+  test("SegmentFilterItemConnector applies correct CSS classes based on props", async () => {
+    const attributeFilterResource: TSegmentAttributeFilter = {
+      id: "filter-attr-1",
+      root: {
+        type: "attribute",
+        contactAttributeKey: "email",
+      },
+      qualifier: {
+        operator: "equals",
+      },
+      value: "test@example.com",
+    };
+    const segmentWithAttributeFilter: TSegment = {
+      ...segment,
+      filters: [
+        {
+          id: "group-1",
+          connector: "and",
+          resource: attributeFilterResource,
+        },
+      ],
+    };
+
+    const currentProps = { ...baseProps, segment: segmentWithAttributeFilter };
+
+    // Test case 1: connector is "and", viewOnly is false
+    render(<SegmentFilter {...currentProps} connector="and" resource={attributeFilterResource} />);
+    const connectorButton1 = screen.getByText("and").closest("button");
+    expect(connectorButton1).toHaveClass("cursor-pointer");
+    expect(connectorButton1).toHaveClass("underline");
+    expect(connectorButton1).not.toHaveClass("cursor-not-allowed");
+
+    cleanup();
+
+    // Test case 2: connector is null, viewOnly is false
+    render(<SegmentFilter {...currentProps} connector={null} resource={attributeFilterResource} />);
+    const connectorButton2 = screen.getByText("environments.segments.where").closest("button");
+    expect(connectorButton2).not.toHaveClass("cursor-pointer");
+    expect(connectorButton2).not.toHaveClass("underline");
+    expect(connectorButton2).not.toHaveClass("cursor-not-allowed");
+
+    cleanup();
+
+    // Test case 3: connector is "and", viewOnly is true
+    render(
+      <SegmentFilter {...currentProps} connector="and" resource={attributeFilterResource} viewOnly={true} />
+    );
+    const connectorButton3 = screen.getByText("and").closest("button");
+    expect(connectorButton3).not.toHaveClass("cursor-pointer");
+    expect(connectorButton3).toHaveClass("underline");
+    expect(connectorButton3).toHaveClass("cursor-not-allowed");
+  });
+
+  test("SegmentFilterItemConnector applies cursor-not-allowed class when viewOnly is true", async () => {
+    const attributeFilterResource: TSegmentAttributeFilter = {
+      id: "filter-attr-1",
+      root: {
+        type: "attribute",
+        contactAttributeKey: "email",
+      },
+      qualifier: {
+        operator: "equals",
+      },
+      value: "test@example.com",
+    };
+    const segmentWithAttributeFilter: TSegment = {
+      ...segment,
+      filters: [
+        {
+          id: "group-1",
+          connector: "and",
+          resource: attributeFilterResource,
+        },
+      ],
+    };
+
+    const currentProps = { ...baseProps, segment: segmentWithAttributeFilter, viewOnly: true };
+
+    render(<SegmentFilter {...currentProps} connector="and" resource={attributeFilterResource} />);
+    const connectorButton = screen.getByText("and");
+    expect(connectorButton).toHaveClass("cursor-not-allowed");
+  });
+
+  test("toggles connector on Enter key press", async () => {
+    const attributeFilterResource: TSegmentAttributeFilter = {
+      id: "filter-attr-1",
+      root: { type: "attribute", contactAttributeKey: "email" },
+      qualifier: { operator: "equals" },
+      value: "test@example.com",
+    };
+    const segmentWithAttributeFilter: TSegment = {
+      ...segment,
+      filters: [
+        {
+          id: "group-1",
+          connector: "and",
+          resource: attributeFilterResource,
+        },
+      ],
+    };
+
+    const currentProps = { ...baseProps, segment: structuredClone(segmentWithAttributeFilter) };
+
+    render(<SegmentFilter {...currentProps} connector="and" resource={attributeFilterResource} />);
+    const connectorButton = screen.getByText("and");
+    connectorButton.focus();
+    await userEvent.keyboard("{Enter}");
+
+    expect(vi.mocked(segmentUtils.toggleFilterConnector)).toHaveBeenCalledWith(
+      currentProps.segment.filters,
+      attributeFilterResource.id,
+      "or"
+    );
+    expect(mockSetSegment).toHaveBeenCalled();
+  });
+
+  test("SegmentFilterItemConnector button shows a visible focus indicator when focused via keyboard navigation", async () => {
+    const attributeFilterResource: TSegmentAttributeFilter = {
+      id: "filter-attr-1",
+      root: {
+        type: "attribute",
+        contactAttributeKey: "email",
+      },
+      qualifier: {
+        operator: "equals",
+      },
+      value: "test@example.com",
+    };
+    const segmentWithAttributeFilter: TSegment = {
+      ...segment,
+      filters: [
+        {
+          id: "group-1",
+          connector: "and",
+          resource: attributeFilterResource,
+        },
+      ],
+    };
+
+    const currentProps = { ...baseProps, segment: segmentWithAttributeFilter };
+    render(<SegmentFilter {...currentProps} connector="and" resource={attributeFilterResource} />);
+
+    const connectorButton = screen.getByText("and");
+    await userEvent.tab();
+    expect(connectorButton).toHaveFocus();
+  });
+
+  test("SegmentFilterItemConnector button has aria-label for screen readers", async () => {
+    const attributeFilterResource: TSegmentAttributeFilter = {
+      id: "filter-attr-1",
+      root: {
+        type: "attribute",
+        contactAttributeKey: "email",
+      },
+      qualifier: {
+        operator: "equals",
+      },
+      value: "test@example.com",
+    };
+    const segmentWithAttributeFilter: TSegment = {
+      ...segment,
+      filters: [
+        {
+          id: "group-1",
+          connector: "and",
+          resource: attributeFilterResource,
+        },
+      ],
+    };
+
+    const currentProps = { ...baseProps, segment: segmentWithAttributeFilter };
+
+    render(<SegmentFilter {...currentProps} connector="and" resource={attributeFilterResource} />);
+    const andButton = screen.getByRole("button", { name: "and" });
+    expect(andButton).toHaveAttribute("aria-label", "and");
+
+    cleanup();
+    render(<SegmentFilter {...currentProps} connector="or" resource={attributeFilterResource} />);
+    const orButton = screen.getByRole("button", { name: "or" });
+    expect(orButton).toHaveAttribute("aria-label", "or");
+
+    cleanup();
+    render(<SegmentFilter {...currentProps} connector={null} resource={attributeFilterResource} />);
+    const whereButton = screen.getByRole("button", { name: "environments.segments.where" });
+    expect(whereButton).toHaveAttribute("aria-label", "environments.segments.where");
+  });
+
   describe("Attribute Filter", () => {
     const attributeFilterResource: TSegmentAttributeFilter = {
       id: "filter-attr-1",
@@ -270,6 +499,138 @@ describe("SegmentFilter", () => {
       expect(screen.getByTestId("dropdown-trigger")).toBeDisabled();
       expect(screen.getByTestId("trash-icon").closest("button")).toBeDisabled();
     });
+
+    test("displays error message for non-numeric input with arithmetic operator", async () => {
+      const arithmeticFilterResource: TSegmentAttributeFilter = {
+        id: "filter-attr-arithmetic-1",
+        root: {
+          type: "attribute",
+          contactAttributeKey: "email",
+        },
+        qualifier: {
+          operator: "greaterThan",
+        },
+        value: "10",
+      };
+
+      const segmentWithArithmeticFilter: TSegment = {
+        ...segment,
+        filters: [
+          {
+            id: "group-1",
+            connector: "and",
+            resource: arithmeticFilterResource,
+          },
+        ],
+      };
+
+      const currentProps = { ...baseProps, segment: segmentWithArithmeticFilter };
+      render(<SegmentFilter {...currentProps} connector="and" resource={arithmeticFilterResource} />);
+
+      const valueInput = screen.getByDisplayValue("10");
+      await userEvent.clear(valueInput);
+      fireEvent.change(valueInput, { target: { value: "abc" } });
+
+      await waitFor(() =>
+        expect(screen.getByText("environments.segments.value_must_be_a_number")).toBeInTheDocument()
+      );
+    });
+
+    test("navigates with tab key", async () => {
+      const attributeFilterResource: TSegmentAttributeFilter = {
+        id: "filter-attr-1",
+        root: {
+          type: "attribute",
+          contactAttributeKey: "email",
+        },
+        qualifier: {
+          operator: "equals",
+        },
+        value: "test@example.com",
+      };
+      const segmentWithAttributeFilter: TSegment = {
+        ...segment,
+        filters: [
+          {
+            id: "group-1",
+            connector: "and",
+            resource: attributeFilterResource,
+          },
+        ],
+      };
+
+      const currentProps = { ...baseProps, segment: segmentWithAttributeFilter };
+      render(<SegmentFilter {...currentProps} connector="and" resource={attributeFilterResource} />);
+
+      const connectorButton = screen.getByText("and").closest("button");
+      const attributeSelect = screen.getByText("Email").closest("button");
+      const operatorSelect = screen.getByText("equals").closest("button");
+      const valueInput = screen.getByDisplayValue("test@example.com");
+      const dropdownTrigger = screen.getByTestId("dropdown-trigger");
+      const trashButton = screen.getByTestId("trash-icon").closest("button");
+
+      // Set focus on the first element (connector button)
+      connectorButton?.focus();
+      await waitFor(() => expect(connectorButton).toHaveFocus());
+
+      // Tab to attribute select
+      await userEvent.tab();
+      if (!attributeSelect) throw new Error("attributeSelect is null");
+      await waitFor(() => expect(attributeSelect).toHaveFocus());
+
+      // Tab to operator select
+      await userEvent.tab();
+      if (!operatorSelect) throw new Error("operatorSelect is null");
+      await waitFor(() => expect(operatorSelect).toHaveFocus());
+
+      // Tab to value input
+      await userEvent.tab();
+      await waitFor(() => expect(valueInput).toHaveFocus());
+
+      // Tab to dropdown trigger
+      await userEvent.tab();
+      await waitFor(() => expect(dropdownTrigger).toHaveFocus());
+
+      // Tab through dropdown menu items (4 items)
+      for (let i = 0; i < 4; i++) {
+        await userEvent.tab();
+      }
+
+      // Tab to trash button
+      await userEvent.tab();
+      if (!trashButton) throw new Error("trashButton is null");
+      await waitFor(() => expect(trashButton).toHaveFocus());
+    });
+
+    test("interactive buttons have type='button' attribute", async () => {
+      const attributeFilterResource: TSegmentAttributeFilter = {
+        id: "filter-attr-1",
+        root: {
+          type: "attribute",
+          contactAttributeKey: "email",
+        },
+        qualifier: {
+          operator: "equals",
+        },
+        value: "test@example.com",
+      };
+      const segmentWithAttributeFilter: TSegment = {
+        ...segment,
+        filters: [
+          {
+            id: "group-1",
+            connector: "and",
+            resource: attributeFilterResource,
+          },
+        ],
+      };
+
+      const currentProps = { ...baseProps, segment: segmentWithAttributeFilter };
+      render(<SegmentFilter {...currentProps} connector="and" resource={attributeFilterResource} />);
+
+      const connectorButton = await screen.findByText("and");
+      expect(connectorButton.closest("button")).toHaveAttribute("type", "button");
+    });
   });
 
   describe("Person Filter", () => {
@@ -327,6 +688,126 @@ describe("SegmentFilter", () => {
       // Ensure the state update function was called
       expect(mockSetSegment).toHaveBeenCalled();
     });
+
+    test("displays error message for non-numeric input with arithmetic operator", async () => {
+      const personFilterResourceWithArithmeticOperator: TSegmentPersonFilter = {
+        id: "filter-person-2",
+        root: { type: "person", personIdentifier: "userId" },
+        qualifier: { operator: "greaterThan" },
+        value: "10",
+      };
+
+      const segmentWithPersonFilterArithmetic: TSegment = {
+        ...segment,
+        filters: [{ id: "group-2", connector: "and", resource: personFilterResourceWithArithmeticOperator }],
+      };
+
+      const currentProps = {
+        ...baseProps,
+        segment: structuredClone(segmentWithPersonFilterArithmetic),
+        setSegment: mockSetSegment,
+      };
+
+      render(
+        <SegmentFilter
+          {...currentProps}
+          connector="or"
+          resource={personFilterResourceWithArithmeticOperator}
+        />
+      );
+      const valueInput = screen.getByDisplayValue("10");
+
+      await userEvent.clear(valueInput);
+      fireEvent.change(valueInput, { target: { value: "abc" } });
+
+      await waitFor(() => {
+        expect(screen.getByText("environments.segments.value_must_be_a_number")).toBeInTheDocument();
+      });
+    });
+
+    test("handles empty value input", async () => {
+      const initialSegment = structuredClone(segmentWithPersonFilter);
+      const currentProps = { ...baseProps, segment: initialSegment, setSegment: mockSetSegment };
+
+      render(<SegmentFilter {...currentProps} connector="or" resource={personFilterResource} />);
+      const valueInput = screen.getByDisplayValue("person123");
+
+      // Clear the input
+      await userEvent.clear(valueInput);
+      // Fire a single change event with the final value
+      fireEvent.change(valueInput, { target: { value: "" } });
+
+      // Check the call to the update function (might be called once or twice by checkValueAndUpdate)
+      await waitFor(() => {
+        // Check if it was called AT LEAST once with the correct final value
+        expect(vi.mocked(segmentUtils.updateFilterValue)).toHaveBeenCalledWith(
+          expect.anything(),
+          personFilterResource.id,
+          ""
+        );
+      });
+
+      const errorMessage = await screen.findByText("environments.segments.value_cannot_be_empty");
+      expect(errorMessage).toBeVisible();
+
+      // Ensure the state update function was called
+      expect(mockSetSegment).toHaveBeenCalled();
+    });
+
+    test("is keyboard accessible", async () => {
+      const currentProps = { ...baseProps, segment: segmentWithPersonFilter };
+      render(<SegmentFilter {...currentProps} connector="or" resource={personFilterResource} />);
+
+      // Tab to the connector button
+      await userEvent.tab();
+      expect(screen.getByText("or")).toHaveFocus();
+
+      // Tab to the person identifier select
+      await userEvent.tab();
+      await waitFor(() => expect(screen.getByText("userId").closest("button")).toHaveFocus());
+
+      // Tab to the operator select
+      await userEvent.tab();
+      await waitFor(() => expect(screen.getByText("equals").closest("button")).toHaveFocus());
+
+      // Tab to the value input
+      await userEvent.tab();
+      expect(screen.getByDisplayValue("person123")).toHaveFocus();
+
+      // Tab to the context menu trigger
+      await userEvent.tab();
+      await waitFor(() => expect(screen.getByTestId("dropdown-trigger")).toHaveFocus());
+    });
+
+    describe("Person Filter - Multiple Identifiers", () => {
+      const personFilterResourceWithMultipleIdentifiers: TSegmentPersonFilter = {
+        id: "filter-person-multi-1",
+        root: { type: "person", personIdentifier: "userId" }, // Even though it's a single value, the component should handle the possibility of multiple
+        qualifier: { operator: "equals" },
+        value: "person123",
+      };
+      const segmentWithPersonFilterWithMultipleIdentifiers: TSegment = {
+        ...segment,
+        filters: [
+          { id: "group-multi-1", connector: "and", resource: personFilterResourceWithMultipleIdentifiers },
+        ],
+      };
+
+      test("renders correctly with multiple person identifiers", async () => {
+        const currentProps = { ...baseProps, segment: segmentWithPersonFilterWithMultipleIdentifiers };
+        render(
+          <SegmentFilter
+            {...currentProps}
+            connector="or"
+            resource={personFilterResourceWithMultipleIdentifiers}
+          />
+        );
+        expect(screen.getByText("or")).toBeInTheDocument();
+        await waitFor(() => expect(screen.getByText("userId").closest("button")).toBeInTheDocument());
+        await waitFor(() => expect(screen.getByText("equals").closest("button")).toBeInTheDocument());
+        expect(screen.getByDisplayValue("person123")).toBeInTheDocument();
+      });
+    });
   });
 
   describe("Segment Filter", () => {
@@ -357,6 +838,44 @@ describe("SegmentFilter", () => {
       expect(vi.mocked(segmentUtils.updateSegmentIdInFilter)).not.toHaveBeenCalled();
       expect(mockSetSegment).not.toHaveBeenCalled();
     });
+
+    test("updates the segment ID in the filter when a new segment is selected", async () => {
+      const segmentFilterResource = {
+        id: "filter-segment-1",
+        root: { type: "segment", segmentId: "seg2" },
+        qualifier: { operator: "userIsIn" },
+      } as unknown as TSegmentSegmentFilter;
+      const segmentWithSegmentFilter: TSegment = {
+        ...segment,
+        filters: [{ id: "group-1", connector: "and", resource: segmentFilterResource }],
+      };
+
+      const currentProps = {
+        ...baseProps,
+        segment: structuredClone(segmentWithSegmentFilter),
+        setSegment: mockSetSegment,
+      };
+
+      render(<SegmentFilter {...currentProps} connector={null} resource={segmentFilterResource} />);
+
+      // Mock the updateSegmentIdInFilter function call directly
+      // This simulates what would happen when a segment is selected
+      vi.mocked(segmentUtils.updateSegmentIdInFilter).mockImplementationOnce(() => {});
+
+      // Directly call the mocked function with the expected arguments
+      segmentUtils.updateSegmentIdInFilter(currentProps.segment.filters, "filter-segment-1", "seg3");
+
+      // Verify the function was called with the correct arguments
+      expect(vi.mocked(segmentUtils.updateSegmentIdInFilter)).toHaveBeenCalledWith(
+        expect.anything(),
+        "filter-segment-1",
+        "seg3"
+      );
+
+      // Call the setSegment function to simulate the state update
+      mockSetSegment(currentProps.segment);
+      expect(mockSetSegment).toHaveBeenCalled();
+    });
   });
 
   describe("Device Filter", () => {
@@ -464,4 +983,216 @@ describe("SegmentFilter", () => {
     expect(vi.mocked(segmentUtils.toggleFilterConnector)).not.toHaveBeenCalled();
     expect(mockSetSegment).not.toHaveBeenCalled();
   });
+
+  describe("Segment Filter - Empty Segments", () => {
+    const segmentFilterResource = {
+      id: "filter-segment-1",
+      root: { type: "segment", segmentId: "seg2" },
+      qualifier: { operator: "userIsIn" },
+    } as unknown as TSegmentSegmentFilter;
+    const segmentWithSegmentFilter: TSegment = {
+      ...segment,
+      filters: [{ id: "group-1", connector: "and", resource: segmentFilterResource }],
+    };
+
+    test("renders correctly when segments array is empty", async () => {
+      const currentProps = { ...baseProps, segment: segmentWithSegmentFilter, segments: [] };
+      render(<SegmentFilter {...currentProps} connector={null} resource={segmentFilterResource} />);
+
+      // Find the combobox element
+      const selectElement = screen.getByRole("combobox");
+      // Verify it has the empty placeholder attribute
+      expect(selectElement).toHaveAttribute("data-placeholder", "");
+    });
+
+    test("renders correctly when segments array contains only private segments", async () => {
+      const privateSegments: TSegment[] = [
+        {
+          id: "seg3",
+          environmentId,
+          title: "Private Segment",
+          isPrivate: true,
+          filters: [],
+          surveys: ["survey1"],
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        } as unknown as TSegment,
+      ];
+      const currentProps = { ...baseProps, segment: segmentWithSegmentFilter, segments: privateSegments };
+      render(<SegmentFilter {...currentProps} connector={null} resource={segmentFilterResource} />);
+
+      // Find the combobox element
+      const selectElement = screen.getByRole("combobox");
+      // Verify it has the empty placeholder attribute
+      expect(selectElement).toHaveAttribute("data-placeholder", "");
+    });
+  });
+
+  test("deletes the entire group when deleting the last SegmentSegmentFilter", async () => {
+    const segmentFilterResource: TSegmentSegmentFilter = {
+      id: "filter-segment-1",
+      root: { type: "segment", segmentId: "seg2" },
+      qualifier: { operator: "userIsIn" },
+    } as unknown as TSegmentSegmentFilter;
+
+    const segmentWithSegmentFilter: TSegment = {
+      ...segment,
+      filters: [{ id: "group-1", connector: "and", resource: segmentFilterResource }],
+    };
+
+    const currentProps = { ...baseProps, segment: segmentWithSegmentFilter };
+    render(<SegmentFilter {...currentProps} connector={null} resource={segmentFilterResource} />);
+
+    const deleteButton = screen.getByTestId("trash-icon").closest("button");
+    expect(deleteButton).toBeInTheDocument();
+
+    if (!deleteButton) throw new Error("deleteButton is null");
+    await userEvent.click(deleteButton);
+
+    expect(mockOnDeleteFilter).toHaveBeenCalledWith("filter-segment-1");
+  });
+
+  describe("SegmentSegmentFilter", () => {
+    const segmentFilterResource = {
+      id: "filter-segment-1",
+      root: { type: "segment", segmentId: "seg2" },
+      qualifier: { operator: "userIsIn" },
+    } as unknown as TSegmentSegmentFilter;
+    const segmentWithSegmentFilter: TSegment = {
+      ...segment,
+      filters: [{ id: "group-1", connector: "and", resource: segmentFilterResource }],
+    };
+
+    test("operator toggle button has accessible name", async () => {
+      const currentProps = { ...baseProps, segment: segmentWithSegmentFilter };
+      render(<SegmentFilter {...currentProps} connector={null} resource={segmentFilterResource} />);
+
+      // Find the operator button by its text content
+      const operatorButton = screen.getByText("userIsIn");
+
+      // Check that the button is accessible by its visible name
+      const operatorToggleButton = operatorButton.closest("button");
+      expect(operatorToggleButton).toHaveAccessibleName("userIsIn");
+    });
+  });
+
+  test("renders AttributeSegmentFilter in viewOnly mode with disabled interactive elements and accessibility attributes", async () => {
+    const attributeFilterResource: TSegmentAttributeFilter = {
+      id: "filter-attr-1",
+      root: {
+        type: "attribute",
+        contactAttributeKey: "email",
+      },
+      qualifier: {
+        operator: "equals",
+      },
+      value: "test@example.com",
+    };
+    const segmentWithAttributeFilter: TSegment = {
+      ...segment,
+      filters: [
+        {
+          id: "group-1",
+          connector: "and",
+          resource: attributeFilterResource,
+        },
+      ],
+    };
+
+    const currentProps = { ...baseProps, segment: segmentWithAttributeFilter, viewOnly: true };
+    render(<SegmentFilter {...currentProps} connector="and" resource={attributeFilterResource} />);
+
+    // Check if the connector button is disabled and has the correct class
+    const connectorButton = screen.getByText("and");
+    expect(connectorButton).toHaveClass("cursor-not-allowed");
+
+    // Check if the attribute key select is disabled
+    const attributeKeySelect = await screen.findByRole("combobox", {
+      name: (content, element) => {
+        return element.textContent?.toLowerCase().includes("email") ?? false;
+      },
+    });
+    expect(attributeKeySelect).toBeDisabled();
+
+    // Check if the operator select is disabled
+    const operatorSelect = await screen.findByRole("combobox", {
+      name: (content, element) => {
+        return element.textContent?.toLowerCase().includes("equals") ?? false;
+      },
+    });
+    expect(operatorSelect).toBeDisabled();
+
+    // Check if the value input is disabled
+    const valueInput = screen.getByDisplayValue("test@example.com");
+    expect(valueInput).toBeDisabled();
+
+    // Check if the context menu trigger is disabled
+    const contextMenuTrigger = screen.getByTestId("dropdown-trigger");
+    expect(contextMenuTrigger).toBeDisabled();
+
+    // Check if the delete button is disabled
+    const deleteButton = screen.getByTestId("trash-icon").closest("button");
+    expect(deleteButton).toBeDisabled();
+  });
+
+  test("handles complex nested structures without error", async () => {
+    const nestedAttributeFilter: TSegmentAttributeFilter = {
+      id: "nested-filter",
+      root: {
+        type: "attribute",
+        contactAttributeKey: "plan",
+      },
+      qualifier: {
+        operator: "equals",
+      },
+      value: "premium",
+    };
+
+    const complexAttributeFilter: TSegmentAttributeFilter = {
+      id: "complex-filter",
+      root: {
+        type: "attribute",
+        contactAttributeKey: "email",
+      },
+      qualifier: {
+        operator: "contains",
+      },
+      value: "example",
+    };
+
+    const deeplyNestedSegment: TSegment = {
+      ...segment,
+      filters: [
+        {
+          id: "group-1",
+          connector: "and",
+          resource: [
+            {
+              id: "group-2",
+              connector: "or",
+              resource: [
+                {
+                  id: "group-3",
+                  connector: "and",
+                  resource: complexAttributeFilter,
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: "group-4",
+          connector: "and",
+          resource: nestedAttributeFilter,
+        },
+      ],
+    };
+
+    const currentProps = { ...baseProps, segment: deeplyNestedSegment };
+
+    // Act & Assert: Render the component and expect no error to be thrown
+    expect(() => {
+      render(<SegmentFilter {...currentProps} connector="and" resource={complexAttributeFilter} />);
+    }).not.toThrow();
+  });
 });

apps/web/modules/ee/contacts/segments/components/segment-filter.tsx

@@ -116,14 +116,16 @@ function SegmentFilterItemConnector({
 
   return (
     <div className="w-[40px]">
-      <span
+      <button
+        type="button"
+        aria-label={connector ?? t("environments.segments.where")}
         className={cn(Boolean(connector) && "cursor-pointer underline", viewOnly && "cursor-not-allowed")}
         onClick={() => {
           if (viewOnly) return;
           onConnectorChange();
         }}>
-        {connector ? connector : t("environments.segments.where")}
-      </span>
+        {connector ?? t("environments.segments.where")}
+      </button>
     </div>
   );
 }
@@ -626,14 +628,16 @@ function SegmentSegmentFilter({
       />
 
       <div>
-        <span
+        <button
+          type="button"
+          aria-label={operatorText}
           className={cn("cursor-pointer underline", viewOnly && "cursor-not-allowed")}
           onClick={() => {
             if (viewOnly) return;
             toggleSegmentOperator();
           }}>
           {operatorText}
-        </span>
+        </button>
       </div>
 
       <Select

apps/web/modules/ee/contacts/segments/components/segment-table-data-row.test.tsx

@@ -69,7 +69,7 @@ describe("SegmentTableDataRow", () => {
       />
     );
 
-    const row = screen.getByText(mockCurrentSegment.title).closest("div.grid");
+    const row = screen.getByText(mockCurrentSegment.title).closest("button.grid");
     expect(row).toBeInTheDocument();
 
     // Initially modal should not be called with open: true
@@ -117,7 +117,7 @@ describe("SegmentTableDataRow", () => {
       undefined // Expect undefined as the second argument
     );
 
-    const row = screen.getByText(mockCurrentSegment.title).closest("div.grid");
+    const row = screen.getByText(mockCurrentSegment.title).closest("button.grid");
     await user.click(row!);
 
     // Check second call (open: true)
@@ -130,4 +130,23 @@ describe("SegmentTableDataRow", () => {
       undefined // Expect undefined as the second argument
     );
   });
+
+  test("has focus styling for keyboard navigation", async () => {
+    const user = userEvent.setup();
+    render(
+      <SegmentTableDataRow
+        currentSegment={mockCurrentSegment}
+        segments={mockSegments}
+        contactAttributeKeys={mockContactAttributeKeys}
+        isContactsEnabled={mockIsContactsEnabled}
+        isReadOnly={mockIsReadOnly}
+      />
+    );
+
+    const row = screen.getByText(mockCurrentSegment.title).closest("button.grid");
+    expect(row).toBeInTheDocument();
+
+    await user.tab();
+    expect(document.activeElement).toBe(row);
+  });
 });

apps/web/modules/ee/contacts/segments/components/segment-table-data-row.tsx

@@ -27,9 +27,9 @@ export const SegmentTableDataRow = ({
 
   return (
     <>
-      <div
+      <button
         key={id}
-        className="m-2 grid h-16 cursor-pointer grid-cols-7 content-center rounded-lg transition-colors ease-in-out hover:bg-slate-100"
+        className="grid h-16 w-full cursor-pointer grid-cols-7 content-center rounded-lg p-2 text-left transition-colors ease-in-out hover:bg-slate-100"
         onClick={() => setIsEditSegmentModalOpen(true)}>
         <div className="col-span-4 flex items-center pl-6 text-sm">
           <div className="flex items-center gap-4">
@@ -55,7 +55,7 @@ export const SegmentTableDataRow = ({
         <div className="col-span-1 my-auto hidden whitespace-normal text-center text-sm text-slate-500 sm:block">
           <div className="ph-no-capture text-slate-900">{format(createdAt, "do 'of' MMMM, yyyy")}</div>
         </div>
-      </div>
+      </button>
 
       <EditSegmentModal
         environmentId={environmentId}

apps/web/modules/ee/multi-language-surveys/components/language-select.tsx

@@ -78,14 +78,14 @@ export function LanguageSelect({ language, onLanguageChange, disabled, locale }:
         />
         <div className="max-h-96 overflow-auto">
           {filteredItems.map((item, index) => (
-            <div
-              className="block cursor-pointer rounded-md px-4 py-2 text-slate-700 hover:bg-slate-100 active:bg-blue-100"
+            <button
+              className="block w-full cursor-pointer rounded-md px-4 py-2 text-left text-slate-700 hover:bg-slate-100 active:bg-blue-100"
               key={index}
               onClick={() => {
                 handleOptionSelect(item);
               }}>
               {item.label[locale]}
-            </div>
+            </button>
           ))}
         </div>
       </div>

apps/web/modules/survey/components/question-form-input/index.tsx

@@ -54,6 +54,7 @@ interface QuestionFormInputProps {
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
   className?: string;
   locale: TUserLocale;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
 }
 
 export const QuestionFormInput = ({
@@ -74,6 +75,7 @@ export const QuestionFormInput = ({
   onBlur,
   className,
   locale,
+  onKeyDown,
 }: QuestionFormInputProps) => {
   const { t } = useTranslate();
   const defaultLanguageCode =
@@ -243,6 +245,13 @@ export const QuestionFormInput = ({
     ]
   );
 
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (onKeyDown) onKeyDown(e);
+    },
+    [onKeyDown]
+  );
+
   const getFileUrl = (): string | undefined => {
     if (isWelcomeCard) return localSurvey.welcomeCard.fileUrl;
     if (isEndingCard) {
@@ -382,6 +391,7 @@ export const QuestionFormInput = ({
                           }
                           autoComplete={isRecallSelectVisible ? "off" : "on"}
                           autoFocus={id === "headline"}
+                          onKeyDown={handleKeyDown}
                         />
                         {recallComponents}
                       </div>

apps/web/modules/survey/components/template-list/components/start-from-scratch-template.test.tsx

@@ -83,8 +83,10 @@ describe("StartFromScratchTemplate", () => {
       />
     );
 
-    const templateElement = screen.getByText(mockTemplate.name).closest("div");
-    await user.click(templateElement!);
+    const cardButton = screen.getByRole("button", {
+      name: `${mockTemplate.name} ${mockTemplate.description}`,
+    });
+    await user.click(cardButton);
 
     expect(createSurveyMock).toHaveBeenCalledWith(mockTemplate);
     expect(onTemplateClickMock).not.toHaveBeenCalled();
@@ -112,8 +114,10 @@ describe("StartFromScratchTemplate", () => {
       />
     );
 
-    const templateElement = screen.getByText(mockTemplate.name).closest("div");
-    await user.click(templateElement!);
+    const cardButton = screen.getByRole("button", {
+      name: `${mockTemplate.name} ${mockTemplate.description}`,
+    });
+    await user.click(cardButton);
 
     expect(replacePresetPlaceholders).toHaveBeenCalledWith(mockTemplate, mockProject);
     expect(onTemplateClickMock).toHaveBeenCalledWith(replacedTemplate);

apps/web/modules/survey/components/template-list/components/start-from-scratch-template.tsx

@@ -30,27 +30,31 @@ export const StartFromScratchTemplate = ({
 }: StartFromScratchTemplateProps) => {
   const { t } = useTranslate();
   const customSurvey = customSurveyTemplate(t);
-  return (
-    <div
-      onClick={() => {
-        if (noPreview) {
-          createSurvey(customSurvey);
-          return;
-        }
-        const newTemplate = replacePresetPlaceholders(customSurvey, project);
-        onTemplateClick(newTemplate);
-        setActiveTemplate(newTemplate);
-      }}
-      className={cn(
-        activeTemplate?.name === customSurvey.name
-          ? "ring-brand-dark border-transparent ring-2"
-          : "hover:border-brand-dark border-dashed border-slate-300",
-        "duration-120 group relative rounded-lg border-2 bg-transparent p-6 transition-colors duration-150"
-      )}>
+  const showCreateSurveyButton = activeTemplate?.name === customSurvey.name;
+
+  const handleCardClick = () => {
+    if (noPreview) {
+      createSurvey(customSurvey);
+      return;
+    }
+    const newTemplate = replacePresetPlaceholders(customSurvey, project);
+    onTemplateClick(newTemplate);
+    setActiveTemplate(newTemplate);
+  };
+
+  const cardClass = cn(
+    showCreateSurveyButton
+      ? "ring-brand-dark border-transparent ring-2"
+      : "hover:border-brand-dark border-dashed border-slate-300",
+    "flex flex-col group relative rounded-lg border-2 bg-transparent p-6 transition-colors duration-120 duration-150"
+  );
+
+  const cardContent = (
+    <>
       <PlusCircleIcon className="text-brand-dark h-8 w-8 transition-all duration-150 group-hover:scale-110" />
       <h3 className="text-md mb-1 mt-3 text-left font-bold text-slate-700">{customSurvey.name}</h3>
       <p className="text-left text-xs text-slate-600">{customSurvey.description}</p>
-      {activeTemplate?.name === customSurvey.name && (
+      {showCreateSurveyButton && (
         <div className="text-left">
           <Button
             className="mt-6 px-6 py-3"
@@ -61,6 +65,16 @@ export const StartFromScratchTemplate = ({
           </Button>
         </div>
       )}
-    </div>
+    </>
   );
+
+  if (!showCreateSurveyButton) {
+    return (
+      <button type="button" className={cardClass} onClick={handleCardClick}>
+        {cardContent}
+      </button>
+    );
+  }
+
+  return <div className={cardClass}>{cardContent}</div>;
 };

apps/web/modules/survey/components/template-list/components/template.test.tsx

@@ -57,7 +57,10 @@ describe("Template Component", () => {
 
     render(<Template {...defaultProps} noPreview={true} />);
 
-    await user.click(screen.getByText("Test Template").closest("div")!);
+    const cardButton = screen.getByRole("button", {
+      name: /Test Template.*Test Description/,
+    });
+    await user.click(cardButton);
 
     expect(replacePresetPlaceholders).toHaveBeenCalledWith(mockTemplate, mockProject);
     expect(defaultProps.createSurvey).toHaveBeenCalledTimes(1);
@@ -70,7 +73,10 @@ describe("Template Component", () => {
 
     render(<Template {...defaultProps} />);
 
-    await user.click(screen.getByText("Test Template").closest("div")!);
+    const cardButton = screen.getByRole("button", {
+      name: /Test Template.*Test Description/,
+    });
+    await user.click(cardButton);
 
     expect(replacePresetPlaceholders).toHaveBeenCalledWith(mockTemplate, mockProject);
     expect(defaultProps.onTemplateClick).toHaveBeenCalledTimes(1);
@@ -88,7 +94,8 @@ describe("Template Component", () => {
 
     render(<Template {...defaultProps} activeTemplate={mockTemplate} />);
 
-    await user.click(screen.getByText("environments.surveys.templates.use_this_template"));
+    const useButton = screen.getByText("environments.surveys.templates.use_this_template");
+    await user.click(useButton);
 
     expect(defaultProps.createSurvey).toHaveBeenCalledWith(mockTemplate);
   });

apps/web/modules/survey/components/template-list/components/template.tsx

@@ -32,26 +32,30 @@ export const Template = ({
   noPreview,
 }: TemplateProps) => {
   const { t } = useTranslate();
-  return (
-    <div
-      onClick={() => {
-        const newTemplate = replacePresetPlaceholders(template, project);
-        if (noPreview) {
-          createSurvey(newTemplate);
-          return;
-        }
-        onTemplateClick(newTemplate);
-        setActiveTemplate(newTemplate);
-      }}
-      key={template.name}
-      className={cn(
-        activeTemplate?.name === template.name && "ring-2 ring-slate-400",
-        "duration-120 group relative cursor-pointer rounded-lg bg-white p-6 shadow transition-all duration-150 hover:ring-2 hover:ring-slate-300"
-      )}>
+
+  const showCreateSurveyButton = activeTemplate?.name === template.name;
+
+  const handleCardClick = () => {
+    const newTemplate = replacePresetPlaceholders(template, project);
+    if (noPreview) {
+      createSurvey(newTemplate);
+      return;
+    }
+    onTemplateClick(newTemplate);
+    setActiveTemplate(newTemplate);
+  };
+
+  const cardClass = cn(
+    showCreateSurveyButton && "ring-2 ring-slate-400",
+    "flex flex-col group relative cursor-pointer rounded-lg bg-white p-6 shadow transition-all duration-120 duration-150 hover:ring-2 hover:ring-slate-300"
+  );
+
+  const cardContent = (
+    <>
       <TemplateTags template={template} selectedFilter={selectedFilter} />
       <h3 className="text-md mb-1 mt-3 text-left font-bold text-slate-700">{template.name}</h3>
       <p className="text-left text-xs text-slate-600">{template.description}</p>
-      {activeTemplate?.name === template.name && (
+      {showCreateSurveyButton && (
         <div className="flex justify-start">
           <Button
             className="mt-6 px-6 py-3"
@@ -62,6 +66,16 @@ export const Template = ({
           </Button>
         </div>
       )}
-    </div>
+    </>
+  );
+
+  if (showCreateSurveyButton) {
+    return <div className={cardClass}>{cardContent}</div>;
+  }
+
+  return (
+    <button type="button" className={cardClass} onClick={handleCardClick} key={template.name}>
+      {cardContent}
+    </button>
   );
 };

apps/web/modules/survey/editor/components/add-ending-card-button.test.tsx

@@ -5,7 +5,6 @@ import { TSurvey } from "@formbricks/types/surveys/types";
 import { AddEndingCardButton } from "./add-ending-card-button";
 
 const mockAddEndingCard = vi.fn();
-const mockSetLocalSurvey = vi.fn(); // Although not used in the button click, it's a prop
 
 const mockSurvey: TSurvey = {
   id: "survey1",
@@ -45,13 +44,7 @@ describe("AddEndingCardButton", () => {
   });
 
   test("renders the button correctly", () => {
-    render(
-      <AddEndingCardButton
-        localSurvey={mockSurvey}
-        setLocalSurvey={mockSetLocalSurvey}
-        addEndingCard={mockAddEndingCard}
-      />
-    );
+    render(<AddEndingCardButton localSurvey={mockSurvey} addEndingCard={mockAddEndingCard} />);
 
     // Check for the Tolgee translated text
     expect(screen.getByText("environments.surveys.edit.add_ending")).toBeInTheDocument();
@@ -61,15 +54,9 @@ describe("AddEndingCardButton", () => {
     const user = userEvent.setup();
     const surveyWithEndings = { ...mockSurvey, endings: [{}, {}] } as unknown as TSurvey; // Survey with 2 endings
 
-    render(
-      <AddEndingCardButton
-        localSurvey={surveyWithEndings}
-        setLocalSurvey={mockSetLocalSurvey}
-        addEndingCard={mockAddEndingCard}
-      />
-    );
+    render(<AddEndingCardButton localSurvey={surveyWithEndings} addEndingCard={mockAddEndingCard} />);
 
-    const button = screen.getByText("environments.surveys.edit.add_ending").closest("div.group");
+    const button = screen.getByText("environments.surveys.edit.add_ending").closest("button.group");
     expect(button).toBeInTheDocument();
 
     if (button) {
@@ -85,12 +72,11 @@ describe("AddEndingCardButton", () => {
     render(
       <AddEndingCardButton
         localSurvey={mockSurvey} // Survey with 0 endings
-        setLocalSurvey={mockSetLocalSurvey}
         addEndingCard={mockAddEndingCard}
       />
     );
 
-    const button = screen.getByText("environments.surveys.edit.add_ending").closest("div.group");
+    const button = screen.getByText("environments.surveys.edit.add_ending").closest("button.group");
     expect(button).toBeInTheDocument();
 
     if (button) {

apps/web/modules/survey/editor/components/add-ending-card-button.tsx

@@ -6,14 +6,13 @@ import { TSurvey } from "@formbricks/types/surveys/types";
 
 interface AddEndingCardButtonProps {
   localSurvey: TSurvey;
-  setLocalSurvey: (survey: TSurvey) => void;
   addEndingCard: (index: number) => void;
 }
 
 export const AddEndingCardButton = ({ localSurvey, addEndingCard }: AddEndingCardButtonProps) => {
   const { t } = useTranslate();
   return (
-    <div
+    <button
       className="group inline-flex rounded-lg border border-slate-300 bg-slate-50 hover:cursor-pointer hover:bg-white"
       onClick={() => addEndingCard(localSurvey.endings.length)}>
       <div className="flex w-10 items-center justify-center rounded-l-lg bg-slate-400 transition-all duration-300 ease-in-out group-hover:bg-slate-500 group-aria-expanded:rounded-bl-none group-aria-expanded:rounded-br">
@@ -22,6 +21,6 @@ export const AddEndingCardButton = ({ localSurvey, addEndingCard }: AddEndingCar
       <div className="px-4 py-3 text-sm">
         <p className="font-semibold">{t("environments.surveys.edit.add_ending")}</p>
       </div>
-    </div>
+    </button>
   );
 };

apps/web/modules/survey/editor/components/animated-survey-bg.test.tsx

@@ -28,12 +28,12 @@ describe("AnimatedSurveyBg", () => {
       <AnimatedSurveyBg handleBgChange={handleBgChange} background={initialBackground} />
     );
 
-    // Find the first video element and simulate a click on its parent div
+    // Find the first video element and simulate a click on its parent button
     const videoElement = container.querySelector("video");
-    const parentDiv = videoElement?.closest("div");
+    const parentButton = videoElement?.closest("button");
 
-    if (parentDiv) {
-      await userEvent.click(parentDiv);
+    if (parentButton) {
+      await userEvent.click(parentButton);
 
       const expectedValue = "/animated-bgs/4K/1_4k.mp4";
 
@@ -78,7 +78,7 @@ describe("AnimatedSurveyBg", () => {
     render(<AnimatedSurveyBg handleBgChange={mockHandleBgChange} background={backgroundValue} />);
 
     // Simulate a mouse enter event on the first video thumbnail
-    const firstThumbnail = screen.getAllByRole("checkbox")[0].closest("div"); // Find the parent div
+    const firstThumbnail = screen.getAllByRole("checkbox")[0].closest("button"); // Find the parent button
     if (firstThumbnail) {
       fireEvent.mouseEnter(firstThumbnail);
     }

apps/web/modules/survey/editor/components/animated-survey-bg.tsx

@@ -75,7 +75,7 @@ export const AnimatedSurveyBg = ({ handleBgChange, background }: AnimatedSurveyB
         {Object.keys(animationFiles).map((key, index) => {
           const value = animationFiles[key];
           return (
-            <div
+            <button
               key={key}
               onMouseEnter={() => debouncedManagePlayback(index, "play")}
               onMouseLeave={() => debouncedManagePlayback(index, "pause")}
@@ -88,12 +88,12 @@ export const AnimatedSurveyBg = ({ handleBgChange, background }: AnimatedSurveyB
                 <source src={`${key}`} type="video/mp4" />
               </video>
               <input
-                className="absolute right-2 top-2 h-4 w-4 rounded-sm bg-white"
+                className="absolute right-2 top-2 h-4 w-4 cursor-pointer rounded-sm bg-white"
                 type="checkbox"
                 checked={animation === value}
                 onChange={() => handleBg(value)}
               />
-            </div>
+            </button>
           );
         })}
       </div>

apps/web/modules/survey/editor/components/color-survey-bg.tsx

@@ -22,13 +22,13 @@ export const ColorSurveyBg = ({ handleBgChange, colors, background }: ColorSurve
       <div className="flex flex-wrap gap-4">
         {colors.map((x) => {
           return (
-            <div
+            <button
               className={`h-16 w-16 cursor-pointer rounded-lg border border-slate-300 ${
                 color === x ? "border-4 border-slate-500" : ""
               }`}
               key={x}
               style={{ backgroundColor: `${x}` }}
-              onClick={() => handleBg(x)}></div>
+              onClick={() => handleBg(x)}></button>
           );
         })}
       </div>

apps/web/modules/survey/editor/components/cta-question-form.tsx

@@ -87,21 +87,6 @@ export const CTAQuestionForm = ({
 
       <div className="mt-2 flex justify-between gap-8">
         <div className="flex w-full space-x-2">
-          <QuestionFormInput
-            id="buttonLabel"
-            value={question.buttonLabel}
-            label={t("environments.surveys.edit.next_button_label")}
-            localSurvey={localSurvey}
-            questionIdx={questionIdx}
-            maxLength={48}
-            placeholder={lastQuestion ? t("common.finish") : t("common.next")}
-            isInvalid={isInvalid}
-            updateQuestion={updateQuestion}
-            selectedLanguageCode={selectedLanguageCode}
-            setSelectedLanguageCode={setSelectedLanguageCode}
-            locale={locale}
-          />
-
           {questionIdx !== 0 && (
             <QuestionFormInput
               id="backButtonLabel"
@@ -118,6 +103,20 @@ export const CTAQuestionForm = ({
               locale={locale}
             />
           )}
+          <QuestionFormInput
+            id="buttonLabel"
+            value={question.buttonLabel}
+            label={t("environments.surveys.edit.next_button_label")}
+            localSurvey={localSurvey}
+            questionIdx={questionIdx}
+            maxLength={48}
+            placeholder={lastQuestion ? t("common.finish") : t("common.next")}
+            isInvalid={isInvalid}
+            updateQuestion={updateQuestion}
+            selectedLanguageCode={selectedLanguageCode}
+            setSelectedLanguageCode={setSelectedLanguageCode}
+            locale={locale}
+          />
         </div>
       </div>
 

apps/web/modules/survey/editor/components/logic-editor-conditions.test.tsx

@@ -75,7 +75,6 @@ describe("LogicEditorConditions", () => {
     );
 
     // Find the dropdown menu trigger for the condition
-    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
     const dropdownTrigger = container.querySelector<HTMLButtonElement>("#condition-0-0-dropdown");
     if (!dropdownTrigger) {
       throw new Error("Dropdown trigger not found");

apps/web/modules/survey/editor/components/logic-editor-conditions.tsx

@@ -232,14 +232,14 @@ export function LogicEditorConditions({
           {index === 0 ? (
             <div>{t("environments.surveys.edit.when")}</div>
           ) : (
-            <div
+            <button
               className={cn("w-14", index === 1 && "cursor-pointer underline")}
               onClick={() => {
                 if (index !== 1) return;
                 handleConnectorChange(parentConditionGroup.id);
               }}>
               {connector}
-            </div>
+            </button>
           )}
           <div className="rounded-lg border border-slate-400 p-3">
             <LogicEditorConditions
@@ -301,14 +301,14 @@ export function LogicEditorConditions({
           {index === 0 ? (
             t("environments.surveys.edit.when")
           ) : (
-            <div
+            <button
               className={cn("w-14", index === 1 && "cursor-pointer underline")}
               onClick={() => {
                 if (index !== 1) return;
                 handleConnectorChange(parentConditionGroup.id);
               }}>
               {connector}
-            </div>
+            </button>
           )}
         </div>
         <InputCombobox

apps/web/modules/survey/editor/components/matrix-question-form.test.tsx

@@ -84,7 +84,7 @@ vi.mock("@tolgee/react", () => ({
 
 // Mock QuestionFormInput component
 vi.mock("@/modules/survey/components/question-form-input", () => ({
-  QuestionFormInput: vi.fn(({ id, updateMatrixLabel, value, updateQuestion }) => (
+  QuestionFormInput: vi.fn(({ id, updateMatrixLabel, value, updateQuestion, onKeyDown }) => (
     <div data-testid={`question-input-${id}`}>
       <input
         data-testid={`input-${id}`}
@@ -98,6 +98,7 @@ vi.mock("@/modules/survey/components/question-form-input", () => ({
           }
         }}
         value={value?.default || ""}
+        onKeyDown={onKeyDown}
       />
     </div>
   )),
@@ -175,7 +176,6 @@ const defaultProps = {
   question: mockMatrixQuestion,
   questionIdx: 0,
   updateQuestion: mockUpdateQuestion,
-  lastQuestion: false,
   selectedLanguageCode: "en",
   setSelectedLanguageCode: vi.fn(),
   isInvalid: false,
@@ -323,7 +323,7 @@ describe("MatrixQuestionForm", () => {
     expect(mockUpdateQuestion).toHaveBeenCalled();
   });
 
-  test("handles Enter key to add a new row", async () => {
+  test("handles Enter key to add a new row from row input", async () => {
     const user = userEvent.setup();
     const { getByTestId } = render(<MatrixQuestionForm {...defaultProps} />);
 
@@ -341,6 +341,24 @@ describe("MatrixQuestionForm", () => {
     });
   });
 
+  test("handles Enter key to add a new column from column input", async () => {
+    const user = userEvent.setup();
+    const { getByTestId } = render(<MatrixQuestionForm {...defaultProps} />);
+
+    const columnInput = getByTestId("input-column-0");
+    await user.click(columnInput);
+    await user.keyboard("{Enter}");
+
+    expect(mockUpdateQuestion).toHaveBeenCalledWith(0, {
+      columns: [
+        mockMatrixQuestion.columns[0],
+        mockMatrixQuestion.columns[1],
+        mockMatrixQuestion.columns[2],
+        expect.any(Object),
+      ],
+    });
+  });
+
   test("prevents deletion of a row used in logic", async () => {
     const { findOptionUsedInLogic } = await import("@/modules/survey/editor/lib/utils");
     vi.mocked(findOptionUsedInLogic).mockReturnValueOnce(1); // Mock that this row is used in logic

apps/web/modules/survey/editor/components/matrix-question-form.tsx

@@ -21,7 +21,6 @@ interface MatrixQuestionFormProps {
   question: TSurveyMatrixQuestion;
   questionIdx: number;
   updateQuestion: (questionIdx: number, updatedAttributes: Partial<TSurveyMatrixQuestion>) => void;
-  lastQuestion: boolean;
   selectedLanguageCode: string;
   setSelectedLanguageCode: (language: string) => void;
   isInvalid: boolean;
@@ -183,11 +182,8 @@ export const MatrixQuestionForm = ({
           {/* Rows section */}
           <Label htmlFor="rows">{t("environments.surveys.edit.rows")}</Label>
           <div className="mt-2 flex flex-col gap-2" ref={parent}>
-            {question.rows.map((_, index) => (
-              <div
-                className="flex items-center"
-                onKeyDown={(e) => handleKeyDown(e, "row")}
-                key={`row-${index}`}>
+            {question.rows.map((row, index) => (
+              <div className="flex items-center" key={`${row}-${index}`}>
                 <QuestionFormInput
                   id={`row-${index}`}
                   label={""}
@@ -201,6 +197,7 @@ export const MatrixQuestionForm = ({
                     isInvalid && !isLabelValidForAllLanguages(question.rows[index], localSurvey.languages)
                   }
                   locale={locale}
+                  onKeyDown={(e) => handleKeyDown(e, "row")}
                 />
                 {question.rows.length > 2 && (
                   <TooltipRenderer data-testid="tooltip-renderer" tooltipContent={t("common.delete")}>
@@ -235,11 +232,8 @@ export const MatrixQuestionForm = ({
           {/* Columns section */}
           <Label htmlFor="columns">{t("environments.surveys.edit.columns")}</Label>
           <div className="mt-2 flex flex-col gap-2" ref={parent}>
-            {question.columns.map((_, index) => (
-              <div
-                className="flex items-center"
-                onKeyDown={(e) => handleKeyDown(e, "column")}
-                key={`column-${index}`}>
+            {question.columns.map((column, index) => (
+              <div className="flex items-center" key={`${column}-${index}`}>
                 <QuestionFormInput
                   id={`column-${index}`}
                   label={""}
@@ -253,6 +247,7 @@ export const MatrixQuestionForm = ({
                     isInvalid && !isLabelValidForAllLanguages(question.columns[index], localSurvey.languages)
                   }
                   locale={locale}
+                  onKeyDown={(e) => handleKeyDown(e, "column")}
                 />
                 {question.columns.length > 2 && (
                   <TooltipRenderer data-testid="tooltip-renderer" tooltipContent={t("common.delete")}>

apps/web/modules/survey/editor/components/question-card.test.tsx

@@ -1,15 +1,10 @@
 import { QuestionCard } from "@/modules/survey/editor/components/question-card";
 import { Project } from "@prisma/client";
-import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
-// Import waitFor
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, test, vi } from "vitest";
-import {
-  TSurvey,
-  TSurveyAddressQuestion,
-  TSurveyQuestion,
-  TSurveyQuestionTypeEnum,
-} from "@formbricks/types/surveys/types";
+// Import waitFor
+import { TSurvey, TSurveyQuestion, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 
 // Mock child components
 vi.mock("@/modules/survey/components/question-form-input", () => ({
@@ -371,8 +366,9 @@ describe("QuestionCard Component", () => {
 
   test("applies invalid styling when isInvalid is true", () => {
     render(<QuestionCard {...defaultProps} isInvalid={true} />);
-    const dragHandle = screen.getByRole("button", { name: "" }).parentElement; // Get the div containing the GripIcon
+    const dragHandle = screen.getByRole("button", { name: "Drag to reorder question" }).parentElement; // Get the div containing the GripIcon
     expect(dragHandle).toHaveClass("bg-red-400");
+    expect(dragHandle).toHaveClass("hover:bg-red-600");
   });
 
   test("disables required toggle for Address question if all fields are optional", () => {
@@ -507,4 +503,94 @@ describe("QuestionCard Component", () => {
     // First question should never have back button
     expect(screen.queryByTestId("question-form-input-backButtonLabel")).not.toBeInTheDocument();
   });
+
+  // Accessibility Tests
+  test("maintains proper focus management when toggling advanced settings", async () => {
+    const user = userEvent.setup();
+    render(<QuestionCard {...defaultProps} activeQuestionId="q1" />);
+
+    const advancedSettingsTrigger = screen.getByText("environments.surveys.edit.show_advanced_settings");
+    await user.click(advancedSettingsTrigger);
+
+    const closeTrigger = screen.getByText("environments.surveys.edit.hide_advanced_settings");
+    expect(closeTrigger).toBeInTheDocument();
+  });
+
+  test("ensures proper ARIA attributes for collapsible sections", () => {
+    render(<QuestionCard {...defaultProps} activeQuestionId="q1" />);
+
+    const collapsibleTrigger = screen.getByText("environments.surveys.edit.show_advanced_settings");
+    expect(collapsibleTrigger).toHaveAttribute("aria-expanded", "false");
+
+    fireEvent.click(collapsibleTrigger);
+    expect(collapsibleTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  test("maintains keyboard accessibility for required toggle", async () => {
+    const user = userEvent.setup();
+    render(<QuestionCard {...defaultProps} activeQuestionId="q1" />);
+
+    const requiredToggle = screen.getByRole("switch", { name: "environments.surveys.edit.required" });
+    await user.click(requiredToggle);
+    expect(mockUpdateQuestion).toHaveBeenCalledWith(0, { required: false });
+  });
+
+  test("provides screen reader text for drag handle", () => {
+    render(<QuestionCard {...defaultProps} />);
+    const dragHandle = screen.getByRole("button", { name: "Drag to reorder question" });
+    const svg = dragHandle.querySelector("svg");
+    expect(svg).toHaveAttribute("aria-hidden", "true");
+  });
+
+  test("maintains proper heading hierarchy", () => {
+    render(<QuestionCard {...defaultProps} activeQuestionId="q1" />);
+    const headline = screen.getByText("Question Headline");
+    expect(headline.tagName).toBe("H3");
+    expect(headline).toHaveClass("text-sm", "font-semibold");
+  });
+
+  test("ensures proper focus order for form elements", async () => {
+    const user = userEvent.setup();
+    render(<QuestionCard {...defaultProps} activeQuestionId="q1" />);
+
+    // Open advanced settings
+    fireEvent.click(screen.getByText("environments.surveys.edit.show_advanced_settings"));
+
+    const requiredToggle = screen.getByRole("switch", { name: "environments.surveys.edit.required" });
+    await user.click(requiredToggle);
+    expect(mockUpdateQuestion).toHaveBeenCalledWith(0, { required: false });
+  });
+
+  test("provides proper ARIA attributes for interactive elements", () => {
+    render(<QuestionCard {...defaultProps} activeQuestionId="q1" />);
+
+    const requiredToggle = screen.getByRole("switch", { name: "environments.surveys.edit.required" });
+    expect(requiredToggle).toHaveAttribute("aria-checked", "true");
+
+    const longAnswerToggle = screen.getByRole("switch", { name: "environments.surveys.edit.long_answer" });
+    expect(longAnswerToggle).toHaveAttribute("aria-checked", "false");
+  });
+
+  test("ensures proper role attributes for interactive elements", () => {
+    render(<QuestionCard {...defaultProps} activeQuestionId="q1" />);
+
+    const toggles = screen.getAllByRole("switch");
+    expect(toggles).toHaveLength(2); // Required and Long Answer toggles
+
+    const collapsibleTrigger = screen.getByText("environments.surveys.edit.show_advanced_settings");
+    expect(collapsibleTrigger).toHaveAttribute("type", "button");
+  });
+
+  test("maintains proper focus management when closing advanced settings", async () => {
+    const user = userEvent.setup();
+    render(<QuestionCard {...defaultProps} activeQuestionId="q1" />);
+
+    const advancedSettingsTrigger = screen.getByText("environments.surveys.edit.show_advanced_settings");
+    await user.click(advancedSettingsTrigger);
+
+    const closeTrigger = screen.getByText("environments.surveys.edit.hide_advanced_settings");
+    await user.click(closeTrigger);
+
+    expect(screen.getByText("environments.surveys.edit.show_advanced_settings")).toBeInTheDocument();
+  });
 });

apps/web/modules/survey/editor/components/question-card.tsx

@@ -196,7 +196,9 @@ export const QuestionCard = ({
         )}>
         <div className="mt-3 flex w-full justify-center">{QUESTIONS_ICON_MAP[question.type]}</div>
 
-        <button className="opacity-0 hover:cursor-move group-hover:opacity-100">
+        <button
+          className="opacity-0 hover:cursor-move group-hover:opacity-100"
+          aria-label="Drag to reorder question">
           <GripIcon className="h-4 w-4" />
         </button>
       </div>
@@ -215,14 +217,15 @@ export const QuestionCard = ({
           className={cn(
             open ? "" : " ",
             "flex cursor-pointer justify-between gap-4 rounded-r-lg p-4 hover:bg-slate-50"
-          )}>
+          )}
+          aria-label="Toggle question details">
           <div>
             <div className="flex grow">
               {/*  <div className="-ml-0.5 mr-3 h-6 min-w-[1.5rem] text-slate-400">
                 {QUESTIONS_ICON_MAP[question.type]}
               </div> */}
               <div className="flex grow flex-col justify-center" dir="auto">
-                <p className="text-sm font-semibold">
+                <h3 className="text-sm font-semibold">
                   {recallToHeadline(question.headline, localSurvey, true, selectedLanguageCode)[
                     selectedLanguageCode
                   ]
@@ -232,7 +235,7 @@ export const QuestionCard = ({
                         ] ?? ""
                       )
                     : getTSurveyQuestionTypeEnumName(question.type, t)}
-                </p>
+                </h3>
                 {!open && (
                   <p className="mt-1 truncate text-xs text-slate-500">
                     {question?.required
@@ -272,7 +275,7 @@ export const QuestionCard = ({
             TSurveyQuestionTypeEnum.Ranking,
             TSurveyQuestionTypeEnum.Matrix,
           ].includes(question.type) ? (
-            <Alert variant="warning" size="small" className="w-fill">
+            <Alert variant="warning" size="small" className="w-fill" role="alert">
               <AlertTitle>{t("environments.surveys.edit.caution_text")}</AlertTitle>
               <AlertButton onClick={() => onAlertTrigger()}>{t("common.learn_more")}</AlertButton>
             </Alert>
@@ -413,7 +416,6 @@ export const QuestionCard = ({
               question={question}
               questionIdx={questionIdx}
               updateQuestion={updateQuestion}
-              lastQuestion={lastQuestion}
               selectedLanguageCode={selectedLanguageCode}
               setSelectedLanguageCode={setSelectedLanguageCode}
               isInvalid={isInvalid}
@@ -457,7 +459,9 @@ export const QuestionCard = ({
           ) : null}
           <div className="mt-4">
             <Collapsible.Root open={openAdvanced} onOpenChange={setOpenAdvanced} className="mt-5">
-              <Collapsible.CollapsibleTrigger className="flex items-center text-sm text-slate-700">
+              <Collapsible.CollapsibleTrigger
+                className="flex items-center text-sm text-slate-700"
+                aria-label="Toggle advanced settings">
                 {openAdvanced ? (
                   <ChevronDownIcon className="mr-1 h-4 w-3" />
                 ) : (
@@ -473,6 +477,30 @@ export const QuestionCard = ({
                 question.type !== TSurveyQuestionTypeEnum.Rating &&
                 question.type !== TSurveyQuestionTypeEnum.CTA ? (
                   <div className="mt-2 flex space-x-2">
+                    {questionIdx !== 0 && (
+                      <QuestionFormInput
+                        id="backButtonLabel"
+                        value={question.backButtonLabel}
+                        label={t("environments.surveys.edit.back_button_label")}
+                        localSurvey={localSurvey}
+                        questionIdx={questionIdx}
+                        maxLength={48}
+                        placeholder={t("common.back")}
+                        isInvalid={isInvalid}
+                        updateQuestion={updateQuestion}
+                        selectedLanguageCode={selectedLanguageCode}
+                        setSelectedLanguageCode={setSelectedLanguageCode}
+                        locale={locale}
+                        onBlur={(e) => {
+                          if (!question.backButtonLabel) return;
+                          let translatedBackButtonLabel = {
+                            ...question.backButtonLabel,
+                            [selectedLanguageCode]: e.target.value,
+                          };
+                          updateEmptyButtonLabels("backButtonLabel", translatedBackButtonLabel, 0);
+                        }}
+                      />
+                    )}
                     <div className="w-full">
                       <QuestionFormInput
                         id="buttonLabel"
@@ -503,30 +531,6 @@ export const QuestionCard = ({
                         locale={locale}
                       />
                     </div>
-                    {questionIdx !== 0 && (
-                      <QuestionFormInput
-                        id="backButtonLabel"
-                        value={question.backButtonLabel}
-                        label={t("environments.surveys.edit.back_button_label")}
-                        localSurvey={localSurvey}
-                        questionIdx={questionIdx}
-                        maxLength={48}
-                        placeholder={t("common.back")}
-                        isInvalid={isInvalid}
-                        updateQuestion={updateQuestion}
-                        selectedLanguageCode={selectedLanguageCode}
-                        setSelectedLanguageCode={setSelectedLanguageCode}
-                        locale={locale}
-                        onBlur={(e) => {
-                          if (!question.backButtonLabel) return;
-                          let translatedBackButtonLabel = {
-                            ...question.backButtonLabel,
-                            [selectedLanguageCode]: e.target.value,
-                          };
-                          updateEmptyButtonLabels("backButtonLabel", translatedBackButtonLabel, 0);
-                        }}
-                      />
-                    )}
                   </div>
                 ) : null}
                 {(question.type === TSurveyQuestionTypeEnum.Rating ||

apps/web/modules/survey/editor/components/questions-view.tsx

@@ -502,11 +502,7 @@ export const QuestionsView = ({
 
         {!isCxMode && (
           <>
-            <AddEndingCardButton
-              localSurvey={localSurvey}
-              setLocalSurvey={setLocalSurvey}
-              addEndingCard={addEndingCard}
-            />
+            <AddEndingCardButton localSurvey={localSurvey} addEndingCard={addEndingCard} />
             <hr />
 
             <HiddenFieldsCard

apps/web/modules/survey/editor/components/saved-actions-tab.tsx

@@ -69,9 +69,9 @@ export const SavedActionsTab = ({
                 </h2>
                 <div className="flex flex-col gap-2">
                   {actions.map((action) => (
-                    <div
+                    <button
                       key={action.id}
-                      className="cursor-pointer rounded-md border border-slate-300 bg-white px-4 py-2 hover:bg-slate-100"
+                      className="flex cursor-pointer flex-col items-start rounded-md border border-slate-300 bg-white px-4 py-2 hover:bg-slate-100"
                       onClick={() => handleActionClick(action)}>
                       <div className="mt-1 flex items-center">
                         <div className="mr-1.5 h-4 w-4 text-slate-600">
@@ -80,7 +80,7 @@ export const SavedActionsTab = ({
                         <h4 className="text-sm font-semibold text-slate-600">{action.name}</h4>
                       </div>
                       <p className="mt-1 text-xs text-slate-500">{action.description}</p>
-                    </div>
+                    </button>
                   ))}
                 </div>
               </div>

apps/web/modules/survey/follow-ups/components/follow-up-item.test.tsx

@@ -337,7 +337,7 @@ describe("FollowUpItem", () => {
     );
 
     // Find the clickable area
-    const clickableArea = screen.getByText("Test Follow-up").closest("div");
+    const clickableArea = screen.getByText("Test Follow-up").closest("button");
     expect(clickableArea).toBeInTheDocument();
 
     // Simulate a click on the clickable area

apps/web/modules/survey/follow-ups/components/follow-up-item.tsx

@@ -113,8 +113,8 @@ export const FollowUpItem = ({
   return (
     <>
       <div className="relative cursor-pointer rounded-lg border border-slate-300 bg-white p-4 hover:bg-slate-50">
-        <div
-          className="flex flex-col space-y-2"
+        <button
+          className="flex w-full flex-col items-start space-y-2"
           onClick={() => {
             setEditFollowUpModalOpen(true);
           }}>
@@ -144,7 +144,7 @@ export const FollowUpItem = ({
               />
             ) : null}
           </div>
-        </div>
+        </button>
 
         <div className="absolute right-4 top-4 flex items-center">
           <TooltipRenderer tooltipContent={t("common.delete")}>

apps/web/modules/survey/list/components/survey-card.test.tsx

@@ -53,10 +53,10 @@ describe("SurveyCard", () => {
         survey={{ ...dummySurvey, status: "draft" } as unknown as TSurvey}
         environmentId={environmentId}
         isReadOnly={false}
-        WEBAPP_URL={WEBAPP_URL}
         duplicateSurvey={mockDuplicateSurvey}
         deleteSurvey={mockDeleteSurvey}
         locale="en-US"
+        surveyDomain={WEBAPP_URL}
       />
     );
     // Draft survey => link should point to edit
@@ -70,10 +70,10 @@ describe("SurveyCard", () => {
         survey={{ ...dummySurvey, status: "draft" } as unknown as TSurvey}
         environmentId={environmentId}
         isReadOnly={true}
-        WEBAPP_URL={WEBAPP_URL}
         duplicateSurvey={mockDuplicateSurvey}
         deleteSurvey={mockDeleteSurvey}
         locale="en-US"
+        surveyDomain={WEBAPP_URL}
       />
     );
     // When it's read only and draft, we expect no link
@@ -87,10 +87,10 @@ describe("SurveyCard", () => {
         survey={{ ...dummySurvey, status: "inProgress" } as unknown as TSurvey}
         environmentId={environmentId}
         isReadOnly={false}
-        WEBAPP_URL={WEBAPP_URL}
         duplicateSurvey={mockDuplicateSurvey}
         deleteSurvey={mockDeleteSurvey}
         locale="en-US"
+        surveyDomain={WEBAPP_URL}
       />
     );
     // For non-draft => link to summary

apps/web/modules/survey/list/components/survey-card.tsx

@@ -97,7 +97,7 @@ export const SurveyCard = ({
           {survey.creator ? survey.creator.name : "-"}
         </div>
       </div>
-      <div className="absolute right-3 top-3.5">
+      <button className="absolute right-3 top-3.5" onClick={(e) => e.stopPropagation()}>
         <SurveyDropDownMenu
           survey={survey}
           key={`surveys-${survey.id}`}
@@ -109,7 +109,7 @@ export const SurveyCard = ({
           duplicateSurvey={duplicateSurvey}
           deleteSurvey={deleteSurvey}
         />
-      </div>
+      </button>
     </>
   );
 

apps/web/modules/survey/list/components/survey-dropdown-menu.tsx

@@ -129,8 +129,7 @@ export const SurveyDropDownMenu = ({
   return (
     <div
       id={`${survey.name.toLowerCase().split(" ").join("-")}-survey-actions`}
-      data-testid="survey-dropdown-menu"
-      onClick={(e) => e.stopPropagation()}>
+      data-testid="survey-dropdown-menu">
       <DropdownMenu open={isDropDownOpen} onOpenChange={setIsDropDownOpen}>
         <DropdownMenuTrigger className="z-10" asChild disabled={disabled}>
           <div
@@ -172,27 +171,25 @@ export const SurveyDropDownMenu = ({
               </>
             )}
             {!isSurveyCreationDeletionDisabled && (
-              <>
-                <DropdownMenuItem>
-                  <button
-                    type="button"
-                    className="flex w-full items-center"
-                    disabled={loading}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      setIsDropDownOpen(false);
-                      setIsCopyFormOpen(true);
-                    }}>
-                    <ArrowUpFromLineIcon className="mr-2 h-4 w-4" />
-                    {t("common.copy")}...
-                  </button>
-                </DropdownMenuItem>
-              </>
+              <DropdownMenuItem>
+                <button
+                  type="button"
+                  className="flex w-full items-center"
+                  disabled={loading}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setIsDropDownOpen(false);
+                    setIsCopyFormOpen(true);
+                  }}>
+                  <ArrowUpFromLineIcon className="mr-2 h-4 w-4" />
+                  {t("common.copy")}...
+                </button>
+              </DropdownMenuItem>
             )}
             {survey.type === "link" && survey.status !== "draft" && (
               <>
                 <DropdownMenuItem>
-                  <div
+                  <button
                     className="flex w-full cursor-pointer items-center"
                     onClick={async (e) => {
                       e.preventDefault();
@@ -205,7 +202,7 @@ export const SurveyDropDownMenu = ({
                     }}>
                     <EyeIcon className="mr-2 h-4 w-4" />
                     {t("common.preview_survey")}
-                  </div>
+                  </button>
                 </DropdownMenuItem>
                 <DropdownMenuItem>
                   <button

apps/web/modules/ui/components/color-picker/components/popover-picker.tsx

@@ -17,11 +17,12 @@ export const PopoverPicker = ({ color, onChange, disabled = false }: PopoverPick
 
   return (
     <div className="picker relative">
-      <div
+      <button
         id="color-picker"
         className="h-6 w-10 cursor-pointer rounded border border-slate-200"
         style={{ backgroundColor: color, opacity: disabled ? 0.5 : 1 }}
-        onClick={() => {
+        onClick={(e) => {
+          e.preventDefault();
           if (!disabled) {
             toggle(!isOpen);
           }

apps/web/modules/ui/components/data-table/components/data-table-header.test.tsx

@@ -115,8 +115,8 @@ describe("DataTableHeader", () => {
       </table>
     );
 
-    // The grip vertical icon should not be present for select column
-    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    // The column settings button (EllipsisVerticalIcon) should not be present for select column
+    expect(document.querySelector(".lucide-ellipsis-vertical")).not.toBeInTheDocument();
   });
 
   test("renders resize handle that calls resize handler", async () => {

apps/web/modules/ui/components/data-table/components/data-table-header.tsx

@@ -59,7 +59,7 @@ export const DataTableHeader = <T,>({ header, setIsTableSettingsModalOpen }: Dat
         )}
 
         {/* Resize handle */}
-        <div
+        <button
           onDoubleClick={() => header.column.resetSize()}
           onMouseDown={header.getResizeHandler()}
           onTouchStart={header.getResizeHandler()}
@@ -68,8 +68,7 @@ export const DataTableHeader = <T,>({ header, setIsTableSettingsModalOpen }: Dat
             "absolute right-0 top-0 hidden h-full w-1 cursor-col-resize bg-slate-500",
             header.column.getIsResizing() ? "bg-black" : "bg-slate-500",
             !header.column.getCanResize() ? "hidden" : "group-hover:block"
-          )}
-        />
+          )}></button>
       </div>
     </TableHead>
   );

apps/web/modules/ui/components/data-table/components/data-table-toolbar.test.tsx

@@ -4,195 +4,141 @@ import toast from "react-hot-toast";
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { DataTableToolbar } from "./data-table-toolbar";
 
+// Mock TooltipRenderer
+vi.mock("@/modules/ui/components/tooltip", () => ({
+  TooltipRenderer: ({ children, tooltipContent }) => (
+    <div data-testid="tooltip-renderer" data-tooltip-content={tooltipContent}>
+      {children}
+    </div>
+  ),
+}));
+
+// Mock SelectedRowSettings
+vi.mock("./selected-row-settings", () => ({
+  SelectedRowSettings: vi.fn(() => <div data-testid="selected-row-settings"></div>),
+}));
+
+// Mock useTranslate
+vi.mock("@tolgee/react", () => ({
+  useTranslate: () => ({
+    t: (key) => key,
+  }),
+}));
+
+// Mock toast
+vi.mock("react-hot-toast", () => ({
+  default: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+// Mock lucide-react icons
+vi.mock("lucide-react", async () => {
+  const actual = await vi.importActual("lucide-react");
+  return {
+    ...actual,
+    RefreshCcwIcon: vi.fn((props) => <div data-testid="refresh-ccw-icon" {...props} />),
+    SettingsIcon: vi.fn((props) => <div data-testid="settings-icon" {...props} />),
+    MoveVerticalIcon: vi.fn((props) => <div data-testid="move-vertical-icon" {...props} />),
+  };
+});
+
+const mockTable = {
+  getFilteredSelectedRowModel: vi.fn(() => ({ rows: [] })),
+} as any;
+
+const mockDeleteRowsAction = vi.fn();
+const mockDeleteAction = vi.fn();
+const mockDownloadRowsAction = vi.fn();
+const mockRefreshContacts = vi.fn();
+const mockSetIsExpanded = vi.fn();
+const mockSetIsTableSettingsModalOpen = vi.fn();
+
+const defaultProps = {
+  setIsExpanded: mockSetIsExpanded,
+  setIsTableSettingsModalOpen: mockSetIsTableSettingsModalOpen,
+  isExpanded: false,
+  table: mockTable,
+  deleteRowsAction: mockDeleteRowsAction,
+  type: "response" as "response" | "contact",
+  deleteAction: mockDeleteAction,
+  downloadRowAction: mockDownloadRowsAction,
+  refreshContacts: mockRefreshContacts,
+};
+
 describe("DataTableToolbar", () => {
   afterEach(() => {
+    vi.resetAllMocks();
     cleanup();
+    vi.clearAllMocks();
   });
 
-  test("renders selection settings when rows are selected", () => {
-    const mockTable = {
-      getFilteredSelectedRowModel: vi.fn().mockReturnValue({
-        rows: [{ id: "row1" }, { id: "row2" }],
-      }),
-    };
-
-    render(
-      <DataTableToolbar
-        setIsTableSettingsModalOpen={vi.fn()}
-        setIsExpanded={vi.fn()}
-        isExpanded={false}
-        table={mockTable as any}
-        deleteRows={vi.fn()}
-        type="response"
-        deleteAction={vi.fn()}
-      />
-    );
-
-    // Check for the number of selected items instead of translation keys
-    const selectionInfo = screen.getByText(/2/);
-    expect(selectionInfo).toBeInTheDocument();
-
-    // Look for the exact text that appears in the component (which is the translation key)
-    expect(screen.getByText("common.select_all")).toBeInTheDocument();
-    expect(screen.getByText("common.clear_selection")).toBeInTheDocument();
+  test("renders correctly with no selected rows", () => {
+    render(<DataTableToolbar {...defaultProps} />);
+    expect(screen.queryByTestId("selected-row-settings")).not.toBeInTheDocument();
+    expect(screen.getByTestId("settings-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("move-vertical-icon")).toBeInTheDocument();
+    expect(screen.queryByTestId("refresh-ccw-icon")).not.toBeInTheDocument();
   });
 
-  test("renders settings and expand buttons", () => {
-    const mockTable = {
-      getFilteredSelectedRowModel: vi.fn().mockReturnValue({
-        rows: [],
-      }),
-    };
-
-    render(
-      <DataTableToolbar
-        setIsTableSettingsModalOpen={vi.fn()}
-        setIsExpanded={vi.fn()}
-        isExpanded={false}
-        table={mockTable as any}
-        deleteRows={vi.fn()}
-        type="response"
-        deleteAction={vi.fn()}
-      />
-    );
-
-    // Look for SVG elements by their class names instead of role
-    const settingsIcon = document.querySelector(".lucide-settings");
-    const expandIcon = document.querySelector(".lucide-move-vertical");
-
-    expect(settingsIcon).toBeInTheDocument();
-    expect(expandIcon).toBeInTheDocument();
+  test("renders SelectedRowSettings when rows are selected", () => {
+    const tableWithSelectedRows = {
+      getFilteredSelectedRowModel: vi.fn(() => ({ rows: [{ id: "1" }] })),
+    } as any;
+    render(<DataTableToolbar {...defaultProps} table={tableWithSelectedRows} />);
+    expect(screen.getByTestId("selected-row-settings")).toBeInTheDocument();
   });
 
-  test("calls setIsTableSettingsModalOpen when settings button is clicked", async () => {
-    const user = userEvent.setup();
-    const setIsTableSettingsModalOpen = vi.fn();
-    const mockTable = {
-      getFilteredSelectedRowModel: vi.fn().mockReturnValue({
-        rows: [],
-      }),
-    };
-
-    render(
-      <DataTableToolbar
-        setIsTableSettingsModalOpen={setIsTableSettingsModalOpen}
-        setIsExpanded={vi.fn()}
-        isExpanded={false}
-        table={mockTable as any}
-        deleteRows={vi.fn()}
-        type="response"
-        deleteAction={vi.fn()}
-      />
+  test("renders refresh icon for contact type and calls refreshContacts on click", async () => {
+    mockRefreshContacts.mockResolvedValueOnce(undefined);
+    render(<DataTableToolbar {...defaultProps} type="contact" />);
+    const refreshIconContainer = screen.getByTestId("refresh-ccw-icon").parentElement;
+    expect(refreshIconContainer).toBeInTheDocument();
+    await userEvent.click(refreshIconContainer!);
+    expect(mockRefreshContacts).toHaveBeenCalledTimes(1);
+    expect(vi.mocked(toast.success)).toHaveBeenCalledWith(
+      "environments.contacts.contacts_table_refresh_success"
     );
-
-    // Find the settings button by class and click it
-    const settingsIcon = document.querySelector(".lucide-settings");
-    const settingsButton = settingsIcon?.closest("div");
-
-    expect(settingsButton).toBeInTheDocument();
-    if (settingsButton) {
-      await user.click(settingsButton);
-      expect(setIsTableSettingsModalOpen).toHaveBeenCalledWith(true);
-    }
   });
 
-  test("calls setIsExpanded when expand button is clicked", async () => {
-    const user = userEvent.setup();
-    const setIsExpanded = vi.fn();
-    const mockTable = {
-      getFilteredSelectedRowModel: vi.fn().mockReturnValue({
-        rows: [],
-      }),
-    };
-
-    render(
-      <DataTableToolbar
-        setIsTableSettingsModalOpen={vi.fn()}
-        setIsExpanded={setIsExpanded}
-        isExpanded={false}
-        table={mockTable as any}
-        deleteRows={vi.fn()}
-        type="response"
-        deleteAction={vi.fn()}
-      />
-    );
-
-    // Find the expand button by class and click it
-    const expandIcon = document.querySelector(".lucide-move-vertical");
-    const expandButton = expandIcon?.closest("div");
-
-    expect(expandButton).toBeInTheDocument();
-    if (expandButton) {
-      await user.click(expandButton);
-      expect(setIsExpanded).toHaveBeenCalledWith(true);
-    }
+  test("handles refreshContacts failure", async () => {
+    mockRefreshContacts.mockRejectedValueOnce(new Error("Refresh failed"));
+    render(<DataTableToolbar {...defaultProps} type="contact" />);
+    const refreshIconContainer = screen.getByTestId("refresh-ccw-icon").parentElement;
+    await userEvent.click(refreshIconContainer!);
+    expect(mockRefreshContacts).toHaveBeenCalledTimes(1);
+    expect(vi.mocked(toast.error)).toHaveBeenCalledWith("environments.contacts.contacts_table_refresh_error");
   });
 
-  test("shows refresh button and calls refreshContacts when type is contact", async () => {
-    const user = userEvent.setup();
-    const refreshContacts = vi.fn().mockResolvedValue(undefined);
-    const mockTable = {
-      getFilteredSelectedRowModel: vi.fn().mockReturnValue({
-        rows: [],
-      }),
-    };
-
-    render(
-      <DataTableToolbar
-        setIsTableSettingsModalOpen={vi.fn()}
-        setIsExpanded={vi.fn()}
-        isExpanded={false}
-        table={mockTable as any}
-        deleteRows={vi.fn()}
-        type="contact"
-        deleteAction={vi.fn()}
-        refreshContacts={refreshContacts}
-      />
-    );
-
-    // Find the refresh button by class and click it
-    const refreshIcon = document.querySelector(".lucide-refresh-ccw");
-    const refreshButton = refreshIcon?.closest("div");
-
-    expect(refreshButton).toBeInTheDocument();
-    if (refreshButton) {
-      await user.click(refreshButton);
-      expect(refreshContacts).toHaveBeenCalled();
-      expect(toast.success).toHaveBeenCalledWith("environments.contacts.contacts_table_refresh_success");
-    }
+  test("does not render refresh icon for response type", () => {
+    render(<DataTableToolbar {...defaultProps} type="response" />);
+    expect(screen.queryByTestId("refresh-ccw-icon")).not.toBeInTheDocument();
   });
 
-  test("shows error toast when refreshContacts fails", async () => {
-    const user = userEvent.setup();
-    const refreshContacts = vi.fn().mockRejectedValue(new Error("Failed to refresh"));
-    const mockTable = {
-      getFilteredSelectedRowModel: vi.fn().mockReturnValue({
-        rows: [],
-      }),
-    };
+  test("calls setIsTableSettingsModalOpen when settings icon is clicked", async () => {
+    render(<DataTableToolbar {...defaultProps} />);
+    const settingsIconContainer = screen.getByTestId("settings-icon").parentElement;
+    await userEvent.click(settingsIconContainer!);
+    expect(mockSetIsTableSettingsModalOpen).toHaveBeenCalledWith(true);
+  });
 
-    render(
-      <DataTableToolbar
-        setIsTableSettingsModalOpen={vi.fn()}
-        setIsExpanded={vi.fn()}
-        isExpanded={false}
-        table={mockTable as any}
-        deleteRows={vi.fn()}
-        type="contact"
-        deleteAction={vi.fn()}
-        refreshContacts={refreshContacts}
-      />
-    );
+  test("calls setIsExpanded when move vertical icon is clicked (isExpanded false)", async () => {
+    render(<DataTableToolbar {...defaultProps} isExpanded={false} />);
+    const moveIconContainer = screen.getByTestId("move-vertical-icon").parentElement;
+    const tooltip = moveIconContainer?.closest('[data-testid="tooltip-renderer"]');
+    expect(tooltip).toHaveAttribute("data-tooltip-content", "common.expand_rows");
+    await userEvent.click(moveIconContainer!);
+    expect(mockSetIsExpanded).toHaveBeenCalledWith(true);
+  });
 
-    // Find the refresh button by class and click it
-    const refreshIcon = document.querySelector(".lucide-refresh-ccw");
-    const refreshButton = refreshIcon?.closest("div");
-
-    expect(refreshButton).toBeInTheDocument();
-    if (refreshButton) {
-      await user.click(refreshButton);
-      expect(refreshContacts).toHaveBeenCalled();
-      expect(toast.error).toHaveBeenCalledWith("environments.contacts.contacts_table_refresh_error");
-    }
+  test("calls setIsExpanded when move vertical icon is clicked (isExpanded true)", async () => {
+    render(<DataTableToolbar {...defaultProps} isExpanded={true} />);
+    const moveIconContainer = screen.getByTestId("move-vertical-icon").parentElement;
+    const tooltip = moveIconContainer?.closest('[data-testid="tooltip-renderer"]');
+    expect(tooltip).toHaveAttribute("data-tooltip-content", "common.collapse_rows");
+    await userEvent.click(moveIconContainer!);
+    expect(mockSetIsExpanded).toHaveBeenCalledWith(false);
+    expect(moveIconContainer).toHaveClass("bg-black text-white");
   });
 });

apps/web/modules/ui/components/data-table/components/data-table-toolbar.tsx

@@ -13,9 +13,10 @@ interface DataTableToolbarProps<T> {
   setIsExpanded: (isExpanded: boolean) => void;
   isExpanded: boolean;
   table: Table<T>;
-  deleteRows: (rowIds: string[]) => void;
+  deleteRowsAction: (rowIds: string[]) => void;
   type: "response" | "contact";
   deleteAction: (id: string) => Promise<void>;
+  downloadRowsAction?: (rowIds: string[], format: string) => void;
   refreshContacts?: () => Promise<void>;
 }
 
@@ -24,9 +25,10 @@ export const DataTableToolbar = <T,>({
   setIsTableSettingsModalOpen,
   isExpanded,
   table,
-  deleteRows,
+  deleteRowsAction,
   type,
   deleteAction,
+  downloadRowsAction,
   refreshContacts,
 }: DataTableToolbarProps<T>) => {
   const { t } = useTranslate();
@@ -34,7 +36,13 @@ export const DataTableToolbar = <T,>({
   return (
     <div className="sticky top-12 z-30 my-2 flex w-full items-center justify-between bg-slate-50 py-2">
       {table.getFilteredSelectedRowModel().rows.length > 0 ? (
-        <SelectedRowSettings table={table} deleteRows={deleteRows} type={type} deleteAction={deleteAction} />
+        <SelectedRowSettings
+          table={table}
+          deleteRowsAction={deleteRowsAction}
+          type={type}
+          deleteAction={deleteAction}
+          downloadRowsAction={downloadRowsAction}
+        />
       ) : (
         <div></div>
       )}
@@ -43,7 +51,7 @@ export const DataTableToolbar = <T,>({
           <TooltipRenderer
             tooltipContent={t("environments.contacts.contacts_table_refresh")}
             shouldRender={true}>
-            <div
+            <button
               onClick={async () => {
                 if (refreshContacts) {
                   try {
@@ -57,28 +65,28 @@ export const DataTableToolbar = <T,>({
               }}
               className="cursor-pointer rounded-md border bg-white hover:border-slate-400">
               <RefreshCcwIcon strokeWidth={1.5} className={cn("m-1 h-6 w-6 p-0.5")} />
-            </div>
+            </button>
           </TooltipRenderer>
         ) : null}
 
         <TooltipRenderer tooltipContent={t("common.table_settings")} shouldRender={true}>
-          <div
+          <button
             onClick={() => setIsTableSettingsModalOpen(true)}
             className="cursor-pointer rounded-md border bg-white hover:border-slate-400">
             <SettingsIcon strokeWidth={1.5} className="m-1 h-6 w-6 p-0.5" />
-          </div>
+          </button>
         </TooltipRenderer>
         <TooltipRenderer
           tooltipContent={isExpanded ? t("common.collapse_rows") : t("common.expand_rows")}
           shouldRender={true}>
-          <div
+          <button
             onClick={() => setIsExpanded(!isExpanded)}
             className={cn(
               "cursor-pointer rounded-md border bg-white hover:border-slate-400",
               isExpanded && "bg-black text-white"
             )}>
             <MoveVerticalIcon strokeWidth={1.5} className="m-1 h-6 w-6 p-0.5" />
-          </div>
+          </button>
         </TooltipRenderer>
       </div>
     </div>

apps/web/modules/ui/components/data-table/components/selected-row-settings.test.tsx

@@ -1,192 +1,187 @@
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import toast from "react-hot-toast";
-import { afterEach, describe, expect, test, vi } from "vitest";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { toast } from "react-hot-toast";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { SelectedRowSettings } from "./selected-row-settings";
 
-// Mock the toast functions directly since they're causing issues
-vi.mock("react-hot-toast", () => ({
-  default: {
-    success: vi.fn(),
-    error: vi.fn(),
-  },
+// Mock translation
+vi.mock("@tolgee/react", () => ({
+  useTranslate: () => ({ t: (key: string) => key }),
 }));
 
-// Instead of mocking @radix-ui/react-dialog, we'll test the component's behavior
-// by checking if the appropriate actions are performed after clicking the buttons
+// Mock DeleteDialog to reveal confirm button when open
+vi.mock("@/modules/ui/components/delete-dialog", () => ({
+  DeleteDialog: ({ open, onDelete }: any) =>
+    open ? <button onClick={() => onDelete()}>Confirm Delete</button> : null,
+}));
+
+// Mock dropdown-menu components to render their children
+vi.mock("@/modules/ui/components/dropdown-menu", () => ({
+  DropdownMenu: ({ children }: any) => <>{children}</>,
+  DropdownMenuTrigger: ({ children }: any) => <>{children}</>,
+  DropdownMenuContent: ({ children }: any) => <>{children}</>,
+  DropdownMenuItem: ({ children, onClick }: any) => <button onClick={onClick}>{children}</button>,
+}));
+
+// Mock Button
+vi.mock("@/modules/ui/components/button", () => ({
+  Button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
+}));
 
 describe("SelectedRowSettings", () => {
+  const rows = [{ id: "r1" }, { id: "r2" }];
+  let table: any;
+  let deleteRowsAction: ReturnType<typeof vi.fn>;
+  let deleteAction: ReturnType<typeof vi.fn>;
+  let downloadRowsAction: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    table = {
+      getFilteredSelectedRowModel: () => ({ rows }),
+      toggleAllPageRowsSelected: vi.fn(),
+    };
+    deleteRowsAction = vi.fn();
+    deleteAction = vi.fn(() => Promise.resolve());
+    downloadRowsAction = vi.fn();
+
+    // Reset all toast mocks before each test
+    vi.mocked(toast.error).mockClear();
+    vi.mocked(toast.success).mockClear();
+  });
+
   afterEach(() => {
-    vi.resetAllMocks();
+    vi.clearAllMocks();
     cleanup();
   });
 
-  test("renders correct number of selected rows for responses", () => {
-    const mockTable = {
-      getFilteredSelectedRowModel: vi.fn().mockReturnValue({
-        rows: [{ id: "row1" }, { id: "row2" }],
-      }),
-      toggleAllPageRowsSelected: vi.fn(),
-    };
-
+  test("renders selected count and handles select all/clear selection", () => {
     render(
       <SelectedRowSettings
-        table={mockTable as any}
-        deleteRows={vi.fn()}
-        type="response"
-        deleteAction={vi.fn()}
-      />
-    );
-
-    // We need to look for a text node that contains "2" but might have other text around it
-    const selectionText = screen.getByText((content) => content.includes("2"));
-    expect(selectionText).toBeInTheDocument();
-
-    // Check that we have the correct number of common text items
-    expect(screen.getByText("common.select_all")).toBeInTheDocument();
-    expect(screen.getByText("common.clear_selection")).toBeInTheDocument();
-  });
-
-  test("renders correct number of selected rows for contacts", () => {
-    const mockTable = {
-      getFilteredSelectedRowModel: vi.fn().mockReturnValue({
-        rows: [{ id: "contact1" }, { id: "contact2" }, { id: "contact3" }],
-      }),
-      toggleAllPageRowsSelected: vi.fn(),
-    };
-
-    render(
-      <SelectedRowSettings
-        table={mockTable as any}
-        deleteRows={vi.fn()}
+        table={table}
+        deleteRowsAction={deleteRowsAction}
+        deleteAction={deleteAction}
+        downloadRowsAction={downloadRowsAction}
         type="contact"
-        deleteAction={vi.fn()}
       />
     );
+    expect(screen.getByText("2 common.contacts common.selected")).toBeInTheDocument();
 
-    // We need to look for a text node that contains "3" but might have other text around it
-    const selectionText = screen.getByText((content) => content.includes("3"));
-    expect(selectionText).toBeInTheDocument();
+    fireEvent.click(screen.getByText("common.select_all"));
+    expect(table.toggleAllPageRowsSelected).toHaveBeenCalledWith(true);
 
-    // Check that the text contains contacts (using a function matcher)
-    const textWithContacts = screen.getByText((content) => content.includes("common.contacts"));
-    expect(textWithContacts).toBeInTheDocument();
+    fireEvent.click(screen.getByText("common.clear_selection"));
+    expect(table.toggleAllPageRowsSelected).toHaveBeenCalledWith(false);
   });
 
-  test("select all option calls toggleAllPageRowsSelected with true", async () => {
-    const user = userEvent.setup();
-    const toggleAllPageRowsSelectedMock = vi.fn();
-    const mockTable = {
-      getFilteredSelectedRowModel: vi.fn().mockReturnValue({
-        rows: [{ id: "row1" }],
-      }),
-      toggleAllPageRowsSelected: toggleAllPageRowsSelectedMock,
-    };
-
+  test("does not render download when downloadRows prop is undefined", () => {
     render(
       <SelectedRowSettings
-        table={mockTable as any}
-        deleteRows={vi.fn()}
+        table={table}
+        deleteRowsAction={deleteRowsAction}
+        deleteAction={deleteAction}
         type="response"
-        deleteAction={vi.fn()}
       />
     );
-
-    await user.click(screen.getByText("common.select_all"));
-    expect(toggleAllPageRowsSelectedMock).toHaveBeenCalledWith(true);
+    expect(screen.queryByText("common.download")).toBeNull();
   });
 
-  test("clear selection option calls toggleAllPageRowsSelected with false", async () => {
-    const user = userEvent.setup();
-    const toggleAllPageRowsSelectedMock = vi.fn();
-    const mockTable = {
-      getFilteredSelectedRowModel: vi.fn().mockReturnValue({
-        rows: [{ id: "row1" }],
-      }),
-      toggleAllPageRowsSelected: toggleAllPageRowsSelectedMock,
-    };
-
+  test("invokes downloadRows with correct formats", () => {
     render(
       <SelectedRowSettings
-        table={mockTable as any}
-        deleteRows={vi.fn()}
+        table={table}
+        deleteRowsAction={deleteRowsAction}
+        deleteAction={deleteAction}
+        downloadRowsAction={downloadRowsAction}
         type="response"
-        deleteAction={vi.fn()}
       />
     );
+    fireEvent.click(screen.getByText("common.download"));
+    fireEvent.click(screen.getByText("environments.surveys.summary.selected_responses_csv"));
+    expect(downloadRowsAction).toHaveBeenCalledWith(["r1", "r2"], "csv");
 
-    await user.click(screen.getByText("common.clear_selection"));
-    expect(toggleAllPageRowsSelectedMock).toHaveBeenCalledWith(false);
+    fireEvent.click(screen.getByText("common.download"));
+    fireEvent.click(screen.getByText("environments.surveys.summary.selected_responses_excel"));
+    expect(downloadRowsAction).toHaveBeenCalledWith(["r1", "r2"], "xlsx");
   });
 
-  // For the tests that involve the modal dialog, we'll test the underlying functionality
-  // directly by mocking the deleteAction and deleteRows functions
-
-  test("deleteAction is called with the row ID when deleting", async () => {
-    const deleteActionMock = vi.fn().mockResolvedValue(undefined);
-    const deleteRowsMock = vi.fn();
-
-    // Create a spy for the deleteRows function
-    const mockTable = {
-      getFilteredSelectedRowModel: vi.fn().mockReturnValue({
-        rows: [{ id: "test-id-123" }],
-      }),
-      toggleAllPageRowsSelected: vi.fn(),
-    };
-
-    const { rerender } = render(
+  test("deletes rows successfully and shows success toast for contact", async () => {
+    deleteAction = vi.fn(() => Promise.resolve());
+    render(
       <SelectedRowSettings
-        table={mockTable as any}
-        deleteRows={deleteRowsMock}
-        type="response"
-        deleteAction={deleteActionMock}
+        table={table}
+        deleteRowsAction={deleteRowsAction}
+        deleteAction={deleteAction}
+        downloadRowsAction={downloadRowsAction}
+        type="contact"
       />
     );
-
-    // Test that the component renders the trash icon button
-    const trashIcon = document.querySelector(".lucide-trash2");
-    expect(trashIcon).toBeInTheDocument();
-
-    // Since we can't easily test the dialog interaction without mocking a lot of components,
-    // we can test the core functionality by calling the handlers directly
-
-    // We know that the deleteAction is called with the row ID
-    await deleteActionMock("test-id-123");
-    expect(deleteActionMock).toHaveBeenCalledWith("test-id-123");
-
-    // We know that deleteRows is called with an array of row IDs
-    deleteRowsMock(["test-id-123"]);
-    expect(deleteRowsMock).toHaveBeenCalledWith(["test-id-123"]);
+    // open delete dialog
+    fireEvent.click(screen.getAllByText("common.delete")[0]);
+    fireEvent.click(screen.getByText("Confirm Delete"));
+    await waitFor(() => {
+      expect(deleteAction).toHaveBeenCalledTimes(2);
+      expect(deleteRowsAction).toHaveBeenCalledWith(["r1", "r2"]);
+      expect(toast.success).toHaveBeenCalledWith("common.table_items_deleted_successfully");
+    });
   });
 
-  test("toast.success is called on successful deletion", async () => {
-    const deleteActionMock = vi.fn().mockResolvedValue(undefined);
-
-    // We can test the toast directly
-    await deleteActionMock();
-
-    // In the component, after the deleteAction succeeds, it should call toast.success
-    toast.success("common.table_items_deleted_successfully");
-
-    // Verify that toast.success was called with the right message
-    expect(toast.success).toHaveBeenCalledWith("common.table_items_deleted_successfully");
+  test("handles delete error and shows error toast for response", async () => {
+    deleteAction = vi.fn(() => Promise.reject(new Error("fail delete")));
+    render(
+      <SelectedRowSettings
+        table={table}
+        deleteRowsAction={deleteRowsAction}
+        deleteAction={deleteAction}
+        downloadRowsAction={downloadRowsAction}
+        type="response"
+      />
+    );
+    // open delete menu (trigger button)
+    const deleteTriggers = screen.getAllByText("common.delete");
+    fireEvent.click(deleteTriggers[0]);
+    fireEvent.click(screen.getByText("Confirm Delete"));
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith("fail delete");
+    });
   });
 
-  test("toast.error is called on deletion error", async () => {
-    const errorMessage = "Failed to delete";
-
-    // We can test the error path directly
-    toast.error(errorMessage);
-
-    // Verify that toast.error was called with the right message
-    expect(toast.error).toHaveBeenCalledWith(errorMessage);
+  test("deletes rows successfully and shows success toast for response", async () => {
+    deleteAction = vi.fn(() => Promise.resolve());
+    render(
+      <SelectedRowSettings
+        table={table}
+        deleteRowsAction={deleteRowsAction}
+        deleteAction={deleteAction}
+        downloadRowsAction={downloadRowsAction}
+        type="response"
+      />
+    );
+    // open delete dialog
+    fireEvent.click(screen.getAllByText("common.delete")[0]);
+    fireEvent.click(screen.getByText("Confirm Delete"));
+    await waitFor(() => {
+      expect(deleteAction).toHaveBeenCalledTimes(2);
+      expect(deleteRowsAction).toHaveBeenCalledWith(["r1", "r2"]);
+      expect(toast.success).toHaveBeenCalledWith("common.table_items_deleted_successfully");
+    });
   });
 
-  test("toast.error is called with generic message on unknown error", async () => {
-    // We can test the unknown error path directly
-    toast.error("common.an_unknown_error_occurred_while_deleting_table_items");
-
-    // Verify that toast.error was called with the generic message
-    expect(toast.error).toHaveBeenCalledWith("common.an_unknown_error_occurred_while_deleting_table_items");
+  test("handles delete error for non-Error and shows generic error toast", async () => {
+    deleteAction = vi.fn(() => Promise.reject("fail nonerror")); // Changed from Error to string
+    render(
+      <SelectedRowSettings
+        table={table}
+        deleteRowsAction={deleteRowsAction}
+        deleteAction={deleteAction}
+        downloadRowsAction={downloadRowsAction}
+        type="contact"
+      />
+    );
+    // open delete menu (trigger button)
+    const deleteTriggers = screen.getAllByText("common.delete");
+    fireEvent.click(deleteTriggers[0]);
+    fireEvent.click(screen.getByText("Confirm Delete"));
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith("common.an_unknown_error_occurred_while_deleting_table_items");
+    });
   });
 });

apps/web/modules/ui/components/data-table/components/selected-row-settings.tsx

@@ -1,25 +1,34 @@
 "use client";
 
 import { capitalizeFirstLetter } from "@/lib/utils/strings";
+import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/modules/ui/components/dropdown-menu";
 import { Table } from "@tanstack/react-table";
 import { useTranslate } from "@tolgee/react";
-import { Trash2Icon } from "lucide-react";
+import { ArrowDownToLineIcon, Trash2Icon } from "lucide-react";
 import { useCallback, useState } from "react";
 import { toast } from "react-hot-toast";
 
 interface SelectedRowSettingsProps<T> {
   table: Table<T>;
-  deleteRows: (rowId: string[]) => void;
+  deleteRowsAction: (rowId: string[]) => void;
   type: "response" | "contact";
   deleteAction: (id: string) => Promise<void>;
+  downloadRowsAction?: (rowIds: string[], format: string) => void;
 }
 
 export const SelectedRowSettings = <T,>({
   table,
-  deleteRows,
+  deleteRowsAction,
   type,
   deleteAction,
+  downloadRowsAction,
 }: SelectedRowSettingsProps<T>) => {
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
@@ -40,13 +49,11 @@ export const SelectedRowSettings = <T,>({
       setIsDeleting(true);
       const rowsToBeDeleted = table.getFilteredSelectedRowModel().rows.map((row) => row.id);
 
-      if (type === "response") {
-        await Promise.all(rowsToBeDeleted.map((responseId) => deleteAction(responseId)));
-      } else if (type === "contact") {
-        await Promise.all(rowsToBeDeleted.map((responseId) => deleteAction(responseId)));
+      if (type === "response" || type === "contact") {
+        await Promise.all(rowsToBeDeleted.map((rowId) => deleteAction(rowId)));
       }
 
-      deleteRows(rowsToBeDeleted);
+      deleteRowsAction(rowsToBeDeleted);
       toast.success(t("common.table_items_deleted_successfully", { type: capitalizeFirstLetter(type) }));
     } catch (error) {
       if (error instanceof Error) {
@@ -64,34 +71,72 @@ export const SelectedRowSettings = <T,>({
     }
   };
 
+  // Handle download selected rows
+  const handleDownloadSelectedRows = async (format: string) => {
+    const rowsToDownload = table.getFilteredSelectedRowModel().rows.map((row) => row.id);
+    if (downloadRowsAction && rowsToDownload.length > 0) {
+      downloadRowsAction(rowsToDownload, format);
+    }
+  };
+
   // Helper component for the separator
   const Separator = () => <div>|</div>;
 
-  // Helper component for selectable options
-  const SelectableOption = ({ label, onClick }: { label: string; onClick: () => void }) => (
-    <div className="cursor-pointer rounded-md p-1 hover:bg-slate-500" onClick={onClick}>
-      {label}
-    </div>
-  );
-
   return (
-    <div className="flex items-center gap-x-2 rounded-md bg-slate-900 p-1 px-2 text-xs text-white">
-      <div className="lowercase">
-        {selectedRowCount} {type === "response" ? t("common.responses") : t("common.contacts")}
-        {t("common.selected")}
-      </div>
-      <Separator />
-      <SelectableOption label={t("common.select_all")} onClick={() => handleToggleAllRowsSelection(true)} />
-      <Separator />
-      <SelectableOption
-        label={t("common.clear_selection")}
-        onClick={() => handleToggleAllRowsSelection(false)}
-      />
-      <Separator />
-      <div
-        className="cursor-pointer rounded-md bg-slate-500 p-1 hover:bg-slate-600"
-        onClick={() => setIsDeleteDialogOpen(true)}>
-        <Trash2Icon strokeWidth={1.5} className="h-4 w-4" />
+    <>
+      <div className="bg-primary flex items-center gap-x-2 rounded-md p-1 px-2 text-xs text-white">
+        <div className="lowercase">
+          {selectedRowCount} {t(`common.${type}s`)} {t("common.selected")}
+        </div>
+        <Separator />
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-6 border-none px-2"
+          onClick={() => handleToggleAllRowsSelection(true)}>
+          {t("common.select_all")}
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-6 border-none px-2"
+          onClick={() => handleToggleAllRowsSelection(false)}>
+          {t("common.clear_selection")}
+        </Button>
+        <Separator />
+        {downloadRowsAction && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm" className="h-6 gap-1 border-none px-2">
+                {t("common.download")}
+                <ArrowDownToLineIcon />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem
+                onClick={() => {
+                  handleDownloadSelectedRows("csv");
+                }}>
+                <p className="text-slate-700">{t("environments.surveys.summary.selected_responses_csv")}</p>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => {
+                  handleDownloadSelectedRows("xlsx");
+                }}>
+                <p>{t("environments.surveys.summary.selected_responses_excel")}</p>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+        <Button
+          variant="secondary"
+          size="sm"
+          className="h-6 gap-1 px-2"
+          onClick={() => setIsDeleteDialogOpen(true)}>
+          {t("common.delete")}
+          <Trash2Icon />
+        </Button>
       </div>
       <DeleteDialog
         open={isDeleteDialogOpen}
@@ -100,6 +145,6 @@ export const SelectedRowSettings = <T,>({
         onDelete={handleDelete}
         isDeleting={isDeleting}
       />
-    </div>
+    </>
   );
 };

apps/web/modules/ui/components/file-input/components/uploader.tsx

@@ -33,7 +33,7 @@ export const Uploader = ({
   return (
     <label
       htmlFor={`${id}-${name}`}
-      data-testId="upload-file-label"
+      data-testid="upload-file-label"
       className={cn(
         "relative flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-slate-300 bg-slate-50 dark:border-slate-600 dark:bg-slate-700",
         uploaderClassName,

apps/web/modules/ui/components/file-input/components/video-settings.tsx

@@ -119,7 +119,7 @@ export const VideoSettings = ({
 
       {isYoutubeLink && (
         <AdvancedOptionToggle
-          data-testId="youtube-privacy-mode"
+          data-testid="youtube-privacy-mode"
           htmlId="youtubePrivacyMode"
           isChecked={isYoutubePrivacyModeEnabled}
           onToggle={toggleYoutubePrivacyMode}

apps/web/modules/ui/components/file-input/index.tsx

@@ -36,7 +36,7 @@ interface FileInputProps {
 interface SelectedFile {
   url: string;
   name: string;
-  uploaded: Boolean;
+  uploaded: boolean;
 }
 
 export const FileInput = ({
@@ -236,11 +236,14 @@ export const FileInput = ({
                               className={!file.uploaded ? "opacity-50" : ""}
                             />
                             {file.uploaded ? (
-                              <div
+                              <button
                                 className="absolute right-2 top-2 flex cursor-pointer items-center justify-center rounded-md bg-slate-100 p-1 hover:bg-slate-200 hover:bg-white/90"
-                                onClick={() => handleRemove(idx)}>
+                                onClick={(e) => {
+                                  e.preventDefault();
+                                  handleRemove(idx);
+                                }}>
                                 <XIcon className="h-5 text-slate-700 hover:text-slate-900" />
-                              </div>
+                              </button>
                             ) : (
                               <LoadingSpinner />
                             )}
@@ -254,11 +257,14 @@ export const FileInput = ({
                               <span className="font-semibold">{file.name}</span>
                             </p>
                             {file.uploaded ? (
-                              <div
+                              <button
                                 className="absolute right-2 top-2 flex cursor-pointer items-center justify-center rounded-md bg-slate-100 p-1 hover:bg-slate-200 hover:bg-white/90"
-                                onClick={() => handleRemove(idx)}>
+                                onClick={(e) => {
+                                  e.preventDefault();
+                                  handleRemove(idx);
+                                }}>
                                 <XIcon className="h-5 text-slate-700 hover:text-slate-900" />
-                              </div>
+                              </button>
                             ) : (
                               <LoadingSpinner />
                             )}
@@ -294,11 +300,14 @@ export const FileInput = ({
                           className={!selectedFiles[0].uploaded ? "opacity-50" : ""}
                         />
                         {selectedFiles[0].uploaded ? (
-                          <div
+                          <button
                             className="absolute right-2 top-2 flex cursor-pointer items-center justify-center rounded-md bg-slate-100 p-1 hover:bg-slate-200 hover:bg-white/90"
-                            onClick={() => handleRemove(0)}>
+                            onClick={(e) => {
+                              e.preventDefault();
+                              handleRemove(0);
+                            }}>
                             <XIcon className="h-5 text-slate-700 hover:text-slate-900" />
-                          </div>
+                          </button>
                         ) : (
                           <LoadingSpinner />
                         )}
@@ -310,11 +319,14 @@ export const FileInput = ({
                           <span className="font-semibold">{selectedFiles[0].name}</span>
                         </p>
                         {selectedFiles[0].uploaded ? (
-                          <div
+                          <button
                             className="absolute right-2 top-2 flex cursor-pointer items-center justify-center rounded-md bg-slate-100 p-1 hover:bg-slate-200 hover:bg-white/90"
-                            onClick={() => handleRemove(0)}>
+                            onClick={(e) => {
+                              e.preventDefault();
+                              handleRemove(0);
+                            }}>
                             <XIcon className="h-5 text-slate-700 hover:text-slate-900" />
-                          </div>
+                          </button>
                         ) : (
                           <LoadingSpinner />
                         )}

apps/web/modules/ui/components/icons/net-promoter-score-icon.tsx

@@ -4,8 +4,8 @@ export const NetPromoterScoreIcon: React.FC<React.SVGProps<SVGSVGElement>> = (pr
       <g id="Frame">
         <path
           id="Vector"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M2.25 2.25C2.05109 2.25 1.86032 2.32902 1.71967 2.46967C1.57902 2.61032 1.5 2.80109 1.5 3C1.5 3.19891 1.57902 3.38968 1.71967 3.53033C1.86032 3.67098 2.05109 3.75 2.25 3.75H3V14.25C3 15.0456 3.31607 15.8087 3.87868 16.3713C4.44129 16.9339 5.20435 17.25 6 17.25H7.21L6.038 20.763C5.97514 20.9518 5.98988 21.1579 6.07896 21.3359C6.16804 21.5138 6.32417 21.6491 6.513 21.712C6.70183 21.7749 6.9079 21.7601 7.08588 21.671C7.26385 21.582 7.39914 21.4258 7.462 21.237L7.791 20.25H16.209L16.539 21.237C16.6073 21.4186 16.7433 21.5666 16.9184 21.6501C17.0935 21.7335 17.2941 21.7459 17.4782 21.6845C17.6622 21.6232 17.8153 21.4929 17.9053 21.3211C17.9954 21.1493 18.0153 20.9492 17.961 20.763L16.791 17.25H18C18.7956 17.25 19.5587 16.9339 20.1213 16.3713C20.6839 15.8087 21 15.0456 21 14.25V3.75H21.75C21.9489 3.75 22.1397 3.67098 22.2803 3.53033C22.421 3.38968 22.5 3.19891 22.5 3C22.5 2.80109 22.421 2.61032 22.2803 2.46967C22.1397 2.32902 21.9489 2.25 21.75 2.25H2.25ZM8.29 18.75L8.79 17.25H15.21L15.71 18.75H8.29ZM15.75 6.75C15.75 6.55109 15.671 6.36032 15.5303 6.21967C15.3897 6.07902 15.1989 6 15 6C14.8011 6 14.6103 6.07902 14.4697 6.21967C14.329 6.36032 14.25 6.55109 14.25 6.75V12.75C14.25 12.9489 14.329 13.1397 14.4697 13.2803C14.6103 13.421 14.8011 13.5 15 13.5C15.1989 13.5 15.3897 13.421 15.5303 13.2803C15.671 13.1397 15.75 12.9489 15.75 12.75V6.75ZM12.75 9C12.75 8.80109 12.671 8.61032 12.5303 8.46967C12.3897 8.32902 12.1989 8.25 12 8.25C11.8011 8.25 11.6103 8.32902 11.4697 8.46967C11.329 8.61032 11.25 8.80109 11.25 9V12.75C11.25 12.9489 11.329 13.1397 11.4697 13.2803C11.6103 13.421 11.8011 13.5 12 13.5C12.1989 13.5 12.3897 13.421 12.5303 13.2803C12.671 13.1397 12.75 12.9489 12.75 12.75V9ZM9.75 11.25C9.75 11.0511 9.67098 10.8603 9.53033 10.7197C9.38968 10.579 9.19891 10.5 9 10.5C8.80109 10.5 8.61032 10.579 8.46967 10.7197C8.32902 10.8603 8.25 11.0511 8.25 11.25V12.75C8.25 12.9489 8.32902 13.1397 8.46967 13.2803C8.61032 13.421 8.80109 13.5 9 13.5C9.19891 13.5 9.38968 13.421 9.53033 13.2803C9.67098 13.1397 9.75 12.9489 9.75 12.75V11.25Z"
           fill="white"
         />

apps/web/modules/ui/components/load-segment-modal/index.tsx

@@ -73,10 +73,10 @@ const SegmentDetail = ({
   };
 
   return (
-    <div
+    <button
       key={segment.id}
       className={cn(
-        "relative mt-1 grid h-16 cursor-pointer grid-cols-5 content-center rounded-lg hover:bg-slate-100",
+        "relative mt-1 grid h-16 w-full cursor-pointer grid-cols-5 content-center rounded-lg hover:bg-slate-100",
         currentSegment.id === segment.id && "pointer-events-none bg-slate-100 opacity-60"
       )}
       onClick={async () => {
@@ -112,7 +112,7 @@ const SegmentDetail = ({
       <div className="whitespace-wrap col-span-1 my-auto hidden text-center text-sm text-slate-500 sm:block">
         <div className="ph-no-capture text-slate-900">{formatDate(segment.createdAt)}</div>
       </div>
-    </div>
+    </button>
   );
 };
 
@@ -169,6 +169,7 @@ export const LoadSegmentModal = ({
 
               {segmentsArray.map((segment) => (
                 <SegmentDetail
+                  key={segment.id}
                   segment={segment}
                   setIsSegmentEditorOpen={setIsSegmentEditorOpen}
                   setOpen={setOpen}

apps/web/modules/ui/components/options-switch/index.tsx

@@ -42,10 +42,13 @@ export const OptionsSwitch = ({
         style={highlightStyle}
       />
       {questionTypes.map((type) => (
-        <div
+        <button
           key={type.value}
           data-value={type.value}
-          onClick={() => !type.disabled && handleOptionChange(type.value)}
+          onClick={(e) => {
+            e.preventDefault();
+            !type.disabled && handleOptionChange(type.value);
+          }}
           className={`relative z-10 flex-grow rounded-md p-2 text-center transition-colors duration-200 ${
             type.disabled
               ? "cursor-not-allowed opacity-50"
@@ -57,7 +60,7 @@ export const OptionsSwitch = ({
             <span className="text-sm text-slate-900">{type.label}</span>
             {type.icon && <div className="h-4 w-4 text-slate-600 hover:text-slate-800">{type.icon}</div>}
           </div>
-        </div>
+        </button>
       ))}
     </div>
   );

apps/web/modules/ui/components/preview-survey/components/tab-option.tsx

@@ -8,8 +8,8 @@ interface TabOptionProps {
 
 export const TabOption = ({ active, icon, onClick }: TabOptionProps) => {
   return (
-    <div className={`${active ? "rounded-full bg-slate-200" : ""} cursor-pointer`} onClick={onClick}>
+    <button className={`${active ? "rounded-full bg-slate-200" : ""} cursor-pointer`} onClick={onClick}>
       {icon}
-    </div>
+    </button>
   );
 };

apps/web/modules/ui/components/tag/index.tsx

@@ -37,14 +37,14 @@ export const Tag = ({
       </div>
 
       {allowDelete && (
-        <span
+        <button
           className="cursor-pointer text-sm"
           onClick={() => {
             if (tags && setTagsState) setTagsState(tags.filter((tag) => tag.tagId !== tagId));
             onDelete(tagId);
           }}>
           <XCircleIcon fontSize={24} className="h-4 w-4 text-slate-100 hover:text-slate-200" />
-        </span>
+        </button>
       )}
     </div>
   );

apps/web/modules/ui/components/theme-styling-preview-survey/index.tsx

@@ -180,9 +180,9 @@ export const ThemeStylingPreviewSurvey = ({
               ContentRef={ContentRef as React.MutableRefObject<HTMLDivElement> | null}
               isEditorView>
               {!project.styling?.isLogoHidden && (
-                <div className="absolute left-5 top-5" onClick={scrollToEditLogoSection}>
+                <button className="absolute left-5 top-5" onClick={scrollToEditLogoSection}>
                   <ClientLogo projectLogo={project.logo} previewSurvey />
-                </div>
+                </button>
               )}
               <div
                 key={surveyFormKey}
@@ -205,17 +205,19 @@ export const ThemeStylingPreviewSurvey = ({
 
       {/* for toggling between mobile and desktop mode  */}
       <div className="mt-2 flex rounded-full border-2 border-slate-300 p-1">
-        <div
+        <button
+          type="button"
           className={`${previewType === "link" ? "rounded-full bg-slate-200" : ""} cursor-pointer px-3 py-1 text-sm`}
           onClick={() => setPreviewType("link")}>
           {t("common.link_survey")}
-        </div>
+        </button>
 
-        <div
+        <button
+          type="button"
           className={`${isAppSurvey ? "rounded-full bg-slate-200" : ""} cursor-pointer px-3 py-1 text-sm`}
           onClick={() => setPreviewType("app")}>
           {t("common.app_survey")}
-        </div>
+        </button>
       </div>
     </div>
   );

apps/web/modules/ui/globals.css

@@ -127,9 +127,9 @@ input[type="search"]::-ms-reveal {
 }
 
 input[type="range"]::-webkit-slider-thumb {
-  background: #0f172a;
   height: 20px;
   width: 20px;
   border-radius: 50%;
   -webkit-appearance: none;
+  background: #0f172a;
 }

apps/web/package.json

@@ -117,11 +117,9 @@
     "prismjs": "1.30.0",
     "qr-code-styling": "1.9.2",
     "qrcode": "1.5.4",
-    "react": "19.1.0",
     "react-colorful": "5.6.1",
     "react-confetti": "6.4.0",
     "react-day-picker": "9.6.7",
-    "react-dom": "19.1.0",
     "react-hook-form": "7.56.2",
     "react-hot-toast": "2.5.2",
     "react-turnstile": "1.1.4",

apps/web/playwright/utils/helper.ts

@@ -181,7 +181,7 @@ export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
   await page.locator('input[name="subheader"]').fill(params.openTextQuestion.description);
   await page.getByLabel("Placeholder").fill(params.openTextQuestion.placeholder);
 
-  await page.locator("p").filter({ hasText: params.openTextQuestion.question }).click();
+  await page.locator("h3").filter({ hasText: params.openTextQuestion.question }).click();
 
   // Single Select Question
   await page
@@ -403,7 +403,7 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.locator('input[name="subheader"]').fill(params.openTextQuestion.description);
   await page.getByLabel("Placeholder").fill(params.openTextQuestion.placeholder);
 
-  await page.locator("p").filter({ hasText: params.openTextQuestion.question }).click();
+  await page.locator("h3").filter({ hasText: params.openTextQuestion.question }).click();
 
   // Single Select Question
   await page
@@ -606,8 +606,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
 
   // Adding logic
   // Open Text Question
-  await page.locator("p", { hasText: params.openTextQuestion.question }).click();
-  await page.getByRole("button", { name: "Show Advanced Settings" }).click();
+  await page.getByRole("heading", { name: params.openTextQuestion.question }).click();
+  await page.getByRole("button", { name: "Toggle advanced settings" }).click();
   await page.getByRole("button", { name: "Add logic" }).click();
   await page.locator("#condition-0-0-conditionOperator").click();
   await page.getByRole("option", { name: "is submitted" }).click();
@@ -637,8 +637,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.getByRole("textbox", { name: "Value" }).fill("This ");
 
   // Single Select Question
-  await page.locator("p", { hasText: params.singleSelectQuestion.question }).click();
-  await page.getByRole("button", { name: "Show Advanced Settings" }).click();
+  await page.getByRole("heading", { name: params.singleSelectQuestion.question }).click();
+  await page.getByRole("button", { name: "Toggle advanced settings" }).click();
   await page.getByRole("button", { name: "Add logic" }).click();
   await page.locator("#condition-0-0-conditionOperator").click();
   await page.getByRole("option", { name: "Equals one of" }).click();
@@ -665,8 +665,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.getByRole("textbox", { name: "Value" }).fill("is ");
 
   // Multi Select Question
-  await page.locator("p", { hasText: params.multiSelectQuestion.question }).click();
-  await page.getByRole("button", { name: "Show Advanced Settings" }).click();
+  await page.getByRole("heading", { name: params.multiSelectQuestion.question }).click();
+  await page.getByRole("button", { name: "Toggle advanced settings" }).click();
   await page.getByRole("button", { name: "Add logic" }).click();
   await page.locator("#condition-0-0-conditionOperator").click();
   await page.getByRole("option", { name: "Includes all of" }).click();
@@ -706,8 +706,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.getByRole("textbox", { name: "Value" }).fill("a ");
 
   // Picture Select Question
-  await page.locator("p", { hasText: params.pictureSelectQuestion.question }).click();
-  await page.getByRole("button", { name: "Show Advanced Settings" }).click();
+  await page.getByRole("heading", { name: params.pictureSelectQuestion.question }).click();
+  await page.getByRole("button", { name: "Toggle advanced settings" }).click();
   await page.getByRole("button", { name: "Add logic" }).click();
   await page.locator("#condition-0-0-conditionOperator").click();
   await page.getByRole("option", { name: "is submitted" }).click();
@@ -731,8 +731,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.getByRole("textbox", { name: "Value" }).fill("secret ");
 
   // Rating Question
-  await page.locator("p", { hasText: params.ratingQuestion.question }).click();
-  await page.getByRole("button", { name: "Show Advanced Settings" }).click();
+  await page.getByRole("heading", { name: params.ratingQuestion.question }).click();
+  await page.getByRole("button", { name: "Toggle advanced settings" }).click();
   await page.getByRole("button", { name: "Add logic" }).click();
   await page.locator("#condition-0-0-conditionOperator").click();
   await page.getByRole("option", { name: ">=" }).click();
@@ -758,8 +758,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.getByRole("textbox", { name: "Value" }).fill("message ");
 
   // NPS Question
-  await page.locator("p", { hasText: params.npsQuestion.question }).click();
-  await page.getByRole("button", { name: "Show Advanced Settings" }).click();
+  await page.getByRole("heading", { name: params.npsQuestion.question }).click();
+  await page.getByRole("button", { name: "Toggle advanced settings" }).click();
   await page.getByRole("button", { name: "Add logic" }).click();
   await page.locator("#condition-0-0-conditionOperator").click();
   await page.getByRole("option", { name: ">", exact: true }).click();
@@ -819,8 +819,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.getByRole("textbox", { name: "Value" }).fill("for ");
 
   // Ranking Question
-  await page.locator("p", { hasText: params.ranking.question }).click();
-  await page.getByRole("button", { name: "Show Advanced Settings" }).click();
+  await page.getByRole("heading", { name: params.ranking.question }).click();
+  await page.getByRole("button", { name: "Toggle advanced settings" }).click();
   await page.getByRole("button", { name: "Add logic" }).click();
   await page.locator("#condition-0-0-conditionOperator").click();
   await page.getByRole("option", { name: "is skipped" }).click();
@@ -844,8 +844,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.getByRole("textbox", { name: "Value" }).fill("e2e ");
 
   // Matrix Question
-  await page.locator("p", { hasText: params.matrix.question }).click();
-  await page.getByRole("button", { name: "Show Advanced Settings" }).click();
+  await page.getByRole("heading", { name: params.matrix.question }).click();
+  await page.getByRole("button", { name: "Toggle advanced settings" }).click();
   await page.getByRole("button", { name: "Add logic" }).click();
   await page.locator("#condition-0-0-conditionOperator").click();
   await page.getByRole("option", { name: "is completely submitted" }).click();
@@ -877,8 +877,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.getByRole("option", { name: params.ctaQuestion.question }).click();
 
   // CTA Question
-  await page.locator("p", { hasText: params.ctaQuestion.question }).click();
-  await page.getByRole("button", { name: "Show Advanced Settings" }).click();
+  await page.getByRole("heading", { name: params.ctaQuestion.question }).click();
+  await page.getByRole("button", { name: "Toggle advanced settings" }).click();
   await page.getByRole("button", { name: "Add logic" }).click();
   await page.locator("#condition-0-0-conditionOperator").click();
   await page.getByRole("option", { name: "is skipped" }).click();
@@ -905,8 +905,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.locator("#action-0-value-input").fill("1");
 
   // Consent Question
-  await page.locator("p", { hasText: params.consentQuestion.question }).click();
-  await page.getByRole("button", { name: "Show Advanced Settings" }).click();
+  await page.getByRole("heading", { name: params.consentQuestion.question }).click();
+  await page.getByRole("button", { name: "Toggle advanced settings" }).click();
   await page.getByRole("button", { name: "Add logic" }).click();
   await page.locator("#action-0-objective").click();
   await page.getByRole("option", { name: "Calculate" }).click();
@@ -918,8 +918,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.locator("#action-0-value-input").fill("2");
 
   // File Upload Question
-  await page.locator("p", { hasText: params.fileUploadQuestion.question }).click();
-  await page.getByRole("button", { name: "Show Advanced Settings" }).click();
+  await page.getByRole("heading", { name: params.fileUploadQuestion.question }).click();
+  await page.getByRole("button", { name: "Toggle advanced settings" }).click();
   await page.getByRole("button", { name: "Add logic" }).click();
   await page.locator("#action-0-objective").click();
   await page.getByRole("option", { name: "Calculate" }).click();
@@ -936,7 +936,7 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   const tomorrow = new Date(new Date().setDate(new Date().getDate() + 1)).toISOString().split("T")[0];
 
   await page.getByRole("main").getByText(params.date.question).click();
-  await page.getByRole("button", { name: "Show Advanced Settings" }).click();
+  await page.getByRole("button", { name: "Toggle advanced settings" }).click();
   await page.getByRole("button", { name: "Add logic" }).click();
 
   await page.getByPlaceholder("Value").fill(today);
@@ -965,8 +965,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.locator("#action-0-value-input").fill("1");
 
   // Cal Question
-  await page.locator("p", { hasText: params.cal.question }).click();
-  await page.getByRole("button", { name: "Show Advanced Settings" }).click();
+  await page.getByRole("heading", { name: params.cal.question }).click();
+  await page.getByRole("button", { name: "Toggle advanced settings" }).click();
   await page.getByRole("button", { name: "Add logic" }).click();
   await page.locator("#condition-0-0-conditionOperator").click();
   await page.getByRole("option", { name: "is skipped" }).click();
@@ -980,8 +980,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.locator("#action-0-value-input").fill("1");
 
   // Address Question
-  await page.locator("p", { hasText: params.address.question }).click();
-  await page.getByRole("button", { name: "Show Advanced Settings" }).click();
+  await page.getByRole("heading", { name: params.address.question }).click();
+  await page.getByRole("button", { name: "Toggle advanced settings" }).click();
   await page.getByRole("button", { name: "Add logic" }).click();
   await page.locator("#action-0-objective").click();
   await page.getByRole("option", { name: "Calculate" }).click();

apps/web/sentry.edge.config.ts

@@ -12,8 +12,8 @@ if (SENTRY_DSN) {
   Sentry.init({
     dsn: SENTRY_DSN,
 
-    // Adjust this value in production, or use tracesSampler for greater control
-    tracesSampleRate: 1,
+    // No tracing while Sentry doesn't update to telemetry 2.0.0 - https://github.com/getsentry/sentry-javascript/issues/15737
+    tracesSampleRate: 0,
 
     // Setting this option to true will print useful information to the console while you're setting up Sentry.
     debug: false,

apps/web/sentry.server.config.ts

@@ -11,8 +11,8 @@ if (SENTRY_DSN) {
   Sentry.init({
     dsn: SENTRY_DSN,
 
-    // Adjust this value in production, or use tracesSampler for greater control
-    tracesSampleRate: 1,
+    // No tracing while Sentry doesn't update to telemetry 2.0.0 - https://github.com/getsentry/sentry-javascript/issues/15737
+    tracesSampleRate: 0,
 
     // Setting this option to true will print useful information to the console while you're setting up Sentry.
     debug: false,

docs/development/technical-handbook/tenant-separation.mdx

@@ -0,0 +1,108 @@
+---
+title: "Tenant Separation"
+description: "How Formbricks handles tenant separation on Formbricks Cloud"
+icon: "people-arrows"
+---
+
+Formbricks Cloud is designed to support multiple tenants, each with their own set of surveys and data. This page describes the different ways to configure and use Formbricks for multi-tenancy.
+
+<Note>
+This documentation only applies to Formbricks Cloud instances. On-premise deployments handle tenant separation differently based on your specific setup and requirements.
+</Note>
+
+## Multi-Tenancy in Formbricks Cloud
+
+Formbricks Cloud is architected as a true multi-tenant system where each organization operates in its own isolated environment while sharing the underlying infrastructure. This approach allows multiple organizations to use the platform independently without visibility into each other's data.
+
+### Organizational Structure
+
+```mermaid
+graph TD
+    Organization[Organization] --> Project1[Project 1]
+    Organization --> Project2[Project 2]
+    Organization --> ProjectN[Project n]
+    
+    Project1 --> DevEnv1[Development Environment]
+    Project1 --> ProdEnv1[Production Environment]
+    
+    DevEnv1 --> Survey1[Surveys]
+    DevEnv1 --> Contact1[Contacts]
+    DevEnv1 --> Action1[Actions]
+    DevEnv1 --> ApiKey1[API Keys]
+    DevEnv1 --> Webhook1[Webhooks]
+    DevEnv1 --> Integration1[Integrations]
+    
+    ProdEnv1 --> Survey2[Surveys]
+    ProdEnv1 --> Contact2[Contacts]
+    ProdEnv1 --> Action2[Actions]
+    ProdEnv1 --> ApiKey2[API Keys]
+    ProdEnv1 --> Webhook2[Webhooks]
+    ProdEnv1 --> Integration2[Integrations]
+```
+
+The multi-tenant architecture in Formbricks Cloud is built around three key levels of isolation:
+
+### 1. Organization-Level Isolation
+
+- Each tenant is represented by an Organization entity
+- Organizations are completely separated from each other
+- Users can be members of multiple organizations simultaneously
+- All resources and data belong exclusively to a single organization
+- Role-based access control (RBAC) with specific roles:
+  - Owner: Full access to all organization resources
+  - Manager: Can manage members and billing
+  - Member: Basic access to organization resources
+  - Billing: Access to billing information only
+- Billing and subscription management occurs at the organization level
+
+### 2. Project-Level Isolation
+
+Projects provide an additional layer of isolation within an organization:
+
+- Organizations can have multiple projects to separate different applications or product lines
+- Projects have their own configuration, branding, and style settings
+- Team-based access control allows fine-grained permission management within projects
+- Language settings and customizations are project-specific
+
+### 3. Environment-Level Isolation
+
+Within each organization's projects, further isolation is maintained through environments:
+
+- Each project has separate production and development environments
+- Complete separation of resources between environments:
+  - Surveys and responses
+  - Contacts and attributes
+  - Action classes and triggers
+  - API keys and integrations
+  - Webhooks and notifications
+  - Segments and targeting rules
+- Environments are created automatically when a project is created
+- Changes in development environments have no impact on production
+- Surveys can be copied between environments
+- Each environment has its own dedicated resources and settings
+
+## Data Security in Multi-Tenant Environment
+
+Formbricks ensures data security in its multi-tenant environment through:
+
+- **Database Layer Isolation**: 
+  - Foreign key constraints enforce data isolation
+  - Each resource is scoped to its organization
+  - Cascading deletes maintain referential integrity
+
+- **Authentication Boundaries**: 
+  - Role-based access control (RBAC)
+  - Session management per organization
+  - Multi-factor authentication support
+
+- **API Access Control**: 
+  - API keys are scoped to specific environments
+  - Rate limiting per organization
+  - Request validation and sanitization
+
+- **Resource Quotas**: 
+  - Organization-level limits based on billing plan
+
+
+This multi-layered approach to tenant separation ensures that organizations can safely use Formbricks Cloud with complete data privacy and isolation from other tenants.
+

docs/mint.json

@@ -179,7 +179,11 @@
     },
     {
       "group": "Technical Handbook",
-      "pages": ["development/technical-handbook/overview", "development/technical-handbook/database-model"]
+      "pages": [
+        "development/technical-handbook/overview",
+        "development/technical-handbook/database-model",
+        "development/technical-handbook/tenant-separation"
+      ]
     },
     {
       "group": "Standards",

docs/self-hosting/setup/docker.mdx

@@ -11,7 +11,7 @@ The image is pre-built and requires minimal setup—just download it and start t
 Make sure Docker and Docker Compose are installed on your system. These are usually included in tools like Docker Desktop and Rancher Desktop.
 
 <Note>
-  `docker compose` without the hyphen is now the primary method of using docker-compose, according to the Docker documentation.
+  `docker compose` without the hyphen is now the primary method of using docker-compose, according to the Docker documentation.
 </Note>
 
 ## Start
@@ -34,31 +34,55 @@ Make sure Docker and Docker Compose are installed on your system. These are usua
 
 1. **Generate NextAuth Secret**
 
-   You need a NextAuth secret for session signing and encryption. Run the command below to generate a random string using `openssl` and automatically insert it into the `docker-compose.yml` file:
+   You need a NextAuth secret for session signing and encryption. Run one of the commands below based on your operating system:
+
+   For Linux:
 
    ```bash
    sed -i "/NEXTAUTH_SECRET:$/s/NEXTAUTH_SECRET:.*/NEXTAUTH_SECRET: $(openssl rand -hex 32)/" docker-compose.yml
    ```
 
+   For macOS:
+
+   ```bash
+   sed -i '' "s/NEXTAUTH_SECRET:.*/NEXTAUTH_SECRET: $(openssl rand -hex 32)/" docker-compose.yml
+   ```
+
 1. **Generate Encryption Key**
 
-   Next, you need to generate an Encryption Key. This will be used for authenticating and verifying 2 Factor Authentication. The `sed` command below generates a random string using `openssl`, then replaces the `ENCRYPTION_KEY:` placeholder in the `docker-compose.yml` file with this generated secret:
+   Next, you need to generate an Encryption Key. This will be used for authenticating and verifying 2 Factor Authentication. Run one of the commands below based on your operating system:
+
+   For Linux:
 
    ```bash
    sed -i "/ENCRYPTION_KEY:$/s/ENCRYPTION_KEY:.*/ENCRYPTION_KEY: $(openssl rand -hex 32)/" docker-compose.yml
    ```
 
+   For macOS:
+
+   ```bash
+   sed -i '' "s/ENCRYPTION_KEY:.*/ENCRYPTION_KEY: $(openssl rand -hex 32)/" docker-compose.yml
+   ```
+
 1. **Generate Cron Secret**
 
-   You require a Cron secret to secure API access for running cron jobs. Run the command below to generate a random string using `openssl` and automatically insert it into the `docker-compose.yml` file:
+   You require a Cron secret to secure API access for running cron jobs. Run one of the commands below based on your operating system:
+
+   For Linux:
 
    ```bash
    sed -i "/CRON_SECRET:$/s/CRON_SECRET:.*/CRON_SECRET: $(openssl rand -hex 32)/" docker-compose.yml
    ```
 
+   For macOS:
+
+   ```bash
+   sed -i '' "s/CRON_SECRET:.*/CRON_SECRET: $(openssl rand -hex 32)/" docker-compose.yml
+   ```
+
 1. **Start the Docker Setup**
 
-   Now, you’re ready to run Formbricks with Docker. Use the command below to start Formbricks along with a PostgreSQL database using Docker Compose:
+   Now, you're ready to run Formbricks with Docker. Use the command below to start Formbricks along with a PostgreSQL database using Docker Compose:
 
    ```bash
    docker compose up -d
@@ -72,7 +96,7 @@ Make sure Docker and Docker Compose are installed on your system. These are usua
 
 ## Update
 
-Please take a look at our [migration guide](/self-hosting/advanced/migration) for version specific steps to update Formbricks.
+Please take a look at our [migration guide](/self-hosting/advanced/migration) for version specific steps to update Formbricks.
 
 1. Pull the latest Formbricks image
 
@@ -135,12 +159,13 @@ formbricks-quickstart-formbricks-1  | - info Loaded env from /home/nextjs/apps/w
 formbricks-quickstart-formbricks-1  | Listening on port 3000 url: http://<random-string>:3000
 ```
 
-You can close the logs again by hitting `CTRL + C`.
+You can close the logs again by hitting `CTRL + C`.
 
 <Note>
   **Customizing environment variables**
 
-  To edit any of the available environment variables, check out our [Configuration](/self-hosting/configuration/environment-variables) section!
+To edit any of the available environment variables, check out our [Configuration](/self-hosting/configuration/environment-variables) section!
+
 </Note>
 
-If you have any questions or require help, feel free to reach out to us on [**GitHub Discussions**](https://github.com/formbricks/formbricks/discussions). 😃
+If you have any questions or require help, feel free to reach out to us on [**GitHub Discussions**](https://github.com/formbricks/formbricks/discussions). 😃

package.json

@@ -10,6 +10,7 @@
     "schema": "packages/database/schema.prisma"
   },
   "scripts": {
+    "clean:all": "turbo run clean && rimraf node_modules pnpm-lock.yaml .turbo coverage out",
     "clean": "turbo run clean && rimraf node_modules .turbo coverage out",
     "build": "turbo run build",
     "build:dev": "turbo run build:dev",
@@ -35,6 +36,10 @@
     "fb-migrate-dev": "pnpm --filter @formbricks/database create-migration && pnpm prisma generate",
     "tolgee-pull": "BRANCH_NAME=$(node -p \"require('./branch.json').branchName\") && tolgee pull --tags \"draft:$BRANCH_NAME\" \"production\" && prettier --write ./apps/web/locales/*.json"
   },
+  "dependencies": {
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
+  },
   "devDependencies": {
     "@azure/microsoft-playwright-testing": "1.0.0-beta.7",
     "@formbricks/eslint-config": "workspace:*",

packages/surveys/src/components/general/question-media.tsx

@@ -53,7 +53,7 @@ export function QuestionMedia({ imgUrl, videoUrl, altText = "Image" }: QuestionM
                 setIsLoading(false);
               }}
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
-              referrerpolicy="strict-origin-when-cross-origin"
+              referrerPolicy="strict-origin-when-cross-origin"
             />
           </div>
         </div>

packages/surveys/src/components/questions/open-text-question.test.tsx

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom/vitest";
-import { cleanup, render, screen } from "@testing-library/preact";
+import { cleanup, fireEvent, render, screen } from "@testing-library/preact";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { type TSurveyOpenTextQuestion, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
@@ -76,10 +76,7 @@ describe("OpenTextQuestion", () => {
     render(<OpenTextQuestion {...defaultProps} onChange={onChange} />);
 
     const input = screen.getByPlaceholderText("Type here...");
-
-    // Directly set the input value and trigger the input event
-    Object.defineProperty(input, "value", { value: "Hello" });
-    input.dispatchEvent(new Event("input", { bubbles: true }));
+    fireEvent.input(input, { target: { value: "Hello" } });
 
     expect(onChange).toHaveBeenCalledWith({ q1: "Hello" });
   });
@@ -163,4 +160,291 @@ describe("OpenTextQuestion", () => {
 
     expect(focusMock).toHaveBeenCalled();
   });
+
+  test("handles input change for textarea with resize functionality", async () => {
+    // Create a spy on the Element.prototype to monitor style changes
+    const styleSpy = vi.spyOn(HTMLElement.prototype, "style", "get").mockImplementation(
+      () =>
+        ({
+          height: "",
+          overflow: "",
+        }) as CSSStyleDeclaration
+    );
+    const onChange = vi.fn();
+
+    render(
+      <OpenTextQuestion
+        {...defaultProps}
+        onChange={onChange}
+        question={{ ...defaultQuestion, longAnswer: true }}
+      />
+    );
+
+    const textarea = screen.getByRole("textbox");
+    // Only trigger a regular input event without trying to modify scrollHeight
+    fireEvent.input(textarea, { target: { value: "Test value for textarea" } });
+
+    // Check that onChange was called with the correct value
+    expect(onChange).toHaveBeenCalledWith({ q1: "Test value for textarea" });
+
+    // Clean up the spy
+    styleSpy.mockRestore();
+  });
+
+  test("handles textarea resize with different heights", async () => {
+    // Mock styles and scrollHeight for handleInputResize testing
+    let heightValue = "";
+    let overflowValue = "";
+
+    // Mock style setter to capture values
+    const originalSetProperty = CSSStyleDeclaration.prototype.setProperty;
+    CSSStyleDeclaration.prototype.setProperty = vi.fn();
+
+    // Mock to capture style changes
+    Object.defineProperty(HTMLElement.prototype, "style", {
+      get: vi.fn(() => ({
+        height: heightValue,
+        overflow: overflowValue,
+        setProperty: (prop: string, value: string) => {
+          if (prop === "height") heightValue = value;
+          if (prop === "overflow") overflowValue = value;
+        },
+      })),
+    });
+
+    const onChange = vi.fn();
+
+    render(
+      <OpenTextQuestion
+        {...defaultProps}
+        onChange={onChange}
+        question={{ ...defaultQuestion, longAnswer: true }}
+      />
+    );
+
+    const textarea = screen.getByRole("textbox");
+
+    // Simulate normal height (less than max)
+    const mockNormalEvent = {
+      target: {
+        style: { height: "", overflow: "" },
+        scrollHeight: 100, // Less than max 160px
+      },
+    };
+
+    // Get the event handler
+    const inputHandler = textarea.oninput as EventListener;
+    if (inputHandler) {
+      inputHandler(mockNormalEvent as unknown as Event);
+    }
+
+    // Now simulate text that exceeds max height
+    const mockOverflowEvent = {
+      target: {
+        style: { height: "", overflow: "" },
+        scrollHeight: 200, // More than max 160px
+      },
+    };
+
+    if (inputHandler) {
+      inputHandler(mockOverflowEvent as unknown as Event);
+    }
+
+    // Restore the original method
+    CSSStyleDeclaration.prototype.setProperty = originalSetProperty;
+  });
+
+  test("handles form submission by enter key", async () => {
+    const onSubmit = vi.fn();
+    const setTtc = vi.fn();
+
+    const { container } = render(
+      <OpenTextQuestion {...defaultProps} value="Test submission" onSubmit={onSubmit} setTtc={setTtc} />
+    );
+
+    // Get the form element using container query
+    const form = container.querySelector("form");
+    expect(form).toBeInTheDocument();
+
+    // Simulate form submission
+    fireEvent.submit(form!);
+
+    expect(onSubmit).toHaveBeenCalledWith({ q1: "Test submission" }, {});
+    expect(setTtc).toHaveBeenCalled();
+  });
+
+  test("applies minLength constraint when configured", () => {
+    render(
+      <OpenTextQuestion
+        {...defaultProps}
+        question={{ ...defaultQuestion, charLimit: { min: 5, max: 100 } }}
+      />
+    );
+
+    const input = screen.getByPlaceholderText("Type here...");
+    expect(input).toHaveAttribute("minLength", "5");
+    expect(input).toHaveAttribute("maxLength", "100");
+  });
+
+  test("handles video URL in media", () => {
+    render(
+      <OpenTextQuestion
+        {...defaultProps}
+        question={{ ...defaultQuestion, videoUrl: "https://example.com/video.mp4" }}
+      />
+    );
+
+    expect(screen.getByTestId("question-media")).toBeInTheDocument();
+  });
+
+  test("doesn't autofocus when not current question", () => {
+    const focusMock = vi.fn();
+    window.HTMLElement.prototype.focus = focusMock;
+
+    render(
+      <OpenTextQuestion
+        {...defaultProps}
+        autoFocusEnabled={true}
+        currentQuestionId="q2" // Different from question id (q1)
+      />
+    );
+
+    expect(focusMock).not.toHaveBeenCalled();
+  });
+
+  test("handles input change for textarea", async () => {
+    const onChange = vi.fn();
+
+    render(
+      <OpenTextQuestion
+        {...defaultProps}
+        onChange={onChange}
+        question={{ ...defaultQuestion, longAnswer: true }}
+      />
+    );
+
+    const textarea = screen.getByRole("textbox");
+    fireEvent.input(textarea, { target: { value: "Long text response" } });
+
+    expect(onChange).toHaveBeenCalledWith({ q1: "Long text response" });
+  });
+
+  test("applies phone number maxLength constraint", () => {
+    render(<OpenTextQuestion {...defaultProps} question={{ ...defaultQuestion, inputType: "phone" }} />);
+
+    const input = screen.getByPlaceholderText("Type here...");
+    expect(input).toHaveAttribute("maxLength", "30");
+  });
+
+  test("renders without subheader when not provided", () => {
+    const questionWithoutSubheader = {
+      ...defaultQuestion,
+      subheader: undefined,
+    };
+
+    render(<OpenTextQuestion {...defaultProps} question={questionWithoutSubheader} />);
+    expect(screen.getByTestId("mock-subheader")).toHaveTextContent("");
+  });
+
+  test("sets correct tabIndex based on current question status", () => {
+    // When it's the current question
+    render(<OpenTextQuestion {...defaultProps} currentQuestionId="q1" />);
+    const inputCurrent = screen.getByPlaceholderText("Type here...");
+    const submitCurrent = screen.getByRole("button", { name: "Submit" });
+
+    expect(inputCurrent).toHaveAttribute("tabIndex", "0");
+    expect(submitCurrent).toHaveAttribute("tabIndex", "0");
+
+    // When it's not the current question
+    cleanup();
+    render(<OpenTextQuestion {...defaultProps} currentQuestionId="q2" />);
+    const inputNotCurrent = screen.getByPlaceholderText("Type here...");
+    const submitNotCurrent = screen.getByRole("button", { name: "Submit" });
+
+    expect(inputNotCurrent).toHaveAttribute("tabIndex", "-1");
+    expect(submitNotCurrent).toHaveAttribute("tabIndex", "-1");
+  });
+
+  test("applies title attribute for phone input in textarea", () => {
+    render(
+      <OpenTextQuestion
+        {...defaultProps}
+        question={{
+          ...defaultQuestion,
+          longAnswer: true,
+          inputType: "phone",
+        }}
+      />
+    );
+
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveAttribute("title", "Please enter a valid phone number");
+  });
+
+  test("applies character limits for textarea", () => {
+    render(
+      <OpenTextQuestion
+        {...defaultProps}
+        question={{
+          ...defaultQuestion,
+          longAnswer: true,
+          inputType: "text",
+          charLimit: { min: 10, max: 200 },
+        }}
+      />
+    );
+
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveAttribute("minLength", "10");
+    expect(textarea).toHaveAttribute("maxLength", "200");
+  });
+
+  test("renders input with no maxLength for other input types", () => {
+    render(
+      <OpenTextQuestion
+        {...defaultProps}
+        question={{
+          ...defaultQuestion,
+          inputType: "email",
+        }}
+      />
+    );
+
+    const input = screen.getByPlaceholderText("Type here...");
+    // Should be undefined for non-text, non-phone types
+    expect(input).not.toHaveAttribute("maxLength");
+  });
+
+  test("applies autofocus attribute to textarea when enabled", () => {
+    render(
+      <OpenTextQuestion
+        {...defaultProps}
+        autoFocusEnabled={true}
+        question={{
+          ...defaultQuestion,
+          longAnswer: true,
+        }}
+      />
+    );
+
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveAttribute("autoFocus");
+  });
+
+  test("does not apply autofocus attribute to textarea when not current question", () => {
+    render(
+      <OpenTextQuestion
+        {...defaultProps}
+        autoFocusEnabled={true}
+        currentQuestionId="q2" // different from question.id (q1)
+        question={{
+          ...defaultQuestion,
+          longAnswer: true,
+        }}
+      />
+    );
+
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).not.toHaveAttribute("autoFocus");
+  });
 });

packages/surveys/src/components/questions/open-text-question.tsx

@@ -115,8 +115,8 @@ export function OpenTextQuestion({
                 className="fb-border-border placeholder:fb-text-placeholder fb-text-subheading focus:fb-border-brand fb-bg-input-bg fb-rounded-custom fb-block fb-w-full fb-border fb-p-2 fb-shadow-sm focus:fb-outline-none focus:fb-ring-0 sm:fb-text-sm"
                 pattern={question.inputType === "phone" ? "^[0-9+][0-9+\\- ]*[0-9]$" : ".*"}
                 title={question.inputType === "phone" ? "Enter a valid phone number" : undefined}
-                minlength={question.inputType === "text" ? question.charLimit?.min : undefined}
-                maxlength={
+                minLength={question.inputType === "text" ? question.charLimit?.min : undefined}
+                maxLength={
                   question.inputType === "text"
                     ? question.charLimit?.max
                     : question.inputType === "phone"
@@ -143,8 +143,8 @@ export function OpenTextQuestion({
                 }}
                 className="fb-border-border placeholder:fb-text-placeholder fb-bg-input-bg fb-text-subheading focus:fb-border-brand fb-rounded-custom fb-block fb-w-full fb-border fb-p-2 fb-shadow-sm focus:fb-ring-0 sm:fb-text-sm"
                 title={question.inputType === "phone" ? "Please enter a valid phone number" : undefined}
-                minlength={question.inputType === "text" ? question.charLimit?.min : undefined}
-                maxlength={question.inputType === "text" ? question.charLimit?.max : undefined}
+                minLength={question.inputType === "text" ? question.charLimit?.min : undefined}
+                maxLength={question.inputType === "text" ? question.charLimit?.max : undefined}
               />
             )}
             {question.inputType === "text" && question.charLimit?.max !== undefined && (

packages/surveys/src/components/questions/ranking-question.tsx

@@ -171,22 +171,25 @@ export function RankingQuestion({
                   return (
                     <div
                       key={item.id}
-                      tabIndex={isCurrent ? 0 : -1}
-                      onKeyDown={(e) => {
-                        if (e.key === " ") {
-                          handleItemClick(item);
-                        }
-                      }}
                       className={cn(
-                        "fb-flex fb-h-12 fb-items-center fb-mb-2 fb-border fb-border-border fb-transition-all fb-text-heading focus-within:fb-border-brand hover:fb-bg-input-bg-selected focus:fb-bg-input-bg-selected fb-rounded-custom fb-relative fb-cursor-pointer focus:fb-outline-none fb-transform fb-duration-500 fb-ease-in-out",
+                        "fb-flex fb-h-12 fb-items-center fb-mb-2 fb-border fb-border-border fb-transition-all fb-text-heading hover:fb-bg-input-bg-selected focus-within:fb-border-brand focus-within:fb-shadow-outline focus-within:fb-bg-input-bg-selected fb-rounded-custom fb-relative fb-cursor-pointer w-full focus:outline-none",
                         isSorted ? "fb-bg-input-bg-selected" : "fb-bg-input-bg"
-                      )}
-                      autoFocus={idx === 0 && autoFocusEnabled}>
-                      <div
-                        className="fb-flex fb-gap-x-4 fb-px-4 fb-items-center fb-grow fb-h-full group"
-                        onClick={() => {
+                      )}>
+                      <button
+                        autoFocus={idx === 0 && autoFocusEnabled}
+                        tabIndex={isCurrent ? 0 : -1}
+                        onKeyDown={(e) => {
+                          if (e.key === " ") {
+                            e.preventDefault();
+                            handleItemClick(item);
+                          }
+                        }}
+                        onClick={(e) => {
+                          e.preventDefault();
                           handleItemClick(item);
-                        }}>
+                        }}
+                        type="button"
+                        className="fb-flex fb-gap-x-4 fb-px-4 fb-items-center fb-grow fb-h-full group text-left focus:outline-none">
                         <span
                           className={cn(
                             "fb-w-6 fb-grow-0 fb-h-6 fb-flex fb-items-center fb-justify-center fb-rounded-full fb-text-xs fb-font-semibold fb-border-brand fb-border",
@@ -199,13 +202,14 @@ export function RankingQuestion({
                         <div className="fb-grow fb-shrink fb-font-medium fb-text-sm">
                           {getLocalizedValue(item.label, languageCode)}
                         </div>
-                      </div>
+                      </button>
                       {isSorted ? (
                         <div className="fb-flex fb-flex-col fb-h-full fb-grow-0 fb-border-l fb-border-border">
                           <button
                             tabIndex={-1}
                             type="button"
-                            onClick={() => {
+                            onClick={(e) => {
+                              e.preventDefault();
                               handleMove(item.id, "up");
                             }}
                             className={cn(
@@ -232,7 +236,8 @@ export function RankingQuestion({
                           <button
                             tabIndex={-1}
                             type="button"
-                            onClick={() => {
+                            onClick={(e) => {
+                              e.preventDefault();
                               handleMove(item.id, "down");
                             }}
                             className={cn(

packages/surveys/src/lib/recall.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import { type TResponseData, type TResponseVariables } from "@formbricks/types/responses";
 import { type TSurveyQuestion, TSurveyQuestionTypeEnum } from "../../../types/surveys/types";
 import { parseRecallInformation, replaceRecallInfo } from "./recall";
@@ -15,7 +15,7 @@ vi.mock("./i18n", () => ({
 vi.mock("./date-time", () => ({
   isValidDateString: (val: string) => /^\d{4}-\d{2}-\d{2}$/.test(val) || /^\d{2}-\d{2}-\d{4}$/.test(val),
   formatDateWithOrdinal: (date: Date) =>
-    `${date.getFullYear()}-${("0" + (date.getMonth() + 1)).slice(-2)}-${("0" + date.getDate()).slice(-2)}_formatted`,
+    `${date.getUTCFullYear()}-${("0" + (date.getUTCMonth() + 1)).slice(-2)}-${("0" + date.getUTCDate()).slice(-2)}_formatted`,
 }));
 
 describe("replaceRecallInfo", () => {
@@ -34,79 +34,73 @@ describe("replaceRecallInfo", () => {
     lastLogin: "2024-03-10",
   };
 
-  it("should replace recall info from responseData", () => {
+  test("should replace recall info from responseData", () => {
     const text = "Welcome, #recall:name/fallback:Guest#! Your email is #recall:email/fallback:N/A#.";
     const expected = "Welcome, John Doe! Your email is john.doe@example.com.";
     expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
   });
 
-  it("should replace recall info from variables if not in responseData", () => {
+  test("should replace recall info from variables if not in responseData", () => {
     const text = "Product: #recall:productName/fallback:N/A#. Role: #recall:userRole/fallback:User#.";
     const expected = "Product: Formbricks. Role: Admin.";
     expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
   });
 
-  it("should use fallback if value is not found in responseData or variables", () => {
+  test("should use fallback if value is not found in responseData or variables", () => {
     const text = "Your organization is #recall:orgName/fallback:DefaultOrg#.";
     const expected = "Your organization is DefaultOrg.";
     expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
   });
 
-  it("should handle nbsp in fallback", () => {
-    const text = "Status: #recall:status/fallback:PendingnbspReview#.";
-    const expected = "Status: Pending Review.";
+  test("should handle nbsp in fallback", () => {
+    const text = "Status: #recall:status/fallback:Pending Review#.";
+    const expected = "Status: Pending& ;Review.";
     expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
   });
 
-  it("should format date strings from responseData", () => {
+  test("should format date strings from responseData", () => {
     const text = "Registered on: #recall:registrationDate/fallback:N/A#.";
     const expected = "Registered on: 2023-01-15_formatted.";
     expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
   });
 
-  it("should format date strings from variables", () => {
+  test("should format date strings from variables", () => {
     const text = "Last login: #recall:lastLogin/fallback:N/A#.";
     const expected = "Last login: 2024-03-10_formatted.";
     expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
   });
 
-  it("should join array values with a comma and space", () => {
+  test("should join array values with a comma and space", () => {
     const text = "Tags: #recall:tags/fallback:none#.";
     const expected = "Tags: beta, user.";
     expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
   });
 
-  it("should handle empty array values, replacing with fallback", () => {
+  test("should handle empty array values, replacing with fallback", () => {
     const text = "Categories: #recall:emptyArray/fallback:No Categories#.";
     const expected = "Categories: No& ;Categories.";
     expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
   });
 
-  it("should handle null values from responseData, replacing with fallback", () => {
-    const text = "Preference: #recall:nullValue/fallback:Not Set#.";
-    const expected = "Preference: Not& ;Set.";
-    expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
-  });
-
-  it("should handle multiple recall patterns in a single string", () => {
+  test("should handle multiple recall patterns in a single string", () => {
     const text =
       "Hi #recall:name/fallback:User#, welcome to #recall:productName/fallback:Our Product#. Your role is #recall:userRole/fallback:Member#.";
     const expected = "Hi John Doe, welcome to #recall:productName/fallback:Our Product#. Your role is Admin.";
     expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
   });
 
-  it("should return original text if no recall pattern is found", () => {
+  test("should return original text if no recall pattern is found", () => {
     const text = "This is a normal text without recall info.";
     expect(replaceRecallInfo(text, responseData, variables)).toBe(text);
   });
 
-  it("should handle recall ID not found, using fallback", () => {
+  test("should handle recall ID not found, using fallback", () => {
     const text = "Value: #recall:nonExistent/fallback:FallbackValue#.";
     const expected = "Value: FallbackValue.";
     expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
   });
 
-  it("should handle if recall info is incomplete (e.g. missing fallback part), effectively using empty fallback", () => {
+  test("should handle if recall info is incomplete (e.g. missing fallback part), effectively using empty fallback", () => {
     // This specific pattern is not fully matched by extractRecallInfo, leading to no replacement.
     // The current extractRecallInfo expects #recall:ID/fallback:VALUE#
     const text = "Test: #recall:name#";
@@ -114,10 +108,28 @@ describe("replaceRecallInfo", () => {
     expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
   });
 
-  it("should handle complex fallback with spaces and special characters encoded as nbsp", () => {
+  test("should handle complex fallback with spaces and special characters encoded as nbsp", () => {
     const text =
-      "Details: #recall:extraInfo/fallback:ValuenbspWithnbspSpaces# and #recall:anotherInfo/fallback:Default#";
-    const expected = "Details: Value With Spaces and Default";
+      "Details: #recall:extraInfo/fallback:Value With Spaces# and #recall:anotherInfo/fallback:Default#";
+    const expected = "Details: Value& ;With& ;Spaces and Default";
+    expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
+  });
+
+  test("should handle fallback with only 'nbsp'", () => {
+    const text = "Note: #recall:note/fallback:nbsp#.";
+    const expected = "Note: .";
+    expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
+  });
+
+  test("should handle fallback with only ' '", () => {
+    const text = "Note: #recall:note/fallback: #.";
+    const expected = "Note: & ;.";
+    expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
+  });
+
+  test("should handle fallback with '$nbsp;' (should not replace '$nbsp;')", () => {
+    const text = "Note: #recall:note/fallback:$nbsp;#.";
+    const expected = "Note: $ ;.";
     expect(replaceRecallInfo(text, responseData, variables)).toBe(expected);
   });
 });
@@ -151,7 +163,7 @@ describe("parseRecallInformation", () => {
     // other necessary TSurveyQuestion fields can be added here with default values
   };
 
-  it("should replace recall info in headline", () => {
+  test("should replace recall info in headline", () => {
     const question: TSurveyQuestion = {
       ...baseQuestion,
       headline: { en: "Welcome, #recall:name/fallback:Guest#!" },
@@ -161,7 +173,7 @@ describe("parseRecallInformation", () => {
     expect(result.headline.en).toBe(expectedHeadline);
   });
 
-  it("should replace recall info in subheader", () => {
+  test("should replace recall info in subheader", () => {
     const question: TSurveyQuestion = {
       ...baseQuestion,
       headline: { en: "Main Question" },
@@ -172,7 +184,7 @@ describe("parseRecallInformation", () => {
     expect(result.subheader?.en).toBe(expectedSubheader);
   });
 
-  it("should replace recall info in both headline and subheader", () => {
+  test("should replace recall info in both headline and subheader", () => {
     const question: TSurveyQuestion = {
       ...baseQuestion,
       headline: { en: "User: #recall:name/fallback:User#" },
@@ -183,7 +195,7 @@ describe("parseRecallInformation", () => {
     expect(result.subheader?.en).toBe("Survey: Onboarding");
   });
 
-  it("should not change text if no recall info is present", () => {
+  test("should not change text if no recall info is present", () => {
     const question: TSurveyQuestion = {
       ...baseQuestion,
       headline: { en: "A simple question." },
@@ -199,7 +211,7 @@ describe("parseRecallInformation", () => {
     expect(result.subheader?.en).toBe(question.subheader?.en);
   });
 
-  it("should handle undefined subheader gracefully", () => {
+  test("should handle undefined subheader gracefully", () => {
     const question: TSurveyQuestion = {
       ...baseQuestion,
       headline: { en: "Question with #recall:name/fallback:User#" },
@@ -210,7 +222,7 @@ describe("parseRecallInformation", () => {
     expect(result.subheader).toBeUndefined();
   });
 
-  it("should not modify subheader if languageCode content is missing, even if recall is in other lang", () => {
+  test("should not modify subheader if languageCode content is missing, even if recall is in other lang", () => {
     const question: TSurveyQuestion = {
       ...baseQuestion,
       headline: { en: "Hello #recall:name/fallback:User#" },
@@ -222,7 +234,7 @@ describe("parseRecallInformation", () => {
     expect(result.subheader?.fr).toBe("Bonjour #recall:name/fallback:Utilisateur#");
   });
 
-  it("should handle malformed recall string (empty ID) leading to no replacement for that pattern", () => {
+  test("should handle malformed recall string (empty ID) leading to no replacement for that pattern", () => {
     // This tests extractId returning null because extractRecallInfo won't match '#recall:/fallback:foo#'
     // due to idPattern requiring at least one char for ID.
     const question: TSurveyQuestion = {
@@ -233,7 +245,7 @@ describe("parseRecallInformation", () => {
     expect(result.headline.en).toBe("Malformed: #recall:/fallback:foo# and valid: John Doe");
   });
 
-  it("should use empty string for empty fallback value", () => {
+  test("should use empty string for empty fallback value", () => {
     // This tests extractFallbackValue returning ""
     const question: TSurveyQuestion = {
       ...baseQuestion,
@@ -243,7 +255,7 @@ describe("parseRecallInformation", () => {
     expect(result.headline.en).toBe("Data: "); // nonExistentData not found, empty fallback used
   });
 
-  it("should handle recall info if subheader is present but no text for languageCode", () => {
+  test("should handle recall info if subheader is present but no text for languageCode", () => {
     const question: TSurveyQuestion = {
       ...baseQuestion,
       headline: { en: "Headline #recall:name/fallback:User#" },

packages/surveys/src/lib/recall.ts

@@ -7,27 +7,19 @@ import { type TSurveyQuestion } from "@formbricks/types/surveys/types";
 const extractId = (text: string): string | null => {
   const pattern = /#recall:([A-Za-z0-9_-]+)/;
   const match = text.match(pattern);
-  if (match && match[1]) {
-    return match[1];
-  } else {
-    return null;
-  }
+  return match?.[1] ?? null;
 };
 
 // Extracts the fallback value from a string containing the "fallback" pattern.
 const extractFallbackValue = (text: string): string => {
   const pattern = /fallback:(\S*)#/;
   const match = text.match(pattern);
-  if (match && match[1]) {
-    return match[1];
-  } else {
-    return "";
-  }
+  return match?.[1] ?? "";
 };
 
 // Extracts the complete recall information (ID and fallback) from a headline string.
 const extractRecallInfo = (headline: string, id?: string): string | null => {
-  const idPattern = id ? id : "[A-Za-z0-9_-]+";
+  const idPattern = id ?? "[A-Za-z0-9_-]+";
   const pattern = new RegExp(`#recall:(${idPattern})\\/fallback:(\\S*)#`);
   const match = headline.match(pattern);
   return match ? match[0] : null;
@@ -47,7 +39,7 @@ export const replaceRecallInfo = (
     const recallItemId = extractId(recallInfo);
     if (!recallItemId) return modifiedText; // Return the text if no ID could be extracted
 
-    const fallback = extractFallbackValue(recallInfo).replaceAll("nbsp", " ");
+    const fallback = extractFallbackValue(recallInfo).replace(/nbsp/g, " ").trim();
     let value: string | null = null;
 
     // Fetching value from variables based on recallItemId

packages/surveys/vite.config.mts

@@ -1,10 +1,11 @@
 import preact from "@preact/preset-vite";
 import { fileURLToPath } from "url";
 import { dirname, resolve } from "path";
-import { defineConfig, loadEnv } from "vite";
+import { loadEnv } from "vite";
 import dts from "vite-plugin-dts";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { copyCompiledAssetsPlugin } from "../vite-plugins/copy-compiled-assets";
+import { defineConfig } from "vitest/config";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -29,7 +30,7 @@ const config = ({ mode }) => {
       },
     },
     define: {
-      "process.env": env,
+      "process.env.NODE_ENV": JSON.stringify(mode),
     },
     build: {
       emptyOutDir: false,

packages/types/responses.ts

@@ -155,6 +155,7 @@ const ZResponseFilterCriteriaFilledOut = z.object({
 
 export const ZResponseFilterCriteria = z.object({
   finished: z.boolean().optional(),
+  responseIds: z.array(ZId).optional(),
   createdAt: z
     .object({
       min: z.date().optional(),