From 8199abf46e09db9e3aad32b5a1d0be5751ef4b51 Mon Sep 17 00:00:00 2001
From: Marques Johansson <marques@displague.com>
Date: Thu, 5 Jun 2025 19:53:26 +0000
Subject: [PATCH] feat: use translate=no attribute in code sensitive renderings

Signed-off-by: Marques Johansson <marques@displague.com>
---
 src/components/ApiInfo/ApiInfo.tsx                 |  2 +-
 src/components/Endpoint/Endpoint.tsx               |  6 +++---
 src/components/Fields/Field.tsx                    | 12 ++++++------
 src/components/Fields/FieldConstraints.tsx         |  2 +-
 src/components/SecuritySchemes/SecuritySchemes.tsx |  2 +-
 src/utils/jsonToHtml.ts                            |  6 +++---
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/ApiInfo/ApiInfo.tsx b/src/components/ApiInfo/ApiInfo.tsx
index 75e00438..dc22feb2 100644
--- a/src/components/ApiInfo/ApiInfo.tsx
+++ b/src/components/ApiInfo/ApiInfo.tsx
@@ -67,7 +67,7 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
       )) ||
       null;
 
-    const version = (info.version && <span>({info.version})</span>) || null;
+    const version = (info.version && <span translate="no">({info.version})</span>) || null;
 
     return (
       <Section>
diff --git a/src/components/Endpoint/Endpoint.tsx b/src/components/Endpoint/Endpoint.tsx
index 96eca646..232fb4b8 100644
--- a/src/components/Endpoint/Endpoint.tsx
+++ b/src/components/Endpoint/Endpoint.tsx
@@ -50,10 +50,10 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
         {options => (
           <OperationEndpointWrap>
             <EndpointInfo onClick={this.toggle} $expanded={expanded} $inverted={inverted}>
-              <HttpVerb type={operation.httpVerb} $compact={this.props.compact}>
+              <HttpVerb type={operation.httpVerb} $compact={this.props.compact} translate="no">
                 {operation.httpVerb}
               </HttpVerb>
-              <ServerRelativeURL>{operation.path}</ServerRelativeURL>
+              <ServerRelativeURL translate="no">{operation.path}</ServerRelativeURL>
               <ShelfIcon
                 float={'right'}
                 color={inverted ? 'black' : 'white'}
@@ -73,7 +73,7 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
                     <Markdown source={server.description || ''} compact={true} />
                     <SelectOnClick>
                       <ServerUrl>
-                        <span>
+                        <span translate="no">
                           {hideHostname || options.hideHostname
                             ? basePath === '/'
                               ? ''
diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx
index 8ac4ef7c..6ed38edd 100644
--- a/src/components/Fields/Field.tsx
+++ b/src/components/Fields/Field.tsx
@@ -80,13 +80,13 @@ export class Field extends React.Component<FieldProps> {
           onKeyPress={this.handleKeyPress}
           aria-label={`expand ${name}`}
         >
-          {!hidePropertiesPrefix &&
-            fieldParentsName.map(
-              name => name + '.\u200B', // zero-width space, a special character is used for correct line breaking
-            )}
-          <span className="property-name">{name}</span>
           <ShelfIcon direction={expanded ? 'down' : 'right'} />
         </button>
+        {!hidePropertiesPrefix &&
+          fieldParentsName.map(
+            name => name + '.\u200B', // zero-width space, a special character is used for correct line breaking
+          )}
+        <span className="property-name" translate="no">{name}</span>
         {labels}
       </ClickablePropertyNameCell>
     ) : (
@@ -96,7 +96,7 @@ export class Field extends React.Component<FieldProps> {
           fieldParentsName.map(
             name => name + '.\u200B', // zero-width space, a special character is used for correct line breaking
           )}
-        <span className="property-name">{name}</span>
+        <span className="property-name" translate="no">{name}</span>
         {labels}
       </PropertyNameCell>
     );
diff --git a/src/components/Fields/FieldConstraints.tsx b/src/components/Fields/FieldConstraints.tsx
index c92e8f5c..367a8ae2 100644
--- a/src/components/Fields/FieldConstraints.tsx
+++ b/src/components/Fields/FieldConstraints.tsx
@@ -14,7 +14,7 @@ export class ConstraintsView extends React.PureComponent<ConstraintsViewProps> {
       <span>
         {' '}
         {this.props.constraints.map(constraint => (
-          <ConstraintItem key={constraint}> {constraint} </ConstraintItem>
+          <ConstraintItem key={constraint} translate="no"> {constraint} </ConstraintItem>
         ))}
       </span>
     );
diff --git a/src/components/SecuritySchemes/SecuritySchemes.tsx b/src/components/SecuritySchemes/SecuritySchemes.tsx
index 34a92ada..eb2e2cf7 100644
--- a/src/components/SecuritySchemes/SecuritySchemes.tsx
+++ b/src/components/SecuritySchemes/SecuritySchemes.tsx
@@ -31,7 +31,7 @@ export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
             <SecurityDetailsStyle>
               <SecurityRow>
                 <b>Security Scheme Type: </b>
-                <span>{AUTH_TYPES[scheme.type] || scheme.type}</span>
+                <span translate="no">{AUTH_TYPES[scheme.type] || scheme.type}</span>
               </SecurityRow>
               <SecurityDetails scheme={scheme} />
             </SecurityDetailsStyle>
diff --git a/src/utils/jsonToHtml.ts b/src/utils/jsonToHtml.ts
index 3db6cd91..a5143492 100644
--- a/src/utils/jsonToHtml.ts
+++ b/src/utils/jsonToHtml.ts
@@ -27,11 +27,11 @@ function stringifyStringLiteral(str: string) {
 }
 
 function decorateWithSpan(value, className) {
-  return '<span class="' + className + '">' + htmlEncode(value) + '</span>';
+  return '<span class="' + className + '" translate="no">' + htmlEncode(value) + '</span>';
 }
 
 function punctuation(val) {
-  return '<span class="token punctuation">' + val + '</span>';
+  return '<span class="token punctuation" translate="no">' + val + '</span>';
 }
 
 function valueToHTML(value, maxExpandLevel: number) {
@@ -106,7 +106,7 @@ function objectToHTML(json, maxExpandLevel: number) {
     const key = keys[i];
     hasContents = true;
     output += '<li><div class="hoverable ' + collapsed + '">';
-    output += '<span class="property token string">"' + htmlEncode(key) + '"</span>: ';
+    output += '<span class="property token string" translate="no">"' + htmlEncode(key) + '"</span>: ';
     output += valueToHTML(json[key], maxExpandLevel);
     if (i < length - 1) {
       output += punctuation(',');