Your details: Primary and Remove as icons, and Remove confirmed in a dialog and done at once #303

New issue

Closed

opened 2026-09-29 11:26:37 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-09-29 11:26:37 +00:00

Owner

From the interface review of 2026-09-29, for the rows of Telephone numbers, Social profiles, Code repositories, Websites and Identifiers on Your details:

Primary and Remove become icons, in colour.
Clicking Remove asks for confirmation in a Basecoat dialog, and confirming removes the row at once.

What is there today

Primary is a radio button shared by the rows of a block, so the browser enforces exactly one. Remove is the formset's DELETE checkbox. Both are words beside their controls (partials/phone_numbers.html, partials/web_links.html, cotton/identifier_row.html).
Nothing is removed until Save at the foot of the page, together with every other change on it, and a ticked Remove can be unticked until then.
Confirmation elsewhere is a page of its own (#217, #227): Delete account, deleting a listing. Basecoat's dialog was not adopted, for this reason: a dialog opened by a script is no confirmation with scripts off.

What changes, and what it costs

An immediate removal is a different contract. Today the page is one form with one Save. A row removed at once needs its own POST to its own address: owner-scoped, a 404 for anybody else's row, and listed in tests/security/test_isolation_sweep.py and tests/test_page_coverage.py. Anything typed on the page and not yet saved is lost if that POST reloads the page. #258 now asks before a page with unsaved typing is left, and a removal must not become the way round it. With htmx the row can go without anything else being reloaded.
Rules a removal can break. Removing the primary number must hand primary to another row, or leave none, as saving does today. Removing the number that gets you back in is refused, or asks twice (#143, #144).
The dialog without a script. Basecoat's .dialog and .alert-dialog paint either a <dialog> that is open or a popover that is open, so a <button popovertarget> can open one declaratively. Where that is not enough, Remove is a link to a confirmation page, which the script opens in the dialog instead. Either way, the confirmation is a <form method="post">.
Icons need names. An icon-only button carries its words as its accessible name ("Remove: +351 912 345 678") and keeps the 24-pixel target. It does not rely on colour: a chosen and an unchosen Primary differ in shape, not only in hue, and survive forced colours.
Postal addresses were not named in the review, but their rows have the same shape. Doing them in the same change keeps one behaviour on one page.

Done when

Every one of these rows (addresses included, if they join) is removed at once after a confirmation, with scripts on and off.
The dialog is a component another page can use. Delete account and the other confirmation pages may move to it later, in an issue of their own.
The browser suite removes a row by keyboard, checks where focus lands after the row is gone (the next row, or the block's heading), and runs axe in both themes.

From the interface review of 2026-09-29, for the rows of *Telephone numbers*, *Social profiles*, *Code repositories*, *Websites* and *Identifiers* on *Your details*: - *Primary* and *Remove* become icons, in colour. - Clicking *Remove* asks for confirmation in a Basecoat dialog, and confirming removes the row at once. ## What is there today - *Primary* is a radio button shared by the rows of a block, so the browser enforces exactly one. *Remove* is the formset's `DELETE` checkbox. Both are words beside their controls (`partials/phone_numbers.html`, `partials/web_links.html`, `cotton/identifier_row.html`). - Nothing is removed until *Save* at the foot of the page, together with every other change on it, and a ticked *Remove* can be unticked until then. - Confirmation elsewhere is a page of its own (#217, #227): *Delete account*, deleting a listing. Basecoat's dialog was not adopted, for this reason: a dialog opened by a script is no confirmation with scripts off. ## What changes, and what it costs - **An immediate removal is a different contract.** Today the page is one form with one *Save*. A row removed at once needs its own `POST` to its own address: owner-scoped, a 404 for anybody else's row, and listed in `tests/security/test_isolation_sweep.py` and `tests/test_page_coverage.py`. Anything typed on the page and not yet saved is lost if that `POST` reloads the page. #258 now asks before a page with unsaved typing is left, and a removal must not become the way round it. With htmx the row can go without anything else being reloaded. - **Rules a removal can break.** Removing the primary number must hand *primary* to another row, or leave none, as saving does today. Removing the number that *gets you back in* is refused, or asks twice (#143, #144). - **The dialog without a script.** Basecoat's `.dialog` and `.alert-dialog` paint either a `<dialog>` that is open or a `popover` that is open, so a `<button popovertarget>` can open one declaratively. Where that is not enough, *Remove* is a link to a confirmation page, which the script opens in the dialog instead. Either way, the confirmation is a `<form method="post">`. - **Icons need names.** An icon-only button carries its words as its accessible name ("Remove: +351 912 345 678") and keeps the 24-pixel target. It does not rely on colour: a chosen and an unchosen *Primary* differ in shape, not only in hue, and survive forced colours. - *Postal addresses* were not named in the review, but their rows have the same shape. Doing them in the same change keeps one behaviour on one page. ## Done when - Every one of these rows (addresses included, if they join) is removed at once after a confirmation, with scripts on and off. - The dialog is a component another page can use. *Delete account* and the other confirmation pages may move to it later, in an issue of their own. - The browser suite removes a row by keyboard, checks where focus lands after the row is gone (the next row, or the block's heading), and runs axe in both themes.

tiagoagueda added this to the 0.5.0 milestone

2026-09-29 11:26:37 +00:00

tiagoagueda added the

enhancement

accessibility

interface

labels

Rows
Columns