Give forms field help, callouts, collapsible instructions and switches that save immediately closes #620

closes #620 ## Description of the implemented changes The changes were: - [x] Bugfixing - [x] New Feature - [ ] Breaking Change - [x] Refactoring Help ladder, callouts, disclosure and switches: forms and pages get one shared vocabulary for help and feedback — field help below an input, a callout component in four kinds for hints, statuses and risks, a collapsible block for long instructions, and switches that save immediately and roll back when the save fails, with locked controls naming their reason. ## What has been changed? - Add a callout for hints, statuses and risks in four kinds - Add a collapsible block so long instructions stay closed until needed - Fix checkbox size and color in the input component - Show field help below an input and name the reason of a locked checkbox - Add a switch that saves immediately and rolls back on the client when the save fails - Turn registration, OIDC-only and join form settings into switches that save immediately - Render the ENV status with the callout component - Say in the field help that a blank secret field keeps the stored value - Split the import page into preparing and checking with closed instructions - Announce the join result in callouts and use the input component for checkboxes - Show an empty state instead of an alert when a member has no fee cycles - Move fee setting explanations to field help and close the examples - Show user form hints as callouts and the password rules as field help - State confirmation consequences and failed OIDC linking in the callout component - Lock the email field's required checkbox and name the reason - Reject raw alert and switch markup outside the components that carry it - Show callouts, collapsibles, field help, switches and locked controls - Name the create links of the preview hints New ‹entity› - Enforce required join checkboxes on the server and drop fieldsets around single fields - Announce only checkboxes that must be checked as required - Measure callout text and icon and the locked controls in both themes - Document callouts, collapsibles, field help, switches and locked controls as available - Measure ENV-locked controls at the shared dimmed look and record the accepted contrast - Take a switch's target from its own state so fast clicks keep the last choice - Keep a section's actions beside its title when the description is long - Group the address fields under a legend and render the fee type as a regular input - Warn in a callout that data fields must exist before the import - Put the fee type rules into a closed collapsible above the table - Let the callout set the text size of its content - List the callout, collapsible and instant switch and the locked control look ## Definition of Done ### Code Quality - [ ] No new technical depths - [x] Linting passed - [x] Documentation is added were needed ### Accessibility - [ ] New elements are properly defined with html-tags - [ ] Colour contrast follows WCAG criteria - [ ] Aria labels are added when needed - [ ] Everything is accessible by keyboard - [ ] Tab-Order is comprehensible - [ ] All interactive elements have a visible focus ### Testing - [x] Tests for new code are written - [x] All tests pass - [ ] axe-core dev tools show no critical or major issues ## Additional Notes Larger commits: the switch commits (settings switches, switch target from its own state), the import page split and the design documentation touch more than 5 files or 150 lines each. An ENV-locked switch or checkbox deliberately takes the same dimmed look as a disabled one; its state graphic stays below 3:1 (about 2.5:1 in the light theme), the lock icon and the visible lock reason carry the state. The contrast matrix lists these rows as reference without a threshold.

simon commented

2026-10-26 20:02:12 +01:00

Owner

closes #620

Description of the implemented changes

The changes were:

Bugfixing
New Feature
Breaking Change
Refactoring

Help ladder, callouts, disclosure and switches: forms and pages get one shared vocabulary for help and feedback — field help below an input, a callout component in four kinds for hints, statuses and risks, a collapsible block for long instructions, and switches that save immediately and roll back when the save fails, with locked controls naming their reason.

What has been changed?

Add a callout for hints, statuses and risks in four kinds
Add a collapsible block so long instructions stay closed until needed
Fix checkbox size and color in the input component
Show field help below an input and name the reason of a locked checkbox
Add a switch that saves immediately and rolls back on the client when the save fails
Turn registration, OIDC-only and join form settings into switches that save immediately
Render the ENV status with the callout component
Say in the field help that a blank secret field keeps the stored value
Split the import page into preparing and checking with closed instructions
Announce the join result in callouts and use the input component for checkboxes
Show an empty state instead of an alert when a member has no fee cycles
Move fee setting explanations to field help and close the examples
Show user form hints as callouts and the password rules as field help
State confirmation consequences and failed OIDC linking in the callout component
Lock the email field's required checkbox and name the reason
Reject raw alert and switch markup outside the components that carry it
Show callouts, collapsibles, field help, switches and locked controls
Name the create links of the preview hints New ‹entity›
Enforce required join checkboxes on the server and drop fieldsets around single fields
Announce only checkboxes that must be checked as required
Measure callout text and icon and the locked controls in both themes
Document callouts, collapsibles, field help, switches and locked controls as available
Measure ENV-locked controls at the shared dimmed look and record the accepted contrast
Take a switch's target from its own state so fast clicks keep the last choice
Keep a section's actions beside its title when the description is long
Group the address fields under a legend and render the fee type as a regular input
Warn in a callout that data fields must exist before the import
Put the fee type rules into a closed collapsible above the table
Let the callout set the text size of its content
List the callout, collapsible and instant switch and the locked control look

Definition of Done

Code Quality

No new technical depths
Linting passed
Documentation is added were needed

Accessibility

New elements are properly defined with html-tags
Colour contrast follows WCAG criteria
Aria labels are added when needed
Everything is accessible by keyboard
Tab-Order is comprehensible
All interactive elements have a visible focus

Testing

Tests for new code are written
All tests pass
axe-core dev tools show no critical or major issues

Additional Notes

Larger commits: the switch commits (settings switches, switch target from its own state), the import page split and the design documentation touch more than 5 files or 150 lines each.
An ENV-locked switch or checkbox deliberately takes the same dimmed look as a disabled one; its state graphic stays below 3:1 (about 2.5:1 in the light theme), the lock icon and the visible lock reason carry the state. The contrast matrix lists these rows as reference without a threshold.

simon added 31 commits

2026-10-26 20:02:13 +01:00

feat(feedback): add a callout for hints, statuses and risks in four kinds e2878e1170

feat(page): add a collapsible block so long instructions stay closed until needed 149d2d95e7

fix(form): fix checkbox size and color in the input component 8024ef212c

feat(form): show field help below an input and name the reason of a locked checkbox f8fb1fce3d

feat(form): add a switch that saves immediately and rolls back on the client when the save fails 7de00947ff

feat(settings): turn registration, OIDC-only and join form settings into switches that save immediately d1c44ace2e

refactor(settings): render the ENV status with the callout component a5d62130d3

feat(settings): say in the field help that a blank secret field keeps the stored value b767a4355a

feat(import): split the import page into preparing and checking with closed instructions ba35c4b6dd

feat(join): announce the join result in callouts and use the input component for checkboxes 3f53ba9cbf