feat(i18n): use translate=no attribute in code sensitive renderings

[displague]

What/Why/How?

Adds translate="no", a W3C standard HTML attribute described at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/translate, and described in the issue linked below. This hints localization tools (Google Translate and others) to avoid translation of data/type sensitive sections of Redoc rendered OpenAPI specs. Many sites may exclude their Redoc pages from translation today because the outcome would be unpredictable. By adding translate="no" the translators and translation tools will know to leave these sections untranslated.

Reference

Fixes #2696

Tests

• npm test (unit + license check): 290 tests, 29 suites, 52 snapshots — all passing.
• npm run lint: clean (one pre-existing warning in src/components/RedocStandalone.tsx, untouched by this PR).
• npm run prettier: no changes.
• npm run ts-check: clean.
• Added src/components/__tests__/translateNo.test.tsx, which asserts the attribute in both directions: code-sensitive surfaces are marked, and Redoc-authored prose is not. Each assertion was verified to be load-bearing by stripping the attribute from the sources under test and confirming the tests fail.
• Added src/services/__tests__/mdtranslate.test.ts for the Markdown renderer, including a check that surrounding prose stays translatable.
• Manually reviewed the rendered spec (museum.yaml) via npm start.

npm run e2e was not run: @redocly/workerize-loader is listed in package.json but missing from the local install, so the standalone bundle does not boot and all 26 specs fail. I confirmed this is pre-existing and unrelated by building and running e2e on an unmodified upstream/main, which fails identically. The Markdown change wraps <pre>/<code>, so I checked Markdown/styled.elements.tsx for >/sibling selectors — all rules are descendant-based (code {}, pre {}, pre code {}), so styling is unaffected.

Screenshots (optional)

Check yourself

• Code is linted
• Tested
• All new/updated code is covered with tests

[displague]

This PR is in draft and not considered to be complete. I believe I've seen <div> used for some text elements in Redoc renderings. In the prompt for this change I hinted that likely candidates for change would be <span> elements.

I don't believe <code> needs to be decorated the same way, but we could easily add that if we can not assume translation services block those elements.

[displague]

I see the translate=no appearing in the right-side panel, the JSON example blocks, but I'm not seeing it in the left side where the descriptions are. I would appreciate any pointers.

[displague]

I'm not seeing it in the left side where the descriptions are

Found it — rebased onto latest main and pushed.

The left/description column renders through the shared styled elements in src/common-elements/fields.ts, which had no coverage at all, so nothing there was getting the attribute. Rather than annotating each call site, I applied it centrally with .attrs({ translate: 'no' }):

• TypeName — and TypeFormat, which aliases it, so <format> / <contentEncoding> / <contentMediaType> are covered too
• PatternLabel — regex patterns
• ExampleValue — default:, example:, const:, and array-form enum values
• ExtensionValue — inherits from ExampleValue
• ConstraintItem — the inline attribute from the first pass is now redundant and was dropped

Plus <td translate="no"> for the value column of the x-enumDescriptions table.

Left translatable on purpose: TypePrefix ("Array of"), TypeTitle (author-written schema title), RecursiveLabel, required/deprecated labels, and descriptions.

Two other fixes in this push:

• Field.tsx had an unrequested restructure that moved the property name and parent-name prefix out of the clickable <button> — same class of edit as the ApiInfo.tsx one flagged above. Reverted to the original structure; it now only adds the attribute.
• .redoc-json now carries translate="no" on the container, rather than relying solely on per-token spans.

276 tests pass; 5 snapshots updated to record the new attribute.

[displague]

Did a full pass over every rendering surface rather than just the <span sites the original prompt targeted. Two corrections and a set of gaps.

One false positive, removed

ConstraintItem should not be translate="no". Its content comes from humanizeConstraints() in src/utils/openapi.ts, which emits Redoc-authored English prose — non-empty, unique, >= 5 characters, [ 1 .. 10 ] items, multiple of 3, decimal places <= 2. That is UI text that should be translated. It was marked in the first pass; reverted.

The largest gap: StyledPre

src/common-elements/samples.tsx. Every Prism-highlighted sample renders through it — all request samples (curl / JS / Python), non-JSON payload and response examples, and external-example error output. Nothing in the first pass touched it; only JSON examples were covered, because those route through jsonToHTML instead.

One implementation note: StyledPre and StyledMarkdownBlock both derive from PrismDiv, so the attribute goes on StyledPre. Putting it on the shared base would have suppressed translation of every description in the document.

Other gaps closed

• Security identifiers — SecurityDetails.tsx, OAuthFlow.tsx and RequiredScopesRow.tsx used bare <code> for the API key parameter name, HTTP auth scheme, bearer format, OAuth flow type, authorization / token / refresh / connect URLs, and scope names. Plus the ScopeName styled element.
• HTTP verbs in the sidebar and callback titles — Endpoint's HttpVerb was covered but OperationBadge was not. Only the verb usages are marked: the type="hook" badge renders l('webhook') when showWebhookVerb is off, so it is marked conditionally.
• Callback names — OpenAPI runtime expressions such as {$request.body#/callbackUrl}.
• fieldParentsName prefix in Field.tsx — parent property names were rendered as bare text outside the .property-name span, so for parent.child the prefix was translated while the leaf was not.
• Response status codes (Code), media type labels (MimeLabel, both definitions), and x- extension names.
• Code inside descriptions — overrode renderer.code / renderer.codespan in MarkdownRenderer so fenced blocks and inline spans are excluded while the surrounding prose still translates. Confirmed DOMPurify preserves translate under options.sanitize before relying on this.

Deliberately left translatable

TypePrefix ("Array of"), TypeTitle, RecursiveLabel, required / optional / deprecated labels, constraints, every l() label, UnderlinedHeader section headings ("query Parameters", "Response Schema"), sidebar sidebarLabel summaries, info.title, response summaries, and descriptions.

Two judgment calls left open

TypeName is not pure code. displayType (services/models/Schema.ts) joins type keywords with the English word ' or ', and in the oneOf path embeds typePrefix and schema.title. Marking TypeName blocks translation of those too. I kept it marked, since the OAS type keywords are the code-sensitive part and the actual complaint in #2696, but splitting them properly means restructuring displayType into parts — a larger change than this PR should carry. Happy to do it here if you would prefer.

Dropdown options are mixed. The same component renders media types (code), discriminator schema titles, and example names. I marked MimeLabel, which is unambiguously media types, and left Dropdown alone rather than guess.

Verification

279 tests pass across 28 suites; 5 snapshots updated. tsc --noEmit reports no errors in src. Added src/services/__tests__/mdtranslate.test.ts for the markdown renderer, including an assertion that surrounding prose stays unmarked. I inspected the ConstraintItem snapshot diff specifically to confirm the only changes there were attribute removals on that element.

[displague]

@AlexVarchuk I compared notes (with Claude) against two other PRs in the a11n and i18n space and made some improvements here to get the PR to cover the right elements and to get it more inline with repo expectations. I'm hoping these updates and review comments are in the direction.