From e1b04ade05ae38bb08c8a1de4e2d0f1f221a0cf8 Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Mon, 16 Jun 2025 09:16:37 +0100
Subject: [PATCH] Merge pull request #25877 from
 overleaf/td-limit-browser-translate

Prevent browser translation of stuff that shouldn't be translated in project dashboard

GitOrigin-RevId: aba5d28d368277730d3bdc9aced6b9257cbd7950
---
 .../components/current-plan-widget/commons-plan.tsx    |  5 ++++-
 .../components/current-plan-widget/free-plan.tsx       |  5 ++++-
 .../components/current-plan-widget/group-plan.tsx      | 10 +++++++---
 .../components/current-plan-widget/individual-plan.tsx | 10 +++++++---
 .../components/current-plan-widget/paused-plan.tsx     |  2 +-
 .../project-list/components/sidebar/sidebar-ds-nav.tsx |  2 +-
 .../project-list/components/sidebar/tags-list.tsx      |  1 +
 .../components/table/cells/inline-tags.tsx             |  1 +
 .../components/table/cells/last-updated-cell.tsx       |  2 +-
 .../project-list/components/table/cells/owner-cell.tsx |  2 +-
 .../components/table/project-list-owner-name.tsx       |  2 +-
 .../components/table/project-list-table-row.tsx        |  4 +++-
 .../table/project-tools/buttons/tags-dropdown.tsx      |  1 +
 .../components/title/project-list-title.tsx            |  9 ++++++++-
 .../components/bootstrap-5/footer/fat-footer-base.tsx  |  2 +-
 .../ui/components/bootstrap-5/language-picker.tsx      |  2 +-
 .../ui/components/types/dropdown-menu-props.ts         |  1 +
 .../frontend/js/shared/components/material-icon.tsx    |  7 ++++++-
 18 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/services/web/frontend/js/features/project-list/components/current-plan-widget/commons-plan.tsx b/services/web/frontend/js/features/project-list/components/current-plan-widget/commons-plan.tsx
index e687c8a362..ca4cb55b64 100644
--- a/services/web/frontend/js/features/project-list/components/current-plan-widget/commons-plan.tsx
+++ b/services/web/frontend/js/features/project-list/components/current-plan-widget/commons-plan.tsx
@@ -15,7 +15,10 @@ function CommonsPlan({
 }: CommonsPlanProps) {
   const { t } = useTranslation()
   const currentPlanLabel = (
-    <Trans i18nKey="premium_plan_label" components={{ b: <strong /> }} />
+    <Trans
+      i18nKey="premium_plan_label"
+      components={{ b: <strong translate="no" /> }}
+    />
   )
 
   return (
diff --git a/services/web/frontend/js/features/project-list/components/current-plan-widget/free-plan.tsx b/services/web/frontend/js/features/project-list/components/current-plan-widget/free-plan.tsx
index fe3fb18125..feffb68598 100644
--- a/services/web/frontend/js/features/project-list/components/current-plan-widget/free-plan.tsx
+++ b/services/web/frontend/js/features/project-list/components/current-plan-widget/free-plan.tsx
@@ -10,7 +10,10 @@ type FreePlanProps = Pick<FreePlanSubscription, 'featuresPageURL'>
 function FreePlan({ featuresPageURL }: FreePlanProps) {
   const { t } = useTranslation()
   const currentPlanLabel = (
-    <Trans i18nKey="free_plan_label" components={{ b: <strong /> }} />
+    <Trans
+      i18nKey="free_plan_label"
+      components={{ b: <strong translate="no" /> }}
+    />
   )
 
   const handleClick = () => {
diff --git a/services/web/frontend/js/features/project-list/components/current-plan-widget/group-plan.tsx b/services/web/frontend/js/features/project-list/components/current-plan-widget/group-plan.tsx
index 235c34ba15..16596c5929 100644
--- a/services/web/frontend/js/features/project-list/components/current-plan-widget/group-plan.tsx
+++ b/services/web/frontend/js/features/project-list/components/current-plan-widget/group-plan.tsx
@@ -15,21 +15,25 @@ function GroupPlan({
   remainingTrialDays,
 }: GroupPlanProps) {
   const { t } = useTranslation()
+  const planNameComponent = <strong translate="no" />
   const currentPlanLabel =
     remainingTrialDays >= 0 ? (
       remainingTrialDays === 1 ? (
-        <Trans i18nKey="trial_last_day" components={{ b: <strong /> }} />
+        <Trans i18nKey="trial_last_day" components={{ b: planNameComponent }} />
       ) : (
         <Trans
           i18nKey="trial_remaining_days"
-          components={{ b: <strong /> }}
+          components={{ b: planNameComponent }}
           values={{ days: remainingTrialDays }}
           shouldUnescape
           tOptions={{ interpolation: { escapeValue: true } }}
         />
       )
     ) : (
-      <Trans i18nKey="premium_plan_label" components={{ b: <strong /> }} />
+      <Trans
+        i18nKey="premium_plan_label"
+        components={{ b: planNameComponent }}
+      />
     )
 
   return (
diff --git a/services/web/frontend/js/features/project-list/components/current-plan-widget/individual-plan.tsx b/services/web/frontend/js/features/project-list/components/current-plan-widget/individual-plan.tsx
index f0870ac12a..e4723cf718 100644
--- a/services/web/frontend/js/features/project-list/components/current-plan-widget/individual-plan.tsx
+++ b/services/web/frontend/js/features/project-list/components/current-plan-widget/individual-plan.tsx
@@ -14,21 +14,25 @@ function IndividualPlan({
   remainingTrialDays,
 }: IndividualPlanProps) {
   const { t } = useTranslation()
+  const planNameComponent = <strong translate="no" />
   const currentPlanLabel =
     remainingTrialDays >= 0 ? (
       remainingTrialDays === 1 ? (
-        <Trans i18nKey="trial_last_day" components={{ b: <strong /> }} />
+        <Trans i18nKey="trial_last_day" components={{ b: planNameComponent }} />
       ) : (
         <Trans
           i18nKey="trial_remaining_days"
-          components={{ b: <strong /> }}
+          components={{ b: planNameComponent }}
           values={{ days: remainingTrialDays }}
           shouldUnescape
           tOptions={{ interpolation: { escapeValue: true } }}
         />
       )
     ) : (
-      <Trans i18nKey="premium_plan_label" components={{ b: <strong /> }} />
+      <Trans
+        i18nKey="premium_plan_label"
+        components={{ b: planNameComponent }}
+      />
     )
 
   return (
diff --git a/services/web/frontend/js/features/project-list/components/current-plan-widget/paused-plan.tsx b/services/web/frontend/js/features/project-list/components/current-plan-widget/paused-plan.tsx
index a501731b18..f282800c61 100644
--- a/services/web/frontend/js/features/project-list/components/current-plan-widget/paused-plan.tsx
+++ b/services/web/frontend/js/features/project-list/components/current-plan-widget/paused-plan.tsx
@@ -13,7 +13,7 @@ function PausedPlan({ subscriptionPageUrl }: PausedPlanProps) {
       i18nKey="your_premium_plan_is_paused"
       components={[
         // eslint-disable-next-line react/jsx-key
-        <strong />,
+        <strong translate="no" />,
       ]}
     />
   )
diff --git a/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx b/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx
index 2aaed364a7..eba033ea76 100644
--- a/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx
+++ b/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx
@@ -154,7 +154,7 @@ function SidebarDsNav() {
             </>
           )}
         </div>
-        <div className="ds-nav-ds-name">
+        <div className="ds-nav-ds-name" translate="no">
           <span>Digital Science</span>
         </div>
       </div>
diff --git a/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx b/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
index 452b003b2b..1c6298603c 100644
--- a/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
+++ b/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
@@ -57,6 +57,7 @@ export default function TagsList() {
             <button
               type="button"
               className="tag-name"
+              translate="no"
               onClick={e =>
                 handleSelectTag(e as unknown as React.MouseEvent, tag._id)
               }
diff --git a/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx b/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx
index b3b6fec9cb..26ca42bac3 100644
--- a/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx
@@ -57,6 +57,7 @@ function InlineTag({ tag, projectId }: InlineTagProps) {
         onClick: () => handleRemoveTag(tag._id, projectId),
       }}
       className="ms-2"
+      translate="no"
     >
       {tag.name}
     </Tag>
diff --git a/services/web/frontend/js/features/project-list/components/table/cells/last-updated-cell.tsx b/services/web/frontend/js/features/project-list/components/table/cells/last-updated-cell.tsx
index b6417e92d4..6e7ada6a28 100644
--- a/services/web/frontend/js/features/project-list/components/table/cells/last-updated-cell.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/cells/last-updated-cell.tsx
@@ -19,7 +19,7 @@ export default function LastUpdatedCell({ project }: LastUpdatedCellProps) {
       overlayProps={{ placement: 'top', trigger: ['hover', 'focus'] }}
     >
       {project.lastUpdatedBy ? (
-        <span>
+        <span translate="no">
           <LastUpdatedBy
             lastUpdatedBy={project.lastUpdatedBy}
             lastUpdatedDate={lastUpdatedDate}
diff --git a/services/web/frontend/js/features/project-list/components/table/cells/owner-cell.tsx b/services/web/frontend/js/features/project-list/components/table/cells/owner-cell.tsx
index b72350cf14..4795c1da2f 100644
--- a/services/web/frontend/js/features/project-list/components/table/cells/owner-cell.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/cells/owner-cell.tsx
@@ -47,7 +47,7 @@ export default function OwnerCell({ project }: OwnerCellProps) {
 
   return (
     <>
-      {ownerName === 'You' ? t('you') : ownerName}
+      <span translate="no">{ownerName === 'You' ? t('you') : ownerName}</span>
       {project.source === 'token' && (
         <LinkSharingIcon project={project} prependSpace={!!project.owner} />
       )}
diff --git a/services/web/frontend/js/features/project-list/components/table/project-list-owner-name.tsx b/services/web/frontend/js/features/project-list/components/table/project-list-owner-name.tsx
index 8f056249ab..faff041fa8 100644
--- a/services/web/frontend/js/features/project-list/components/table/project-list-owner-name.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/project-list-owner-name.tsx
@@ -7,7 +7,7 @@ export const ProjectListOwnerName = memo<{ ownerName: string }>(
 
     const x = ownerName === 'You' ? t('you') : ownerName
 
-    return <> — {t('owned_by_x', { x })}</>
+    return <span translate="no"> — {t('owned_by_x', { x })}</span>
   }
 )
 ProjectListOwnerName.displayName = 'ProjectListOwnerName'
diff --git a/services/web/frontend/js/features/project-list/components/table/project-list-table-row.tsx b/services/web/frontend/js/features/project-list/components/table/project-list-table-row.tsx
index 70a13b4a8c..87e2880022 100644
--- a/services/web/frontend/js/features/project-list/components/table/project-list-table-row.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/project-list-table-row.tsx
@@ -22,7 +22,9 @@ function ProjectListTableRow({ project, selected }: ProjectListTableRowProps) {
         <ProjectCheckbox projectId={project.id} projectName={project.name} />
       </td>
       <td className="dash-cell-name">
-        <a href={`/project/${project.id}`}>{project.name}</a>{' '}
+        <a href={`/project/${project.id}`} translate="no">
+          {project.name}
+        </a>{' '}
         <InlineTags className="d-none d-md-inline" projectId={project.id} />
       </td>
       <td className="dash-cell-date-owner pb-0 d-md-none">
diff --git a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx b/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx
index 06dd9b8ff3..19b4eb0a8a 100644
--- a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx
@@ -111,6 +111,7 @@ function TagsDropdown() {
                     <DropdownItem.EmptyLeadingIcon />
                   )
                 }
+                translate="no"
               >
                 <div className="badge-tag-content">
                   <span className="badge-prepend">
diff --git a/services/web/frontend/js/features/project-list/components/title/project-list-title.tsx b/services/web/frontend/js/features/project-list/components/title/project-list-title.tsx
index 97b4fdb457..c562831977 100644
--- a/services/web/frontend/js/features/project-list/components/title/project-list-title.tsx
+++ b/services/web/frontend/js/features/project-list/components/title/project-list-title.tsx
@@ -16,9 +16,11 @@ function ProjectListTitle({
 }) {
   const { t } = useTranslation()
   let message = t('projects')
+  let extraProps = {}
 
   if (selectedTag) {
     message = `${selectedTag.name}`
+    extraProps = { translate: 'no' }
   } else if (selectedTagId === UNCATEGORIZED_KEY) {
     message = t('uncategorized_projects')
   } else {
@@ -42,7 +44,12 @@ function ProjectListTitle({
   }
 
   return (
-    <div className={classnames('project-list-title', className)}>{message}</div>
+    <div
+      className={classnames('project-list-title', className)}
+      {...extraProps}
+    >
+      {message}
+    </div>
   )
 }
 
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer-base.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer-base.tsx
index dd85660ffd..f2fd7e3a82 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer-base.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer-base.tsx
@@ -26,7 +26,7 @@ function FatFooterBase() {
     <footer className="fat-footer-base">
       <div className="fat-footer-base-section fat-footer-base-meta">
         <div className="fat-footer-base-item">
-          <div className="fat-footer-base-copyright">
+          <div className="fat-footer-base-copyright" translate="no">
             © {currentYear} Overleaf
           </div>
           <FooterBaseLink href="/legal">
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/language-picker.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/language-picker.tsx
index 0ae53c807c..ccda7abc6f 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/language-picker.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/language-picker.tsx
@@ -49,7 +49,7 @@ function LanguagePicker({ showHeader } = { showHeader: false }) {
               return null
             const isActive = subdomainDetails.lngCode === currentLangCode
             return (
-              <li role="none" key={subdomain}>
+              <li role="none" key={subdomain} translate="no">
                 <DropdownItem
                   href={`${subdomainDetails.url}${currentUrlWithQueryParams}`}
                   active={isActive}
diff --git a/services/web/frontend/js/features/ui/components/types/dropdown-menu-props.ts b/services/web/frontend/js/features/ui/components/types/dropdown-menu-props.ts
index bd7db127b7..0cdbe4fba6 100644
--- a/services/web/frontend/js/features/ui/components/types/dropdown-menu-props.ts
+++ b/services/web/frontend/js/features/ui/components/types/dropdown-menu-props.ts
@@ -46,6 +46,7 @@ export type DropdownItemProps = PropsWithChildren<{
   target?: string
   download?: boolean | string
   rel?: string
+  translate?: React.HTMLAttributes<HTMLElement>['translate']
 }>
 
 export type DropdownToggleProps = PropsWithChildren<{
diff --git a/services/web/frontend/js/shared/components/material-icon.tsx b/services/web/frontend/js/shared/components/material-icon.tsx
index 43a789b498..be351d16bb 100644
--- a/services/web/frontend/js/shared/components/material-icon.tsx
+++ b/services/web/frontend/js/shared/components/material-icon.tsx
@@ -38,7 +38,12 @@ function MaterialIcon({
 
   return (
     <>
-      <span className={iconClassName} aria-hidden="true" {...rest}>
+      <span
+        className={iconClassName}
+        aria-hidden="true"
+        translate="no"
+        {...rest}
+      >
         {type}
       </span>
       {accessibilityLabel && (