Skip to content

[a11y] WCAG 4.1.2 — require label on CodeBlock primitive; add aria-readonly for read-only mode #3557

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rosanusi wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[a11y] WCAG 4.1.2 — require label on CodeBlock primitive; add aria-readonly for read-only mode #3557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9dc61c2
[a11y] WCAG 4.1.2 — require label on CodeBlock; add aria-readonly for…
rosanusi Jun 12, 2026
393605e
[a11y] Add missing label to CodeBlock stories and compute-fields
rosanusi Jun 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/lib/components/event/event-card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,7 @@
eventId: event.id,
type: key,
}}
label={format(key)}
{value}
maxHeight={384}
/>
Expand All @@ -200,6 +201,7 @@
eventId: event.id,
type: key,
}}
label={format(key)}
value={codeBlockValue}
maxHeight={384}
/>
Expand All @@ -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}
/>
Expand Down
3 changes: 3 additions & 0 deletions src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')}
Expand All @@ -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')}
Expand All @@ -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')}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/payload-input-with-encoding.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}"
>
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/payload-input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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}
Expand Down
14 changes: 13 additions & 1 deletion src/lib/components/payload/payload-code-block.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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')}
Expand All @@ -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')}
Expand Down Expand Up @@ -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')}
Expand All @@ -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')}
Expand All @@ -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')}
Expand Down
1 change: 1 addition & 0 deletions src/lib/components/schedule/schedule-form/schedules-calendar-view.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
8 changes: 7 additions & 1 deletion src/lib/components/schedule/schedule-frequency-panel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
21 changes: 17 additions & 4 deletions src/lib/components/standalone-activities/activity-input-and-outcome.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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

@temporal-cicd temporal-cicd Bot Jun 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ Type 'IPayloads | undefined' is not assignable to type 'object | IPayloads | IPayload'.

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>
12 changes: 10 additions & 2 deletions src/lib/components/standalone-activities/standalone-activities-disabled.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
1 change: 1 addition & 0 deletions src/lib/components/workers/serverless-worker-form/compute-fields.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')}
/>
Expand Down
6 changes: 5 additions & 1 deletion src/lib/components/workers/worker-heartbeats-disabled.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@
{translate('workers.worker-heartbeats-enablement')}
</p>
</div>
<CodeBlock copyable {content} />
<CodeBlock
copyable
{content}
label={translate('workers.heartbeat-config')}
/>
</div>
</Card>
6 changes: 5 additions & 1 deletion src/lib/components/workflow/client-actions/update-confirmation-modal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,7 @@
<CodeBlock
class="mt-4"
content={failure.stackTrace}
label={translate('common.stack-trace')}
language="text"
/>
{/if}
Expand All @@ -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}
Expand Down
2 changes: 2 additions & 0 deletions src/lib/components/workflow/input-and-results-payload.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 2 additions & 0 deletions src/lib/components/workflow/pending-activities.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand Down
8 changes: 7 additions & 1 deletion src/lib/components/workflow/pending-activity/pending-activity-card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,11 @@
{translate('workflows.heartbeat-details')}
</p>
{#key activity.attempt}
<PayloadCodeBlock value={activity.heartbeatDetails} maxHeight={384} />
<PayloadCodeBlock

@temporal-cicd temporal-cicd Bot Jun 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ Type 'IPayloads | null | undefined' is not assignable to type 'object | IPayloads | IPayload'.

value={activity.heartbeatDetails}
label={translate('workflows.heartbeat-details')}
maxHeight={384}
/>
{/key}
</div>
{/snippet}
Expand All @@ -187,6 +191,7 @@
{#key activity.attempt}
<PayloadCodeBlock
value={omit(activity.lastFailure, 'stackTrace')}
label={translate('workflows.last-failure')}
maxHeight={384}
/>
{/key}
Expand All @@ -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')}
/>
Expand Down
4 changes: 4 additions & 0 deletions src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')}
/>
Expand All @@ -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')}
/>
Expand Down Expand Up @@ -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')}
Expand All @@ -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')}
/>
Expand Down
1 change: 1 addition & 0 deletions src/lib/components/workflow/workflow-callback.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')}
Expand Down
7 changes: 6 additions & 1 deletion src/lib/components/workflow/workflow-json-navigator.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')}
Expand Down
Loading
Loading