From 9dc61c254bc8cf3266bdf0bb7ebd6c15b14bbf8d Mon Sep 17 00:00:00 2001
From: Ridwan Sanusi <ridwan.sanusi@temporal.io>
Date: Fri, 12 Jun 2026 10:40:14 -0400
Subject: [PATCH 1/2] =?UTF-8?q?[a11y]=20WCAG=204.1.2=20=E2=80=94=20require?=
 =?UTF-8?q?=20label=20on=20CodeBlock;=20add=20aria-readonly=20for=20read-o?=
 =?UTF-8?q?nly=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Makes the `label` prop required on the CodeBlock primitive so every
CodeMirror instance gets an accessible name via `aria-label` on the
`.cm-content` element. Adds `aria-readonly="true"` when `editable=false`
so AT correctly conveys non-editability (JAWS forms-mode fix). Adds a
dev-time `onMount` guard that throws if label is empty after mount.

Migrates all ~28 affected files: primitive, 4 domain wrappers
(PayloadCodeBlock, PayloadInput, InputAndResultsPayload,
PayloadInputWithEncoding), and ~22 direct consumers across Workflow
History, Queries, Schedules, Activities, Events, Workers, and Archival.

Also fixes the PayloadInput orphaned <Label for> association (§NEW1):
replaces <Label for={id}> with <span> and forwards label to the inner
CodeBlock so the accessible name is set on the cm-content element rather
than a wrapper div that for= can't reach.

New i18n keys: common.json, events.import-format-{1,2},
standalone-activities.{activity-input,activity-outcome,cluster-config,
namespace-config}, workers.{heartbeat-config,setup-guide-command},
workflows.{query-result,callback-metadata,update-input,update-result}.

A11y-Audit-Ref: 4.1.2-codemirror-no-name

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/components/event/event-card.svelte    |  3 +++
 .../workflow-error-stack-trace.svelte         |  3 +++
 .../payload-input-with-encoding.svelte        |  2 +-
 src/lib/components/payload-input.svelte       |  4 ++--
 .../payload/payload-code-block.svelte         | 14 ++++++++++++-
 .../schedules-calendar-view.svelte            |  1 +
 .../schedule/schedule-frequency-panel.svelte  |  8 ++++++-
 .../activity-input-and-outcome.svelte         | 21 +++++++++++++++----
 .../standalone-activities-disabled.svelte     | 12 +++++++++--
 .../workers/worker-heartbeats-disabled.svelte |  6 +++++-
 .../update-confirmation-modal.svelte          |  6 +++++-
 .../workflow/input-and-results-payload.svelte |  2 ++
 .../workflow/pending-activities.svelte        |  2 ++
 .../pending-activity-card.svelte              |  8 ++++++-
 .../pending-nexus-operation-card.svelte       |  4 ++++
 .../workflow/workflow-callback.svelte         |  1 +
 .../workflow/workflow-json-navigator.svelte   |  7 ++++++-
 src/lib/holocene/code-block.svelte            | 19 ++++++++++++++---
 src/lib/i18n/locales/en/common.ts             |  1 +
 src/lib/i18n/locales/en/events.ts             |  2 ++
 .../i18n/locales/en/standalone-activities.ts  |  4 ++++
 src/lib/i18n/locales/en/workers.ts            |  1 +
 src/lib/i18n/locales/en/workflows.ts          |  4 ++++
 src/lib/pages/import-events.svelte            |  2 ++
 .../pages/standalone-activity-details.svelte  | 12 +++++++++--
 ...andalone-activity-search-attributes.svelte |  5 ++++-
 src/lib/pages/workflow-call-stack.svelte      |  1 +
 src/lib/pages/workflow-memo.svelte            |  2 +-
 src/lib/pages/workflow-metadata.svelte        | 10 +++++++--
 src/lib/pages/workflow-query.svelte           |  1 +
 .../pages/workflow-search-attributes.svelte   |  5 ++++-
 .../[namespace]/archival/+page.svelte         |  3 +++
 32 files changed, 151 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/event/event-card.svelte b/src/lib/components/event/event-card.svelte
index faf16e87be..883fe52225 100644
--- a/src/lib/components/event/event-card.svelte
+++ b/src/lib/components/event/event-card.svelte
@@ -189,6 +189,7 @@
           eventId: event.id,
           type: key,
         }}
+        label={format(key)}
         {value}
         maxHeight={384}
       />
@@ -200,6 +201,7 @@
           eventId: event.id,
           type: key,
         }}
+        label={format(key)}
         value={codeBlockValue}
         maxHeight={384}
       />
@@ -214,6 +216,7 @@
         copyIconTitle={translate('common.copy-icon-title')}
         copySuccessIconTitle={translate('common.copy-success-icon-title')}
         content={stackTrace}
+        label={translate('workflows.call-stack-tab')}
         language="text"
         maxHeight={384}
       />
diff --git a/src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte b/src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte
index bcc21f1365..2de1e3e948 100644
--- a/src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte
+++ b/src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte
@@ -22,6 +22,7 @@
       <p>{translate('common.message')}</p>
       <CodeBlock
         content={failure?.message || ''}
+        label={translate('common.message')}
         language="text"
         copyIconTitle={translate('common.copy-icon-title')}
         copySuccessIconTitle={translate('common.copy-success-icon-title')}
@@ -30,6 +31,7 @@
         <p>{translate('common.source')}</p>
         <CodeBlock
           content={failure.source}
+          label={translate('common.source')}
           language="text"
           copyIconTitle={translate('common.copy-icon-title')}
           copySuccessIconTitle={translate('common.copy-success-icon-title')}
@@ -39,6 +41,7 @@
         <p>{translate('common.stack-trace')}</p>
         <CodeBlock
           content={failure.stackTrace}
+          label={translate('common.stack-trace')}
           language="text"
           copyIconTitle={translate('common.copy-icon-title')}
           copySuccessIconTitle={translate('common.copy-success-icon-title')}
diff --git a/src/lib/components/payload-input-with-encoding.svelte b/src/lib/components/payload-input-with-encoding.svelte
index 26eddb5599..70ed62d1f6 100644
--- a/src/lib/components/payload-input-with-encoding.svelte
+++ b/src/lib/components/payload-input-with-encoding.svelte
@@ -29,7 +29,7 @@
 <div>
   <h5 class="pb-1 text-sm font-medium">{label}</h5>
   <Card class="flex flex-col gap-2">
-    <PayloadInput bind:input bind:loading {error} {id} {editing} />
+    <PayloadInput bind:input bind:loading {error} {id} {editing} {label} />
     <div
       class="flex items-end gap-2 {editing ? 'justify-between' : 'justify-end'}"
     >
diff --git a/src/lib/components/payload-input.svelte b/src/lib/components/payload-input.svelte
index cd40d9da21..8e652425c1 100644
--- a/src/lib/components/payload-input.svelte
+++ b/src/lib/components/payload-input.svelte
@@ -3,7 +3,6 @@
 
   import CodeBlock from '$lib/holocene/code-block.svelte';
   import FileInput from '$lib/holocene/file-input.svelte';
-  import Label from '$lib/holocene/label.svelte';
   import Tooltip from '$lib/holocene/tooltip.svelte';
   import { translate } from '$lib/i18n/translate';
 
@@ -62,13 +61,14 @@
 </script>
 
 <div class="flex flex-col gap-2">
-  <Label for={id} {label} />
+  <span class="text-sm font-medium">{label}</span>
   <div class="flex gap-2">
     {#key [loading, editing]}
       <CodeBlock
         {id}
         maxHeight={320}
         content={input}
+        {label}
         onchange={handleInputChange}
         editable={editing}
         copyable={false}
diff --git a/src/lib/components/payload/payload-code-block.svelte b/src/lib/components/payload/payload-code-block.svelte
index 3a70f49b4f..6b2d7c72a4 100644
--- a/src/lib/components/payload/payload-code-block.svelte
+++ b/src/lib/components/payload/payload-code-block.svelte
@@ -35,12 +35,19 @@
 
   interface Props {
     value: Payload | Payloads | PayloadContainingObject;
+    label: string;
     maxHeight?: number;
     testId?: string;
     filenameData?: PayloadDownloadFilenameData;
   }
 
-  let { value, maxHeight, testId, filenameData = undefined }: Props = $props();
+  let {
+    value,
+    label,
+    maxHeight,
+    testId,
+    filenameData = undefined,
+  }: Props = $props();
 
   let downloadError: string | undefined = $state(undefined);
   let downloadLoading: boolean = $state(false);
@@ -92,6 +99,7 @@
   {#snippet loading()}
     <CodeBlock
       content={stringifyWithBigInt(value)}
+      {label}
       {maxHeight}
       copyIconTitle={translate('common.copy-icon-title')}
       copySuccessIconTitle={translate('common.copy-success-icon-title')}
@@ -108,6 +116,7 @@
           )}
           <CodeBlock
             content={stringifyWithBigInt(result.decodedValue.data)}
+            {label}
             {maxHeight}
             copyIconTitle={translate('common.copy-icon-title')}
             copySuccessIconTitle={translate('common.copy-success-icon-title')}
@@ -152,6 +161,7 @@
         {:else if isParsedPayload(result.decodedValue)}
           <CodeBlock
             content={stringifyWithBigInt(result.decodedValue.data)}
+            {label}
             {maxHeight}
             copyIconTitle={translate('common.copy-icon-title')}
             copySuccessIconTitle={translate('common.copy-success-icon-title')}
@@ -161,6 +171,7 @@
         {:else}
           <CodeBlock
             content={stringifyWithBigInt(result.decodedValue)}
+            {label}
             {maxHeight}
             copyIconTitle={translate('common.copy-icon-title')}
             copySuccessIconTitle={translate('common.copy-success-icon-title')}
@@ -174,6 +185,7 @@
   {#snippet error({ error, retry })}
     <CodeBlock
       content={stringifyWithBigInt(value)}
+      {label}
       {maxHeight}
       copyIconTitle={translate('common.copy-icon-title')}
       copySuccessIconTitle={translate('common.copy-success-icon-title')}
diff --git a/src/lib/components/schedule/schedule-form/schedules-calendar-view.svelte b/src/lib/components/schedule/schedule-form/schedules-calendar-view.svelte
index a81da5d60f..41713be518 100644
--- a/src/lib/components/schedule/schedule-form/schedules-calendar-view.svelte
+++ b/src/lib/components/schedule/schedule-form/schedules-calendar-view.svelte
@@ -155,6 +155,7 @@
         <CodeBlock
           inline
           language="text"
+          label={translate('schedules.cron-view-title')}
           content={`┌───────────── minute (0 - 59)
 │ ┌───────────── hour (0 - 23)
 │ │ ┌───────────── day of the month (1 - 31)
diff --git a/src/lib/components/schedule/schedule-frequency-panel.svelte b/src/lib/components/schedule/schedule-frequency-panel.svelte
index 1ea37e7ef4..1e83f0e247 100644
--- a/src/lib/components/schedule/schedule-frequency-panel.svelte
+++ b/src/lib/components/schedule/schedule-frequency-panel.svelte
@@ -41,6 +41,12 @@
   </div>
   <ScheduleFrequency {spec} />
   {#if viewFullSpec}
-    <CodeBlock language="json" content={JSON.stringify(spec, null, 2)} />
+    <CodeBlock
+      language="json"
+      content={JSON.stringify(spec, null, 2)}
+      label={hasCronString
+        ? translate('schedules.cron-string')
+        : translate('schedules.schedule-spec')}
+    />
   {/if}
 </Panel>
diff --git a/src/lib/components/standalone-activities/activity-input-and-outcome.svelte b/src/lib/components/standalone-activities/activity-input-and-outcome.svelte
index a04dca726b..6f7e282c09 100644
--- a/src/lib/components/standalone-activities/activity-input-and-outcome.svelte
+++ b/src/lib/components/standalone-activities/activity-input-and-outcome.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import PayloadCodeBlock from '$lib/components/payload/payload-code-block.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
+  import { translate } from '$lib/i18n/translate';
   import type { Payloads } from '$lib/types';
   import type { ActivityExecutionOutcome } from '$lib/types/activity-execution';
   import { has } from '$lib/utilities/has';
@@ -16,16 +17,28 @@
 <div class="grid w-full grid-cols-2 gap-4 max-md:grid-cols-1">
   <div class="flex flex-col gap-2">
     <h5>Input</h5>
-    <PayloadCodeBlock value={input} />
+    <PayloadCodeBlock
+      value={input}
+      label={translate('standalone-activities.activity-input')}
+    />
   </div>
   <div class="flex flex-col gap-2">
     <h5>Result</h5>
     {#if has(outcome, 'failure')}
-      <PayloadCodeBlock value={outcome.failure} />
+      <PayloadCodeBlock
+        value={outcome.failure}
+        label={translate('standalone-activities.activity-outcome')}
+      />
     {:else if has(outcome, 'result')}
-      <PayloadCodeBlock value={outcome.result} />
+      <PayloadCodeBlock
+        value={outcome.result}
+        label={translate('standalone-activities.activity-outcome')}
+      />
     {:else}
-      <CodeBlock content={JSON.stringify({}, null, 2)} />
+      <CodeBlock
+        content={JSON.stringify({}, null, 2)}
+        label={translate('standalone-activities.activity-outcome')}
+      />
     {/if}
   </div>
 </div>
diff --git a/src/lib/components/standalone-activities/standalone-activities-disabled.svelte b/src/lib/components/standalone-activities/standalone-activities-disabled.svelte
index 71d3a71648..f0aac33379 100644
--- a/src/lib/components/standalone-activities/standalone-activities-disabled.svelte
+++ b/src/lib/components/standalone-activities/standalone-activities-disabled.svelte
@@ -40,11 +40,19 @@ activity.enableStandalone:
 />
 <div class="flex max-w-4xl flex-col gap-2">
   <p>{translate('standalone-activities.standalone-activities-enablement')}</p>
-  <CodeBlock copyable content={configValues} />
+  <CodeBlock
+    copyable
+    content={configValues}
+    label={translate('standalone-activities.cluster-config')}
+  />
   <p>
     {translate(
       'standalone-activities.standalone-activities-enablement-per-namespace',
     )}
   </p>
-  <CodeBlock copyable content={configValuesPerNamespace} />
+  <CodeBlock
+    copyable
+    content={configValuesPerNamespace}
+    label={translate('standalone-activities.namespace-config')}
+  />
 </div>
diff --git a/src/lib/components/workers/worker-heartbeats-disabled.svelte b/src/lib/components/workers/worker-heartbeats-disabled.svelte
index 66c197175f..efd5e2c080 100644
--- a/src/lib/components/workers/worker-heartbeats-disabled.svelte
+++ b/src/lib/components/workers/worker-heartbeats-disabled.svelte
@@ -32,6 +32,10 @@
         {translate('workers.worker-heartbeats-enablement')}
       </p>
     </div>
-    <CodeBlock copyable {content} />
+    <CodeBlock
+      copyable
+      {content}
+      label={translate('workers.heartbeat-config')}
+    />
   </div>
 </Card>
diff --git a/src/lib/components/workflow/client-actions/update-confirmation-modal.svelte b/src/lib/components/workflow/client-actions/update-confirmation-modal.svelte
index 645a435ca7..f40eed7c75 100644
--- a/src/lib/components/workflow/client-actions/update-confirmation-modal.svelte
+++ b/src/lib/components/workflow/client-actions/update-confirmation-modal.svelte
@@ -171,6 +171,7 @@
           <CodeBlock
             class="mt-4"
             content={failure.stackTrace}
+            label={translate('common.stack-trace')}
             language="text"
           />
         {/if}
@@ -179,7 +180,10 @@
     {#if success && typeof success === 'object'}
       <Alert intent="success" title="Success">
         {#if success?.payloads?.[0] && success.payloads[0].data}
-          <PayloadCodeBlock value={success} />
+          <PayloadCodeBlock
+            value={success}
+            label={translate('workflows.update-result')}
+          />
         {/if}
       </Alert>
     {/if}
diff --git a/src/lib/components/workflow/input-and-results-payload.svelte b/src/lib/components/workflow/input-and-results-payload.svelte
index fdd409eedc..6a0b72e9c6 100644
--- a/src/lib/components/workflow/input-and-results-payload.svelte
+++ b/src/lib/components/workflow/input-and-results-payload.svelte
@@ -38,11 +38,13 @@
     <PayloadCodeBlock
       maxHeight={MAX_HEIGHT}
       value={content}
+      label={title}
       filenameData={payloadDownloadFilenameData}
     />
   {:else}
     <CodeBlock
       content={isPending ? 'Results will appear upon completion.' : 'null'}
+      label={title}
       language="text"
       copyable={false}
       maxHeight={MAX_HEIGHT}
diff --git a/src/lib/components/workflow/pending-activities.svelte b/src/lib/components/workflow/pending-activities.svelte
index 6bdaa8b744..8147056bb5 100644
--- a/src/lib/components/workflow/pending-activities.svelte
+++ b/src/lib/components/workflow/pending-activities.svelte
@@ -140,6 +140,7 @@
                         content={stringifyWithBigInt(
                           pendingActivity.heartbeatDetails,
                         )}
+                        label={translate('workflows.heartbeat-details')}
                         copyIconTitle={translate('common.copy-icon-title')}
                         copySuccessIconTitle={translate(
                           'common.copy-success-icon-title',
@@ -157,6 +158,7 @@
                         content={stringifyWithBigInt(
                           pendingActivity.lastFailure,
                         )}
+                        label={translate('workflows.last-failure')}
                         copyIconTitle={translate('common.copy-icon-title')}
                         copySuccessIconTitle={translate(
                           'common.copy-success-icon-title',
diff --git a/src/lib/components/workflow/pending-activity/pending-activity-card.svelte b/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
index 86aae0e415..f46edb261c 100644
--- a/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
+++ b/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
@@ -172,7 +172,11 @@
       {translate('workflows.heartbeat-details')}
     </p>
     {#key activity.attempt}
-      <PayloadCodeBlock value={activity.heartbeatDetails} maxHeight={384} />
+      <PayloadCodeBlock
+        value={activity.heartbeatDetails}
+        label={translate('workflows.heartbeat-details')}
+        maxHeight={384}
+      />
     {/key}
   </div>
 {/snippet}
@@ -187,6 +191,7 @@
         {#key activity.attempt}
           <PayloadCodeBlock
             value={omit(activity.lastFailure, 'stackTrace')}
+            label={translate('workflows.last-failure')}
             maxHeight={384}
           />
         {/key}
@@ -201,6 +206,7 @@
           language="text"
           maxHeight={384}
           content={activity.lastFailure.stackTrace}
+          label={translate('common.stack-trace')}
           copyIconTitle={translate('common.copy-icon-title')}
           copySuccessIconTitle={translate('common.copy-success-icon-title')}
         />
diff --git a/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte b/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
index 40207607bd..ae4053105f 100644
--- a/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
+++ b/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
@@ -102,6 +102,7 @@
           <CodeBlock
             language="text"
             content={operation.blockedReason}
+            label={translate('nexus.blocked-reason')}
             copyIconTitle={translate('common.copy-icon-title')}
             copySuccessIconTitle={translate('common.copy-success-icon-title')}
           />
@@ -115,6 +116,7 @@
           <CodeBlock
             language="text"
             content={stringifyWithBigInt(operation.cancellationInfo)}
+            label={translate('nexus.cancellation-info')}
             copyIconTitle={translate('common.copy-icon-title')}
             copySuccessIconTitle={translate('common.copy-success-icon-title')}
           />
@@ -169,6 +171,7 @@
           content={stringifyWithBigInt(
             omit(operation.lastAttemptFailure, 'stackTrace'),
           )}
+          label={translate('workflows.last-failure')}
           maxHeight={384}
           copyIconTitle={translate('common.copy-icon-title')}
           copySuccessIconTitle={translate('common.copy-success-icon-title')}
@@ -184,6 +187,7 @@
           language="text"
           maxHeight={384}
           content={operation.lastAttemptFailure.stackTrace}
+          label={translate('common.stack-trace')}
           copyIconTitle={translate('common.copy-icon-title')}
           copySuccessIconTitle={translate('common.copy-success-icon-title')}
         />
diff --git a/src/lib/components/workflow/workflow-callback.svelte b/src/lib/components/workflow/workflow-callback.svelte
index 887066bf43..9f83a80df0 100644
--- a/src/lib/components/workflow/workflow-callback.svelte
+++ b/src/lib/components/workflow/workflow-callback.svelte
@@ -103,6 +103,7 @@
         <p>{translate('nexus.last-attempt-failure')}</p>
         <CodeBlock
           content={failure}
+          label={translate('workflows.callback-metadata')}
           language="text"
           copyIconTitle={translate('common.copy-icon-title')}
           copySuccessIconTitle={translate('common.copy-success-icon-title')}
diff --git a/src/lib/components/workflow/workflow-json-navigator.svelte b/src/lib/components/workflow/workflow-json-navigator.svelte
index 89812b016e..8ddad58b56 100644
--- a/src/lib/components/workflow/workflow-json-navigator.svelte
+++ b/src/lib/components/workflow/workflow-json-navigator.svelte
@@ -92,11 +92,16 @@
 </div>
 <div class="min-h-screen py-4">
   {#if $decodeEventHistory && events.length > 0}
-    <PayloadCodeBlock value={rawEvent} testId="event-history-json" />
+    <PayloadCodeBlock
+      value={rawEvent}
+      label={translate('common.json')}
+      testId="event-history-json"
+    />
   {:else}
     {#key index}
       <CodeBlock
         content={stringifyWithBigInt(rawEvent, undefined, 2)}
+        label={translate('common.json')}
         testId="event-history-json"
         copyIconTitle={translate('common.copy-icon-title')}
         copySuccessIconTitle={translate('common.copy-success-icon-title')}
diff --git a/src/lib/holocene/code-block.svelte b/src/lib/holocene/code-block.svelte
index 2259b333ae..23f17a3034 100644
--- a/src/lib/holocene/code-block.svelte
+++ b/src/lib/holocene/code-block.svelte
@@ -52,7 +52,7 @@
     testId?: string;
     minHeight?: number;
     maxHeight?: number;
-    label?: string;
+    label: string;
     class?: string;
     tabs?: string[];
     activeTab?: string;
@@ -78,7 +78,7 @@
     testId = undefined,
     minHeight = undefined,
     maxHeight = undefined,
-    label = '',
+    label,
     onchange = undefined,
     tabs,
     activeTab = $bindable(),
@@ -167,7 +167,11 @@
       getActionsTheme({ hasActions: copyable || maximizable }),
       EditorState.readOnly.of(!editable),
       EditorView.editable.of(editable),
-      EditorView.contentAttributes.of({ 'aria-label': label }),
+      EditorView.contentAttributes.of(
+        editable
+          ? { 'aria-label': label }
+          : { 'aria-label': label, 'aria-readonly': 'true' },
+      ),
       getLineBreakExtension(editable),
       getLanguageExtension(language),
       !inline ? EditorView.lineWrapping : undefined,
@@ -236,6 +240,15 @@
   };
 
   onMount(() => {
+    if (!label || !label.trim()) {
+      const message =
+        'CodeBlock rendered without an accessible name. Provide a non-empty `label` prop. See 4.1.2-codemirror-no-name.md.';
+      if (import.meta.env.DEV) {
+        throw new Error(message);
+      } else {
+        console.error(message);
+      }
+    }
     editorView = createEditorView();
     editorView.contentDOM.onblur = handleEditorBlur;
     ensureFullParse();
diff --git a/src/lib/i18n/locales/en/common.ts b/src/lib/i18n/locales/en/common.ts
index 940991d94d..b67f039923 100644
--- a/src/lib/i18n/locales/en/common.ts
+++ b/src/lib/i18n/locales/en/common.ts
@@ -228,4 +228,5 @@ export const Strings = {
   'change-log': 'Change Log',
   comfortable: 'Comfortable',
   dense: 'Dense',
+  json: 'JSON',
 } as const;
diff --git a/src/lib/i18n/locales/en/events.ts b/src/lib/i18n/locales/en/events.ts
index 66eea86b68..6521f1c720 100644
--- a/src/lib/i18n/locales/en/events.ts
+++ b/src/lib/i18n/locales/en/events.ts
@@ -99,4 +99,6 @@ export const Strings = {
   'empty-search-attributes': 'No Search Attributes Found',
   'empty-memo-attributes': 'No Memo Attributes Found',
   'empty-header-attributes': 'No Header Attributes Found',
+  'import-format-1': 'Import Format 1',
+  'import-format-2': 'Import Format 2',
 } as const;
diff --git a/src/lib/i18n/locales/en/standalone-activities.ts b/src/lib/i18n/locales/en/standalone-activities.ts
index 60bad1adcd..c91420687f 100644
--- a/src/lib/i18n/locales/en/standalone-activities.ts
+++ b/src/lib/i18n/locales/en/standalone-activities.ts
@@ -106,6 +106,10 @@ export const Strings = {
   'last-failure': 'Last Failure',
   'retry-policy': 'Retry Policy',
   'heartbeat-details': 'Heartbeat Details',
+  'activity-input': 'Activity Input',
+  'activity-outcome': 'Activity Outcome',
+  'cluster-config': 'Cluster Configuration',
+  'namespace-config': 'Namespace Configuration',
   header: 'Header',
   priority: 'Priority',
   'priority-key': 'Priority Key',
diff --git a/src/lib/i18n/locales/en/workers.ts b/src/lib/i18n/locales/en/workers.ts
index 85006c5d78..3482eda933 100644
--- a/src/lib/i18n/locales/en/workers.ts
+++ b/src/lib/i18n/locales/en/workers.ts
@@ -324,4 +324,5 @@ export const Strings = {
     'The service account email Temporal will impersonate.',
   'gcp-service-account-placeholder':
     'temporal-worker@my-project.iam.gserviceaccount.com',
+  'heartbeat-config': 'Heartbeat Configuration',
 } as const;
diff --git a/src/lib/i18n/locales/en/workflows.ts b/src/lib/i18n/locales/en/workflows.ts
index ae561baa9a..0dfb253449 100644
--- a/src/lib/i18n/locales/en/workflows.ts
+++ b/src/lib/i18n/locales/en/workflows.ts
@@ -228,6 +228,7 @@ export const Strings = {
   'json-formatting': 'JSON Formatting',
   'query-type': 'Query Type',
   'query-arg': 'Query Arg',
+  'query-result': 'Query Result',
   'run-query': 'Run Query',
   'refresh-query': 'Refresh Query',
   'refresh-call-stack': 'Refresh Call Stack',
@@ -325,6 +326,9 @@ export const Strings = {
   'markdown-description':
     'Markdown is supported in the summary and details fields. You can use {namespace}, {workflowId} or {runId} syntax in link href to create dynamic links based on the page you are on. Images are not allowed.',
   'update-id': 'Update ID (optional)',
+  'update-input': 'Update Input',
+  'update-result': 'Update Result',
+  'callback-metadata': 'Callback Metadata',
   'update-name-label': 'Update name',
   'no-current-details': 'No Current Details',
   'update-details': 'Update Details',
diff --git a/src/lib/pages/import-events.svelte b/src/lib/pages/import-events.svelte
index 89221167f1..617415102a 100644
--- a/src/lib/pages/import-events.svelte
+++ b/src/lib/pages/import-events.svelte
@@ -41,12 +41,14 @@
     <div class="h-40 text-center">
       <CodeBlock
         content={stringifyWithBigInt(format1)}
+        label={translate('events.import-format-1')}
         inline
         copyIconTitle={translate('common.copy-icon-title')}
         copySuccessIconTitle={translate('common.copy-success-icon-title')}
       />
       <CodeBlock
         content={stringifyWithBigInt(format2)}
+        label={translate('events.import-format-2')}
         inline
         copyIconTitle={translate('common.copy-icon-title')}
         copySuccessIconTitle={translate('common.copy-success-icon-title')}
diff --git a/src/lib/pages/standalone-activity-details.svelte b/src/lib/pages/standalone-activity-details.svelte
index 21e805e265..dfc689e52e 100644
--- a/src/lib/pages/standalone-activity-details.svelte
+++ b/src/lib/pages/standalone-activity-details.svelte
@@ -350,7 +350,10 @@
               <p class="font-medium text-secondary">
                 {translate('standalone-activities.last-failure')}
               </p>
-              <PayloadCodeBlock value={$activityExecution.info.lastFailure} />
+              <PayloadCodeBlock
+                value={$activityExecution.info.lastFailure}
+                label={translate('standalone-activities.last-failure')}
+              />
             </div>
           {/if}
           {#if $activityExecution.info.retryPolicy}
@@ -364,6 +367,7 @@
                   null,
                   2,
                 )}
+                label={translate('standalone-activities.retry-policy')}
               />
             </div>
           {/if}
@@ -374,6 +378,7 @@
               </p>
               <PayloadCodeBlock
                 value={$activityExecution.info.heartbeatDetails}
+                label={translate('standalone-activities.heartbeat-details')}
               />
             </div>
           {/if}
@@ -382,7 +387,10 @@
               <p class="font-medium text-secondary">
                 {translate('standalone-activities.header')}
               </p>
-              <PayloadCodeBlock value={$activityExecution.info.header.fields} />
+              <PayloadCodeBlock
+                value={$activityExecution.info.header.fields}
+                label={translate('standalone-activities.header')}
+              />
             </div>
           {/if}
         </div>
diff --git a/src/lib/pages/standalone-activity-search-attributes.svelte b/src/lib/pages/standalone-activity-search-attributes.svelte
index 3e15c5bce5..64b33fd118 100644
--- a/src/lib/pages/standalone-activity-search-attributes.svelte
+++ b/src/lib/pages/standalone-activity-search-attributes.svelte
@@ -8,7 +8,10 @@
 
 <div class="flex flex-col gap-2">
   {#if searchAttributes}
-    <PayloadCodeBlock value={searchAttributes.indexedFields} />
+    <PayloadCodeBlock
+      value={searchAttributes.indexedFields}
+      label={translate('events.attribute-group.search-attributes')}
+    />
   {:else}
     <p>{translate('events.empty-search-attributes')}</p>
   {/if}
diff --git a/src/lib/pages/workflow-call-stack.svelte b/src/lib/pages/workflow-call-stack.svelte
index d08af0c861..f49a557021 100644
--- a/src/lib/pages/workflow-call-stack.svelte
+++ b/src/lib/pages/workflow-call-stack.svelte
@@ -74,6 +74,7 @@
           <CodeBlock
             content={result}
             language="text"
+            label={translate('workflows.call-stack-tab')}
             testId="query-call-stack"
             copyIconTitle={translate('common.copy-icon-title')}
             copySuccessIconTitle={translate('common.copy-success-icon-title')}
diff --git a/src/lib/pages/workflow-memo.svelte b/src/lib/pages/workflow-memo.svelte
index 25735cd9ec..32dfef4a9d 100644
--- a/src/lib/pages/workflow-memo.svelte
+++ b/src/lib/pages/workflow-memo.svelte
@@ -9,7 +9,7 @@
 <div class="mt-4 flex flex-col gap-2">
   <h3>{translate('common.memo')}</h3>
   {#if workflow?.memo}
-    <PayloadCodeBlock value={workflow.memo} />
+    <PayloadCodeBlock value={workflow.memo} label={translate('common.memo')} />
   {:else}
     <p>{translate('events.empty-memo-attributes')}</p>
   {/if}
diff --git a/src/lib/pages/workflow-metadata.svelte b/src/lib/pages/workflow-metadata.svelte
index 8032d5906d..df739cd9f5 100644
--- a/src/lib/pages/workflow-metadata.svelte
+++ b/src/lib/pages/workflow-metadata.svelte
@@ -12,14 +12,20 @@
       <h3>
         {translate('events.attribute-group.search-attributes')}
       </h3>
-      <PayloadCodeBlock value={workflow.searchAttributes.indexedFields} />
+      <PayloadCodeBlock
+        value={workflow.searchAttributes.indexedFields}
+        label={translate('events.attribute-group.search-attributes')}
+      />
     </div>
   {/if}
 
   {#if workflow?.memo}
     <div class="mt-4 flex flex-col gap-2">
       <h3>{translate('common.memo')}</h3>
-      <PayloadCodeBlock value={workflow.memo} />
+      <PayloadCodeBlock
+        value={workflow.memo}
+        label={translate('common.memo')}
+      />
     </div>
   {/if}
 </div>
diff --git a/src/lib/pages/workflow-query.svelte b/src/lib/pages/workflow-query.svelte
index c3baf6a527..6a56075c84 100644
--- a/src/lib/pages/workflow-query.svelte
+++ b/src/lib/pages/workflow-query.svelte
@@ -178,6 +178,7 @@
           <CodeBlock
             {content}
             language={jsonFormatting ? 'json' : 'text'}
+            label={translate('workflows.query-result')}
             copyIconTitle={translate('common.copy-icon-title')}
             copySuccessIconTitle={translate('common.copy-success-icon-title')}
             testId="query-result"
diff --git a/src/lib/pages/workflow-search-attributes.svelte b/src/lib/pages/workflow-search-attributes.svelte
index 47dd50c6ad..e3db2462c9 100644
--- a/src/lib/pages/workflow-search-attributes.svelte
+++ b/src/lib/pages/workflow-search-attributes.svelte
@@ -11,7 +11,10 @@
     {translate('events.attribute-group.search-attributes')}
   </h3>
   {#if workflow?.searchAttributes}
-    <PayloadCodeBlock value={workflow.searchAttributes.indexedFields} />
+    <PayloadCodeBlock
+      value={workflow.searchAttributes.indexedFields}
+      label={translate('events.attribute-group.search-attributes')}
+    />
   {:else}
     <p>{translate('events.empty-search-attributes')}</p>
   {/if}
diff --git a/src/routes/(app)/namespaces/[namespace]/archival/+page.svelte b/src/routes/(app)/namespaces/[namespace]/archival/+page.svelte
index 381e85cd03..d27304dcba 100644
--- a/src/routes/(app)/namespaces/[namespace]/archival/+page.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/archival/+page.svelte
@@ -54,6 +54,7 @@
     content={`temporal operator namespace update --visibility-archival-state enabled ${namespaceName}`}
     language="text"
     inline
+    label={translate('workflows.archival-link')}
     copyIconTitle={translate('common.copy-icon-title')}
     copySuccessIconTitle={translate('common.copy-success-icon-title')}
   />
@@ -66,6 +67,7 @@
     content={`temporal operator namespace update --history-archival-state enabled ${namespaceName}`}
     language="text"
     inline
+    label={translate('workflows.archival-link')}
     copyIconTitle={translate('common.copy-icon-title')}
     copySuccessIconTitle={translate('common.copy-success-icon-title')}
   />
@@ -82,6 +84,7 @@
       content={`temporal operator namespace update --visibility-archival-state enabled ${namespaceName}`}
       language="text"
       inline
+      label={translate('workflows.archival-link')}
       copyIconTitle={translate('common.copy-icon-title')}
       copySuccessIconTitle={translate('common.copy-success-icon-title')}
     />

From 393605ef759549f4313a1c14de36e14a0bef9bf7 Mon Sep 17 00:00:00 2001
From: Ridwan Sanusi <ridwan.sanusi@temporal.io>
Date: Fri, 12 Jun 2026 16:23:16 -0400
Subject: [PATCH 2/2] [a11y] Add missing label to CodeBlock stories and
 compute-fields

code-block.stories.svelte: add label to "With Header" and "Test page
scrolling" stories which were missing the now-required prop.

compute-fields.svelte: add label to the Terraform IAM template CodeBlock
added in the serverless worker form refactor (landed in main after the
original PR was cut).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../workers/serverless-worker-form/compute-fields.svelte | 1 +
 src/lib/holocene/code-block.stories.svelte               | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/workers/serverless-worker-form/compute-fields.svelte b/src/lib/components/workers/serverless-worker-form/compute-fields.svelte
index 17bba32f4a..1938bdca4a 100644
--- a/src/lib/components/workers/serverless-worker-form/compute-fields.svelte
+++ b/src/lib/components/workers/serverless-worker-form/compute-fields.svelte
@@ -267,6 +267,7 @@
               language="text"
               maxHeight={300}
               copyable
+              label={translate('workers.terraform-iam-module-link')}
               copyIconTitle={translate('workers.copy-snippet')}
               copySuccessIconTitle={translate('workers.copied')}
             />
diff --git a/src/lib/holocene/code-block.stories.svelte b/src/lib/holocene/code-block.stories.svelte
index eb74a8f825..9e855c4eed 100644
--- a/src/lib/holocene/code-block.stories.svelte
+++ b/src/lib/holocene/code-block.stories.svelte
@@ -339,6 +339,7 @@ var myClient = TemporalClient.ConnectAsync(new("<endpoint>")
   <CodeBlock
     copyable
     language="typescript"
+    label="Code example"
     tabs={['File A', 'File B']}
     bind:activeTab
     content={hidden
@@ -379,7 +380,13 @@ var myClient = TemporalClient.ConnectAsync(new("<endpoint>")
       content<br />
       content
     </p>
-    <CodeBlock copyable language="json" content={largeJson} maxHeight={300} />
+    <CodeBlock
+      copyable
+      language="json"
+      label="JSON content"
+      content={largeJson}
+      maxHeight={300}
+    />
     <p>
       content<br />
       content<br />