Overhaul form visuals and improve a11y

com.woltlab.wcf/fileDelete.xml

@@ -34,6 +34,7 @@
 		<file>js/WoltLabSuite/Core/Media/Manager/Search.js</file>
 		<file>js/WoltLabSuite/Core/Media/Replace.js</file>
 		<file>js/WoltLabSuite/Core/Media/Upload.js</file>
+		<file>js/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.js</file>
 		<file>lib/system/clipboard/action/MediaClipboardAction.class.php</file>
 		<file>lib/system/upload/MediaReplaceUploadFileValidationStrategy.class.php</file>
 		<file>lib/system/upload/MediaUploadFileValidationStrategy.class.php</file>

com.woltlab.wcf/templates/__multifactorTotpDevicesContainer.tpl

@@ -1,17 +1,16 @@
 <section id="{$container->getPrefixedId()}Container"{*
 	*}{if !$container->getClasses()|empty} class="{implode from=$container->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
 	*}{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
+	*}{if $container->getLabel() !== null} aria-labelledby="{$container->getPrefixedId()}Title"{/if}{*
 	*}{if !$container->checkDependencies()} style="display: none;"{/if}{*
 *}>
 	{if $container->getLabel() !== null}
-		{if $container->getDescription() !== null}
-			<header class="sectionHeader">
-				<h2 class="sectionTitle">{unsafe:$container->getLabel()}{if $container->markAsRequired()} <span class="formFieldRequired">*</span>{/if}</h2>
-				<p class="sectionDescription">{unsafe:$container->getDescription()}</p>
-			</header>
-		{else}
-			<h2 class="sectionTitle">{unsafe:$container->getLabel()}{if $container->markAsRequired()} <span class="formFieldRequired">*</span>{/if}</h2>
-		{/if}
+		<header class="formSection__header">
+			<h2 id="{$container->getPrefixedId()}Title" class="formSection__title">{unsafe:$container->getLabel()}{if $container->markAsRequired()} <span class="formSection__required">*</span>{/if}</h2>
+			{if $container->getDescription() !== null}
+				<p class="formSection__description">{unsafe:$container->getDescription()}</p>
+			{/if}
+		</header>
 	{/if}
 
 	<div class="tabularBox">

com.woltlab.wcf/templates/__multifactorTotpNewDeviceContainer.tpl

@@ -1,17 +1,16 @@
 <section id="{$container->getPrefixedId()}Container"{*
 	*}{if !$container->getClasses()|empty} class="{implode from=$container->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
 	*}{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
+	*}{if $container->getLabel() !== null} aria-labelledby="{$container->getPrefixedId()}Title"{/if}{*
 	*}{if !$container->checkDependencies()} style="display: none;"{/if}{*
 *}>
 	{if $container->getLabel() !== null}
-		{if $container->getDescription() !== null}
-			<header class="sectionHeader">
-				<h2 class="sectionTitle">{unsafe:$container->getLabel()}{if $container->markAsRequired()} <span class="formFieldRequired">*</span>{/if}</h2>
-				<p class="sectionDescription">{unsafe:$container->getDescription()}</p>
-			</header>
-		{else}
-			<h2 class="sectionTitle">{unsafe:$container->getLabel()}{if $container->markAsRequired()} <span class="formFieldRequired">*</span>{/if}</h2>
-		{/if}
+		<header class="formSection__header">
+			<h2 id="{$container->getPrefixedId()}Title" class="formSection__title">{unsafe:$container->getLabel()}{if $container->markAsRequired()} <span class="formSection__required">*</span>{/if}</h2>
+			{if $container->getDescription() !== null}
+				<p class="formSection__description">{unsafe:$container->getDescription()}</p>
+			{/if}
+		</header>
 	{/if}
 
 	{lang}wcf.user.security.multifactor.totp.newDevice.description{/lang}
@@ -29,7 +28,7 @@
 			{/foreach}
 
 			{if $container->getNodeById('submitButton')->isAvailable()}
-				<div class="formSubmit">
+				<div class="formBuilder__submit">
 					{unsafe:$container->getNodeById('submitButton')->getHtml()}
 				</div>
 			{/if}

com.woltlab.wcf/templates/shared_colorFormField.tpl

@@ -9,6 +9,7 @@
 		id="{$field->getPrefixedId()}_colorPickerButton"
 		title="{lang}wcf.style.colorPicker.button.changeColor{/lang}"
 		data-store="{$field->getPrefixedId()}"
+		{foreach from=$field->getAriaAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}
 	>
 		<span{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
 	</button>

com.woltlab.wcf/templates/shared_form.tpl

@@ -33,15 +33,14 @@
 {/if}
 
 {if $form->isAjax()}
-	<section id="{$form->getId()}"{*
-		*}{if !$form->getClasses()|empty} class="{implode from=$form->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
+	<section id="{$form->getId()}" class="formBuilder{foreach from=$form->getClasses() item='class'} {$class}{/foreach}"{*
 		*}{foreach from=$form->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
 	*}>
 {else}
 	<form method="{$form->getMethod()}" {*
 		*}action="{$form->getAction()}" {*
-		*}id="{$form->getId()}"{*
-		*}{if !$form->getClasses()|empty} class="{implode from=$form->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
+		*}id="{$form->getId()}" {*
+		*}class="formBuilder{foreach from=$form->getClasses() item='class'} {$class}{/foreach}"{*
 		*}{foreach from=$form->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
 	*}>
 {/if}
@@ -52,7 +51,7 @@
 	{/foreach}
 
 	{if !$form->getButtons()|empty}
-		<div class="formSubmit">
+		<div class="formBuilder__submit">
 			{foreach from=$form->getButtons() item=button}
 				{if $button->isAvailable()}
 					{unsafe:$button->getHtml()}

com.woltlab.wcf/templates/shared_formContainer.tpl

@@ -1,17 +1,16 @@
 <section id="{$container->getPrefixedId()}Container"{*
 	*}{if !$container->getClasses()|empty} class="{implode from=$container->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
 	*}{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
+	*}{if $container->getLabel() !== null} aria-labelledby="{$container->getPrefixedId()}Title"{/if}{*
 	*}{if !$container->checkDependencies()} style="display: none;"{/if}{*
 *}>
 	{if $container->getLabel() !== null}
-		{if $container->getDescription() !== null}
-			<header class="sectionHeader">
-				<h2 class="sectionTitle">{unsafe:$container->getLabel()}{if $container->markAsRequired()} <span class="formFieldRequired">*</span>{/if}</h2>
-				<p class="sectionDescription">{unsafe:$container->getDescription()}</p>
-			</header>
-		{else}
-			<h2 class="sectionTitle">{unsafe:$container->getLabel()}{if $container->markAsRequired()} <span class="formFieldRequired">*</span>{/if}</h2>
-		{/if}
+		<header class="formSection__header">
+			<h2 id="{$container->getPrefixedId()}Title" class="formSection__title">{unsafe:$container->getLabel()}{if $container->markAsRequired()} <span class="formSection__required">*</span>{/if}</h2>
+			{if $container->getDescription() !== null}
+				<p class="formSection__description">{unsafe:$container->getDescription()}</p>
+			{/if}
+		</header>
 	{/if}
 
 	{include file='shared_formContainerChildren'}

com.woltlab.wcf/templates/shared_formField.tpl

@@ -1,15 +1,24 @@
-<dl id="{$field->getPrefixedId()}Container"{*
-	*}{if !$field->getClasses()|empty} class="{implode from=$field->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
+<div id="{$field->getPrefixedId()}Container" class="formField{foreach from=$field->getClasses() item='class'} {$class}{/foreach}"{*
 	*}{foreach from=$field->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
+	*}{if $field->isGroup()} role="group"{if $field->getLabel() !== null} aria-labelledby="{$field->getPrefixedId()}Label"{/if}{foreach from=$field->getAriaAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{/if}{*
 	*}{if !$field->checkDependencies()} style="display: none;"{/if}{*
 *}>
-	<dt>{if $field->getLabel() !== null}<label for="{$field->getPrefixedId()}">{unsafe:$field->getLabel()}</label>{if $field->isRequired() && $form->marksRequiredFields()} <span class="formFieldRequired">*</span>{/if}{/if}</dt>
-	<dd>
+	<div class="formField__label">{*
+		*}{if $field->getLabel() !== null}{*
+			*}{if $field->isGroup()}{*
+				*}<span id="{$field->getPrefixedId()}Label">{unsafe:$field->getLabel()}</span>{*
+			*}{else}{*
+				*}<label id="{$field->getPrefixedId()}Label" for="{$field->getLabelTarget()}">{unsafe:$field->getLabel()}</label>{*
+			*}{/if}{*
+			*}{if $field->isRequired() && $form->marksRequiredFields()} <span class="formField__required"{if !$field->isGroup()} aria-hidden="true"{/if}>*</span>{/if}{*
+		*}{/if}{*
+	*}</div>
+	<div class="formField__input">
 		{unsafe:$field->getFieldHtml()}
+	</div>
 
-		{include file='shared_formFieldErrors'}
-		{include file='shared_formFieldDescription'}
-		{include file='shared_formFieldDependencies'}
-		{include file='shared_formFieldDataHandler'}
-	</dd>
-</dl>
+	{include file='shared_formFieldErrors'}
+	{include file='shared_formFieldDescription'}
+	{include file='shared_formFieldDependencies'}
+	{include file='shared_formFieldDataHandler'}
+</div>

com.woltlab.wcf/templates/shared_formFieldDescription.tpl

@@ -1,3 +1,3 @@
 {if $field->getDescription() !== null}
-	<small>{unsafe:$field->getDescription()}</small>
+	<div id="{$field->getPrefixedId()}Description" class="formField__description">{unsafe:$field->getDescription()}</div>
 {/if}

com.woltlab.wcf/templates/shared_formFieldError.tpl

@@ -1 +1 @@
-<small class="innerError">{unsafe:$error->getMessage()}</small>
+<p class="formField__error">{unsafe:$error->getMessage()}</p>

com.woltlab.wcf/templates/shared_formFieldErrors.tpl

@@ -1,3 +1,7 @@
-{foreach from=$field->getValidationErrors() item='validationError'}
-	{unsafe:$validationError->getHtml()}
-{/foreach}
+{if !$field->getValidationErrors()|empty}
+	<div id="{$field->getPrefixedId()}Error" class="formField__errors">
+		{foreach from=$field->getValidationErrors() item='validationError'}
+			{unsafe:$validationError->getHtml()}
+		{/foreach}
+	</div>
+{/if}

com.woltlab.wcf/templates/shared_inlineLabelFormField.tpl

@@ -1,18 +1,16 @@
-<dl id="{$field->getPrefixedId()}Container"{*
-	*}{if !$field->getClasses()|empty} class="{implode from=$field->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
+<div id="{$field->getPrefixedId()}Container" class="formField formField--inlineLabel{foreach from=$field->getClasses() item='class'} {$class}{/foreach}"{*
 	*}{foreach from=$field->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
 	*}{if !$field->checkDependencies()} style="display: none;"{/if}{*
 *}>
-	<dt></dt>
-	<dd>
-		<label>
+	<div class="formField__input">
+		<label id="{$field->getPrefixedId()}Label" class="formField__inlineLabel">
 			{unsafe:$field->getFieldHtml()}
-			{unsafe:$field->getLabel()}{if $field->isRequired() && $form->marksRequiredFields()} <span class="formFieldRequired">*</span>{/if}
+			<span class="formField__inlineLabelText">{unsafe:$field->getLabel()}{if $field->isRequired() && $form->marksRequiredFields()} <span class="formField__required" aria-hidden="true">*</span>{/if}</span>
 		</label>
+	</div>
 
-		{include file='shared_formFieldErrors'}
-		{include file='shared_formFieldDescription'}
-		{include file='shared_formFieldDependencies'}
-		{include file='shared_formFieldDataHandler'}
-	</dd>
-</dl>
+	{include file='shared_formFieldErrors'}
+	{include file='shared_formFieldDescription'}
+	{include file='shared_formFieldDependencies'}
+	{include file='shared_formFieldDataHandler'}
+</div>

com.woltlab.wcf/templates/shared_multipleSelectFormField.tpl

@@ -4,6 +4,7 @@
 	{if !$field->getFieldClasses()|empty} class="{implode from=$field->getFieldClasses() item='class' glue=' '}{$class}{/implode}"{/if}
 	{if $field->isRequired()} required{/if}
 	multiple
+	{foreach from=$field->getAriaAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}
 >
 	{foreach from=$field->getNestedOptions() item=__fieldNestedOption}
 		<option

com.woltlab.wcf/templates/shared_numericRangeFormField.tpl

@@ -5,6 +5,7 @@
 	value="{$field->getFromValue()}"
 	step="{$field->getDefaultStep()}"
 	placeholder="{lang}wcf.date.period.start{/lang}"
+	aria-label="{lang}wcf.date.period.start{/lang}"
 	{if !$field->getFieldClasses()|empty} class="{implode from=$field->getFieldClasses() item='class' glue=' '}{$class}{/implode}"{/if}
 	{if $field->isAutofocused()} autofocus{/if}
 	{if $field->isRequired()} required{/if}
@@ -20,6 +21,7 @@
 	value="{$field->getToValue()}"
 	step="{$field->getDefaultStep()}"
 	placeholder="{lang}wcf.date.period.end{/lang}"
+	aria-label="{lang}wcf.date.period.end{/lang}"
 	{if !$field->getFieldClasses()|empty} class="{implode from=$field->getFieldClasses() item='class' glue=' '}{$class}{/implode}"{/if}
 	{if $field->isRequired()} required{/if}
 	{if $field->isImmutable()} disabled{/if}

com.woltlab.wcf/templates/shared_radioButtonFormField.tpl

@@ -1,5 +1,5 @@
 {if !$field->isRequired()}
-	<label>
+	<label class="formField__inlineLabel">
 		<input {*
 			*}type="radio" {*
 			*}name="{$field->getPrefixedId()}" {*
@@ -12,7 +12,7 @@
 	</label>
 {/if}
 {foreach from=$field->getOptions() key=$__fieldValue item=__fieldLabel}
-	<label>
+	<label class="formField__inlineLabel">
 		<input {*
 			*}type="radio" {*
 			*}name="{$field->getPrefixedId()}" {*

com.woltlab.wcf/templates/shared_ratingFormField.tpl

@@ -1,36 +1,34 @@
-<ul class="ratingList jsOnly">
-	{foreach from=$field->getRatings() item=rating}
-		<li data-rating="{$rating}">
-			<button type="button" class="jsTooltip" title="{lang maximumRating=$field->getMaximum()}wcf.form.field.rating.ratingTitle{/lang}">
-				{if $rating <= $field->getValue()}
-					{icon size=24 name='star' type='solid'}
-				{else}
-					{icon size=24 name='star'}
-				{/if}
-			</button>
-		</li>
-	{/foreach}
+<div class="ratingField">
 	{if $field->isNullable()}
-		<li class="ratingMetaButton" data-action="removeRating">
-			<button type="button" class="jsTooltip button small" title="{lang}wcf.form.field.rating.removeRating{/lang}">
-				{icon size=24 name='xmark'}
-			</button>
-		</li>
+		<label class="ratingField__reset jsTooltip" title="{lang}wcf.form.field.rating.removeRating{/lang}">
+			<input {*
+				*}type="radio" {*
+				*}name="{$field->getPrefixedId()}" {*
+				*}value="" {*
+				*}class="ratingField__input visuallyHidden"{*
+				*}{if $field->getValue() === null} checked{/if}{*
+				*}{if $field->isImmutable()} disabled{/if}{*
+			*}>
+			{icon size=24 name='xmark'}
+			<span class="visuallyHidden">{lang}wcf.form.field.rating.removeRating{/lang}</span>
+		</label>
 	{/if}
-</ul>
-<noscript>
-	<select name="{$field->getPrefixedId()}" {if $field->isImmutable()} disabled{/if}>
+	<span class="ratingField__stars">
 		{foreach from=$field->getRatings() item=rating}
-			<option value="{$rating}">{$rating}</option>
+			<label class="ratingField__star">
+				<input {*
+					*}type="radio" {*
+					*}name="{$field->getPrefixedId()}" {*
+					*}value="{$rating}" {*
+					*}class="ratingField__input visuallyHidden"{*
+					*}{if $field->getValue() !== null && $field->getValue() == $rating} checked{/if}{*
+					*}{if $field->isImmutable()} disabled{/if}{*
+					*}{if $field->isRequired()} required{/if}{*
+				*}>
+				<span class="ratingField__icon ratingField__icon--empty">{icon size=24 name='star'}</span>
+				<span class="ratingField__icon ratingField__icon--full">{icon size=24 name='star' type='solid'}</span>
+				<span class="visuallyHidden">{lang maximumRating=$field->getMaximum()}wcf.form.field.rating.ratingTitle{/lang}</span>
+			</label>
 		{/foreach}
-	</select>
-</noscript>
-
-<script data-relocate="true">
-	require(['WoltLabSuite/Core/Form/Builder/Field/Controller/Rating'], function(FormBuilderFieldRating) {
-		new FormBuilderFieldRating(
-			'{unsafe:$field->getPrefixedId()|encodeJS}',
-			{if $field->getValue() !== null}{$field->getValue()}{else}''{/if}
-		);
-	});
-</script>
+	</span>
+</div>

com.woltlab.wcf/templates/shared_rowFormFieldContainer.tpl

@@ -1,28 +1,32 @@
-<dl id="{$container->getPrefixedId()}Container"{*
-	*}{if !$container->getClasses()|empty} class="{implode from=$container->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
+<div id="{$container->getPrefixedId()}Container" class="formField{foreach from=$container->getClasses() item='class'} {$class}{/foreach}"{*
 	*}{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
+	*} role="group"{if $container->getLabel() !== null} aria-labelledby="{$container->getPrefixedId()}Label"{/if}{if $container->getDescription() !== null} aria-describedby="{$container->getPrefixedId()}Description"{/if}{*
 	*}{if !$container->checkDependencies()} style="display: none;"{/if}{*
 *}>
-	<dt>{if $container->getLabel() !== null}<label for="{$container->getPrefixedId()}">{unsafe:$container->getLabel()}</label>{/if}</dt>
-	<dd>
+	<div class="formField__label">{if $container->getLabel() !== null}<span id="{$container->getPrefixedId()}Label">{unsafe:$container->getLabel()}</span>{/if}</div>
+	<div class="formField__input">
 		<div class="row rowColGap formGrid">
 			{foreach from=$container item='field'}
 				{if $field->isAvailable()}
-					<div id="{$field->getPrefixedId()}Container" {if !$field->getClasses()|empty} class="{implode from=$field->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{foreach from=$field->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{if !$field->checkDependencies()} style="display: none;"{/if}>
+					<div id="{$field->getPrefixedId()}Container" class="formField__gridItem{foreach from=$field->getClasses() item='class'} {$class}{/foreach}"{foreach from=$field->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{if !$field->checkDependencies()} style="display: none;"{/if}>
+						{if $field->getLabel() !== null && $field->getLabelTarget() !== null}
+							<label for="{$field->getLabelTarget()}" class="visuallyHidden">{unsafe:$field->getLabel()}</label>
+						{/if}
 						{unsafe:$field->getFieldHtml()}
-						
+
 						{include file='shared_formFieldErrors'}
+						{include file='shared_formFieldDescription'}
 						{include file='shared_formFieldDependencies'}
 						{include file='shared_formFieldDataHandler'}
 					</div>
 				{/if}
 			{/foreach}
 		</div>
-		{if $container->getDescription() !== null}
-			<small>{unsafe:$container->getDescription()}</small>
-		{/if}
-	</dd>
-</dl>
+	</div>
+	{if $container->getDescription() !== null}
+		<div id="{$container->getPrefixedId()}Description" class="formField__description">{unsafe:$container->getDescription()}</div>
+	{/if}
+</div>
 
 {include file='shared_formContainerDependencies'}
 

com.woltlab.wcf/templates/shared_selectFormField.tpl

@@ -7,6 +7,7 @@
 	{elseif $field->isRequired()}
 		required
 	{/if}
+	{foreach from=$field->getAriaAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}
 >
 	{if !$field->hasDefaultValue()}
 		<option value="">{lang}wcf.global.noSelection{/lang}</option>

com.woltlab.wcf/templates/shared_singleSelectionFormField.tpl

@@ -31,6 +31,7 @@
 	<select id="{$field->getPrefixedId()}" {*
 		*}name="{$field->getPrefixedId()}"{*
 		*}{if !$field->getFieldClasses()|empty} class="{implode from=$field->getFieldClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
+		*}{foreach from=$field->getAriaAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
 	*}>
 		{foreach from=$field->getNestedOptions() item=__fieldNestedOption}
 			<option {*