Social profiles: clicking the address prefix puts the cursor in the username box #924

New issue

Closed

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

tiagoagueda commented

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

Owner

What exists today

templates/partials/web_links.html (#678): with a service chosen, the address is Basecoat's input-group (data-address-group). The prefix is <span data-align="start" id="<url id>_prefix"><bdi dir="ltr">https://…/</bdi></span> followed by the url input, and the input is aria-describedby the prefix. The prefix is text, not a label. Clicking it selects text and does not focus the box.
assets/css/basecoat.css: .input-group already draws the ring on the group whenever anything inside it has focus (focus-within:border-brand-500 focus-within:ring-2 …). Once the box has focus, the group is ringed. The missing part is the click on the prefix. (#868 dealt with a focused address field being ringed twice. Check that this does not bring that back.)
The telephone row's group ([data-phone-field]) and the country-and-flag group have the same shape.

What would change

A pointer press on the prefix (and on any other part of the group that is not a control) focuses the group's input and puts the caret at its end. Either:
- make the prefix part of the input's <label> (it already has one above, "Username"; a second label element pointing at the box is allowed and keeps it script-free), or
- in app.js, delegate mousedown on [data-address-group] > span to input.focus() and prevent the text selection.
Keep the prefix selectable for copying, for example by focusing on a click but not on a drag, or decide that focusing matters more.
The ring stays on the whole group through focus-within, so the CSS needs no change. Check that only one ring is drawn (#868).

Accessibility

The input's name stays "Username", described by the prefix. A second <label> would make the prefix part of the name. If so, take it out of aria-describedby so it is not read twice.

No new strings.

Related: #678, #868, #305.

Checked against main at 56fc9d531.

In a social profile's row (and a code repository's), clicking the service's fixed address prefix in front of the username puts the cursor in the username box. The whole group (prefix and box) shows the focus ring. ## What exists today - `templates/partials/web_links.html` (#678): with a service chosen, the address is Basecoat's `input-group` (`data-address-group`). The prefix is `<span data-align="start" id="<url id>_prefix"><bdi dir="ltr">https://…/</bdi></span>` followed by the `url` input, and the input is `aria-describedby` the prefix. The prefix is text, not a label. Clicking it selects text and does not focus the box. - `assets/css/basecoat.css`: `.input-group` already draws the ring on the group whenever anything inside it has focus (`focus-within:border-brand-500 focus-within:ring-2 …`). Once the box has focus, the group is ringed. The missing part is the click on the prefix. (#868 dealt with a focused address field being ringed twice. Check that this does not bring that back.) - The telephone row's group (`[data-phone-field]`) and the country-and-flag group have the same shape. ## What would change - A pointer press on the prefix (and on any other part of the group that is not a control) focuses the group's input and puts the caret at its end. Either: - make the prefix part of the input's `<label>` (it already has one above, "Username"; a second label element pointing at the box is allowed and keeps it script-free), or - in `app.js`, delegate `mousedown` on `[data-address-group] > span` to `input.focus()` and prevent the text selection. - Keep the prefix selectable for copying, for example by focusing on a click but not on a drag, or decide that focusing matters more. - The ring stays on the whole group through `focus-within`, so the CSS needs no change. Check that only one ring is drawn (#868). ## Accessibility - The input's name stays "Username", described by the prefix. A second `<label>` would make the prefix part of the name. If so, take it out of `aria-describedby` so it is not read twice. No new strings. Related: #678, #868, #305. Checked against `main` at `56fc9d531`.

tiagoagueda added the

accessibility

enhancement

interface

labels

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

tiagoagueda referenced this issue from a commit

2026-10-18 18:04:25 +00:00

Your details: headings inside the cards, level star and bin, icons, primary identifier, map pin, one profile per service

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

2026-10-18 18:04:35 +00:00

Your details: twelve fixes and additions (#919–#932) #1005