Your details: seven cards draw their heading and question mark on the border, not inside the card #919

New issue

Closed

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

tiagoagueda commented

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

Owner

On Your details, seven cards draw their heading and question mark on the card's top border instead of inside the card: Messaging, Telephone numbers, Social profiles, Code repositories, Websites, Postal addresses and Identifiers. The other cards (Your picture, Your CV photo, Your name, Personal details, Contact block) put them inside. All twelve should look the same, with the heading and mark inside the card.

What exists today

The seven are <fieldset class="card …"> with a <legend class="label px-1">:
- templates/partials/messaging_handles.html (#section-messaging)
- partials/phone_numbers.html (#section-phones)
- partials/web_links.html (#section-links-<kind>, one per kind)
- partials/postal_addresses.html (#section-addresses)
- accounts/profile.html (#section-identifiers)
A legend is drawn by the browser on the fieldset's border. That is WHATWG's fieldset rendering, the same in every engine.
assets/css/app.css (under "A card's question mark (#302)") puts the mark on that border too, on purpose: fieldset > [data-help-mark][data-variant] { absolute end-4 bg-card; inset-block-start: calc(-0.625rem - var(--spacing) * 3) }.
The other five cards are <div class="card"> headed by <c-section-title>, whose header is Basecoat's card header with the mark in a second grid column (.section-title:has(> [data-help-mark])).
The partials are shared with a contact's form (jobs/contact_form.html) and a company's form (jobs/company_form.html), which draw the same fieldsets.

What would change

Each of the seven keeps its <fieldset>, because the grouping is what a screen reader announces. Its visible heading is drawn inside the card in the same place and type as <c-section-title>, with the question mark at the inline end of that line.
Two ways to do it, either acceptable:
1. The legend becomes visually hidden (sr-only), and a <c-section-title> (aria-hidden, or a heading the fieldset is aria-labelledby) draws the visible heading inside.
2. Style the legend out of the border (float: inline-start; inline-size: 100%, which takes it out of the border in every engine) and give it the section title's paint, with the mark beside it in a header row.
The fieldset > [data-help-mark] rule that lifts the mark onto the border goes.
Same result on the contact and company forms, which share the partials.

To check

Each section is still announced by its name (fieldset/legend or aria-labelledby), and the section menu's anchors still land on the heading.
tests/test_stylesheet.py and tests/test_template_lint.py (HAND_HEADING) may flag a heading drawn by hand, so use <c-section-title>.

No new strings.

Related: #302, #866, #871.

Checked against main at 56fc9d531.

On *Your details*, seven cards draw their heading and question mark on the card's top border instead of inside the card: *Messaging*, *Telephone numbers*, *Social profiles*, *Code repositories*, *Websites*, *Postal addresses* and *Identifiers*. The other cards (*Your picture*, *Your CV photo*, *Your name*, *Personal details*, *Contact block*) put them inside. All twelve should look the same, with the heading and mark inside the card. ## What exists today - The seven are `<fieldset class="card …">` with a `<legend class="label px-1">`: - `templates/partials/messaging_handles.html` (`#section-messaging`) - `partials/phone_numbers.html` (`#section-phones`) - `partials/web_links.html` (`#section-links-<kind>`, one per kind) - `partials/postal_addresses.html` (`#section-addresses`) - `accounts/profile.html` (`#section-identifiers`) - A legend is drawn by the browser on the fieldset's border. That is WHATWG's fieldset rendering, the same in every engine. - `assets/css/app.css` (under "A card's question mark (#302)") puts the mark on that border too, on purpose: `fieldset > [data-help-mark][data-variant] { absolute end-4 bg-card; inset-block-start: calc(-0.625rem - var(--spacing) * 3) }`. - The other five cards are `<div class="card">` headed by `<c-section-title>`, whose header is Basecoat's card header with the mark in a second grid column (`.section-title:has(> [data-help-mark])`). - The partials are shared with a contact's form (`jobs/contact_form.html`) and a company's form (`jobs/company_form.html`), which draw the same fieldsets. ## What would change - Each of the seven keeps its `<fieldset>`, because the grouping is what a screen reader announces. Its visible heading is drawn inside the card in the same place and type as `<c-section-title>`, with the question mark at the inline end of that line. - Two ways to do it, either acceptable: 1. The legend becomes visually hidden (`sr-only`), and a `<c-section-title>` (`aria-hidden`, or a heading the fieldset is `aria-labelledby`) draws the visible heading inside. 2. Style the legend out of the border (`float: inline-start; inline-size: 100%`, which takes it out of the border in every engine) and give it the section title's paint, with the mark beside it in a header row. - The `fieldset > [data-help-mark]` rule that lifts the mark onto the border goes. - Same result on the contact and company forms, which share the partials. ## To check - Each section is still announced by its name (fieldset/legend or `aria-labelledby`), and the section menu's anchors still land on the heading. - `tests/test_stylesheet.py` and `tests/test_template_lint.py` (`HAND_HEADING`) may flag a heading drawn by hand, so use `<c-section-title>`. No new strings. Related: #302, #866, #871. Checked against `main` at `56fc9d531`.

tiagoagueda added the

bug

interface

labels

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

tiagoagueda referenced this issue

2026-10-15 17:20:13 +00:00

Your details: a question mark beside the heading and on every section, and no helper text under any heading #918

tiagoagueda referenced this issue

2026-10-16 13:22:16 +00:00

Phones, addresses and social profiles: one behaviour for companies, contacts and Your details #934

tiagoagueda referenced this issue from a commit