From e73f13a76f21fd725291013782750b064f33de43 Mon Sep 17 00:00:00 2001
From: adyh <adyharold+posthog@gmail.com>
Date: Fri, 16 Aug 2024 11:46:52 +0100
Subject: [PATCH 1/3] fix(surveys): #23937 disables interactivity on templates,
 fixes click targets

---
 frontend/src/custom.d.ts                      |  8 +++++
 .../src/scenes/surveys/SurveyTemplates.scss   |  6 ++++
 .../src/scenes/surveys/SurveyTemplates.tsx    | 35 +++++++++++--------
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/frontend/src/custom.d.ts b/frontend/src/custom.d.ts
index 9d12347aede4d..712dd070fbade 100644
--- a/frontend/src/custom.d.ts
+++ b/frontend/src/custom.d.ts
@@ -1,3 +1,5 @@
+import 'react'
+
 // This fixes TS errors when importing a .svg file
 declare module '*.svg' {
     const content: any
@@ -21,3 +23,9 @@ declare module '*.lottie' {
     const content: any
     export default content
 }
+
+declare module 'react' {
+    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+        inert?: ''
+    }
+}
diff --git a/frontend/src/scenes/surveys/SurveyTemplates.scss b/frontend/src/scenes/surveys/SurveyTemplates.scss
index 29dd242f597e7..daaec9f49470b 100644
--- a/frontend/src/scenes/surveys/SurveyTemplates.scss
+++ b/frontend/src/scenes/surveys/SurveyTemplates.scss
@@ -14,7 +14,13 @@
         border-color: var(--primary-3000-hover);
     }
 
+    &:focus {
+        border-color: var(--primary-3000-hover);
+        outline: none;
+    }
+
     .SurveyTemplate {
+        pointer-events: none;
         transform: scale(0.8, 0.8);
     }
 }
diff --git a/frontend/src/scenes/surveys/SurveyTemplates.tsx b/frontend/src/scenes/surveys/SurveyTemplates.tsx
index 1b63a1a9cb52a..0d3c35c53037a 100644
--- a/frontend/src/scenes/surveys/SurveyTemplates.tsx
+++ b/frontend/src/scenes/surveys/SurveyTemplates.tsx
@@ -33,27 +33,32 @@ export function SurveyTemplates(): JSX.Element {
             <div className="flex flex-row flex-wrap gap-8 mt-8">
                 {defaultSurveyTemplates.map((template, idx) => {
                     return (
-                        <div
-                            className="flex flex-col items-center"
-                            data-attr="survey-template"
-                            key={idx}
-                            onClick={() => {
-                                setSurveyTemplateValues({
-                                    name: template.templateType,
-                                    questions: template.questions,
-                                    appearance: { ...defaultSurveyAppearance, ...template.appearance },
-                                })
-                                reportSurveyTemplateClicked(template.templateType)
-                            }}
-                        >
+                        <div className="flex flex-col items-center" key={idx}>
                             <span className="text-md">
                                 <b>{template.templateType}</b>
                             </span>
                             <span className="flex flex-wrap text-xs text-muted max-w-80 font-medium mb-3">
                                 {template.description}
                             </span>
-                            <div className="SurveyTemplateContainer">
-                                <div className="SurveyTemplate">
+                            <div
+                                className="SurveyTemplateContainer"
+                                tabIndex={idx}
+                                data-attr="survey-template"
+                                onClick={() => {
+                                    setSurveyTemplateValues({
+                                        name: template.templateType,
+                                        questions: template.questions,
+                                        appearance: { ...defaultSurveyAppearance, ...template.appearance },
+                                    })
+                                    reportSurveyTemplateClicked(template.templateType)
+                                }}
+                                onKeyDown={(event) => {
+                                    if (event.key === 'Enter') {
+                                        event.currentTarget.click()
+                                    }
+                                }}
+                            >
+                                <div className="SurveyTemplate" inert="">
                                     <SurveyAppearancePreview
                                         key={idx}
                                         survey={

From c5ae10adc7ef91fa82eb7dd35e0df6e932dc01b2 Mon Sep 17 00:00:00 2001
From: adyh <adyharold+posthog@gmail.com>
Date: Fri, 16 Aug 2024 14:04:37 +0100
Subject: [PATCH 2/3] fix(surveys): #23937 updates tabIndex to 0

---
 frontend/src/scenes/surveys/SurveyTemplates.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/scenes/surveys/SurveyTemplates.tsx b/frontend/src/scenes/surveys/SurveyTemplates.tsx
index 0d3c35c53037a..d24713f9b877f 100644
--- a/frontend/src/scenes/surveys/SurveyTemplates.tsx
+++ b/frontend/src/scenes/surveys/SurveyTemplates.tsx
@@ -42,7 +42,7 @@ export function SurveyTemplates(): JSX.Element {
                             </span>
                             <div
                                 className="SurveyTemplateContainer"
-                                tabIndex={idx}
+                                tabIndex={0}
                                 data-attr="survey-template"
                                 onClick={() => {
                                     setSurveyTemplateValues({

From 26403c6476acdbf2ba95a0379d208a4b6d44ebc3 Mon Sep 17 00:00:00 2001
From: adyh <adyharold+posthog@gmail.com>
Date: Tue, 20 Aug 2024 11:17:11 +0100
Subject: [PATCH 3/3] #23937 reverts inert attribute

---
 frontend/src/custom.d.ts                        | 8 --------
 frontend/src/scenes/surveys/SurveyTemplates.tsx | 4 ++--
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/frontend/src/custom.d.ts b/frontend/src/custom.d.ts
index 712dd070fbade..9d12347aede4d 100644
--- a/frontend/src/custom.d.ts
+++ b/frontend/src/custom.d.ts
@@ -1,5 +1,3 @@
-import 'react'
-
 // This fixes TS errors when importing a .svg file
 declare module '*.svg' {
     const content: any
@@ -23,9 +21,3 @@ declare module '*.lottie' {
     const content: any
     export default content
 }
-
-declare module 'react' {
-    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
-        inert?: ''
-    }
-}
diff --git a/frontend/src/scenes/surveys/SurveyTemplates.tsx b/frontend/src/scenes/surveys/SurveyTemplates.tsx
index d24713f9b877f..266bac2bfcbef 100644
--- a/frontend/src/scenes/surveys/SurveyTemplates.tsx
+++ b/frontend/src/scenes/surveys/SurveyTemplates.tsx
@@ -42,7 +42,7 @@ export function SurveyTemplates(): JSX.Element {
                             </span>
                             <div
                                 className="SurveyTemplateContainer"
-                                tabIndex={0}
+                                tabIndex={idx + 1}
                                 data-attr="survey-template"
                                 onClick={() => {
                                     setSurveyTemplateValues({
@@ -58,7 +58,7 @@ export function SurveyTemplates(): JSX.Element {
                                     }
                                 }}
                             >
-                                <div className="SurveyTemplate" inert="">
+                                <div className="SurveyTemplate">
                                     <SurveyAppearancePreview
                                         key={idx}
                                         survey={