From f624d118c897117bb973329e42b2f9375aec9a40 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 4 Nov 2026 11:32:43 +0100
Subject: [PATCH 01/12] Replace dl-based form builder markup with accessible
 formField structure and native radio rating

---
 .../__multifactorTotpDevicesContainer.tpl     |  15 +-
 .../__multifactorTotpNewDeviceContainer.tpl   |  15 +-
 .../templates/shared_colorFormField.tpl       |   1 +
 com.woltlab.wcf/templates/shared_form.tpl     |   7 +-
 .../templates/shared_formContainer.tpl        |  15 +-
 .../templates/shared_formField.tpl            |  29 ++-
 .../templates/shared_formFieldDescription.tpl |   2 +-
 .../templates/shared_formFieldError.tpl       |   2 +-
 .../templates/shared_formFieldErrors.tpl      |  10 +-
 .../templates/shared_inlineLabelFormField.tpl |  22 +--
 .../shared_multipleSelectFormField.tpl        |   1 +
 .../shared_numericRangeFormField.tpl          |   2 +
 .../templates/shared_ratingFormField.tpl      |  62 +++---
 .../shared_rowFormFieldContainer.tpl          |  25 +--
 .../templates/shared_selectFormField.tpl      |   1 +
 .../shared_singleSelectionFormField.tpl       |   1 +
 .../shared_suffixFormFieldContainer.tpl       |  39 ++--
 .../templates/shared_userFormField.tpl        |   1 +
 .../shared_wysiwygAttachmentFormField.tpl     |  11 +-
 .../Builder/Field/Controller/FileProcessor.ts |  14 +-
 .../Field/Controller/MultilineItemList.ts     |  13 +-
 .../Form/Builder/Field/Controller/Rating.ts   | 122 ------------
 .../Core/Form/Builder/Field/Error.ts          | 113 +++++++++++
 ts/WoltLabSuite/Core/Language/Chooser.ts      |   5 +-
 ts/WoltLabSuite/Core/Ui/Dialog.ts             |   4 +-
 .../files/acp/templates/__boxPipGui.tpl       |   2 +-
 ...__devtoolsProjectInstructionsFormField.tpl |  18 +-
 .../files/acp/templates/__menuPipGui.tpl      |   2 +-
 .../Builder/Field/Controller/FileProcessor.js |  13 +-
 .../Field/Controller/MultilineItemList.js     |  11 +-
 .../Form/Builder/Field/Controller/Rating.js   | 106 ----------
 .../Core/Form/Builder/Field/Error.js          | 108 +++++++++++
 .../js/WoltLabSuite/Core/Language/Chooser.js  |   5 +-
 .../files/js/WoltLabSuite/Core/Ui/Dialog.js   |   4 +-
 .../builder/container/FormContainer.class.php |   2 +-
 .../container/TabMenuFormContainer.class.php  |   2 +-
 .../WysiwygSmileyFormContainer.class.php      |   2 +-
 .../WysiwygTabMenuFormContainer.class.php     |   2 +-
 .../builder/field/AbstractFormField.class.php |  61 ++++++
 .../AbstractFormFieldDecorator.class.php      |  36 ++++
 .../field/BadgeColorFormField.class.php       |   6 +
 .../builder/field/ColorFormField.class.php    |  10 +
 .../field/DateRangeFormField.class.php        |   6 +
 .../field/FileProcessorFormField.class.php    |   6 +
 .../builder/field/IconFormField.class.php     |   6 +
 .../MultilineItemListFormField.class.php      |   6 +
 .../MultipleSelectionFormField.class.php      |   6 +
 .../field/NumericRangeFormField.class.php     |   6 +
 .../field/ObjectFilterFormField.class.php     |   6 +
 .../field/RadioButtonFormField.class.php      |   6 +
 .../builder/field/RatingFormField.class.php   |   8 +-
 .../field/SelectOptionsFormField.class.php    |   6 +
 .../field/SingleSelectionFormField.class.php  |   6 +
 .../field/TAttributeFormField.class.php       |   7 +
 .../field/TimeRangeFormField.class.php        |   6 +
 .../builder/field/UploadFormField.class.php   |   6 +
 .../builder/field/acl/AclFormField.class.php  |   6 +
 .../acl/simple/SimpleAclFormField.class.php   |   6 +
 .../ContentLanguageFormField.class.php        |   6 +
 .../SingleMediaSelectionFormField.class.php   |   6 +
 .../poll/PollOptionListFormField.class.php    |   6 +
 .../trophy/TrophyBadgeFormField.class.php     |   6 +
 .../install/files/style/ui/formBuilder.scss   | 181 ++++++++++++++++++
 wcfsetup/install/files/style/ui/rating.scss   |  90 ++++++++-
 64 files changed, 906 insertions(+), 410 deletions(-)
 delete mode 100644 ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.ts
 create mode 100644 ts/WoltLabSuite/Core/Form/Builder/Field/Error.ts
 delete mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.js
 create mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Error.js
 create mode 100644 wcfsetup/install/files/style/ui/formBuilder.scss

diff --git a/com.woltlab.wcf/templates/__multifactorTotpDevicesContainer.tpl b/com.woltlab.wcf/templates/__multifactorTotpDevicesContainer.tpl
index 32a0c1f6e63..274404eff4e 100644
--- a/com.woltlab.wcf/templates/__multifactorTotpDevicesContainer.tpl
+++ b/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">
diff --git a/com.woltlab.wcf/templates/__multifactorTotpNewDeviceContainer.tpl b/com.woltlab.wcf/templates/__multifactorTotpNewDeviceContainer.tpl
index f333f97f146..dccf62639f7 100644
--- a/com.woltlab.wcf/templates/__multifactorTotpNewDeviceContainer.tpl
+++ b/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}
diff --git a/com.woltlab.wcf/templates/shared_colorFormField.tpl b/com.woltlab.wcf/templates/shared_colorFormField.tpl
index 18db9a18fcf..7cf0a9116c5 100644
--- a/com.woltlab.wcf/templates/shared_colorFormField.tpl
+++ b/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>
diff --git a/com.woltlab.wcf/templates/shared_form.tpl b/com.woltlab.wcf/templates/shared_form.tpl
index f6988e3b09d..1a30872d351 100644
--- a/com.woltlab.wcf/templates/shared_form.tpl
+++ b/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}
diff --git a/com.woltlab.wcf/templates/shared_formContainer.tpl b/com.woltlab.wcf/templates/shared_formContainer.tpl
index bec0d15161e..70cdfaa7a94 100644
--- a/com.woltlab.wcf/templates/shared_formContainer.tpl
+++ b/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'}
diff --git a/com.woltlab.wcf/templates/shared_formField.tpl b/com.woltlab.wcf/templates/shared_formField.tpl
index a71293f7992..591f0b2f5e2 100644
--- a/com.woltlab.wcf/templates/shared_formField.tpl
+++ b/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>
diff --git a/com.woltlab.wcf/templates/shared_formFieldDescription.tpl b/com.woltlab.wcf/templates/shared_formFieldDescription.tpl
index a6262351b7c..6543fdefe55 100644
--- a/com.woltlab.wcf/templates/shared_formFieldDescription.tpl
+++ b/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}
diff --git a/com.woltlab.wcf/templates/shared_formFieldError.tpl b/com.woltlab.wcf/templates/shared_formFieldError.tpl
index e73edbfb29b..a0acef20b64 100644
--- a/com.woltlab.wcf/templates/shared_formFieldError.tpl
+++ b/com.woltlab.wcf/templates/shared_formFieldError.tpl
@@ -1 +1 @@
-<small class="innerError">{unsafe:$error->getMessage()}</small>
+<p class="formField__error">{unsafe:$error->getMessage()}</p>
diff --git a/com.woltlab.wcf/templates/shared_formFieldErrors.tpl b/com.woltlab.wcf/templates/shared_formFieldErrors.tpl
index d6cf3b29ed8..421c9e97c0b 100644
--- a/com.woltlab.wcf/templates/shared_formFieldErrors.tpl
+++ b/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}
diff --git a/com.woltlab.wcf/templates/shared_inlineLabelFormField.tpl b/com.woltlab.wcf/templates/shared_inlineLabelFormField.tpl
index c4f7b10cce4..8662a72b889 100644
--- a/com.woltlab.wcf/templates/shared_inlineLabelFormField.tpl
+++ b/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>
diff --git a/com.woltlab.wcf/templates/shared_multipleSelectFormField.tpl b/com.woltlab.wcf/templates/shared_multipleSelectFormField.tpl
index 1765d7744fa..857edafe24c 100644
--- a/com.woltlab.wcf/templates/shared_multipleSelectFormField.tpl
+++ b/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
diff --git a/com.woltlab.wcf/templates/shared_numericRangeFormField.tpl b/com.woltlab.wcf/templates/shared_numericRangeFormField.tpl
index 18c67e6be8a..faeb82e81fe 100644
--- a/com.woltlab.wcf/templates/shared_numericRangeFormField.tpl
+++ b/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}
diff --git a/com.woltlab.wcf/templates/shared_ratingFormField.tpl b/com.woltlab.wcf/templates/shared_ratingFormField.tpl
index b4456b30bbc..7ea708db913 100644
--- a/com.woltlab.wcf/templates/shared_ratingFormField.tpl
+++ b/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>
diff --git a/com.woltlab.wcf/templates/shared_rowFormFieldContainer.tpl b/com.woltlab.wcf/templates/shared_rowFormFieldContainer.tpl
index 3513549685f..4adbdaa3e49 100644
--- a/com.woltlab.wcf/templates/shared_rowFormFieldContainer.tpl
+++ b/com.woltlab.wcf/templates/shared_rowFormFieldContainer.tpl
@@ -1,16 +1,19 @@
-<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_formFieldDependencies'}
 						{include file='shared_formFieldDataHandler'}
@@ -18,11 +21,11 @@
 				{/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'}
 
diff --git a/com.woltlab.wcf/templates/shared_selectFormField.tpl b/com.woltlab.wcf/templates/shared_selectFormField.tpl
index 592f647049a..309a7f72b04 100644
--- a/com.woltlab.wcf/templates/shared_selectFormField.tpl
+++ b/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>
diff --git a/com.woltlab.wcf/templates/shared_singleSelectionFormField.tpl b/com.woltlab.wcf/templates/shared_singleSelectionFormField.tpl
index 732485e1cbb..8bdf56fe5ca 100644
--- a/com.woltlab.wcf/templates/shared_singleSelectionFormField.tpl
+++ b/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 {*
diff --git a/com.woltlab.wcf/templates/shared_suffixFormFieldContainer.tpl b/com.woltlab.wcf/templates/shared_suffixFormFieldContainer.tpl
index 9300d905356..bfbf0a4f001 100644
--- a/com.woltlab.wcf/templates/shared_suffixFormFieldContainer.tpl
+++ b/com.woltlab.wcf/templates/shared_suffixFormFieldContainer.tpl
@@ -1,10 +1,9 @@
-<dl id="{$element->getField()->getPrefixedId()}Container"{*
-	*}{if !$element->getField()->getClasses()|empty} class="{implode from=$element->getField()->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
+<div id="{$element->getField()->getPrefixedId()}Container" class="formField{foreach from=$element->getField()->getClasses() item='class'} {$class}{/foreach}"{*
 	*}{foreach from=$element->getField()->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
 	*}{if !$element->getField()->checkDependencies()} style="display: none;"{/if}{*
 *}>
-	<dt>{if $element->getLabel() !== null}<label for="{$element->getField()->getPrefixedId()}">{unsafe:$element->getLabel()}</label>{/if}</dt>
-	<dd>
+	<div class="formField__label">{if $element->getLabel() !== null}<label id="{$element->getField()->getPrefixedId()}Label" for="{$element->getField()->getPrefixedId()}">{unsafe:$element->getLabel()}</label>{/if}</div>
+	<div class="formField__input">
 		<div class="inputAddon">
 			{unsafe:$element->getField()->getFieldHtml()}
 			
@@ -30,23 +29,21 @@
 				{/if}
 			{/if}
 		</div>
-		
-		{if $element->getDescription() !== null}
-			<small>{unsafe:$element->getDescription()}</small>
-		{/if}
-		
-		{include file='shared_formFieldErrors' field=$element->getField()}
-		
-		{if $element->getSuffixField() !== null && $element->getSuffixField()->isAvailable()}
-			{foreach from=$element->getSuffixField()->getValidationErrors() item='validationError'}
-				{unsafe:$validationError->getHtml()}
-			{/foreach}
-		{/if}
-		
-		{include file='shared_formFieldDependencies' field=$element->getField()}
-		{include file='shared_formFieldDataHandler' field=$element->getField()}
-	</dd>
-</dl>
+	</div>
+	
+	{include file='shared_formFieldErrors' field=$element->getField()}
+	
+	{if $element->getSuffixField() !== null && $element->getSuffixField()->isAvailable()}
+		{include file='shared_formFieldErrors' field=$element->getSuffixField()}
+	{/if}
+	
+	{if $element->getDescription() !== null}
+		<div id="{$element->getField()->getPrefixedId()}Description" class="formField__description">{unsafe:$element->getDescription()}</div>
+	{/if}
+	
+	{include file='shared_formFieldDependencies' field=$element->getField()}
+	{include file='shared_formFieldDataHandler' field=$element->getField()}
+</div>
 
 {if $element->getSuffixField() !== null && $element->getSuffixField()->isAvailable() && !$element->getSuffixField()->isImmutable() && $element->suffixHasSelectableOptions()}
 <script data-relocate="true">
diff --git a/com.woltlab.wcf/templates/shared_userFormField.tpl b/com.woltlab.wcf/templates/shared_userFormField.tpl
index 5eb81002ff1..453ac4719d7 100644
--- a/com.woltlab.wcf/templates/shared_userFormField.tpl
+++ b/com.woltlab.wcf/templates/shared_userFormField.tpl
@@ -5,6 +5,7 @@
 	*}class="long"{*
 	*}{if $field->isAutofocused()} autofocus{/if}{*
 	*}{if $field->isImmutable()} disabled{/if}{*
+	*}{foreach from=$field->getAriaAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
 *}>
 
 <script data-relocate="true">
diff --git a/com.woltlab.wcf/templates/shared_wysiwygAttachmentFormField.tpl b/com.woltlab.wcf/templates/shared_wysiwygAttachmentFormField.tpl
index 0b907e3b1b0..060b1a5839d 100644
--- a/com.woltlab.wcf/templates/shared_wysiwygAttachmentFormField.tpl
+++ b/com.woltlab.wcf/templates/shared_wysiwygAttachmentFormField.tpl
@@ -7,13 +7,12 @@
 		{/foreach}
 	</div>
 
-	<dl class="wide">
-		<dt></dt>
-		<dd>
+	<div class="formField wide">
+		<div class="formField__input">
 			<div data-max-size="{$field->getAttachmentHandler()->getMaxSize()}"></div>
-			<small>{lang attachmentHandler=$field->getAttachmentHandler()}wcf.attachment.upload.limits{/lang}</small>
-		</dd>
-	</dl>
+		</div>
+		<div class="formField__description">{lang attachmentHandler=$field->getAttachmentHandler()}wcf.attachment.upload.limits{/lang}</div>
+	</div>
 
 	{foreach from=$field->getAttachmentHandler()->getTmpHashes() item=tmpHash}
 		<input type="hidden" name="{$field->getPrefixedID()}_tmpHash[]" value="{$tmpHash}">
diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
index 5ad807f3a8f..837bbc47a88 100644
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
@@ -18,7 +18,7 @@ import {
   updateFileInformation,
 } from "WoltLabSuite/Core/Component/File/Helper";
 import { clearPreviousErrors } from "WoltLabSuite/Core/Component/File/Upload";
-import { innerError } from "WoltLabSuite/Core/Dom/Util";
+import { setFieldError } from "WoltLabSuite/Core/Form/Builder/Field/Error";
 import { confirmationFactory } from "WoltLabSuite/Core/Component/Confirmation";
 
 type FileId = string;
@@ -155,6 +155,7 @@ export class FileProcessor {
       const oldContext = this.#startReplaceFile(element);
 
       clearPreviousErrors(this.#uploadButton);
+      setFieldError(this.#fieldId, null);
 
       const changeEventListener = () => {
         this.#fileInput.removeEventListener("cancel", cancelEventListener);
@@ -194,7 +195,7 @@ export class FileProcessor {
       errorMessage = getErrorMessageFromFile(element);
     }
 
-    innerError(this.#uploadButton, errorMessage);
+    setFieldError(this.#fieldId, errorMessage);
 
     element.remove();
 
@@ -219,15 +220,10 @@ export class FileProcessor {
 
         notifyValueChange(this.#fieldId, this.values);
       } else {
-        let container: HTMLElement = element;
-        if (!this.#useBigPreview) {
-          container = container.parentElement!;
-        }
-
         if (result.error.code === "permission_denied") {
-          innerError(container, getPhrase("wcf.upload.error.delete.permissionDenied"), true);
+          setFieldError(this.#fieldId, getPhrase("wcf.upload.error.delete.permissionDenied"), true);
         } else {
-          innerError(container, result.error.message ?? getPhrase("wcf.upload.error.delete.unknownError"));
+          setFieldError(this.#fieldId, result.error.message ?? getPhrase("wcf.upload.error.delete.unknownError"));
         }
       }
     });
diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/MultilineItemList.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/MultilineItemList.ts
index 677c60b799f..49737f588cc 100644
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/MultilineItemList.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/MultilineItemList.ts
@@ -10,6 +10,7 @@
 import * as UiItemList from "WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText";
 import { getPhrase } from "WoltLabSuite/Core/Language";
 import DomUtil from "WoltLabSuite/Core/Dom/Util";
+import { setFieldError } from "WoltLabSuite/Core/Form/Builder/Field/Error";
 
 const _data = new Map<string, MultilineItemListFormField>();
 
@@ -30,6 +31,10 @@ export class MultilineItemListFormField extends UiItemList.UiItemListLineBreakSe
     return this.items;
   }
 
+  protected getFieldId(): string {
+    return this.itemList.id.replace(/^lineBreakSeparatedTextOption_/, "");
+  }
+
   /**
    * @inheritDoc
    */
@@ -96,10 +101,10 @@ export class MultilineItemListFormField extends UiItemList.UiItemListLineBreakSe
       const newValue = input.value.trim();
 
       if (newValue === "") {
-        DomUtil.innerError(input.parentElement!, getPhrase("wcf.global.form.error.empty"));
+        setFieldError(this.getFieldId(), getPhrase("wcf.global.form.error.empty"));
       } else if (!this.items.has(newValue) || newValue === value) {
         //remove error message
-        DomUtil.innerError(input.parentElement!, "");
+        setFieldError(this.getFieldId(), null);
 
         //insert new value
         button.closest("li")!.dataset.value = newValue;
@@ -109,8 +114,8 @@ export class MultilineItemListFormField extends UiItemList.UiItemListLineBreakSe
 
         endCallback();
       } else {
-        DomUtil.innerError(
-          input.parentElement!,
+        setFieldError(
+          this.getFieldId(),
           getPhrase("wcf.acp.option.type.lineBreakSeparatedText.error.duplicate", {
             item: newValue,
           }),
diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.ts
deleted file mode 100644
index c2368300c2c..00000000000
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * Handles the JavaScript part of the rating form field.
- *
- * @author  Matthias Schmidt
- * @copyright 2001-2020 WoltLab GmbH
- * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @since 5.2
- */
-
-import * as Environment from "../../../../Environment";
-
-class Rating {
-  protected readonly _field: HTMLElement;
-  protected readonly _input: HTMLInputElement;
-  protected readonly _ratingElements: Map<string, HTMLElement>;
-
-  constructor(fieldId: string, value: string) {
-    this._field = document.getElementById(fieldId + "Container")!;
-    if (this._field === null) {
-      throw new Error("Unknown field with id '" + fieldId + "'");
-    }
-
-    this._input = document.createElement("input");
-    this._input.id = fieldId;
-    this._input.name = fieldId;
-    this._input.type = "hidden";
-    this._input.value = value;
-    this._field.appendChild(this._input);
-
-    this._ratingElements = new Map();
-
-    const ratingList = this._field.querySelector(".ratingList")!;
-    ratingList.addEventListener("mouseleave", () => this._restoreRating());
-
-    ratingList.querySelectorAll("li").forEach((listItem) => {
-      if (listItem.classList.contains("ratingMetaButton")) {
-        listItem.addEventListener("click", (ev) => this._metaButtonClick(ev));
-        listItem.addEventListener("mouseenter", () => this._restoreRating());
-      } else {
-        this._ratingElements.set(listItem.dataset.rating!, listItem);
-
-        listItem.addEventListener("click", (ev) => this._listItemClick(ev));
-        listItem.addEventListener("mouseenter", (ev) => this._listItemMouseEnter(ev));
-        listItem.addEventListener("mouseleave", () => this._listItemMouseLeave());
-      }
-    });
-  }
-
-  /**
-   * Saves the rating associated with the clicked rating element.
-   */
-  protected _listItemClick(event: Event): void {
-    const target = event.currentTarget as HTMLElement;
-    this._input.value = target.dataset.rating!;
-
-    if (Environment.platform() !== "desktop") {
-      this._restoreRating();
-    }
-  }
-
-  /**
-   * Updates the rating UI when hovering over a rating element.
-   */
-  protected _listItemMouseEnter(event: Event): void {
-    const target = event.currentTarget as HTMLElement;
-    const currentRating = target.dataset.rating!;
-
-    this._ratingElements.forEach((ratingElement, rating) => {
-      const icon = ratingElement.querySelector("fa-icon")!;
-
-      this._toggleIcon(icon, ~~rating <= ~~currentRating);
-    });
-  }
-
-  /**
-   * Updates the rating UI when leaving a rating element by changing all rating elements
-   * to their default state.
-   */
-  protected _listItemMouseLeave(): void {
-    this._ratingElements.forEach((ratingElement) => {
-      const icon = ratingElement.querySelector("fa-icon")!;
-
-      this._toggleIcon(icon, false);
-    });
-  }
-
-  /**
-   * Handles clicks on meta buttons.
-   */
-  protected _metaButtonClick(event: Event): void {
-    const target = event.currentTarget as HTMLElement;
-    if (target.dataset.action === "removeRating") {
-      this._input.value = "";
-
-      this._listItemMouseLeave();
-    }
-  }
-
-  /**
-   * Updates the rating UI by changing the rating elements to the stored rating state.
-   */
-  protected _restoreRating(): void {
-    this._ratingElements.forEach((ratingElement, rating) => {
-      const icon = ratingElement.querySelector("fa-icon")!;
-
-      this._toggleIcon(icon, ~~rating <= ~~this._input.value);
-    });
-  }
-
-  /**
-   * Toggles the state of the given icon based on the given state parameter.
-   */
-  protected _toggleIcon(icon: FaIcon, active = false): void {
-    if (active) {
-      icon.setIcon("star", true);
-    } else {
-      icon.setIcon("star");
-    }
-  }
-}
-
-export = Rating;
diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Error.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Error.ts
new file mode 100644
index 00000000000..f39c0234687
--- /dev/null
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Error.ts
@@ -0,0 +1,113 @@
+/**
+ * Displays or removes client-side error messages of form builder fields and keeps the
+ * ARIA attributes of the field in sync.
+ *
+ * @author Marcel Werk
+ * @copyright 2001-2026 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+
+function getAriaTarget(fieldId: string, container: HTMLElement): HTMLElement | null {
+  if (container.getAttribute("role") === "group") {
+    return container;
+  }
+
+  const label = document.getElementById(fieldId + "Label");
+  if (label instanceof HTMLLabelElement && label.htmlFor !== "") {
+    return document.getElementById(label.htmlFor);
+  }
+
+  return document.getElementById(fieldId);
+}
+
+function updateDescribedBy(element: HTMLElement, id: string, add: boolean): void {
+  const ids = (element.getAttribute("aria-describedby") ?? "").split(" ").filter((value) => {
+    return value !== "" && value !== id;
+  });
+  if (add) {
+    ids.unshift(id);
+  }
+
+  if (ids.length === 0) {
+    element.removeAttribute("aria-describedby");
+  } else {
+    element.setAttribute("aria-describedby", ids.join(" "));
+  }
+}
+
+function updateAriaAttributes(fieldId: string, container: HTMLElement, hasError: boolean): void {
+  const target = getAriaTarget(fieldId, container);
+  if (target === null) {
+    return;
+  }
+
+  const errorId = fieldId + "Error";
+  if (target === container) {
+    // `aria-invalid` and `aria-errormessage` are not supported by `role="group"`
+    updateDescribedBy(target, errorId, hasError);
+  } else if (hasError) {
+    target.setAttribute("aria-invalid", "true");
+    target.setAttribute("aria-errormessage", errorId);
+  } else {
+    target.removeAttribute("aria-invalid");
+    target.removeAttribute("aria-errormessage");
+  }
+}
+
+function getErrorContainer(fieldId: string, container: HTMLElement): HTMLElement {
+  const errorId = fieldId + "Error";
+  let errorContainer = document.getElementById(errorId);
+  if (errorContainer !== null) {
+    return errorContainer;
+  }
+
+  errorContainer = document.createElement("div");
+  errorContainer.id = errorId;
+  errorContainer.classList.add("formField__errors");
+
+  const description = document.getElementById(fieldId + "Description");
+  if (description !== null && container.contains(description)) {
+    description.before(errorContainer);
+  } else {
+    const input = container.querySelector(":scope > .formField__input");
+    if (input !== null) {
+      input.after(errorContainer);
+    } else {
+      container.append(errorContainer);
+    }
+  }
+
+  return errorContainer;
+}
+
+/**
+ * Displays the given error message for the field with the given id, replacing any existing
+ * error messages, or removes all error messages if `null` or an empty string is given.
+ */
+export function setFieldError(fieldId: string, message: string | null, isHtml = false): void {
+  const container = document.getElementById(fieldId + "Container");
+  if (container === null) {
+    throw new Error(`Unknown field with id '${fieldId}'.`);
+  }
+
+  if (message === null || message === "") {
+    document.getElementById(fieldId + "Error")?.remove();
+    container.classList.remove("formError");
+    updateAriaAttributes(fieldId, container, false);
+
+    return;
+  }
+
+  const error = document.createElement("p");
+  error.classList.add("formField__error");
+  if (isHtml) {
+    error.innerHTML = message;
+  } else {
+    error.textContent = message;
+  }
+
+  getErrorContainer(fieldId, container).replaceChildren(error);
+  container.classList.add("formError");
+  updateAriaAttributes(fieldId, container, true);
+}
diff --git a/ts/WoltLabSuite/Core/Language/Chooser.ts b/ts/WoltLabSuite/Core/Language/Chooser.ts
index bed9725b4da..41452a780b7 100644
--- a/ts/WoltLabSuite/Core/Language/Chooser.ts
+++ b/ts/WoltLabSuite/Core/Language/Chooser.ts
@@ -49,7 +49,8 @@ function initElement(
   let container: HTMLElement;
 
   const parent = element.parentElement!;
-  if (parent.nodeName === "DD") {
+  const isFormFieldInput = parent.nodeName === "DD" || parent.classList.contains("formField__input");
+  if (isFormFieldInput) {
     container = document.createElement("div");
     container.className = "dropdown";
 
@@ -65,7 +66,7 @@ function initElement(
 
   const dropdownToggle = document.createElement("a");
   dropdownToggle.className = "dropdownToggle boxFlag box24 inputPrefix";
-  if (parent.nodeName === "DD") {
+  if (isFormFieldInput) {
     dropdownToggle.classList.add("button");
   }
   container.appendChild(dropdownToggle);
diff --git a/ts/WoltLabSuite/Core/Ui/Dialog.ts b/ts/WoltLabSuite/Core/Ui/Dialog.ts
index bfe94b19c9f..cfd800fcda3 100644
--- a/ts/WoltLabSuite/Core/Ui/Dialog.ts
+++ b/ts/WoltLabSuite/Core/Ui/Dialog.ts
@@ -713,12 +713,12 @@ const UiDialog = {
       if (inputField.required) {
         if (inputField.value.trim() === "") {
           DomUtil.innerError(inputField, getPhrase("wcf.global.form.error.empty"));
-          inputField.closest("dl")?.classList.add("formError");
+          inputField.closest("dl, .formField")?.classList.add("formError");
 
           isValid = false;
         } else {
           DomUtil.innerError(inputField, false);
-          inputField.closest("dl")?.classList.remove("formError");
+          inputField.closest("dl, .formField")?.classList.remove("formError");
         }
       }
     });
diff --git a/wcfsetup/install/files/acp/templates/__boxPipGui.tpl b/wcfsetup/install/files/acp/templates/__boxPipGui.tpl
index 4a8fcd8b107..ce2fea05fce 100644
--- a/wcfsetup/install/files/acp/templates/__boxPipGui.tpl
+++ b/wcfsetup/install/files/acp/templates/__boxPipGui.tpl
@@ -4,7 +4,7 @@
 		{jsphrase name='wcf.acp.pip.box.visibilityExceptions.visibleEverywhere'}
 		
 		var visibleEverywhere = elById('visibleEverywhere');
-		var visibilityExceptionsLabel = elBySel('#visibilityExceptionsContainer > dt > label');
+		var visibilityExceptionsLabel = elById('visibilityExceptionsLabel');
 		
 		function updateVisibilityExceptions() {
 			if (visibleEverywhere.checked) {
diff --git a/wcfsetup/install/files/acp/templates/__devtoolsProjectInstructionsFormField.tpl b/wcfsetup/install/files/acp/templates/__devtoolsProjectInstructionsFormField.tpl
index 0fee1d9812b..b6d2755688f 100644
--- a/wcfsetup/install/files/acp/templates/__devtoolsProjectInstructionsFormField.tpl
+++ b/wcfsetup/install/files/acp/templates/__devtoolsProjectInstructionsFormField.tpl
@@ -1,10 +1,9 @@
-<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->checkDependencies()} style="display: none;"{/if}{*
 *}>
-	<dt>{if $field->getLabel() !== null}<label for="{$field->getPrefixedId()}">{unsafe:$field->getLabel()}</label>{/if}</dt>
-	<dd>
+	<div class="formField__label">{if $field->getLabel() !== null}<label id="{$field->getPrefixedId()}Label" for="{$field->getPrefixedId()}">{unsafe:$field->getLabel()}</label>{/if}</div>
+	<div class="formField__input">
 		<div class="row rowColGap formGrid">
 			<dl class="col-xs-12 col-md-10">
 				<dt></dt>
@@ -171,11 +170,12 @@
 			</div>
 		{/capture}
 		
-		{include file='shared_formFieldDescription'}
-		{include file='shared_formFieldDependencies'}
-		{include file='shared_formFieldDataHandler'}
-	</dd>
-</dl>
+	</div>
+	
+	{include file='shared_formFieldDescription'}
+	{include file='shared_formFieldDependencies'}
+	{include file='shared_formFieldDataHandler'}
+</div>
 
 
 <script data-relocate="true">
diff --git a/wcfsetup/install/files/acp/templates/__menuPipGui.tpl b/wcfsetup/install/files/acp/templates/__menuPipGui.tpl
index fd583b65320..900d6a41c09 100644
--- a/wcfsetup/install/files/acp/templates/__menuPipGui.tpl
+++ b/wcfsetup/install/files/acp/templates/__menuPipGui.tpl
@@ -4,7 +4,7 @@
 		{jsphrase name='wcf.acp.pip.menu.boxVisibilityExceptions.visibleEverywhere'}
 		
 		var boxVisibleEverywhere = elById('boxVisibleEverywhere');
-		var boxVisibilityExceptionsLabel = elBySel('#boxVisibilityExceptionsContainer > dt > label');
+		var boxVisibilityExceptionsLabel = elById('boxVisibilityExceptionsLabel');
 		
 		function updateVisibilityExceptions() {
 			if (boxVisibleEverywhere.checked) {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
index ef42ba17a93..59db29f1c39 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
@@ -4,7 +4,7 @@
  * @license   GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @since     6.1
  */
-define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Api/Files/DeleteFile", "WoltLabSuite/Core/Dom/Change/Listener", "WoltLabSuite/Core/Component/File/Helper", "WoltLabSuite/Core/Component/File/Upload", "WoltLabSuite/Core/Dom/Util", "WoltLabSuite/Core/Component/Confirmation"], function (require, exports, tslib_1, Language_1, DeleteFile_1, Listener_1, Helper_1, Upload_1, Util_1, Confirmation_1) {
+define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Api/Files/DeleteFile", "WoltLabSuite/Core/Dom/Change/Listener", "WoltLabSuite/Core/Component/File/Helper", "WoltLabSuite/Core/Component/File/Upload", "WoltLabSuite/Core/Form/Builder/Field/Error", "WoltLabSuite/Core/Component/Confirmation"], function (require, exports, tslib_1, Language_1, DeleteFile_1, Listener_1, Helper_1, Upload_1, Error_1, Confirmation_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.FileProcessor = void 0;
@@ -110,6 +110,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
             replaceButton.addEventListener("click", () => {
                 const oldContext = this.#startReplaceFile(element);
                 (0, Upload_1.clearPreviousErrors)(this.#uploadButton);
+                (0, Error_1.setFieldError)(this.#fieldId, null);
                 const changeEventListener = () => {
                     this.#fileInput.removeEventListener("cancel", cancelEventListener);
                     // Wait until the upload starts,
@@ -143,7 +144,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
             else {
                 errorMessage = (0, Helper_1.getErrorMessageFromFile)(element);
             }
-            (0, Util_1.innerError)(this.#uploadButton, errorMessage);
+            (0, Error_1.setFieldError)(this.#fieldId, errorMessage);
             element.remove();
             if (reason instanceof Error) {
                 throw reason;
@@ -164,15 +165,11 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                     notifyValueChange(this.#fieldId, this.values);
                 }
                 else {
-                    let container = element;
-                    if (!this.#useBigPreview) {
-                        container = container.parentElement;
-                    }
                     if (result.error.code === "permission_denied") {
-                        (0, Util_1.innerError)(container, (0, Language_1.getPhrase)("wcf.upload.error.delete.permissionDenied"), true);
+                        (0, Error_1.setFieldError)(this.#fieldId, (0, Language_1.getPhrase)("wcf.upload.error.delete.permissionDenied"), true);
                     }
                     else {
-                        (0, Util_1.innerError)(container, result.error.message ?? (0, Language_1.getPhrase)("wcf.upload.error.delete.unknownError"));
+                        (0, Error_1.setFieldError)(this.#fieldId, result.error.message ?? (0, Language_1.getPhrase)("wcf.upload.error.delete.unknownError"));
                     }
                 }
             });
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/MultilineItemList.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/MultilineItemList.js
index 02488cd2ac6..da598f3a42f 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/MultilineItemList.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/MultilineItemList.js
@@ -6,7 +6,7 @@
  * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @since       6.0
  */
-define(["require", "exports", "tslib", "WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Dom/Util"], function (require, exports, tslib_1, UiItemList, Language_1, Util_1) {
+define(["require", "exports", "tslib", "WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Dom/Util", "WoltLabSuite/Core/Form/Builder/Field/Error"], function (require, exports, tslib_1, UiItemList, Language_1, Util_1, Error_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.MultilineItemListFormField = void 0;
@@ -30,6 +30,9 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Ui/ItemList/LineBreakS
         getItems() {
             return this.items;
         }
+        getFieldId() {
+            return this.itemList.id.replace(/^lineBreakSeparatedTextOption_/, "");
+        }
         /**
          * @inheritDoc
          */
@@ -90,11 +93,11 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Ui/ItemList/LineBreakS
                 }
                 const newValue = input.value.trim();
                 if (newValue === "") {
-                    Util_1.default.innerError(input.parentElement, (0, Language_1.getPhrase)("wcf.global.form.error.empty"));
+                    (0, Error_1.setFieldError)(this.getFieldId(), (0, Language_1.getPhrase)("wcf.global.form.error.empty"));
                 }
                 else if (!this.items.has(newValue) || newValue === value) {
                     //remove error message
-                    Util_1.default.innerError(input.parentElement, "");
+                    (0, Error_1.setFieldError)(this.getFieldId(), null);
                     //insert new value
                     button.closest("li").dataset.value = newValue;
                     valueSpan.textContent = newValue;
@@ -103,7 +106,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Ui/ItemList/LineBreakS
                     endCallback();
                 }
                 else {
-                    Util_1.default.innerError(input.parentElement, (0, Language_1.getPhrase)("wcf.acp.option.type.lineBreakSeparatedText.error.duplicate", {
+                    (0, Error_1.setFieldError)(this.getFieldId(), (0, Language_1.getPhrase)("wcf.acp.option.type.lineBreakSeparatedText.error.duplicate", {
                         item: newValue,
                     }), true);
                 }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.js
deleted file mode 100644
index 8f8593ea04e..00000000000
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * Handles the JavaScript part of the rating form field.
- *
- * @author  Matthias Schmidt
- * @copyright 2001-2020 WoltLab GmbH
- * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @since 5.2
- */
-define(["require", "exports", "tslib", "../../../../Environment"], function (require, exports, tslib_1, Environment) {
-    "use strict";
-    Environment = tslib_1.__importStar(Environment);
-    class Rating {
-        _field;
-        _input;
-        _ratingElements;
-        constructor(fieldId, value) {
-            this._field = document.getElementById(fieldId + "Container");
-            if (this._field === null) {
-                throw new Error("Unknown field with id '" + fieldId + "'");
-            }
-            this._input = document.createElement("input");
-            this._input.id = fieldId;
-            this._input.name = fieldId;
-            this._input.type = "hidden";
-            this._input.value = value;
-            this._field.appendChild(this._input);
-            this._ratingElements = new Map();
-            const ratingList = this._field.querySelector(".ratingList");
-            ratingList.addEventListener("mouseleave", () => this._restoreRating());
-            ratingList.querySelectorAll("li").forEach((listItem) => {
-                if (listItem.classList.contains("ratingMetaButton")) {
-                    listItem.addEventListener("click", (ev) => this._metaButtonClick(ev));
-                    listItem.addEventListener("mouseenter", () => this._restoreRating());
-                }
-                else {
-                    this._ratingElements.set(listItem.dataset.rating, listItem);
-                    listItem.addEventListener("click", (ev) => this._listItemClick(ev));
-                    listItem.addEventListener("mouseenter", (ev) => this._listItemMouseEnter(ev));
-                    listItem.addEventListener("mouseleave", () => this._listItemMouseLeave());
-                }
-            });
-        }
-        /**
-         * Saves the rating associated with the clicked rating element.
-         */
-        _listItemClick(event) {
-            const target = event.currentTarget;
-            this._input.value = target.dataset.rating;
-            if (Environment.platform() !== "desktop") {
-                this._restoreRating();
-            }
-        }
-        /**
-         * Updates the rating UI when hovering over a rating element.
-         */
-        _listItemMouseEnter(event) {
-            const target = event.currentTarget;
-            const currentRating = target.dataset.rating;
-            this._ratingElements.forEach((ratingElement, rating) => {
-                const icon = ratingElement.querySelector("fa-icon");
-                this._toggleIcon(icon, ~~rating <= ~~currentRating);
-            });
-        }
-        /**
-         * Updates the rating UI when leaving a rating element by changing all rating elements
-         * to their default state.
-         */
-        _listItemMouseLeave() {
-            this._ratingElements.forEach((ratingElement) => {
-                const icon = ratingElement.querySelector("fa-icon");
-                this._toggleIcon(icon, false);
-            });
-        }
-        /**
-         * Handles clicks on meta buttons.
-         */
-        _metaButtonClick(event) {
-            const target = event.currentTarget;
-            if (target.dataset.action === "removeRating") {
-                this._input.value = "";
-                this._listItemMouseLeave();
-            }
-        }
-        /**
-         * Updates the rating UI by changing the rating elements to the stored rating state.
-         */
-        _restoreRating() {
-            this._ratingElements.forEach((ratingElement, rating) => {
-                const icon = ratingElement.querySelector("fa-icon");
-                this._toggleIcon(icon, ~~rating <= ~~this._input.value);
-            });
-        }
-        /**
-         * Toggles the state of the given icon based on the given state parameter.
-         */
-        _toggleIcon(icon, active = false) {
-            if (active) {
-                icon.setIcon("star", true);
-            }
-            else {
-                icon.setIcon("star");
-            }
-        }
-    }
-    return Rating;
-});
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Error.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Error.js
new file mode 100644
index 00000000000..97758204ea6
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Error.js
@@ -0,0 +1,108 @@
+/**
+ * Displays or removes client-side error messages of form builder fields and keeps the
+ * ARIA attributes of the field in sync.
+ *
+ * @author Marcel Werk
+ * @copyright 2001-2026 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.setFieldError = setFieldError;
+    function getAriaTarget(fieldId, container) {
+        if (container.getAttribute("role") === "group") {
+            return container;
+        }
+        const label = document.getElementById(fieldId + "Label");
+        if (label instanceof HTMLLabelElement && label.htmlFor !== "") {
+            return document.getElementById(label.htmlFor);
+        }
+        return document.getElementById(fieldId);
+    }
+    function updateDescribedBy(element, id, add) {
+        const ids = (element.getAttribute("aria-describedby") ?? "").split(" ").filter((value) => {
+            return value !== "" && value !== id;
+        });
+        if (add) {
+            ids.unshift(id);
+        }
+        if (ids.length === 0) {
+            element.removeAttribute("aria-describedby");
+        }
+        else {
+            element.setAttribute("aria-describedby", ids.join(" "));
+        }
+    }
+    function updateAriaAttributes(fieldId, container, hasError) {
+        const target = getAriaTarget(fieldId, container);
+        if (target === null) {
+            return;
+        }
+        const errorId = fieldId + "Error";
+        if (target === container) {
+            // `aria-invalid` and `aria-errormessage` are not supported by `role="group"`
+            updateDescribedBy(target, errorId, hasError);
+        }
+        else if (hasError) {
+            target.setAttribute("aria-invalid", "true");
+            target.setAttribute("aria-errormessage", errorId);
+        }
+        else {
+            target.removeAttribute("aria-invalid");
+            target.removeAttribute("aria-errormessage");
+        }
+    }
+    function getErrorContainer(fieldId, container) {
+        const errorId = fieldId + "Error";
+        let errorContainer = document.getElementById(errorId);
+        if (errorContainer !== null) {
+            return errorContainer;
+        }
+        errorContainer = document.createElement("div");
+        errorContainer.id = errorId;
+        errorContainer.classList.add("formField__errors");
+        const description = document.getElementById(fieldId + "Description");
+        if (description !== null && container.contains(description)) {
+            description.before(errorContainer);
+        }
+        else {
+            const input = container.querySelector(":scope > .formField__input");
+            if (input !== null) {
+                input.after(errorContainer);
+            }
+            else {
+                container.append(errorContainer);
+            }
+        }
+        return errorContainer;
+    }
+    /**
+     * Displays the given error message for the field with the given id, replacing any existing
+     * error messages, or removes all error messages if `null` or an empty string is given.
+     */
+    function setFieldError(fieldId, message, isHtml = false) {
+        const container = document.getElementById(fieldId + "Container");
+        if (container === null) {
+            throw new Error(`Unknown field with id '${fieldId}'.`);
+        }
+        if (message === null || message === "") {
+            document.getElementById(fieldId + "Error")?.remove();
+            container.classList.remove("formError");
+            updateAriaAttributes(fieldId, container, false);
+            return;
+        }
+        const error = document.createElement("p");
+        error.classList.add("formField__error");
+        if (isHtml) {
+            error.innerHTML = message;
+        }
+        else {
+            error.textContent = message;
+        }
+        getErrorContainer(fieldId, container).replaceChildren(error);
+        container.classList.add("formError");
+        updateAriaAttributes(fieldId, container, true);
+    }
+});
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Chooser.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Chooser.js
index 02f932711b6..b6af11c8c53 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Chooser.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Chooser.js
@@ -24,7 +24,8 @@ define(["require", "exports", "tslib", "../Core", "WoltLabSuite/Core/Language",
     function initElement(chooserId, element, languageId, languages, callback, allowEmptyValue) {
         let container;
         const parent = element.parentElement;
-        if (parent.nodeName === "DD") {
+        const isFormFieldInput = parent.nodeName === "DD" || parent.classList.contains("formField__input");
+        if (isFormFieldInput) {
             container = document.createElement("div");
             container.className = "dropdown";
             // language chooser is the first child so that descriptions and error messages
@@ -38,7 +39,7 @@ define(["require", "exports", "tslib", "../Core", "WoltLabSuite/Core/Language",
         Util_1.default.hide(element);
         const dropdownToggle = document.createElement("a");
         dropdownToggle.className = "dropdownToggle boxFlag box24 inputPrefix";
-        if (parent.nodeName === "DD") {
+        if (isFormFieldInput) {
             dropdownToggle.classList.add("button");
         }
         container.appendChild(dropdownToggle);
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
index e8e91753843..7347b9f90bd 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
@@ -585,12 +585,12 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "./S
                 if (inputField.required) {
                     if (inputField.value.trim() === "") {
                         Util_1.default.innerError(inputField, (0, Language_1.getPhrase)("wcf.global.form.error.empty"));
-                        inputField.closest("dl")?.classList.add("formError");
+                        inputField.closest("dl, .formField")?.classList.add("formError");
                         isValid = false;
                     }
                     else {
                         Util_1.default.innerError(inputField, false);
-                        inputField.closest("dl")?.classList.remove("formError");
+                        inputField.closest("dl, .formField")?.classList.remove("formError");
                     }
                 }
             });
diff --git a/wcfsetup/install/files/lib/system/form/builder/container/FormContainer.class.php b/wcfsetup/install/files/lib/system/form/builder/container/FormContainer.class.php
index 66c4ffc5c38..b4b89568f82 100644
--- a/wcfsetup/install/files/lib/system/form/builder/container/FormContainer.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/container/FormContainer.class.php
@@ -43,7 +43,7 @@ class FormContainer implements IFormContainer
 
     public function __construct()
     {
-        $this->addClass('section');
+        $this->addClass('formSection');
     }
 
     #[\Override]
diff --git a/wcfsetup/install/files/lib/system/form/builder/container/TabMenuFormContainer.class.php b/wcfsetup/install/files/lib/system/form/builder/container/TabMenuFormContainer.class.php
index ee63b64782f..18751e2145a 100644
--- a/wcfsetup/install/files/lib/system/form/builder/container/TabMenuFormContainer.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/container/TabMenuFormContainer.class.php
@@ -26,7 +26,7 @@ class TabMenuFormContainer extends FormContainer implements ITabMenuFormContaine
     // @phpstan-ignore constructor.missingParentCall
     public function __construct()
     {
-        $this->addClass('section')
+        $this->addClass('formSection')
             ->addClass('tabMenuContainer');
     }
 
diff --git a/wcfsetup/install/files/lib/system/form/builder/container/wysiwyg/WysiwygSmileyFormContainer.class.php b/wcfsetup/install/files/lib/system/form/builder/container/wysiwyg/WysiwygSmileyFormContainer.class.php
index 7250eba1c40..8c17c209fcd 100644
--- a/wcfsetup/install/files/lib/system/form/builder/container/wysiwyg/WysiwygSmileyFormContainer.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/container/wysiwyg/WysiwygSmileyFormContainer.class.php
@@ -54,7 +54,7 @@ public function populate()
                         FormContainer::create(
                             $this->getId() . '_smileyCategoryContainer' . $smileyCategory->categoryID
                         )
-                            ->removeClass('section')
+                            ->removeClass('formSection')
                             ->appendChild(
                                 WysiwygSmileyFormNode::create(
                                     $this->getId() . '_smileyCategory' . $smileyCategory->categoryID
diff --git a/wcfsetup/install/files/lib/system/form/builder/container/wysiwyg/WysiwygTabMenuFormContainer.class.php b/wcfsetup/install/files/lib/system/form/builder/container/wysiwyg/WysiwygTabMenuFormContainer.class.php
index f18ebe49b31..3e23c5f007b 100644
--- a/wcfsetup/install/files/lib/system/form/builder/container/wysiwyg/WysiwygTabMenuFormContainer.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/container/wysiwyg/WysiwygTabMenuFormContainer.class.php
@@ -23,7 +23,7 @@ class WysiwygTabMenuFormContainer extends TabMenuFormContainer
     // @phpstan-ignore constructor.missingParentCall
     public function __construct()
     {
-        $this->removeClass('section')
+        $this->removeClass('formSection')
             ->removeClass('tabMenuContainer')
             ->addClass('messageTabMenu');
     }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/AbstractFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/AbstractFormField.class.php
index ba9229c71c4..eb4d3db2afc 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/AbstractFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/AbstractFormField.class.php
@@ -139,6 +139,67 @@ public function getHtml()
         );
     }
 
+    /**
+     * Returns the id of the element the label of this field refers to or `null` if this field
+     * consists of multiple elements and is thus rendered as a group labelled by its label.
+     *
+     * @since 6.3
+     */
+    public function getLabelTarget(): ?string
+    {
+        return $this->getPrefixedId();
+    }
+
+    /**
+     * Returns `true` if this field consists of multiple elements and is rendered as a group.
+     *
+     * @since 6.3
+     */
+    public function isGroup(): bool
+    {
+        return $this->getLabelTarget() === null;
+    }
+
+    /**
+     * Returns the ARIA attributes that link the labelled element of this field (or the group
+     * element in case of a group) to the field's error messages and description.
+     *
+     * @return array<string, string>
+     * @since 6.3
+     */
+    public function getAriaAttributes(): array
+    {
+        $attributes = [];
+        $describedBy = [];
+        $hasErrors = $this->getValidationErrors() !== [];
+
+        if ($this->isGroup()) {
+            // `aria-invalid` and `aria-errormessage` are not supported by `role="group"`
+            if ($hasErrors) {
+                $describedBy[] = $this->getPrefixedId() . 'Error';
+            }
+        } else {
+            if ($this->isRequired()) {
+                $attributes['aria-required'] = 'true';
+            }
+
+            if ($hasErrors) {
+                $attributes['aria-invalid'] = 'true';
+                $attributes['aria-errormessage'] = $this->getPrefixedId() . 'Error';
+            }
+        }
+
+        if ($this->getDescription() !== null) {
+            $describedBy[] = $this->getPrefixedId() . 'Description';
+        }
+
+        if ($describedBy !== []) {
+            $attributes['aria-describedby'] = \implode(' ', $describedBy);
+        }
+
+        return $attributes;
+    }
+
     #[\Override]
     public function getJavaScriptDataHandlerModule()
     {
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/AbstractFormFieldDecorator.class.php b/wcfsetup/install/files/lib/system/form/builder/field/AbstractFormFieldDecorator.class.php
index 5aaf4619686..ff4d1bdc0a9 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/AbstractFormFieldDecorator.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/AbstractFormFieldDecorator.class.php
@@ -308,6 +308,42 @@ public function getHtml()
         return $this->field->getHtml();
     }
 
+    /**
+     * @see AbstractFormField::getLabelTarget()
+     * @since 6.3
+     */
+    public function getLabelTarget(): ?string
+    {
+        if ($this->field instanceof AbstractFormField || $this->field instanceof self) {
+            return $this->field->getLabelTarget();
+        }
+
+        return $this->field->getPrefixedId();
+    }
+
+    /**
+     * @see AbstractFormField::isGroup()
+     * @since 6.3
+     */
+    public function isGroup(): bool
+    {
+        return $this->getLabelTarget() === null;
+    }
+
+    /**
+     * @see AbstractFormField::getAriaAttributes()
+     * @return array<string, string>
+     * @since 6.3
+     */
+    public function getAriaAttributes(): array
+    {
+        if ($this->field instanceof AbstractFormField || $this->field instanceof self) {
+            return $this->field->getAriaAttributes();
+        }
+
+        return [];
+    }
+
     #[\Override]
     public function getHtmlVariables()
     {
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/BadgeColorFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/BadgeColorFormField.class.php
index 8418e868883..9dfd93e4b59 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/BadgeColorFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/BadgeColorFormField.class.php
@@ -185,4 +185,10 @@ public function supportsCustomClassName(): bool
     {
         return \in_array(BadgeColorFormField::CUSTOM_CSS_CLASSNAME, $this->options, true);
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/ColorFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/ColorFormField.class.php
index 8b5ab411910..9b6c08c6c5e 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/ColorFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/ColorFormField.class.php
@@ -62,4 +62,14 @@ public function validate()
             }
         }
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        if ($this->isImmutable()) {
+            return null;
+        }
+
+        return $this->getPrefixedId() . '_colorPickerButton';
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/DateRangeFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/DateRangeFormField.class.php
index c0f62c8a2d2..aca443eb1ad 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/DateRangeFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/DateRangeFormField.class.php
@@ -234,4 +234,10 @@ public function getToValue(): string
     {
         return $this->value['to'] ?? '';
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php
index 4584b2d682c..56a0bd0ab0a 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php
@@ -456,4 +456,10 @@ public function getThumbnailSize(): ?string
     {
         return $this->thumbnailSize;
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/IconFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/IconFormField.class.php
index 40b3f31de1b..d10c5b30815 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/IconFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/IconFormField.class.php
@@ -108,4 +108,10 @@ public function getIcon(): ?FontAwesomeIcon
 
         return null;
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/MultilineItemListFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/MultilineItemListFormField.class.php
index d5228dd38f5..e2ef9708283 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/MultilineItemListFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/MultilineItemListFormField.class.php
@@ -46,4 +46,10 @@ public function isFilterable(): bool
     {
         return $this->filterable;
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/MultipleSelectionFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/MultipleSelectionFormField.class.php
index ca23d92e87d..27187f2b16a 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/MultipleSelectionFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/MultipleSelectionFormField.class.php
@@ -151,4 +151,10 @@ public function ignoreInvalidValues(bool $ignoreInvalidValues = true): self
 
         return $this;
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/NumericRangeFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/NumericRangeFormField.class.php
index 131389a4ab7..0be324c49b7 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/NumericRangeFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/NumericRangeFormField.class.php
@@ -192,4 +192,10 @@ public function getDefaultStep(): int|string
             return 'any';
         }
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/ObjectFilterFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/ObjectFilterFormField.class.php
index 353c792172f..e87b2abf436 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/ObjectFilterFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/ObjectFilterFormField.class.php
@@ -187,4 +187,10 @@ function (array $value) use ($filters): array {
             )),
         );
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/RadioButtonFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/RadioButtonFormField.class.php
index a79e219dcbd..7c8252c93fd 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/RadioButtonFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/RadioButtonFormField.class.php
@@ -69,4 +69,10 @@ public function validate()
 
         parent::validate();
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/RatingFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/RatingFormField.class.php
index abbe18b7a05..8a632d9f52f 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/RatingFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/RatingFormField.class.php
@@ -37,7 +37,7 @@ final class RatingFormField extends AbstractFormField implements
     /**
      * @inheritDoc
      */
-    protected $javaScriptDataHandlerModule = 'WoltLabSuite/Core/Form/Builder/Field/Value';
+    protected $javaScriptDataHandlerModule = 'WoltLabSuite/Core/Form/Builder/Field/RadioButton';
 
     /**
      * @inheritDoc
@@ -119,4 +119,10 @@ public function validate(): void
             }
         }
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/SelectOptionsFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/SelectOptionsFormField.class.php
index 4dafb29403b..5b0b42005fa 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/SelectOptionsFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/SelectOptionsFormField.class.php
@@ -128,4 +128,10 @@ private function validateKeys(array $keys): void
             $knownKeys[$key] = true;
         }
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/SingleSelectionFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/SingleSelectionFormField.class.php
index fb7fd8775e7..2635f1bb454 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/SingleSelectionFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/SingleSelectionFormField.class.php
@@ -106,4 +106,10 @@ public function value(mixed $value)
 
         return parent::value($value);
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return $this->isFilterable() ? null : $this->getPrefixedId();
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/TAttributeFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/TAttributeFormField.class.php
index deddebba72c..4d262080f7d 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/TAttributeFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/TAttributeFormField.class.php
@@ -53,10 +53,17 @@ public function getFieldAttribute(string $name)
     /**
      * Returns all additional attributes of the actual field element.
      *
+     * If the actual field element is the element labelled by the field's label, the ARIA
+     * attributes linking it to the field's error messages and description are included.
+     *
      * @return array<string, ?string>
      */
     public function getFieldAttributes(): array
     {
+        if ($this instanceof AbstractFormField && $this->getLabelTarget() === $this->getPrefixedId()) {
+            return \array_merge($this->getAriaAttributes(), $this->fieldAttributes);
+        }
+
         return $this->fieldAttributes;
     }
 
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/TimeRangeFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/TimeRangeFormField.class.php
index 0939aadaaaa..bedacdcbbe1 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/TimeRangeFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/TimeRangeFormField.class.php
@@ -158,4 +158,10 @@ public function getToValue(): string
     {
         return $this->value['to'] ?? '';
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/UploadFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/UploadFormField.class.php
index 82e71a60775..8e07e26dacd 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/UploadFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/UploadFormField.class.php
@@ -1016,4 +1016,10 @@ public function setAllowedFileExtensions(?array $allowedFileExtensions = null):
 
         return $this;
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/acl/AclFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/acl/AclFormField.class.php
index 677c05eaed7..34018309920 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/acl/AclFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/acl/AclFormField.class.php
@@ -291,4 +291,10 @@ public function cleanup(): static
 
         return $this;
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/acl/simple/SimpleAclFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/acl/simple/SimpleAclFormField.class.php
index 069add8874a..7677dae5e0c 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/acl/simple/SimpleAclFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/acl/simple/SimpleAclFormField.class.php
@@ -113,4 +113,10 @@ private function isInverted(): bool
     {
         return $this->supportInvertedPermissions && !empty($this->value['invertPermissions']);
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/language/ContentLanguageFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/language/ContentLanguageFormField.class.php
index b7815e1c539..3785ca5ffad 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/language/ContentLanguageFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/language/ContentLanguageFormField.class.php
@@ -84,4 +84,10 @@ protected static function getDefaultId(): string
     {
         return 'languageID';
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/media/SingleMediaSelectionFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/media/SingleMediaSelectionFormField.class.php
index 712d374c4d5..0c0cf2a549f 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/media/SingleMediaSelectionFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/media/SingleMediaSelectionFormField.class.php
@@ -121,4 +121,10 @@ public function validate(): void
             $this->addValidationError(new FormFieldValidationError('empty'));
         }
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/poll/PollOptionListFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/poll/PollOptionListFormField.class.php
index ac05a732a0d..320bb4829ee 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/poll/PollOptionListFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/poll/PollOptionListFormField.class.php
@@ -216,4 +216,10 @@ public function getHtmlVariables()
             ),
         ];
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/trophy/TrophyBadgeFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/trophy/TrophyBadgeFormField.class.php
index 4954f1c7ea5..4e6324a8768 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/trophy/TrophyBadgeFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/trophy/TrophyBadgeFormField.class.php
@@ -172,4 +172,10 @@ public function getIcon(): FontAwesomeIcon
 
         return FontAwesomeIcon::fromString(self::DEFAULT_ICON_NAME);
     }
+
+    #[\Override]
+    public function getLabelTarget(): ?string
+    {
+        return null;
+    }
 }
diff --git a/wcfsetup/install/files/style/ui/formBuilder.scss b/wcfsetup/install/files/style/ui/formBuilder.scss
new file mode 100644
index 00000000000..d1db64e9fd8
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/formBuilder.scss
@@ -0,0 +1,181 @@
+/* Form builder forms: `.formBuilder > .formSection > .formField` */
+.formBuilder {
+	display: flex;
+	flex-direction: column;
+	row-gap: 40px;
+
+	/* the spacing is provided by `row-gap` */
+	> .formSubmit:not(:first-child) {
+		margin-top: 0;
+	}
+}
+
+/* Form builder sections: `.formSection > .formSection__header > .formSection__title + .formSection__description` */
+.formSection,
+.formSection > .tabMenuContent {
+	display: flex;
+	flex-direction: column;
+	row-gap: 20px;
+}
+
+.formSection > .formSection__header {
+	border-bottom: 1px solid var(--wcfContentBorderInner);
+	padding-bottom: 10px;
+}
+
+.formSection__title {
+	color: var(--wcfContentHeadlineText);
+
+	@include wcfFontSection;
+
+	a {
+		color: var(--wcfContentHeadlineLink);
+
+		&:hover {
+			color: var(--wcfContentHeadlineLinkActive);
+		}
+	}
+
+	.badge {
+		top: -2px;
+	}
+}
+
+:is(.section, .formSection) .formSection .formSection__title {
+	@include wcfFontHeadline;
+}
+
+.formSection__description {
+	color: var(--wcfContentDimmedText);
+}
+
+.formSection__required {
+	color: rgba(204, 0, 1, 1);
+}
+
+html[data-color-scheme="dark"] .formSection__required {
+	color: #ff4444;
+}
+
+/* Form builder fields: `.formField > .formField__label + .formField__input + .formField__errors + .formField__description` */
+.formField {
+	display: flex;
+	flex-direction: column;
+	row-gap: 5px;
+
+	&.wide > .formField__label {
+		display: none;
+	}
+}
+
+.formField__label {
+	color: var(--wcfInputLabel);
+
+	&:empty {
+		display: none;
+	}
+}
+
+.formError .formField__label {
+	color: var(--color-error) !important;
+}
+
+.formSuccess .formField__label {
+	color: var(--color-success) !important;
+}
+
+.formGrid .formField__label {
+	display: none;
+}
+
+/* lists of radio buttons or checkboxes */
+.formField__input:has(> label) {
+	align-items: flex-start;
+	display: flex;
+	flex-direction: column;
+	row-gap: 5px;
+}
+
+.formField.floated > .formField__input {
+	column-gap: 10px;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.formField__required {
+	color: rgba(204, 0, 1, 1);
+}
+
+html[data-color-scheme="dark"] .formField__required {
+	color: #ff4444;
+}
+
+.formField__inlineLabel {
+	align-items: flex-start;
+	display: inline-flex;
+	gap: 8px;
+}
+
+.formField__description {
+	color: var(--wcfContentDimmedText);
+
+	@include wcfFontSmall;
+}
+
+.formField__errors {
+	display: flex;
+	flex-direction: column;
+	row-gap: 3px;
+}
+
+.formField__error {
+	color: var(--color-error, #c00);
+	font-weight: 600;
+
+	@include wcfFontSmall;
+
+	a {
+		color: inherit;
+		text-decoration: underline;
+	}
+}
+
+html[data-color-scheme="dark"] .formField__error {
+	color: var(--color-error, #ff4747);
+}
+
+/* fields inside a `RowFormFieldContainer` */
+.formField__gridItem {
+	display: flex;
+	flex-direction: column;
+	row-gap: 5px;
+}
+
+/* Form builder forms inside dialogs */
+:is(.dialogContent, .dialog__content) {
+	.formBuilder {
+		row-gap: 20px;
+	}
+
+	.formSection__title {
+		border-bottom-width: 0;
+		padding-bottom: 0;
+
+		@include wcfFontDefault;
+
+		& {
+			font-weight: 600;
+		}
+	}
+
+	.formSection > .formSection__header {
+		border-bottom-width: 0;
+		padding-bottom: 0;
+	}
+
+	.formSection ~ .formSection {
+		border-top: 1px solid var(--wcfContentBorderInner);
+		padding-top: 20px;
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/rating.scss b/wcfsetup/install/files/style/ui/rating.scss
index 0551310d89e..f20be559e5d 100644
--- a/wcfsetup/install/files/style/ui/rating.scss
+++ b/wcfsetup/install/files/style/ui/rating.scss
@@ -1,15 +1,89 @@
-.ratingList {
-	font-size: 0;
+.ratingField {
+	align-items: center;
+	display: inline-flex;
+	gap: 5px;
+}
+
+.ratingField__stars {
+	display: inline-flex;
+}
+
+.ratingField__star,
+.ratingField__reset {
+	cursor: pointer;
+	display: inline-flex;
+	position: relative;
+
+	&:has(.ratingField__input:disabled) {
+		cursor: default;
+	}
+
+	&:has(.ratingField__input:focus-visible) {
+		border-radius: var(--wcfBorderRadius);
+		outline: 2px solid var(--wcfInputBorderActive);
+		outline-offset: 1px;
+	}
+}
+
+.ratingField__reset {
+	color: var(--wcfContentDimmedText);
+	order: 1;
+
+	&:hover {
+		color: var(--wcfContentText);
+	}
+}
 
-	> li {
-		display: inline-block;
+.ratingField__icon--full {
+	color: #f90;
+}
+
+/* Stars up to and including the selected rating are filled, all following stars are empty. */
+.ratingField__star {
+	.ratingField__icon--empty {
+		display: none;
 	}
 
-	fa-icon[name="star"][solid] {
-		color: #f90;
+	&:has(.ratingField__input:checked) ~ .ratingField__star {
+		.ratingField__icon--empty {
+			display: inline-flex;
+		}
+
+		.ratingField__icon--full {
+			display: none;
+		}
 	}
+}
+
+.ratingField__stars:not(:has(.ratingField__input:checked)) .ratingField__star {
+	.ratingField__icon--empty {
+		display: inline-flex;
+	}
+
+	.ratingField__icon--full {
+		display: none;
+	}
+}
+
+/* Preview the rating while hovering a star. */
+.ratingField__stars:not(:has(.ratingField__input:disabled)):hover {
+	.ratingField__star {
+		.ratingField__icon--empty {
+			display: none;
+		}
+
+		.ratingField__icon--full {
+			display: inline-flex;
+		}
+	}
+
+	.ratingField__star:hover ~ .ratingField__star {
+		.ratingField__icon--empty {
+			display: inline-flex;
+		}
 
-	.ratingMetaButton {
-		margin-left: 5px;
+		.ratingField__icon--full {
+			display: none;
+		}
 	}
 }

From 79444c64f9721351e3f049428cf47d2cc7976f7a Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 4 Nov 2026 13:15:11 +0100
Subject: [PATCH 02/12] Fix ACL list container lookup for new formField markup

---
 ts/WoltLabSuite/Core/Ui/Acl/List.ts                        | 3 ++-
 wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/List.js | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/ts/WoltLabSuite/Core/Ui/Acl/List.ts b/ts/WoltLabSuite/Core/Ui/Acl/List.ts
index c986de53228..64e4ca098e7 100644
--- a/ts/WoltLabSuite/Core/Ui/Acl/List.ts
+++ b/ts/WoltLabSuite/Core/Ui/Acl/List.ts
@@ -86,7 +86,8 @@ class AclList {
     this.#container.classList.add("aclContainer");
 
     // insert container elements
-    const elementContainer = this.#container.querySelector("dd")!;
+    const elementContainer =
+      this.#container.querySelector<HTMLElement>(":scope > .formField__input") ?? this.#container.querySelector("dd")!;
     this.#aclList = document.createElement("ul");
     this.#aclList.classList.add("aclList");
     elementContainer.appendChild(this.#aclList);
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/List.js
index e517c227e57..d02174e870f 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/List.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/List.js
@@ -35,7 +35,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Ui/User/Search/Input",
             Util_1.default.hide(this.#container);
             this.#container.classList.add("aclContainer");
             // insert container elements
-            const elementContainer = this.#container.querySelector("dd");
+            const elementContainer = this.#container.querySelector(":scope > .formField__input") ?? this.#container.querySelector("dd");
             this.#aclList = document.createElement("ul");
             this.#aclList.classList.add("aclList");
             elementContainer.appendChild(this.#aclList);

From 0ecab4af39e8be8e1d8ede1a484e59f292a087e7 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 4 Nov 2026 16:39:05 +0100
Subject: [PATCH 03/12] Restyle form builder inputs, labels and submit footer

---
 .../__multifactorTotpNewDeviceContainer.tpl   |  2 +-
 com.woltlab.wcf/templates/shared_form.tpl     |  2 +-
 .../Core/Component/Ckeditor/Keyboard.ts       |  2 +-
 ts/WoltLabSuite/Core/Component/Quote/List.ts  |  2 +-
 ts/WoltLabSuite/Core/Form/Builder/Dialog.ts   |  2 +-
 ts/WoltLabSuite/Core/Ui/Dialog.ts             |  4 +-
 ...ate_com.woltlab.wcf_6.3_styleVariables.php |  1 +
 .../Core/Component/Ckeditor/Keyboard.js       |  2 +-
 .../WoltLabSuite/Core/Component/Quote/List.js |  2 +-
 .../WoltLabSuite/Core/Form/Builder/Dialog.js  |  2 +-
 .../files/js/WoltLabSuite/Core/Ui/Dialog.js   |  4 +-
 .../files/style/bootstrap/mixin/input.scss    |  7 +-
 wcfsetup/install/files/style/element/dl.scss  |  2 +-
 wcfsetup/install/files/style/layout/form.scss | 21 ++---
 .../install/files/style/layout/print.scss     |  1 +
 .../install/files/style/ui/formBuilder.scss   | 87 +++++++++++--------
 wcfsetup/setup/db/install.sql                 |  2 +-
 17 files changed, 84 insertions(+), 61 deletions(-)

diff --git a/com.woltlab.wcf/templates/__multifactorTotpNewDeviceContainer.tpl b/com.woltlab.wcf/templates/__multifactorTotpNewDeviceContainer.tpl
index dccf62639f7..d81f82fec81 100644
--- a/com.woltlab.wcf/templates/__multifactorTotpNewDeviceContainer.tpl
+++ b/com.woltlab.wcf/templates/__multifactorTotpNewDeviceContainer.tpl
@@ -28,7 +28,7 @@
 			{/foreach}
 			
 			{if $container->getNodeById('submitButton')->isAvailable()}
-				<div class="formSubmit">
+				<div class="formBuilder__submit">
 					{unsafe:$container->getNodeById('submitButton')->getHtml()}
 				</div>
 			{/if}
diff --git a/com.woltlab.wcf/templates/shared_form.tpl b/com.woltlab.wcf/templates/shared_form.tpl
index 1a30872d351..8f706c60829 100644
--- a/com.woltlab.wcf/templates/shared_form.tpl
+++ b/com.woltlab.wcf/templates/shared_form.tpl
@@ -51,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()}
diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Keyboard.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Keyboard.ts
index 43dfd5cc516..10f2d499238 100644
--- a/ts/WoltLabSuite/Core/Component/Ckeditor/Keyboard.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor/Keyboard.ts
@@ -42,7 +42,7 @@ export function setupSubmitShortcut(ckeditor: CKEditor): void {
     return;
   }
 
-  const formSubmit = container.querySelector(".formSubmit");
+  const formSubmit = container.querySelector(".formSubmit, .formBuilder__submit");
   if (formSubmit === null) {
     return;
   }
diff --git a/ts/WoltLabSuite/Core/Component/Quote/List.ts b/ts/WoltLabSuite/Core/Component/Quote/List.ts
index c73543d1fc1..63722337cf8 100644
--- a/ts/WoltLabSuite/Core/Component/Quote/List.ts
+++ b/ts/WoltLabSuite/Core/Component/Quote/List.ts
@@ -184,7 +184,7 @@ class QuoteList {
   }
 
   #formSubmitted(): void {
-    const formSubmit = this.#editor.closest("form")!.querySelector(".formSubmit")!;
+    const formSubmit = this.#editor.closest("form")!.querySelector(".formSubmit, .formBuilder__submit")!;
 
     getUsedQuotes(this.#editorId).forEach((uuid) => {
       formSubmit.append(
diff --git a/ts/WoltLabSuite/Core/Form/Builder/Dialog.ts b/ts/WoltLabSuite/Core/Form/Builder/Dialog.ts
index 3c2fd5fc4c5..30e2136bdd2 100644
--- a/ts/WoltLabSuite/Core/Form/Builder/Dialog.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Dialog.ts
@@ -179,7 +179,7 @@ class FormBuilderDialog implements AjaxCallbackObject, DialogCallbackObject {
     }
 
     this._additionalSubmitButtons = Array.from(
-      dialogData.content.querySelectorAll(':not(.formSubmit) button[type="submit"]'),
+      dialogData.content.querySelectorAll(':not(.formSubmit, .formBuilder__submit) button[type="submit"]'),
     );
     this._additionalSubmitButtons.forEach((submit) => {
       submit.addEventListener("click", () => {
diff --git a/ts/WoltLabSuite/Core/Ui/Dialog.ts b/ts/WoltLabSuite/Core/Ui/Dialog.ts
index cfd800fcda3..f61c6b2514c 100644
--- a/ts/WoltLabSuite/Core/Ui/Dialog.ts
+++ b/ts/WoltLabSuite/Core/Ui/Dialog.ts
@@ -618,7 +618,7 @@ const UiDialog = {
 
     const contentContainer = data.content.parentNode as HTMLElement;
 
-    const formSubmit = data.content.querySelector(".formSubmit") as HTMLElement;
+    const formSubmit = data.content.querySelector(".formSubmit, .formBuilder__submit") as HTMLElement;
     let unavailableHeight = 0;
     if (formSubmit !== null) {
       contentContainer.classList.add("dialogForm");
@@ -653,7 +653,7 @@ const UiDialog = {
       const inputFields = data.content.querySelectorAll<HTMLInputElement>('input[data-dialog-submit-on-enter="true"]');
 
       const submitButton = data.content.querySelector(
-        '.formSubmit > input[type="submit"], .formSubmit > button[data-type="submit"]',
+        ':is(.formSubmit, .formBuilder__submit) > :is(input[type="submit"], button[data-type="submit"])',
       );
       if (submitButton === null) {
         // check if there is at least one input field with submit handling,
diff --git a/wcfsetup/install/files/acp/update_com.woltlab.wcf_6.3_styleVariables.php b/wcfsetup/install/files/acp/update_com.woltlab.wcf_6.3_styleVariables.php
index 26aa6fd5756..b51acf2eb93 100644
--- a/wcfsetup/install/files/acp/update_com.woltlab.wcf_6.3_styleVariables.php
+++ b/wcfsetup/install/files/acp/update_com.woltlab.wcf_6.3_styleVariables.php
@@ -22,6 +22,7 @@
     ['wcfFooterLink', 'rgba(38, 113, 166, 1)', 'rgba(29, 155, 209, 1)'],
     ['wcfFooterLinkActive', 'rgba(22, 81, 124, 1)', 'rgba(64, 179, 228, 1)'],
     ['wcfFooterText', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)'],
+    ['wcfInputLabel', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)'],
 ];
 
 // Existing styles keep the footer colors of earlier versions, the new defaults
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Keyboard.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Keyboard.js
index 7897944ca85..746b8462ba6 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Keyboard.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Keyboard.js
@@ -36,7 +36,7 @@ define(["require", "exports", "./Event"], function (require, exports, Event_1) {
         if (container === null) {
             return;
         }
-        const formSubmit = container.querySelector(".formSubmit");
+        const formSubmit = container.querySelector(".formSubmit, .formBuilder__submit");
         if (formSubmit === null) {
             return;
         }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Quote/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Quote/List.js
index b0c8a404ff3..f3db472ef80 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Quote/List.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Quote/List.js
@@ -145,7 +145,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Component/Ckeditor", "
             this.#container.prepend(buttons);
         }
         #formSubmitted() {
-            const formSubmit = this.#editor.closest("form").querySelector(".formSubmit");
+            const formSubmit = this.#editor.closest("form").querySelector(".formSubmit, .formBuilder__submit");
             (0, Storage_1.getUsedQuotes)(this.#editorId).forEach((uuid) => {
                 formSubmit.append(Util_1.default.createFragmentFromHtml(`<input type="hidden" name="__removeQuoteIDs[${(0, StringUtil_1.escapeHTML)(this.#editorId)}][]" value="${(0, StringUtil_1.escapeHTML)(uuid)}">`));
             });
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Dialog.js
index 47a2e7912a3..74732811b33 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Dialog.js
@@ -130,7 +130,7 @@ define(["require", "exports", "tslib", "../../Core", "../../Ui/Dialog", "../../A
                 cancelButton.addEventListener("click", () => this._closeDialog());
                 cancelButton.dataset.hasEventListener = "1";
             }
-            this._additionalSubmitButtons = Array.from(dialogData.content.querySelectorAll(':not(.formSubmit) button[type="submit"]'));
+            this._additionalSubmitButtons = Array.from(dialogData.content.querySelectorAll(':not(.formSubmit, .formBuilder__submit) button[type="submit"]'));
             this._additionalSubmitButtons.forEach((submit) => {
                 submit.addEventListener("click", () => {
                     // Mark the button that was clicked so that the button data handlers know
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
index 7347b9f90bd..732e5aff2cb 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
@@ -511,7 +511,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "./S
                 return;
             }
             const contentContainer = data.content.parentNode;
-            const formSubmit = data.content.querySelector(".formSubmit");
+            const formSubmit = data.content.querySelector(".formSubmit, .formBuilder__submit");
             let unavailableHeight = 0;
             if (formSubmit !== null) {
                 contentContainer.classList.add("dialogForm");
@@ -538,7 +538,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "./S
             //noinspection JSUnresolvedVariable
             if (callbackObject !== undefined && typeof callbackObject._dialogSubmit === "function") {
                 const inputFields = data.content.querySelectorAll('input[data-dialog-submit-on-enter="true"]');
-                const submitButton = data.content.querySelector('.formSubmit > input[type="submit"], .formSubmit > button[data-type="submit"]');
+                const submitButton = data.content.querySelector(':is(.formSubmit, .formBuilder__submit) > :is(input[type="submit"], button[data-type="submit"])');
                 if (submitButton === null) {
                     // check if there is at least one input field with submit handling,
                     // otherwise we'll assume the dialog has not been populated yet
diff --git a/wcfsetup/install/files/style/bootstrap/mixin/input.scss b/wcfsetup/install/files/style/bootstrap/mixin/input.scss
index 4fac3903623..eeee84bd338 100644
--- a/wcfsetup/install/files/style/bootstrap/mixin/input.scss
+++ b/wcfsetup/install/files/style/bootstrap/mixin/input.scss
@@ -5,7 +5,7 @@
 	color: var(--wcfInputText);
 	font-weight: 400;
 	outline: none;
-	padding: 4px 8px;
+	padding: 8px 12px;
 
 	// input elements do not inherit font family, size and line-height from body
 	font-family: var(--wcfFontFamily);
@@ -19,6 +19,11 @@
 		color: var(--wcfInputTextActive);
 	}
 
+	&:focus-visible {
+		border-color: var(--wcfInputBorderActive);
+		box-shadow: 0 0 0 3px rgba(var(--wcfInputBorderActive-rgb) / 0.25);
+	}
+
 	&[disabled],
 	&.disabled {
 		background-color: var(--wcfInputDisabledBackground) !important;
diff --git a/wcfsetup/install/files/style/element/dl.scss b/wcfsetup/install/files/style/element/dl.scss
index e0f4520536c..d018ea8d28c 100644
--- a/wcfsetup/install/files/style/element/dl.scss
+++ b/wcfsetup/install/files/style/element/dl.scss
@@ -8,8 +8,8 @@ dl {
 
 		> dt {
 			color: var(--wcfInputLabel);
-
 			display: block;
+			font-weight: 500;
 
 			&:not(:empty) {
 				margin-bottom: 5px;
diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index 98349eed134..de93af2408a 100644
--- a/wcfsetup/install/files/style/layout/form.scss
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -79,7 +79,7 @@ input[type="text"] {
 	select,
 	textarea {
 		font-size: 16px;
-		padding: 6px 8px;
+		padding: 8px 12px;
 	}
 }
 
@@ -100,6 +100,13 @@ textarea {
 	}
 }
 
+input[type="checkbox"],
+input[type="radio"] {
+	accent-color: var(--wcfButtonPrimaryBackground);
+	height: 16px;
+	width: 16px;
+}
+
 input[disabled],
 textarea[disabled] {
 	-webkit-text-fill-color: var(--wcfInputDisabledText); /* override safari font color change */
@@ -160,6 +167,7 @@ select {
 	> .inputPrefix,
 	> .inputSuffix {
 		align-items: center;
+		color: var(--wcfContentDimmedText);
 		display: flex;
 		flex: 0 0 auto;
 	}
@@ -228,10 +236,6 @@ input {
 .formError {
 	--color-error: #c00;
 
-	dt {
-		color: var(--color-error) !important;
-	}
-
 	input,
 	select,
 	textarea {
@@ -270,7 +274,8 @@ html[data-color-scheme="dark"] .formError {
 
 .formFieldRequired,
 .customOptionRequired {
-	color: rgba(204, 0, 1, 1) !important;
+	color: var(--wcfContentDimmedText) !important;
+	font-weight: 400;
 }
 
 .formFieldRequiredNotice {
@@ -279,10 +284,6 @@ html[data-color-scheme="dark"] .formError {
 	@include wcfFontSmall;
 }
 
-html[data-color-scheme="dark"] :is(.formFieldRequired, .customOptionRequired) {
-	color: #ff4444 !important;
-}
-
 /* password strength estimator */
 .inputAddonPasswordStrength {
 	align-items: flex-start;
diff --git a/wcfsetup/install/files/style/layout/print.scss b/wcfsetup/install/files/style/layout/print.scss
index 17a5cc8a268..c1256a7d83e 100644
--- a/wcfsetup/install/files/style/layout/print.scss
+++ b/wcfsetup/install/files/style/layout/print.scss
@@ -27,6 +27,7 @@
 	.statusDisplay,
 	.dialogContainer,
 	.formSubmit,
+	.formBuilder__submit,
 	.tabMenu > ul > li:not(.active),
 	
 	.showMore, 
diff --git a/wcfsetup/install/files/style/ui/formBuilder.scss b/wcfsetup/install/files/style/ui/formBuilder.scss
index d1db64e9fd8..ec60ef746a7 100644
--- a/wcfsetup/install/files/style/ui/formBuilder.scss
+++ b/wcfsetup/install/files/style/ui/formBuilder.scss
@@ -2,31 +2,57 @@
 .formBuilder {
 	display: flex;
 	flex-direction: column;
-	row-gap: 40px;
+	row-gap: 20px;
+}
 
-	/* the spacing is provided by `row-gap` */
-	> .formSubmit:not(:first-child) {
-		margin-top: 0;
+/* Form builder buttons: `.formBuilder > .formBuilder__submit` */
+.formBuilder__submit {
+	display: flex;
+	flex-direction: row-reverse;
+	flex-wrap: wrap;
+	gap: 10px;
+	justify-content: center;
+
+	@include screen-xs {
+		input[type="button"],
+		input[type="reset"],
+		input[type="submit"],
+		.button {
+			flex: 1 0 auto;
+		}
 	}
 }
 
 /* Form builder sections: `.formSection > .formSection__header > .formSection__title + .formSection__description` */
-.formSection,
+.formSection {
+	display: flex;
+	flex-direction: column;
+	row-gap: 20px;
+}
+
 .formSection > .tabMenuContent {
 	display: flex;
 	flex-direction: column;
 	row-gap: 20px;
 }
 
+.formSection ~ .formSection:not(.tabMenuContainer) {
+	border-top: 1px solid var(--wcfContentBorderInner);
+	padding-top: 20px;
+}
+
 .formSection > .formSection__header {
-	border-bottom: 1px solid var(--wcfContentBorderInner);
-	padding-bottom: 10px;
+	display: flex;
+	flex-direction: column;
+	row-gap: 2px;
 }
 
 .formSection__title {
-	color: var(--wcfContentHeadlineText);
+	@include wcfFontHeadline;
 
-	@include wcfFontSection;
+	& {
+		font-weight: 600;
+	}
 
 	a {
 		color: var(--wcfContentHeadlineLink);
@@ -35,14 +61,6 @@
 			color: var(--wcfContentHeadlineLinkActive);
 		}
 	}
-
-	.badge {
-		top: -2px;
-	}
-}
-
-:is(.section, .formSection) .formSection .formSection__title {
-	@include wcfFontHeadline;
 }
 
 .formSection__description {
@@ -50,11 +68,8 @@
 }
 
 .formSection__required {
-	color: rgba(204, 0, 1, 1);
-}
-
-html[data-color-scheme="dark"] .formSection__required {
-	color: #ff4444;
+	color: var(--wcfContentDimmedText);
+	font-weight: 400;
 }
 
 /* Form builder fields: `.formField > .formField__label + .formField__input + .formField__errors + .formField__description` */
@@ -68,18 +83,20 @@ html[data-color-scheme="dark"] .formSection__required {
 	}
 }
 
+/* `HiddenFormField` has no visible output, the wrapper must not take part in the `row-gap` */
+.formField:has(> .formField__input > input[type="hidden"]:only-child) {
+	display: none;
+}
+
 .formField__label {
 	color: var(--wcfInputLabel);
+	font-weight: 500;
 
 	&:empty {
 		display: none;
 	}
 }
 
-.formError .formField__label {
-	color: var(--color-error) !important;
-}
-
 .formSuccess .formField__label {
 	color: var(--color-success) !important;
 }
@@ -104,11 +121,8 @@ html[data-color-scheme="dark"] .formSection__required {
 }
 
 .formField__required {
-	color: rgba(204, 0, 1, 1);
-}
-
-html[data-color-scheme="dark"] .formField__required {
-	color: #ff4444;
+	color: var(--wcfContentDimmedText);
+	font-weight: 400;
 }
 
 .formField__inlineLabel {
@@ -152,12 +166,13 @@ html[data-color-scheme="dark"] .formField__error {
 	row-gap: 5px;
 }
 
+/* the tab menu of a `WysiwygFormContainer` is attached to the editor, offsets the `row-gap` of `.formSection` */
+.formSection > .formField + .messageTabMenu {
+	margin-top: -20px;
+}
+
 /* Form builder forms inside dialogs */
 :is(.dialogContent, .dialog__content) {
-	.formBuilder {
-		row-gap: 20px;
-	}
-
 	.formSection__title {
 		border-bottom-width: 0;
 		padding-bottom: 0;
@@ -174,7 +189,7 @@ html[data-color-scheme="dark"] .formField__error {
 		padding-bottom: 0;
 	}
 
-	.formSection ~ .formSection {
+	.formSection ~ .formSection:not(.tabMenuContainer) {
 		border-top: 1px solid var(--wcfContentBorderInner);
 		padding-top: 20px;
 	}
diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index 37ccb63ed7d..2b32f976881 100644
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -124,7 +124,7 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMod
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfInputDisabledBackground', 'rgba(245, 245, 245, 1)', 'rgba(34, 37, 41, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfInputDisabledBorder', 'rgba(174, 176, 179, 1)', 'rgba(56, 56, 57, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfInputDisabledText', 'rgba(125, 130, 100, 1)', 'rgba(118, 119, 121, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfInputLabel', 'rgba(59, 109, 169, 1)', 'rgba(144, 164, 174, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfInputLabel', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfInputText', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfInputTextActive', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfInputPlaceholder', 'rgba(169, 169, 169, 1)', 'rgba(122, 123, 125, 1)');

From 437eb34a1739662951b365b4de27febb4f243caa Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 4 Nov 2026 17:45:00 +0100
Subject: [PATCH 04/12] Fix additional submit button selector matching footer
 submit buttons

---
 ts/WoltLabSuite/Core/Form/Builder/Dialog.ts                     | 2 +-
 .../install/files/js/WoltLabSuite/Core/Form/Builder/Dialog.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ts/WoltLabSuite/Core/Form/Builder/Dialog.ts b/ts/WoltLabSuite/Core/Form/Builder/Dialog.ts
index 30e2136bdd2..6ce9c482e98 100644
--- a/ts/WoltLabSuite/Core/Form/Builder/Dialog.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Dialog.ts
@@ -179,7 +179,7 @@ class FormBuilderDialog implements AjaxCallbackObject, DialogCallbackObject {
     }
 
     this._additionalSubmitButtons = Array.from(
-      dialogData.content.querySelectorAll(':not(.formSubmit, .formBuilder__submit) button[type="submit"]'),
+      dialogData.content.querySelectorAll('button[type="submit"]:not(:is(.formSubmit, .formBuilder__submit) *)'),
     );
     this._additionalSubmitButtons.forEach((submit) => {
       submit.addEventListener("click", () => {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Dialog.js
index 74732811b33..a388cd71f67 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Dialog.js
@@ -130,7 +130,7 @@ define(["require", "exports", "tslib", "../../Core", "../../Ui/Dialog", "../../A
                 cancelButton.addEventListener("click", () => this._closeDialog());
                 cancelButton.dataset.hasEventListener = "1";
             }
-            this._additionalSubmitButtons = Array.from(dialogData.content.querySelectorAll(':not(.formSubmit, .formBuilder__submit) button[type="submit"]'));
+            this._additionalSubmitButtons = Array.from(dialogData.content.querySelectorAll('button[type="submit"]:not(:is(.formSubmit, .formBuilder__submit) *)'));
             this._additionalSubmitButtons.forEach((submit) => {
                 submit.addEventListener("click", () => {
                     // Mark the button that was clicked so that the button data handlers know

From 95e0ebaf913f7d30c3f68d96bc180002cd41d2db Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 4 Nov 2026 17:53:24 +0100
Subject: [PATCH 05/12] Reduce default MultilineTextFormField rows to 5 and
 drop redundant rows(5) calls

---
 .../lib/acp/action/LanguageItemEditAction.class.php      | 3 ---
 .../files/lib/acp/form/ContactOptionAddForm.class.php    | 1 -
 .../form/builder/field/MultilineTextFormField.class.php  | 4 ++--
 .../AbstractOptionPackageInstallationPlugin.class.php    | 6 ++----
 .../plugin/OptionPackageInstallationPlugin.class.php     | 1 -
 .../UserGroupOptionPackageInstallationPlugin.class.php   | 9 +++------
 .../plugin/UserOptionPackageInstallationPlugin.class.php | 6 ++----
 7 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/wcfsetup/install/files/lib/acp/action/LanguageItemEditAction.class.php b/wcfsetup/install/files/lib/acp/action/LanguageItemEditAction.class.php
index 00f6463f6ec..722f6ea8f6c 100644
--- a/wcfsetup/install/files/lib/acp/action/LanguageItemEditAction.class.php
+++ b/wcfsetup/install/files/lib/acp/action/LanguageItemEditAction.class.php
@@ -123,7 +123,6 @@ private function getForm(LanguageItem $languageItem): Psr15DialogForm
                 ->appendChildren([
                     MultilineTextFormField::create('languageItemValue')
                         ->label('wcf.acp.language.item.value')
-                        ->rows(5)
                         ->immutable((bool)$languageItem->languageItemOriginIsSystem)
                 ]),
             FormContainer::create('oldValueContainer')
@@ -138,7 +137,6 @@ private function getForm(LanguageItem $languageItem): Psr15DialogForm
                 ])
                 ->appendChildren([
                     MultilineTextFormField::create('languageItemOldValue')
-                        ->rows(5)
                         ->immutable()
                 ]),
             FormContainer::create('customValueContainer')
@@ -148,7 +146,6 @@ private function getForm(LanguageItem $languageItem): Psr15DialogForm
                     BooleanFormField::create('languageUseCustomValue')
                         ->label('wcf.acp.language.item.useCustomValue'),
                     MultilineTextFormField::create('languageCustomItemValue')
-                        ->rows(5)
                         ->addDependency(
                             NonEmptyFormFieldDependency::create('languageUseCustomValue')
                                 ->fieldId('languageUseCustomValue')
diff --git a/wcfsetup/install/files/lib/acp/form/ContactOptionAddForm.class.php b/wcfsetup/install/files/lib/acp/form/ContactOptionAddForm.class.php
index 6cc2a035a91..0ec29deabe9 100644
--- a/wcfsetup/install/files/lib/acp/form/ContactOptionAddForm.class.php
+++ b/wcfsetup/install/files/lib/acp/form/ContactOptionAddForm.class.php
@@ -58,7 +58,6 @@ protected function createForm()
             MultilineTextFormField::create('optionDescription')
                 ->label('wcf.global.description')
                 ->maximumLength(5000)
-                ->rows(5)
                 ->i18n()
                 ->languageItemPattern('wcf.contact.optionDescription\d+'),
             ShowOrderFormField::create('showOrder')
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/MultilineTextFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/MultilineTextFormField.class.php
index 35fd375dc97..3d931c88535 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/MultilineTextFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/MultilineTextFormField.class.php
@@ -16,7 +16,7 @@ class MultilineTextFormField extends TextFormField
      * number of rows of the textarea
      * @var int
      */
-    protected $rows = 10;
+    protected $rows = 5;
 
     /**
      * @inheritDoc
@@ -38,7 +38,7 @@ protected function getValidAutoCompleteTokens(): array
 
     /**
      * Returns the number of rows of the textarea. If the number of rows has not been
-     * explicitly set, `10` is returned.
+     * explicitly set, `5` is returned.
      *
      * @return  int number of textarea rows
      */
diff --git a/wcfsetup/install/files/lib/system/package/plugin/AbstractOptionPackageInstallationPlugin.class.php b/wcfsetup/install/files/lib/system/package/plugin/AbstractOptionPackageInstallationPlugin.class.php
index 0b499bbc076..4367843a79c 100644
--- a/wcfsetup/install/files/lib/system/package/plugin/AbstractOptionPackageInstallationPlugin.class.php
+++ b/wcfsetup/install/files/lib/system/package/plugin/AbstractOptionPackageInstallationPlugin.class.php
@@ -566,8 +566,7 @@ protected function addFormFields(IFormDocument $form)
                     MultilineTextFormField::create('defaultValue')
                         ->objectProperty('defaultvalue')
                         ->label('wcf.acp.pip.abstractOption.options.defaultValue')
-                        ->description('wcf.acp.pip.abstractOption.options.defaultValue.description')
-                        ->rows(5),
+                        ->description('wcf.acp.pip.abstractOption.options.defaultValue.description'),
 
                     TextFormField::create('validationPattern')
                         ->objectProperty('validationpattern')
@@ -589,8 +588,7 @@ protected function addFormFields(IFormDocument $form)
                     MultilineTextFormField::create('enableOptions')
                         ->objectProperty('enableoptions')
                         ->label('wcf.acp.pip.abstractOption.options.enableOptions')
-                        ->description('wcf.acp.pip.abstractOption.options.enableOptions.description')
-                        ->rows(5),
+                        ->description('wcf.acp.pip.abstractOption.options.enableOptions.description'),
 
                     IntegerFormField::create('showOrder')
                         ->objectProperty('showorder')
diff --git a/wcfsetup/install/files/lib/system/package/plugin/OptionPackageInstallationPlugin.class.php b/wcfsetup/install/files/lib/system/package/plugin/OptionPackageInstallationPlugin.class.php
index c8a08580b95..edd3831e1eb 100644
--- a/wcfsetup/install/files/lib/system/package/plugin/OptionPackageInstallationPlugin.class.php
+++ b/wcfsetup/install/files/lib/system/package/plugin/OptionPackageInstallationPlugin.class.php
@@ -264,7 +264,6 @@ static function (TextFormField $formField) {
                     ->objectProperty('selectoptions')
                     ->label('wcf.acp.pip.abstractOption.options.selectOptions')
                     ->description('wcf.acp.pip.option.abstractOption.selectOptions.description')
-                    ->rows(5)
                     ->addDependency(
                         ValueFormFieldDependency::create('optionType')
                             ->field($optionType)
diff --git a/wcfsetup/install/files/lib/system/package/plugin/UserGroupOptionPackageInstallationPlugin.class.php b/wcfsetup/install/files/lib/system/package/plugin/UserGroupOptionPackageInstallationPlugin.class.php
index fa9a04fe8f4..f5612f4faa4 100644
--- a/wcfsetup/install/files/lib/system/package/plugin/UserGroupOptionPackageInstallationPlugin.class.php
+++ b/wcfsetup/install/files/lib/system/package/plugin/UserGroupOptionPackageInstallationPlugin.class.php
@@ -278,20 +278,17 @@ protected function addFormFields(IFormDocument $form)
                 MultilineTextFormField::create('adminDefaultValue')
                     ->objectProperty('admindefaultvalue')
                     ->label('wcf.acp.pip.userGroupOption.options.adminDefaultValue')
-                    ->description('wcf.acp.pip.userGroupOption.options.adminDefaultValue.description')
-                    ->rows(5),
+                    ->description('wcf.acp.pip.userGroupOption.options.adminDefaultValue.description'),
 
                 MultilineTextFormField::create('modDefaultValue')
                     ->objectProperty('moddefaultvalue')
                     ->label('wcf.acp.pip.userGroupOption.options.modDefaultValue')
-                    ->description('wcf.acp.pip.userGroupOption.options.modDefaultValue.description')
-                    ->rows(5),
+                    ->description('wcf.acp.pip.userGroupOption.options.modDefaultValue.description'),
 
                 MultilineTextFormField::create('userDefaultValue')
                     ->objectProperty('userdefaultvalue')
                     ->label('wcf.acp.pip.userGroupOption.options.userDefaultValue')
-                    ->description('wcf.acp.pip.userGroupOption.options.userDefaultValue.description')
-                    ->rows(5),
+                    ->description('wcf.acp.pip.userGroupOption.options.userDefaultValue.description'),
 
                 BooleanFormField::create('usersOnly')
                     ->objectProperty('usersonly')
diff --git a/wcfsetup/install/files/lib/system/package/plugin/UserOptionPackageInstallationPlugin.class.php b/wcfsetup/install/files/lib/system/package/plugin/UserOptionPackageInstallationPlugin.class.php
index 28e118d1d94..80c2ad77f1e 100644
--- a/wcfsetup/install/files/lib/system/package/plugin/UserOptionPackageInstallationPlugin.class.php
+++ b/wcfsetup/install/files/lib/system/package/plugin/UserOptionPackageInstallationPlugin.class.php
@@ -582,8 +582,7 @@ protected function addFormFields(IFormDocument $form)
                     MultilineTextFormField::create('defaultValue')
                         ->objectProperty('defaultvalue')
                         ->label('wcf.acp.pip.abstractOption.options.defaultValue')
-                        ->description('wcf.acp.pip.abstractOption.options.defaultValue.description')
-                        ->rows(5),
+                        ->description('wcf.acp.pip.abstractOption.options.defaultValue.description'),
 
                     TextFormField::create('validationPattern')
                         ->objectProperty('validationpattern')
@@ -596,8 +595,7 @@ protected function addFormFields(IFormDocument $form)
                     MultilineTextFormField::create('selectOptions')
                         ->objectProperty('selectoptions')
                         ->label('wcf.acp.pip.abstractOption.options.selectOptions')
-                        ->description('wcf.acp.pip.abstractOption.options.selectOptions.description')
-                        ->rows(5),
+                        ->description('wcf.acp.pip.abstractOption.options.selectOptions.description'),
 
                     IntegerFormField::create('showOrder')
                         ->objectProperty('showorder')

From a0d3ef5b3555bb0a1a1dec827230d0b3d9f86edd Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 4 Nov 2026 19:56:59 +0100
Subject: [PATCH 06/12] Float RadioButtonFormField options by default

---
 .../system/form/builder/field/BadgeColorFormField.class.php  | 4 ++++
 .../system/form/builder/field/RadioButtonFormField.class.php | 5 +++++
 .../package/plugin/PagePackageInstallationPlugin.class.php   | 1 -
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/wcfsetup/install/files/lib/system/form/builder/field/BadgeColorFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/BadgeColorFormField.class.php
index 9dfd93e4b59..1f5ee51f809 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/BadgeColorFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/BadgeColorFormField.class.php
@@ -47,7 +47,11 @@ final class BadgeColorFormField extends RadioButtonFormField implements IPattern
 
     public function __construct()
     {
+        parent::__construct();
+
+        // the colors are laid out by `.labelSelection`
         $this
+            ->removeClass('floated')
             ->addFieldClass('labelSelection__radio')
             ->defaultLabelText(WCF::getLanguage()->get('wcf.acp.label.defaultValue'))
             ->options(\array_combine(self::AVAILABLE_CSS_CLASSNAMES, self::AVAILABLE_CSS_CLASSNAMES))
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/RadioButtonFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/RadioButtonFormField.class.php
index 7c8252c93fd..14ad79401ee 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/RadioButtonFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/RadioButtonFormField.class.php
@@ -33,6 +33,11 @@ class RadioButtonFormField extends AbstractFormField implements
      */
     protected $templateName = 'shared_radioButtonFormField';
 
+    public function __construct()
+    {
+        $this->addClass('floated');
+    }
+
     #[\Override]
     public function readValue()
     {
diff --git a/wcfsetup/install/files/lib/system/package/plugin/PagePackageInstallationPlugin.class.php b/wcfsetup/install/files/lib/system/package/plugin/PagePackageInstallationPlugin.class.php
index c899e40d754..f5e703e9866 100644
--- a/wcfsetup/install/files/lib/system/package/plugin/PagePackageInstallationPlugin.class.php
+++ b/wcfsetup/install/files/lib/system/package/plugin/PagePackageInstallationPlugin.class.php
@@ -476,7 +476,6 @@ protected function addFormFields(IFormDocument $form)
                 ->label('wcf.acp.pip.page.pageType')
                 ->description('wcf.acp.pip.page.pageType.description')
                 ->options(\array_combine(Page::$availablePageTypes, Page::$availablePageTypes))
-                ->addClass('floated')
                 ->required(),
 
             TextFormField::create('name')

From fb7b543f2a5595869417f80bbf84fe2268af8069 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 4 Nov 2026 20:00:28 +0100
Subject: [PATCH 07/12] Use formField__inlineLabel for RadioButtonFormField
 options

---
 com.woltlab.wcf/templates/shared_radioButtonFormField.tpl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/com.woltlab.wcf/templates/shared_radioButtonFormField.tpl b/com.woltlab.wcf/templates/shared_radioButtonFormField.tpl
index 21026d7ee4b..3deb988cb08 100644
--- a/com.woltlab.wcf/templates/shared_radioButtonFormField.tpl
+++ b/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()}" {*

From 05462172c6af0dae34f00d4ea5be81ad1f2b5451 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 4 Nov 2026 23:09:29 +0100
Subject: [PATCH 08/12] Migrate ACP form template nodes to formField markup,
 use dependencies for notice type examples

---
 .../acp/templates/__adLocationVariables.tpl   | 15 +++------
 .../acp/templates/__labelGroupObjectTypes.tpl | 12 +++----
 .../templates/__noticeCssClassNameExample.tpl | 33 +------------------
 .../files/acp/templates/__tagFormSynonym.tpl  | 10 +++---
 .../lib/acp/form/NoticeAddForm.class.php      | 16 +++++++--
 5 files changed, 31 insertions(+), 55 deletions(-)

diff --git a/wcfsetup/install/files/acp/templates/__adLocationVariables.tpl b/wcfsetup/install/files/acp/templates/__adLocationVariables.tpl
index 90e8a8eab32..1c15946269b 100644
--- a/wcfsetup/install/files/acp/templates/__adLocationVariables.tpl
+++ b/wcfsetup/install/files/acp/templates/__adLocationVariables.tpl
@@ -1,10 +1,5 @@
-<dl>
-	<dt></dt>
-	<dd>
-		<small>
-			<ul class="nativeList">
-				{unsafe:$variablesDescription}
-			</ul>
-		</small>
-	</dd>
-</dl>
+<div class="formField__description">
+	<ul class="nativeList">
+		{unsafe:$variablesDescription}
+	</ul>
+</div>
diff --git a/wcfsetup/install/files/acp/templates/__labelGroupObjectTypes.tpl b/wcfsetup/install/files/acp/templates/__labelGroupObjectTypes.tpl
index 0956561d759..0adb067ad6a 100644
--- a/wcfsetup/install/files/acp/templates/__labelGroupObjectTypes.tpl
+++ b/wcfsetup/install/files/acp/templates/__labelGroupObjectTypes.tpl
@@ -4,11 +4,11 @@
 	});
 </script>
 
-<div id="connect">
+<div id="connect" class="formSection">
 	{foreach from=$labelObjectTypeContainers item=container}
-		<dl>
-			<dt>{$container->getTitle()}</dt>
-			<dd>
+		<div class="formField" role="group" aria-labelledby="labelObjectTypes{$container->objectTypeID}Label">
+			<div class="formField__label"><span id="labelObjectTypes{$container->objectTypeID}Label">{$container->getTitle()}</span></div>
+			<div class="formField__input">
 				<ul class="structuredList">
 					{foreach from=$container item=objectType}
 						<li class="{if $objectType->isCategory()} category{/if}"{if $objectType->getDepth()} style="padding-left: {$objectType->getDepth() * 20}px"{/if} data-depth="{$objectType->getDepth()}">
@@ -17,7 +17,7 @@
 						</li>
 					{/foreach}
 				</ul>
-			</dd>
-		</dl>
+			</div>
+		</div>
 	{/foreach}
 </div>
diff --git a/wcfsetup/install/files/acp/templates/__noticeCssClassNameExample.tpl b/wcfsetup/install/files/acp/templates/__noticeCssClassNameExample.tpl
index 6e0110394e0..7d15151dc7f 100644
--- a/wcfsetup/install/files/acp/templates/__noticeCssClassNameExample.tpl
+++ b/wcfsetup/install/files/acp/templates/__noticeCssClassNameExample.tpl
@@ -1,32 +1 @@
-<dl>
-	<dt></dt>
-	<dd>
-		<woltlab-core-notice type="info" id="cssClassNameExample">{lang}wcf.acp.notice.example{/lang}</woltlab-core-notice>
-	</dd>
-</dl>
-
-<script data-relocate="true">
-	{
-		const example = document.getElementById('cssClassNameExample');
-		const updateExample = (cssClassName) => {
-			if (cssClassName === 'custom') {
-				example.hidden = true;
-			}
-			else {
-				example.type = cssClassName;
-				example.hidden = false;
-			}
-		};
-
-		document.querySelectorAll('input[name=cssClassName]').forEach((element) => {
-			element.addEventListener('change', () => {
-				updateExample(element.value);
-			});
-		});
-
-		const checked = document.querySelector('input[name=cssClassName]:checked');
-		if (checked !== null) {
-			updateExample(checked.value);
-		}
-	}
-</script>
+<woltlab-core-notice type="{$type}" style="margin-top: 0">{lang}wcf.acp.notice.example{/lang}</woltlab-core-notice>
diff --git a/wcfsetup/install/files/acp/templates/__tagFormSynonym.tpl b/wcfsetup/install/files/acp/templates/__tagFormSynonym.tpl
index e72e83228a7..f6d30b6e3ce 100644
--- a/wcfsetup/install/files/acp/templates/__tagFormSynonym.tpl
+++ b/wcfsetup/install/files/acp/templates/__tagFormSynonym.tpl
@@ -1,6 +1,6 @@
-<dl>
-	<dt><label for="synonyms">{lang}wcf.acp.tag.synonymFor{/lang}</label></dt>
-	<dd>
+<div class="formField">
+	<div class="formField__label"><span>{lang}wcf.acp.tag.synonymFor{/lang}</span></div>
+	<div class="formField__input">
 		<a href="{link controller='TagEdit' id=$synonym->tagID}{/link}" class="badge tag">{$synonym->name}</a>
-	</dd>
-</dl>
+	</div>
+</div>
diff --git a/wcfsetup/install/files/lib/acp/form/NoticeAddForm.class.php b/wcfsetup/install/files/lib/acp/form/NoticeAddForm.class.php
index 94dff3f3693..1950d5a0fcf 100644
--- a/wcfsetup/install/files/lib/acp/form/NoticeAddForm.class.php
+++ b/wcfsetup/install/files/lib/acp/form/NoticeAddForm.class.php
@@ -146,8 +146,12 @@ protected function createForm(): void
                         ->loadValueCallback(static function (Notice $object, IFormField $field) {
                             $field->value($object->isCustom() ? $object->cssClassName : '');
                         }),
-                    TemplateFormNode::create('cssClassNameExample')
-                        ->templateName('__noticeCssClassNameExample'),
+                    ...\array_map(
+                        static fn(string $type) => TemplateFormNode::create('cssClassNameExample' . \ucfirst($type))
+                            ->templateName('__noticeCssClassNameExample')
+                            ->variables(['type' => $type]),
+                        Notice::TYPES
+                    ),
                     BooleanFormField::create('isDisabled')
                         ->label('wcf.acp.notice.isDisabled')
                         ->saveValueCallback(static function (NoticeBuilder $builder, IFormField $field) {
@@ -181,6 +185,14 @@ protected function finalizeForm(): void
                 ->field($this->form->getFormField('cssClassName'))
                 ->values(['custom'])
         );
+
+        foreach (Notice::TYPES as $type) {
+            $this->form->getNodeById('cssClassNameExample' . \ucfirst($type))->addDependency(
+                ValueFormFieldDependency::create('cssClassName')
+                    ->field($this->form->getFormField('cssClassName'))
+                    ->values([$type])
+            );
+        }
     }
 
     /**

From 8db2be873c9badc6f5c2beadc739d123dd8d4390 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 4 Nov 2026 23:24:26 +0100
Subject: [PATCH 09/12] Label MultipleSelectFormField's select element directly
 instead of rendering it as a group

---
 .../form/builder/field/MultipleSelectFormField.class.php    | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/wcfsetup/install/files/lib/system/form/builder/field/MultipleSelectFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/MultipleSelectFormField.class.php
index 8045c8d6c1c..055901ce69e 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/MultipleSelectFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/MultipleSelectFormField.class.php
@@ -22,4 +22,10 @@ class MultipleSelectFormField extends MultipleSelectionFormField
      * @inheritDoc
      */
     protected $templateName = 'shared_multipleSelectFormField';
+
+    #[\Override]
+    public function getLabelTarget(): string
+    {
+        return $this->getPrefixedId();
+    }
 }

From 1a55b4940653c00c27eaead7aafdb841d9793132 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 4 Nov 2026 23:26:27 +0100
Subject: [PATCH 10/12] Remove obsolete Rating form field controller on update

---
 com.woltlab.wcf/fileDelete.xml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/com.woltlab.wcf/fileDelete.xml b/com.woltlab.wcf/fileDelete.xml
index 6f093ed6895..383ad287ed4 100644
--- a/com.woltlab.wcf/fileDelete.xml
+++ b/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>

From a4bf0047da75d280d3aacc0a2058bdf6538bb8a8 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 4 Nov 2026 23:29:54 +0100
Subject: [PATCH 11/12] Render descriptions of fields inside row containers to
 resolve their aria-describedby references

---
 com.woltlab.wcf/templates/shared_rowFormFieldContainer.tpl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/com.woltlab.wcf/templates/shared_rowFormFieldContainer.tpl b/com.woltlab.wcf/templates/shared_rowFormFieldContainer.tpl
index 4adbdaa3e49..c2bdbeb7439 100644
--- a/com.woltlab.wcf/templates/shared_rowFormFieldContainer.tpl
+++ b/com.woltlab.wcf/templates/shared_rowFormFieldContainer.tpl
@@ -15,6 +15,7 @@
 						{unsafe:$field->getFieldHtml()}
 
 						{include file='shared_formFieldErrors'}
+						{include file='shared_formFieldDescription'}
 						{include file='shared_formFieldDependencies'}
 						{include file='shared_formFieldDataHandler'}
 					</div>

From db9546698c991bce0824c35a7695b829b4a49b84 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Thu, 5 Nov 2026 09:12:14 +0100
Subject: [PATCH 12/12] Drop unsupported aria-required from ColorFormField
 button

---
 .../form/builder/field/ColorFormField.class.php       | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/wcfsetup/install/files/lib/system/form/builder/field/ColorFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/ColorFormField.class.php
index 9b6c08c6c5e..4f913b3f7bb 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/ColorFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/ColorFormField.class.php
@@ -72,4 +72,15 @@ public function getLabelTarget(): ?string
 
         return $this->getPrefixedId() . '_colorPickerButton';
     }
+
+    #[\Override]
+    public function getAriaAttributes(): array
+    {
+        $attributes = parent::getAriaAttributes();
+
+        // `aria-required` is not supported by buttons
+        unset($attributes['aria-required']);
+
+        return $attributes;
+    }
 }