Follow-ups to merged PR #8734 ยท August 30, 2026

Composer follow-ups, before and after

Seven fixes retained; changes 4 and 6 have been reverted. The original numbering is preserved below. All after images and recordings have been refreshed from the current branch. Click any image for the full-size version. Keyboard and pointer recordings are included where a still image is not enough.

Before: merged main 30175a8af04. After: 558f3584a8 on fix/composer-banner-review-followups. Screenshots use scripted data, with no live requests or updates.

The working timer stays in the timeline. Tasks stay in the composer. Loading still hides tasks. Stash remains a separate tab and never moves into the footer.

1. Loading stays visible

Loading and Monitoring were both classed as activity. Monitoring came first, so it could hide the loading status. The composer's loading or syncing status now stays attached, with Monitoring behind it. Tasks still stay hidden while loading.

beforeMonitoring hid the loading status.
Monitoring hid the loading status.
afterLoading remains attached; Monitoring peeks behind.
Loading remains attached; Monitoring peeks behind.

2. Keyboard focus stays visible

Previously, tabbing to the peek immediately expanded the stack and made the focused button invisible. Now Tab focuses the visible peek. Enter or Space opens the stack and moves focus to its first control. Escape closes it and returns focus to the peek.

beforeAfter Tab: the stack opened, but focus was invisible.
After Tab: the stack opened, but focus was invisible.
afterAfter the same Tab: a visible focus ring on the peek.
After the same Tab: a visible focus ring on the peek.
Watch the interaction

Start at the update notice's dismiss button, then Tab โ†’ Enter โ†’ Tab โ†’ Escape. Watch where the focus ring goes.

beforeInteraction recording
afterInteraction recording

3. Question options keep their focus ring

The last option touched the right and bottom edges of a clipped panel, cutting off its focus ring. A 4px inset now leaves room for the whole ring. These images show the last option focused with the keyboard.

beforeThe right and bottom of the focus ring were clipped.
The right and bottom of the focus ring were clipped.
afterThe ring is visible on all four sides.
The ring is visible on all four sides.

4. Reverted: notice actions beside the title

The alignment change has been reverted. The description is back on its own row, and actions sit beside the title. Both images now show the original layout; the after image is a fresh capture of the current branch.

beforeOriginal layout: Reconnect beside the title.
Original layout: Reconnect beside the title.
afterReverted: Reconnect beside the title again.
Reverted: Reconnect beside the title again.

5. Task and stash lists keep list semantics

No visual change is intended here. Removing list markers can cause Safari to omit list semantics. Both lists now declare role="list" explicitly, so their list structure does not depend on visible bullets. These screenshots show the unchanged layout; they do not demonstrate VoiceOver behavior.

beforeTasks before: implicit list semantics.
Tasks before: implicit list semantics.
afterTasks after: explicit list semantics, same layout.
Tasks after: explicit list semantics, same layout.
beforeStash before: implicit list semantics.
Stash before: implicit list semantics.
afterStash after: explicit list semantics, same layout.
Stash after: explicit list semantics, same layout.

Explicit list roles are verified in the DOM. VoiceOver was not run, and the screenshots do not claim otherwise.

6. Reverted: compact notice peek on touch

The larger touch disclosure has been reverted. Touch layouts use the original 12px peek again, without the extra label or reserved vertical space. A different mobile notice UI is deferred. The keyboard focus fix in item 2 remains.

beforeOriginal touch layout: a 12px peek with no label.
Original touch layout: a 12px peek with no label.
afterReverted: the original compact peek is restored.
Reverted: the original compact peek is restored.
beforeOriginal touch sizing at a wide viewport.
Original touch sizing at a wide viewport.
afterReverted: the same compact peek at a wide viewport.
Reverted: the same compact peek at a wide viewport.

7. The decorative chevron has no extra hit area

The chevron borrowed button styling, including a 44px touch hit area extending below its header. That decorative element now ignores pointer events. These screenshots use a precise click 4px below the header with touch sizing enabled. The red ring in the recording marks the click.

beforeClicking below the header closed the question.
Clicking below the header closed the question.
afterThe same click leaves the question open.
The same click leaves the question open.
Watch the interaction

A precise click below the chevron with touch sizing enabled. The ring marks the actual click coordinate. Browser finger-tap snapping is separate from this CSS hit area.

beforeInteraction recording
afterInteraction recording

Native touch was also tested for opening the notice stack. For this overlap test, precise clicks isolate the CSS hit area; Chromium may still snap an imprecise finger tap to a nearby control.

8. Update icons show the update state

Every update state used the same information icon. An update in progress now has a spinner, and a failed update has an error icon. Reduced motion disables the spinner animation. The text, retry action, and task precedence are unchanged.

beforeUpdating used the idle information icon.
Updating used the idle information icon.
afterUpdating has a progress spinner.
Updating has a progress spinner.
beforeFailure also used the information icon.
Failure also used the information icon.
afterFailure has a distinct error icon.
Failure has a distinct error icon.

9. Composer attachments share one inset

This is a maintenance fix, not a normal-layout bug. The command menu read an inset setting, but the banners and bottom strip hard-coded the matching value. The normal inset remains 22px. In the stress test below, the same setting is changed to 40px on both versions: before, only the command menu moved; after, all attachments stay aligned.

beforeStress test: menu inset 40px, bottom strip still 22px.
Stress test: menu inset 40px, bottom strip still 22px.
afterSame stress test: menu and bottom strip both 40px.
Same stress test: menu and bottom strip both 40px.
beforeDefault spacing before: 22px.
Default spacing before: 22px.
afterDefault spacing after: still 22px.
Default spacing after: still 22px.