fix: Inconsistent icon - Picture select vs. question header image (#6409)

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>
   );

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");
+  });
+});

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>
+  );
+};

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");
+  });
+});

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>
+  );
+};

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>
               ))}