fix: link input length and accessibility error (#6283)

Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/disable-link-modal.tsx

@@ -5,6 +5,7 @@ import {
   DialogContent,
   DialogFooter,
   DialogHeader,
+  DialogTitle,
 } from "@/modules/ui/components/dialog";
 import { useTranslate } from "@tolgee/react";
 
@@ -21,10 +22,12 @@ export const DisableLinkModal = ({ open, onOpenChange, type, onDisable }: Disabl
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent width="narrow" className="flex flex-col" hideCloseButton disableCloseOnOutsideClick>
-        <DialogHeader className="text-sm font-medium text-slate-900">
-          {type === "multi-use"
-            ? t("environments.surveys.share.anonymous_links.disable_multi_use_link_modal_title")
-            : t("common.are_you_sure")}
+        <DialogHeader>
+          <DialogTitle className="text-sm font-medium text-slate-900">
+            {type === "multi-use"
+              ? t("environments.surveys.share.anonymous_links.disable_multi_use_link_modal_title")
+              : t("common.are_you_sure")}
+          </DialogTitle>
         </DialogHeader>
 
         <DialogBody>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/success-view.tsx

@@ -43,6 +43,7 @@ export const SuccessView: React.FC<SuccessViewProps> = ({
             publicDomain={publicDomain}
             setSurveyUrl={setSurveyUrl}
             locale={user.locale}
+            enforceSurveyUrlWidth
           />
         </div>
       )}

apps/web/modules/analysis/components/ShareSurveyLink/components/SurveyLinkDisplay.tsx

@@ -1,25 +1,37 @@
+import { cn } from "@/lib/cn";
 import { Input } from "@/modules/ui/components/input";
 
 interface SurveyLinkDisplayProps {
   surveyUrl: string;
+  enforceSurveyUrlWidth?: boolean;
 }
 
-export const SurveyLinkDisplay = ({ surveyUrl }: SurveyLinkDisplayProps) => {
+export const SurveyLinkDisplay = ({ surveyUrl, enforceSurveyUrlWidth = false }: SurveyLinkDisplayProps) => {
   return (
     <>
       {surveyUrl ? (
         <Input
           data-testid="survey-url-input"
-          autoFocus={true}
-          className="h-9 w-full text-ellipsis rounded-lg border bg-white px-3 py-1 text-slate-800 caret-transparent"
+          className={cn(
+            "h-9 w-full text-ellipsis rounded-lg border bg-white px-3 py-1 text-slate-800 caret-transparent",
+            {
+              "min-w-96": enforceSurveyUrlWidth,
+            }
+          )}
           value={surveyUrl}
           readOnly
+          aria-label="Survey URL"
         />
       ) : (
         //loading state
         <div
           data-testid="loading-div"
-          className="h-9 w-full min-w-96 animate-pulse rounded-lg bg-slate-100 px-3 py-1 text-slate-800 caret-transparent"
+          className={cn(
+            "h-9 w-full animate-pulse rounded-lg bg-slate-100 px-3 py-1 text-slate-800 caret-transparent",
+            {
+              "min-w-96": enforceSurveyUrlWidth,
+            }
+          )}
         />
       )}
     </>

apps/web/modules/analysis/components/ShareSurveyLink/index.tsx

@@ -17,6 +17,7 @@ interface ShareSurveyLinkProps {
   surveyUrl: string;
   setSurveyUrl: (url: string) => void;
   locale: TUserLocale;
+  enforceSurveyUrlWidth?: boolean;
 }
 
 export const ShareSurveyLink = ({
@@ -25,6 +26,7 @@ export const ShareSurveyLink = ({
   publicDomain,
   setSurveyUrl,
   locale,
+  enforceSurveyUrlWidth = false,
 }: ShareSurveyLinkProps) => {
   const { t } = useTranslate();
 
@@ -50,8 +52,12 @@ export const ShareSurveyLink = ({
   };
 
   return (
-    <div className={"flex max-w-full flex-col items-center justify-center gap-2 md:flex-row"}>
-      <SurveyLinkDisplay surveyUrl={surveyUrl} key={surveyUrl} />
+    <div className={"flex max-w-full items-center justify-center gap-2"}>
+      <SurveyLinkDisplay
+        surveyUrl={surveyUrl}
+        key={surveyUrl}
+        enforceSurveyUrlWidth={enforceSurveyUrlWidth}
+      />
       <div className="flex items-center justify-center space-x-2">
         <LanguageDropdown survey={survey} setLanguage={handleLanguageChange} locale={locale} />
         <Button