Page MenuHomePhabricator

Don't duplicate fieldset elements in OOUI HTMLForm output
Closed, ResolvedPublic

Description

fieldset elements and their optional legend elements are structural markup.
In case of the new Special:Preferences page we're outputting

<fieldset id="mw-prefsection-personal-info" class="oo-ui-layout oo-ui-labelElement oo-ui-fieldsetLayout">
	<legend class="oo-ui-fieldsetLayout-header">
		<span class="oo-ui-iconElement-icon"></span>
		<span class="oo-ui-labelElement-label">Basisinformationen</span>
	</legend>
	<div class="oo-ui-fieldsetLayout-group">
		<div aria-disabled="false" class="oo-ui-widget oo-ui-widget-enabled">
			<fieldset id="mw-htmlform-info" class="oo-ui-layout oo-ui-fieldsetLayout">
				<legend class="oo-ui-fieldsetLayout-header">
					<span class="oo-ui-iconElement-icon"></span>
					<span class="oo-ui-labelElement-label"></span>
				</legend>
				<div class="oo-ui-fieldsetLayout-group">
				[…]
				</div>
			</fieldset>
		</div>
	</div>
</fieldset>

which, especially with the empty legend element in the child fieldset is unnecessary, leads to layout issues and might even result in making screenreaders trip.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 14 2017, 10:42 PM

Change 391354 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Hide empty OOUI FieldsetLayout headers

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

It would be much easier for us to set display: none; on the <legend> when there is no label/icon, than to completely remove the element from the DOM. We would have to override setLabel/setIcon to also check whether both label/icon are missing and accordingly remove/insert the element. It can be done, but unless we are sure it's requires, I think it would be an unnecessary complication. As far as I know nothing in HTML prohibits <legend> from being (effectively) empty.

Change 391764 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[oojs/ui@master] FieldsetLayout: Hide header when there is no icon or label

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

Okay, the task description actually had me confused, since it talks a lot about the legends… the real problem here is not the empty legend (although it's good to fix that); it's the fact that the entire thing is wrapped in two layers of FieldsetLayout. That is not an OOUI bug, MediaWiki code is doing it wrong here.

Change 391354 merged by jenkins-bot:
[mediawiki/core@master] Hide empty OOUI FieldsetLayout headers

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

Change 391781 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/core@master] OOUIHTMLForm: Prevent duplicate FieldsetLayout wrapping

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

Change 391781 merged by jenkins-bot:
[mediawiki/core@master] OOUIHTMLForm: Prevent duplicate FieldsetLayout wrapping

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

matmarex closed this task as Resolved.Nov 16 2017, 6:15 PM
matmarex removed a project: Patch-For-Review.
matmarex claimed this task.

Change 391764 merged by jenkins-bot:
[oojs/ui@master] FieldsetLayout: Hide header when there is no icon or label

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