Skip to content

Fix process navigation, completion focus and authored colours - #1

Open
willmot wants to merge 1 commit into
mainfrom
codex/process-blocks-ux-fixes
Open

willmot wants to merge 1 commit into
mainfrom
codex/process-blocks-ux-fixes

Conversation

@willmot

@willmot willmot commented Oct 30, 2026

Copy link
Copy Markdown
Member

Checklist controls could lose keyboard focus when they were hidden or disabled, direct step links could land under the sticky bar, and a bar scrolled offscreen could identify the wrong action. Keep focus on a usable control or overview and calculate navigation from the measured bar and viewport.

Also deduplicate restored progress, let wide inner blocks shrink within their step, and resolve authored colours for visible completion icons. Controls remain disabled until interactivity loads, with a readable no-JavaScript explanation.

Validation: clean locked dependency installs, npm run lint and npm run build passed. Local Chromium checks covered keyboard focus, saved progress and storage failures, no-JavaScript fallback, editor settings, grouped/flat processes and responsive layouts. Safari, Firefox and assistive-technology testing remain unverified.

- Written by Codex gpt-6.1-sol high

@willmot
willmot requested a review from rmccue October 30, 2026 09:14
Comment thread src/process/render.php
Comment on lines +118 to +120
<noscript>
<p><?php esc_html_e( 'JavaScript is required to use the checklist controls. You can still read all steps below.', 'process-blocks' ); ?></p>
</noscript>

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

If the info here is just "you can't see a thing but it works otherwise", I don't think this is really adding anything. Can we just hide anything that doesn't work for no-js instead?

Comment thread src/process/view.js
if ( next === -1 ) {
context.announcement = state.i18n.finished;
// The completion button disappears; focus its replacement after rendering.
yield new Promise( resolve => window.requestAnimationFrame( resolve ) );

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Can't say I love these generators; they hurt the readability of the code. Is there no better way to achieve this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants