fix(commitments): scroll + focus the edit form on open (a11y)#244
Conversation
…rd-ux-auditor P1) Clicking the pencil on a row far down the list opened the edit/create form at the TOP of the page — off-screen, with no change for a sighted user and no cue for keyboard/screen-reader users. An effect keyed on formMode/editingId now focuses the label field (preventScroll) and smooth-scrolls the form into view. Also aligns the stepper's disabled opacity 40 → 50 with the design-system token (P3).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Sorry @thierryvm, you have reached your weekly rate limit of 500000 diff characters.
Please try again later or upgrade to continue using Sourcery
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 65c8c4955f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
…roll (Codex review) Users with prefers-reduced-motion: reduce get an instant jump instead of a smooth scroll when the form opens (WCAG 2.3.3 Animation from Interactions).
|
@chatgpt-codex Bon point — corrigé : le scroll respecte désormais |
|
To use Codex here, create an environment for this repo. |
1 participant
Motivation
Follow-up du
dashboard-ux-auditorsur #240 (P1). Cliquer le crayon d'un engagement en bas d'une longue liste ouvrait le formulaire d'édition tout en haut de la page — hors écran, sans aucun changement visible pour un utilisateur sighted, et sans repère pour clavier/lecteur d'écran (pattern ARIA APG Disclosure : déplacer le focus vers le contenu révélé).Fix
useEffectsurformMode/editingId: focus du champ libellé (preventScroll) +scrollIntoViewsmooth du formulaire. Bonus P3 : opacity disabled du stepper 40 → 50 (cohérence token).Evidence
typecheck✅ · 27 tests commitments (dont un nouveau : le crayon déplace le focus dans le form)scrollIntoViewgardé (?.) pour jsdom.🤖 Generated with Claude Code