feat: use translate=no attribute in code sensitive renderings

Signed-off-by: Marques Johansson <[email protected]>

Author: displague

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>
@@ -82,11 +82,12 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
                 {downloadUrls?.map(({ title, url }) => {
                   return (
                     <DownloadButton
-                      download={downloadFileName || true}
-                      target="_blank"
-                      href={url}
-                      rel="noreferrer"
                       key={url}
+                      href={url}
+                      download={downloadFileName}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      translate="no"
                     >
                       {title}
                     </DownloadButton>

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 === '/'
                               ? ''

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

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

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>

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(',');