From c67312bd888cba8be813536958375153d27d0569 Mon Sep 17 00:00:00 2001
From: Ben Life <blife@yext.com>
Date: Mon, 5 Oct 2026 10:47:36 -0400
Subject: [PATCH] fix dom nesting

---
 .../assets/presetImages/AppGalleryButton.tsx          | 11 ++++++-----
 .../components/assets/presetImages/AppStoreButton.tsx | 11 ++++++-----
 .../assets/presetImages/GalaxyStoreButton.tsx         | 11 ++++++-----
 .../assets/presetImages/GooglePlayButton.tsx          | 11 ++++++-----
 4 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/packages/visual-editor/src/components/assets/presetImages/AppGalleryButton.tsx b/packages/visual-editor/src/components/assets/presetImages/AppGalleryButton.tsx
index 27803f51b2..96388d26ac 100644
--- a/packages/visual-editor/src/components/assets/presetImages/AppGalleryButton.tsx
+++ b/packages/visual-editor/src/components/assets/presetImages/AppGalleryButton.tsx
@@ -1,20 +1,21 @@
-import type { AnchorHTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
 import { cn } from "../../../utils/cn.ts";
 import { useTranslation } from "react-i18next";
 
 export const AppGalleryButton = ({
   size = "md",
   ...props
-}: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
+}: HTMLAttributes<HTMLSpanElement> & { size?: "md" | "lg" }) => {
   const { t } = useTranslation();
   return (
-    <a
+    <span
+      role="img"
       aria-label={t("ariaLabelAppGallery", "Explore it on {{serviceName}}", {
         serviceName: "AppGallery",
       })}
       {...props}
       className={cn(
-        "rounded-[7px] bg-black ring-1 ring-app-store-badge-border outline-focus-ring ring-inset focus-visible:outline-2 focus-visible:outline-offset-2",
+        "rounded-[7px] bg-black ring-1 ring-app-store-badge-border ring-inset",
         props.className
       )}
     >
@@ -123,6 +124,6 @@ export const AppGalleryButton = ({
           fill="white"
         />
       </svg>
-    </a>
+    </span>
   );
 };
diff --git a/packages/visual-editor/src/components/assets/presetImages/AppStoreButton.tsx b/packages/visual-editor/src/components/assets/presetImages/AppStoreButton.tsx
index 29e87982eb..85d73e5cc8 100644
--- a/packages/visual-editor/src/components/assets/presetImages/AppStoreButton.tsx
+++ b/packages/visual-editor/src/components/assets/presetImages/AppStoreButton.tsx
@@ -1,20 +1,21 @@
-import type { AnchorHTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
 import { cn } from "../../../utils/cn.ts";
 import { useTranslation } from "react-i18next";
 
 export const AppStoreButton = ({
   size = "md",
   ...props
-}: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
+}: HTMLAttributes<HTMLSpanElement> & { size?: "md" | "lg" }) => {
   const { t } = useTranslation();
   return (
-    <a
+    <span
+      role="img"
       aria-label={t("ariaLabelAppStore", "Download on the {{serviceName}}", {
         serviceName: "App Store",
       })}
       {...props}
       className={cn(
-        "rounded-[7px] bg-black ring-1 ring-app-store-badge-border outline-focus-ring ring-inset focus-visible:outline-2 focus-visible:outline-offset-2",
+        "rounded-[7px] bg-black ring-1 ring-app-store-badge-border ring-inset",
         props.className
       )}
     >
@@ -114,6 +115,6 @@ export const AppStoreButton = ({
           fill="white"
         />
       </svg>
-    </a>
+    </span>
   );
 };
diff --git a/packages/visual-editor/src/components/assets/presetImages/GalaxyStoreButton.tsx b/packages/visual-editor/src/components/assets/presetImages/GalaxyStoreButton.tsx
index 622441454c..665c12ba63 100644
--- a/packages/visual-editor/src/components/assets/presetImages/GalaxyStoreButton.tsx
+++ b/packages/visual-editor/src/components/assets/presetImages/GalaxyStoreButton.tsx
@@ -1,20 +1,21 @@
-import type { AnchorHTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
 import { cn } from "../../../utils/cn.ts";
 import { useTranslation } from "react-i18next";
 
 export const GalaxyStoreButton = ({
   size = "md",
   ...props
-}: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
+}: HTMLAttributes<HTMLSpanElement> & { size?: "md" | "lg" }) => {
   const { t } = useTranslation();
   return (
-    <a
+    <span
+      role="img"
       aria-label={t("ariaLabelGalaxyStore", "Available on {{serviceName}}", {
         serviceName: "Galaxy Store",
       })}
       {...props}
       className={cn(
-        "rounded-[7px] bg-black ring-1 ring-app-store-badge-border outline-focus-ring ring-inset focus-visible:outline-2 focus-visible:outline-offset-2",
+        "rounded-[7px] bg-black ring-1 ring-app-store-badge-border ring-inset",
         props.className
       )}
     >
@@ -149,6 +150,6 @@ export const GalaxyStoreButton = ({
           </radialGradient>
         </defs>
       </svg>
-    </a>
+    </span>
   );
 };
diff --git a/packages/visual-editor/src/components/assets/presetImages/GooglePlayButton.tsx b/packages/visual-editor/src/components/assets/presetImages/GooglePlayButton.tsx
index f7d0a194a1..374c94d585 100644
--- a/packages/visual-editor/src/components/assets/presetImages/GooglePlayButton.tsx
+++ b/packages/visual-editor/src/components/assets/presetImages/GooglePlayButton.tsx
@@ -1,20 +1,21 @@
-import type { AnchorHTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
 import { cn } from "../../../utils/cn.ts";
 import { useTranslation } from "react-i18next";
 
 export const GooglePlayButton = ({
   size = "md",
   ...props
-}: AnchorHTMLAttributes<HTMLAnchorElement> & { size?: "md" | "lg" }) => {
+}: HTMLAttributes<HTMLSpanElement> & { size?: "md" | "lg" }) => {
   const { t } = useTranslation();
   return (
-    <a
+    <span
+      role="img"
       aria-label={t("ariaLabelGooglePlay", "Get it on {{serviceName}}", {
         serviceName: "Google Play",
       })}
       {...props}
       className={cn(
-        "rounded-[7px] bg-black ring-1 ring-app-store-badge-border outline-focus-ring ring-inset focus-visible:outline-2 focus-visible:outline-offset-2",
+        "rounded-[7px] bg-black ring-1 ring-app-store-badge-border ring-inset",
         props.className
       )}
     >
@@ -256,6 +257,6 @@ export const GooglePlayButton = ({
           </linearGradient>
         </defs>
       </svg>
-    </a>
+    </span>
   );
 };