Skip to content

Keep keyboard focus in the accessible Parsons editor - #1952

Open
adamant-pwn wants to merge 3 commits into
maths:iss1627from
adamant-pwn:codex/iss1627-accessibility-20261105
Open

adamant-pwn wants to merge 3 commits into
maths:iss1627from
adamant-pwn:codex/iss1627-accessibility-20261105

Conversation

@adamant-pwn

@adamant-pwn adamant-pwn commented Nov 5, 2026 •

Copy link
Copy Markdown
Collaborator

In the keyboard editor of the accessible Parsons block (#1627), each edit rebuilds the controls and keyboard focus is lost. Keyboard and screen-reader users have to find their place again after every step.

With this change:

  • Focus follows the step. After Add it moves to the step's Remove button, after Remove back to its Add button, and after a move it stays on Move up or Move down.
  • Moves at either end of the list stay focusable and are marked aria-disabled.
  • The live region survives rebuilds, and each control's description points to the rendered card.
  • A submitted answer cannot be changed, including with Reset or "Remove all steps".
  • The icon buttons have accessible names, and the mode switch wraps on narrow screens.

Pressing Enter on Add in a local Moodle 5.0 preview, before and after:

Before After
Before: no control has focus after Add After: the new step's Remove button has focus

The last two commits port CI fixes that dev already has, so CI runs on this branch.

The input labels from the first version of this PR moved to #1960.

I tested with the keyboard in Chromium and with Jest, not with a screen reader. AI-assisted (Codex, Claude Code).

🤖 Generated with Claude Code

@adamant-pwn
adamant-pwn marked this pull request as ready for review November 5, 2026 22:08
@adamant-pwn
adamant-pwn requested a review from EJMFarrow November 5, 2026 22:08

@EJMFarrow EJMFarrow left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Hi, @adamant-pwn . This will need to be separated out into 2 PRs. The accessible Parsons branch is extremely experimental. I created it for feedback on the first pass of a design and it's been on the backburner every since. Happy to simply merge any related improvements you have into this branch but I haven't even checked the base code of the changes yet.

The input labeling looks like a good idea but is more general. It would be good to have a pull request for that to dev. It's a fairly major design decision, though, so create an issue for it so we can get other people to take a look. I'm wondering if there's a better way to set things up, both from the question authoring perspective (so people are more likely to use it) and the code. We try to keep JS re-wiring of the HTML to a minimum, not least because it needs to be replicated for the API and mobile app. I'll have a think.

@adamant-pwn
adamant-pwn force-pushed the codex/iss1627-accessibility-20261105 branch from 0d434ef to 3d18fb7 Compare November 9, 2026 18:22
@adamant-pwn adamant-pwn changed the title Improve accessible editor focus and shared input labels Keep keyboard focus in the accessible Parsons editor Nov 9, 2026
@adamant-pwn

Copy link
Copy Markdown
Collaborator Author

Thanks, Edmund. I split it as you suggested.

This PR now has only the Parsons editor changes, for iss1627. The input labelling moved to #1960 for discussion before any PR to dev.

This branch has not been deployed

No deployments
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