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

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 (

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 = () => {

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 (

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 (

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" />,
       ]}
     />
   )

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>

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

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>

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}

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

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'

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">

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">

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

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">

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}

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<{

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 && (