From c6241f7e7f55cbe583e94808eba431d9219c97c8 Mon Sep 17 00:00:00 2001
From: Piyush Gupta <56182734+gupta-piyush19@users.noreply.github.com>
Date: Wed, 13 Aug 2025 18:39:23 +0530
Subject: [PATCH] fix: Inconsistent icon - Picture select vs. question header
 image (#6409)

---
 .../src/components/general/question-media.tsx | 20 +++----------
 .../src/components/icons/expand-icon.test.tsx | 27 ++++++++++++++++++
 .../src/components/icons/expand-icon.tsx      | 28 +++++++++++++++++++
 .../components/icons/image-down-icon.test.tsx | 27 ++++++++++++++++++
 .../src/components/icons/image-down-icon.tsx  | 28 +++++++++++++++++++
 .../questions/picture-selection-question.tsx  | 19 ++-----------
 6 files changed, 116 insertions(+), 33 deletions(-)
 create mode 100644 packages/surveys/src/components/icons/expand-icon.test.tsx
 create mode 100644 packages/surveys/src/components/icons/expand-icon.tsx
 create mode 100644 packages/surveys/src/components/icons/image-down-icon.test.tsx
 create mode 100644 packages/surveys/src/components/icons/image-down-icon.tsx

diff --git a/packages/surveys/src/components/general/question-media.tsx b/packages/surveys/src/components/general/question-media.tsx
index c2c2de5520..6d7b00dd21 100644
--- a/packages/surveys/src/components/general/question-media.tsx
+++ b/packages/surveys/src/components/general/question-media.tsx
@@ -1,3 +1,5 @@
+import { ExpandIcon } from "@/components/icons/expand-icon";
+import { ImageDownIcon } from "@/components/icons/image-down-icon";
 import { cn } from "@/lib/utils";
 import { checkForLoomUrl, checkForVimeoUrl, checkForYoutubeUrl, convertToEmbedUrl } from "@/lib/video-upload";
 import { useState } from "preact/hooks";
@@ -72,23 +74,9 @@ export function QuestionMedia({ imgUrl, videoUrl, altText = "Image" }: QuestionM
         href={imgUrl ? imgUrl : convertToEmbedUrl(videoUrl ?? "")}
         target="_blank"
         rel="noreferrer"
+        aria-label={"Open in new tab"}
         className="fb-absolute fb-bottom-2 fb-right-2 fb-flex fb-items-center fb-gap-2 fb-rounded-md fb-bg-slate-800 fb-bg-opacity-40 fb-p-1.5 fb-text-white fb-opacity-0 fb-backdrop-blur-lg fb-transition fb-duration-300 fb-ease-in-out hover:fb-bg-opacity-65 group-hover/image:fb-opacity-100">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="lucide lucide-expand">
-          <path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8" />
-          <path d="M3 16.2V21m0 0h4.8M3 21l6-6" />
-          <path d="M21 7.8V3m0 0h-4.8M21 3l-6 6" />
-          <path d="M3 7.8V3m0 0h4.8M3 3l6 6" />
-        </svg>
+        {imgUrl ? <ImageDownIcon size={20} /> : <ExpandIcon size={20} />}
       </a>
     </div>
   );
diff --git a/packages/surveys/src/components/icons/expand-icon.test.tsx b/packages/surveys/src/components/icons/expand-icon.test.tsx
new file mode 100644
index 0000000000..c82ff8c6ee
--- /dev/null
+++ b/packages/surveys/src/components/icons/expand-icon.test.tsx
@@ -0,0 +1,27 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render } from "@testing-library/preact";
+import { afterEach, describe, expect, test } from "vitest";
+import { ExpandIcon } from "./expand-icon";
+
+describe("ExpandIcon", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("renders SVG with correct attributes", () => {
+    const { container } = render(<ExpandIcon />);
+
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute("xmlns", "http://www.w3.org/2000/svg");
+    expect(svg).toHaveAttribute("viewBox", "0 0 24 24");
+    expect(svg).toHaveAttribute("fill", "none");
+    expect(svg).toHaveAttribute("aria-hidden", "true");
+  });
+
+  test("applies additional className", () => {
+    const { container } = render(<ExpandIcon className="custom-class" />);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("custom-class");
+  });
+});
diff --git a/packages/surveys/src/components/icons/expand-icon.tsx b/packages/surveys/src/components/icons/expand-icon.tsx
new file mode 100644
index 0000000000..e2048eadff
--- /dev/null
+++ b/packages/surveys/src/components/icons/expand-icon.tsx
@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+
+interface ExpandIconProps {
+  className?: string;
+  size?: number;
+}
+
+export const ExpandIcon = ({ className = "", size = 24 }: ExpandIconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={cn("lucide lucide-expand", className)}>
+      <path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8" />
+      <path d="M3 16.2V21m0 0h4.8M3 21l6-6" />
+      <path d="M21 7.8V3m0 0h-4.8M21 3l-6 6" />
+      <path d="M3 7.8V3m0 0h4.8M3 3l6 6" />
+    </svg>
+  );
+};
diff --git a/packages/surveys/src/components/icons/image-down-icon.test.tsx b/packages/surveys/src/components/icons/image-down-icon.test.tsx
new file mode 100644
index 0000000000..76f7621373
--- /dev/null
+++ b/packages/surveys/src/components/icons/image-down-icon.test.tsx
@@ -0,0 +1,27 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render } from "@testing-library/preact";
+import { afterEach, describe, expect, test } from "vitest";
+import { ImageDownIcon } from "./image-down-icon";
+
+describe("ImageDownIcon", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("renders SVG with correct attributes", () => {
+    const { container } = render(<ImageDownIcon />);
+
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute("xmlns", "http://www.w3.org/2000/svg");
+    expect(svg).toHaveAttribute("viewBox", "0 0 24 24");
+    expect(svg).toHaveAttribute("fill", "none");
+    expect(svg).toHaveAttribute("aria-hidden", "true");
+  });
+
+  test("applies additional className", () => {
+    const { container } = render(<ImageDownIcon className="custom-class" />);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("custom-class");
+  });
+});
diff --git a/packages/surveys/src/components/icons/image-down-icon.tsx b/packages/surveys/src/components/icons/image-down-icon.tsx
new file mode 100644
index 0000000000..f0096926f5
--- /dev/null
+++ b/packages/surveys/src/components/icons/image-down-icon.tsx
@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+
+interface ImageDownIconProps {
+  className?: string;
+  size?: number;
+}
+
+export const ImageDownIcon = ({ className = "", size = 24 }: ImageDownIconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={cn("lucide lucide-image-down-icon lucide-image-down", className)}>
+      <path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21" />
+      <path d="m14 19 3 3v-5.5" />
+      <path d="m17 22 3-3" />
+      <circle cx="9" cy="9" r="2" />
+    </svg>
+  );
+};
diff --git a/packages/surveys/src/components/questions/picture-selection-question.tsx b/packages/surveys/src/components/questions/picture-selection-question.tsx
index 7574bcf749..2791ee5b6f 100644
--- a/packages/surveys/src/components/questions/picture-selection-question.tsx
+++ b/packages/surveys/src/components/questions/picture-selection-question.tsx
@@ -3,6 +3,7 @@ import { SubmitButton } from "@/components/buttons/submit-button";
 import { Headline } from "@/components/general/headline";
 import { QuestionMedia } from "@/components/general/question-media";
 import { Subheader } from "@/components/general/subheader";
+import { ImageDownIcon } from "@/components/icons/image-down-icon";
 import { ScrollableContainer } from "@/components/wrappers/scrollable-container";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getOriginalFileNameFromUrl } from "@/lib/storage";
@@ -199,23 +200,7 @@ export function PictureSelectionQuestion({
                     }}
                     className="fb-absolute fb-bottom-4 fb-right-2 fb-flex fb-items-center fb-gap-2 fb-whitespace-nowrap fb-rounded-md fb-bg-slate-800 fb-bg-opacity-40 fb-p-1.5 fb-text-white fb-backdrop-blur-lg fb-transition fb-duration-300 fb-ease-in-out hover:fb-bg-opacity-65 group-hover/image:fb-opacity-100 fb-z-20">
                     <span className="fb-sr-only">Open in new tab</span>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      aria-hidden="true"
-                      className="lucide lucide-image-down-icon lucide-image-down">
-                      <path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21" />
-                      <path d="m14 19 3 3v-5.5" />
-                      <path d="m17 22 3-3" />
-                      <circle cx="9" cy="9" r="2" />
-                    </svg>
+                    <ImageDownIcon />
                   </a>
                 </div>
               ))}