Your details: a section with unsaved changes is ringed in soft orange #927

New issue

Closed

opened 2026-10-15 17:19:47 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-10-15 17:19:47 +00:00

Owner

On Your details, a section with changes that have not been saved gets a soft orange glow around its border until the page is saved or the changes are undone.

What exists today

static/js/app.js, under "not losing what was typed" (#258): markDirty sets form.dataset.dirty = "1" on the first input or change inside a POST form, and beforeunload asks before leaving. Dirtiness is per form, and Your details is one form (<form method="post" enctype="multipart/form-data"> in templates/accounts/profile.html) holding every card. Nothing records which card changed, and nothing is drawn on the page.
Fields that save as they go (#656) carry data-unsaved while unsaved. That is a per-field mark on other pages, not used here.
The cards are <div class="card" id="section-…"> and <fieldset class="card" id="section-…"> inside [data-cards].

What would change

When a field inside a card changes, the card is marked (data-unsaved on the .card). When every field in it is back to its loaded value, the mark comes off. Compare with defaultValue, defaultChecked and defaultSelected; a file input counts while it holds a file. Save clears every mark. A refused save draws the page again with the changes still unsaved, so mark those cards again on load.
Style: a soft amber/orange ring outside the card's border (for example ring-2 ring-amber-400/50, and an equivalent in dark mode), in assets/css/app.css. The amber tone is already used for "kept as it was" warnings.
The section menu entry for an unsaved card could carry the same mark. Not requested; decide when building.
With scripts off, nothing is drawn, as today.

Accessibility

Colour alone must not be the only signal (SC 1.4.1). Add a short visible text in the card's header, for example a badge "Not saved" (class="badge" data-tone="amber"), or at least a visually hidden sentence. The ring must clear 3:1 against the page (SC 1.4.11) in both themes.
Not a live region on every keystroke. If announced at all, announce once when a card first becomes unsaved.

Notes

"Not saved" (or the chosen wording) is a new string for the catalogues and Weblate.
Other long forms (company, contact, Settings) could share this later.

Related: #258, #656.

Checked against main at 56fc9d531.

On *Your details*, a section with changes that have not been saved gets a soft orange glow around its border until the page is saved or the changes are undone. ## What exists today - `static/js/app.js`, under "not losing what was typed" (#258): `markDirty` sets `form.dataset.dirty = "1"` on the first `input` or `change` inside a POST form, and `beforeunload` asks before leaving. Dirtiness is **per form**, and *Your details* is one form (`<form method="post" enctype="multipart/form-data">` in `templates/accounts/profile.html`) holding every card. Nothing records which card changed, and nothing is drawn on the page. - Fields that save as they go (#656) carry `data-unsaved` while unsaved. That is a per-field mark on other pages, not used here. - The cards are `<div class="card" id="section-…">` and `<fieldset class="card" id="section-…">` inside `[data-cards]`. ## What would change - When a field inside a card changes, the card is marked (`data-unsaved` on the `.card`). When every field in it is back to its loaded value, the mark comes off. Compare with `defaultValue`, `defaultChecked` and `defaultSelected`; a file input counts while it holds a file. *Save* clears every mark. A refused save draws the page again with the changes still unsaved, so mark those cards again on load. - Style: a soft amber/orange ring outside the card's border (for example `ring-2 ring-amber-400/50`, and an equivalent in dark mode), in `assets/css/app.css`. The amber tone is already used for "kept as it was" warnings. - The section menu entry for an unsaved card could carry the same mark. Not requested; decide when building. - With scripts off, nothing is drawn, as today. ## Accessibility - Colour alone must not be the only signal (SC 1.4.1). Add a short visible text in the card's header, for example a badge "Not saved" (`class="badge" data-tone="amber"`), or at least a visually hidden sentence. The ring must clear 3:1 against the page (SC 1.4.11) in both themes. - Not a live region on every keystroke. If announced at all, announce once when a card first becomes unsaved. ## Notes - "Not saved" (or the chosen wording) is a new string for the catalogues and Weblate. - Other long forms (company, contact, Settings) could share this later. Related: #258, #656. Checked against `main` at `56fc9d531`.

tiagoagueda added the

accessibility

enhancement

interface

labels

2026-10-15 17:19:48 +00:00

tiagoagueda added this to the 0.5.0 milestone

2026-10-25 17:05:19 +00:00

tiagoagueda referenced this issue from a commit

2026-10-28 15:17:37 +00:00

Ring a card of Your details that holds a change not yet saved (#927)

tiagoagueda referenced this issue from a pull request that will close it,