[go: up one dir, main page]

Page MenuHomePhabricator

Radio, Checkbox: clean up HTML
Closed, ResolvedPublic2 Estimated Story Points

Description

This is a follow-up task to T363416

Radio and Checkbox's current HTML structure has a top-level span element with nested div elements. Examples include:

  • the input's content wrapper div
  • the custom input div
  • the nested Label component has a top-level div

We want to clean up the HTML in Checkbox and Radio.

Acceptance Criteria

  • Change top-level span to a div in Radio and Checkbox.
  • Update the CSS-only example markup to match the new Vue markup
  • Ensure that the Radio and Checkbox styles are backward-compatible (if this is not possible, then let's discuss further on the task)
  • Ensure this doesn't break existing code, especially for inline inputs. (CodexHTMLForm, etc)

Event Timeline

Volker_E subscribed.

Nice to catch that!
I'd also consider to just wrap into spans instead. Might be simpler long-term as we can always make a span display: block while the other way round is risky from a valid HTML perspective.
And also the source of evil is the Label component's template and not Checkbox and Radio.

I personally think that Checkbox and Radio top-level elements should be divs, and Labels should never be. But that might come down a bit to philosophical preferences with following the HTML standard.

Change #1056172 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] Label: fix HTML DOM structure

https://gerrit.wikimedia.org/r/1056172

Volker_E renamed this task from Checkbox, Radio: clean up template to Label: Make template DOM valid.Jul 23 2024, 2:52 PM
Volker_E updated the task description. (Show Details)

Yes exactly! This is a follow-up task for the task you mentioned to clean up the HTML. I'll add a note in the description. Thanks!

lwatson renamed this task from Label: Make template DOM valid to Radio, Checkbox: clean up HTML.Jul 24 2024, 12:50 PM
lwatson updated the task description. (Show Details)

@Volker_E Hey, this was a follow-up task based on this discussion in Gerrit. Can you please create a new task for the Label?

CCiufo-WMF triaged this task as Medium priority.Aug 1 2024, 5:19 PM
lwatson set the point value for this task to 1.Aug 5 2024, 5:51 PM

Change #1059936 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] Radio, Checkbox: clean up HTML

https://gerrit.wikimedia.org/r/1059936

egardner changed the point value for this task from 1 to 2.

Change #1062163 had a related patch set uploaded (by LWatson; author: LWatson):

[mediawiki/core@master] HTMLRadioField: clean up HTML

https://gerrit.wikimedia.org/r/1062163

lwatson changed the task status from Open to In Progress.Aug 13 2024, 2:00 PM
lwatson updated the task description. (Show Details)

Change #1059936 merged by jenkins-bot:

[design/codex@main] Radio, Checkbox: clean up HTML

https://gerrit.wikimedia.org/r/1059936

Change #1062163 merged by jenkins-bot:

[mediawiki/core@master] HTMLRadioField: clean up HTML

https://gerrit.wikimedia.org/r/1062163

Change #1064134 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v1.11.0 to v1.11.1

https://gerrit.wikimedia.org/r/1064134

Change #1064134 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.11.0 to v1.11.1

https://gerrit.wikimedia.org/r/1064134