a11y(2.4.3): replace flex-wrap-reverse with flex-wrap on workflow history toolbar by canvanooo · Pull Request #3527 · temporalio/ui

canvanooo · 2026-06-10T21:04:54Z

Description & motivation 💭

The sticky toolbar on the workflow event-history layout uses flex-wrap-reverse. At wide viewports (xl: and up) the toolbar's two clusters — heading + history tabs on the left, ToggleButtons + Download on the right — sit on one row and -reverse is a no-op. But when the viewport narrows enough for the toolbar to wrap onto two rows, -reverse flips the wrap stacking: the second DOM child (ToggleButtons) renders on the upper row while the first DOM child (heading + tabs) drops to the lower row.

Keyboard Tab order still follows DOM order — tabs first, then ToggleButtons — so a keyboard user sees focus jump down to the tabs and then up to the controls above them. That's a SC 2.4.3 Focus Order mismatch (it also cross-walks to 1.3.2 Meaningful Sequence) on one of the most-trafficked detail views in the product.

The fix drops -reverse so DOM order and visual order agree at narrow viewports. It also aligns with the structurally identical sibling workflow-timeline-layout.svelte, which already uses plain flex-wrap — the -reverse here appears to be copy-paste drift. Wide-viewport rendering is unchanged.

The change is one word in one class string (src/lib/layouts/workflow-history-layout.svelte:153):

   <div
-    class="surface-background sticky top-0 z-[11] flex flex-wrap-reverse items-center justify-between gap-2 border-b border-subtle md:top-[var(--top-nav-height)] md:pt-2 xl:gap-8"
+    class="surface-background sticky top-0 z-[11] flex flex-wrap items-center justify-between gap-2 border-b border-subtle md:top-[var(--top-nav-height)] md:pt-2 xl:gap-8"
   >

Screenshots (if applicable) 📸

Before/after at a wrap-width viewport (~md 768px) recommended — at narrow widths the heading + tabs cluster moves to the upper row and ToggleButtons + Download to the lower row. Wide (xl:+) viewports are visually unchanged.

Design Considerations 🎨

This flips the narrow-viewport visual layout (today ToggleButtons sit above the tabs). If Design wants to keep ToggleButtons visually on top, the alternative fix is to reorder the source — move the ToggleButtons block before the heading block and keep plain flex-wrap. Both shapes resolve 2.4.3. Going with the -reverse removal since it matches the timeline-layout sibling. Design input welcome on which visual is preferred.

Testing 🧪

How was this tested 👻

Manual testing
E2E tests added
Unit tests added

No automated test added — change is a single Tailwind class. Possible follow-up: a Playwright assertion that toolbar DOM order matches visual order at a wrap-width viewport.

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

Open a workflow detail page → History tab: /namespaces/<ns>/workflows/<wf>/<run>/history.
Wide viewport (xl:, ≥1280px): confirm the toolbar is unchanged — heading + tabs left, ToggleButtons right, single row.
Narrow viewport (~md 768px, where the toolbar wraps): confirm heading + tabs are now on the upper row and ToggleButtons + Download on the lower row.
Keyboard tab order at narrow viewport: Tab into the toolbar — focus should land on All → Compact → JSON, then proceed to the ToggleButtons (sort, event-type filter, pause, download), matching top-to-bottom visual reading order.
Screen reader: with VoiceOver (macOS Safari), walk the toolbar via the rotor — announced order should match visual order.
Regression: confirm workflow-timeline-layout.svelte is untouched (already correct).
axe-core on the history route at a narrow viewport: zero new violations.

Checklists

Draft Checklist

Confirm with Design which narrow-viewport visual is preferred (-reverse removal vs. source reorder)

Merge Checklist

Verified no visual regression at xl:+ widths
Keyboard tab order matches visual order at wrap-width viewports

Issue(s) closed

Docs

Any docs updates needed?

None.

A11y-Audit-Ref: 2.4.3-workflow-history-toolbar-wrap

…tory toolbar The workflow event-history sticky toolbar used flex-wrap-reverse, which at narrow viewports reversed the wrap stacking so the ToggleButtons cluster rendered above the history tabs while keyboard Tab order still followed DOM order (tabs first). Dropping -reverse brings DOM order and visual order back into agreement, matching the sibling workflow-timeline-layout. Wide-viewport rendering is unchanged. A11y-Audit-Ref: 2.4.3-workflow-history-toolbar-wrap Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

vercel · 2026-06-10T21:05:00Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	Jun 10, 2026 9:05pm

CLAassistant · 2026-06-10T21:05:02Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

temporal-cicd · 2026-06-10T21:06:16Z

	Warnings
⚠️	📊 Strict Mode: 3 errors in 1 file (0.3% of 902 total) src/lib/layouts/workflow-history-layout.svelte (3) L198:10: Type 'boolean \| null' is not assignable to type 'boolean \| undefined'. L239:2: Type 'string \| undefined' is not assignable to type 'string'. L240:2: Type 'string \| undefined' is not assignable to type 'string'.

Generated by 🚫 dangerJS against cd74560

laurakwhit · 2026-06-17T00:24:47Z

 <div class="relative">
  <div
-    class="surface-background sticky top-0 z-[11] flex flex-wrap-reverse items-center justify-between gap-2 border-b border-subtle md:top-[var(--top-nav-height)] md:pt-2 xl:gap-8"
+    class="surface-background sticky top-0 z-[11] flex flex-wrap items-center justify-between gap-2 border-b border-subtle md:top-[var(--top-nav-height)] md:pt-2 xl:gap-8"


@canvanooo was this an intentional change? Or should we figure out a way to make this look good on small screens without flex-wrap-reverse?

Before After

Auto-generated version bump from 2.51.0 to 2.51.1 Specific version: 2.51.1 Changes included: - [`c848ec54`](c848ec5) fix(a11y): announce workflow / event status on timeline graph nodes (WCAG 1.4.1) (#3443) - [`af6b12a9`](af6b12a) fix(deployments): align version/status/compute badges in worker deployments table (#3489) - [`df86587c`](df86587) Add SDK version to standalone activity details (#3447) - [`59695290`](5969529) Use shared FilterBar component for workflows (#3448) - [`ded94469`](ded9446) Set display contents in wrapper div if no afterLabel in Input component (#3513) - [`d7e5eb43`](d7e5eb4) fix(standalone-activities): decode failure encodedAttributes in activity detail (#3507) - [`81a255a9`](81a255a) fix(DT-4151): fix bottom nav scrollability and double-menu on mobile (#3514) - [`368f646e`](368f646) Fix exports to work properly with vite8 (#3519) - [`231bdaff`](231bdaf) chore(deps-dev): bump vitest from 3.2.4 to 3.2.6 (#3509) - [`1de44ea6`](1de44ea) fix(workers): soften no-workers-polling alert for serverless worker deployments (#3524) - [`689955a8`](689955a) fix(DT-4080): surface error when validate connection has no compute config, warn on set current (#3516) - [`93323db9`](93323db) feat(DT-4078): Add Set Ramping Version to Worker Deployment Versions (#3508) - [`9d3450c0`](9d3450c) fix(DT-4081): surface task queue not registered error in validate connection modal (#3517) - [`b7f56237`](b7f5623) feat(DT-4079): miscellaneous WD UI fixes (#3511) - [`83b2d4ec`](83b2d4e) feat(deployments): simplify create worker deployment UX (#3518) - [`ccb4cb73`](ccb4cb7) Standalone Activity write guards (#3534) - [`ab20ef03`](ab20ef0) Worker insights UI updates (#3520) - [`aaf63bdc`](aaf63bd) [wcag] Replace text-[12px] with text-xs in DatePicker action buttons (SC 1.4.4) (#3525) - [`743be902`](743be90) a11y(2.4.3): replace flex-wrap-reverse with flex-wrap on workflow history toolbar (#3527) - [`41b73e87`](41b73e8) a11y(2.4.2): ui-main — set distinct, descriptive titles on login/signin, task-queues list, and activity-workers sub-tab (#3535) - [`3d64cdbf`](3d64cdb) [WCAG 2.4.3] group-details-row — remove redundant outer focus stop on <g> wrapper (#3537) - [`883e5db1`](883e5db) a11y(2.4.6): datepicker — replace empty label with translate('common.start') (#3543) - [`9da915e2`](9da915e) a11y(2.4.5): import history — add back-link to Import landing page (#3542) - [`ca4c1d61`](ca4c1d6) Cache new Intl.DateTimeFormat (#3565) - [`38376e4d`](38376e4) Fix required activity timeout inputs on Start a Standalone Activity form (#3567) - [`49d7c9e4`](49d7c9e) Use separate copy for title vs menu item (#3568) - [`3c7dcdc3`](3c7dcdc) a11y(2.5.8): pagination — grow caret buttons from 12×12 to 24×24 CSS px (#3547) - [`b5171825`](b517182) a11y(2.5.8): chip — pad remove button to 24×24 CSS px minimum (#3544) - [`1fea5d5c`](1fea5d5) a11y(2.1.1): fake-button widgets — replace deprecated onkeypress with onkeydown handling Enter and Space (#3528) - [`5bf09000`](5bf0900) a11y(2.1.1): navigation primitives — replace hover-only CSS :after label tooltip with focusable Tooltip (#3529) - [`deed43f0`](deed43f) a11y(2.1.1): event summary row — add keyboard-accessible expand control alongside the mouse-only <tr onclick> (#3526) - [`d401123e`](d401123) a11y(2.5.8): checkbox — add min-h-6 min-w-6 to Label for 24×24 hit area (#3545) - [`aef4166f`](aef4166) [a11y] Expose toggled state via aria-pressed on ToggleButton (#3559) - [`797f8831`](797f883) Show single attempt in Standalone Activity details (#3572) - [`893bc58c`](893bc58) feat(DT-4183): Add Tabs (Primitive) (#3574) - [`323c1993`](323c199) Date picker input field bug/kt (#3522) - [`3ac34ce2`](3ac34ce) Various serverless UI updates (#3573) - [`f365416a`](f365416) a11y(2.1.1): ZoomSvg — add keyboard pan/zoom controls so the workflow family tree is operable without a mouse (#3530) - [`feb6897e`](feb6897) Fix gaps in slot cards on worker details page (#3580) - [`b3c80072`](b3c8007) Remove font weight on cache size (#3583) - [`0e7337ea`](0e7337e) Bump API to v1.62.14 (#3575) Co-authored-by: laurakwhit <[email protected]>

canvanooo requested a review from a team as a code owner June 10, 2026 21:04

github-actions Bot added a11y Accessibility audit PR a11y:bucket-1 Bucket 1: design-mergeable, CSS / tokens a11y:sc-2.4.3 labels Jun 10, 2026

vercel Bot deployed to Preview June 10, 2026 21:05 View deployment

ardiewen approved these changes Jun 16, 2026

View reviewed changes

ardiewen merged commit 743be90 into main Jun 16, 2026
18 of 19 checks passed

ardiewen deleted the a11y/2.4.3-workflow-history-toolbar-wrap branch June 16, 2026 19:03

laurakwhit reviewed Jun 17, 2026

View reviewed changes

This was referenced Jun 22, 2026

chore: bump version to 2.52.0 #3586

Closed

chore: bump version to 2.51.1 #3587

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

a11y(2.4.3): replace flex-wrap-reverse with flex-wrap on workflow history toolbar#3527

a11y(2.4.3): replace flex-wrap-reverse with flex-wrap on workflow history toolbar#3527
ardiewen merged 1 commit into
mainfrom
a11y/2.4.3-workflow-history-toolbar-wrap

canvanooo commented Jun 10, 2026

Uh oh!

vercel Bot commented Jun 10, 2026 •

edited

Loading

Uh oh!

CLAassistant commented Jun 10, 2026

Uh oh!

temporal-cicd Bot commented Jun 10, 2026

Uh oh!

Uh oh!

laurakwhit Jun 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

canvanooo commented Jun 10, 2026

Description & motivation 💭

Screenshots (if applicable) 📸

Design Considerations 🎨

Testing 🧪

How was this tested 👻

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

Docs

Any docs updates needed?

Uh oh!

vercel Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CLAassistant commented Jun 10, 2026

Uh oh!

temporal-cicd Bot commented Jun 10, 2026

Uh oh!

Uh oh!

laurakwhit Jun 17, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

vercel Bot commented Jun 10, 2026 •

edited

Loading