Widerrufsformular: Felder beschriftet, Link lesbar, Werte maskiert

Alle Felder in Dialog und Seite haben eine Beschriftung, der Datenschutzlink steht in Schriftfarbe. Im Modus „neu“ folgt der Dialog den Farben des Themes. Vorbelegte Werte werden maskiert ausgegeben.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

4 files changed, 40 insertions, 33 deletions

diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index 2cae611..cdf8c1d 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -319,6 +319,8 @@
 .wpsg_productform :where(.wpsg_produkt_wrapper .wpsg_produkt_preishinweis) { font-size:0.75em; }
 .wpsg_productform :where(.wpsg_produkt_wrapper .wpsg_mod_productview_oldprice), .product_wrap :where(.productdetails .oldprice) { text-decoration:line-through; }
 .wpsg_productform :where(.wpsg_produkt_wrapper .wpsg_mod_productview_price) { font-weight:bold; }
+/* Widerrufsdialog in den Farben des Themes (W5); html body über der festen Farbe in wpsg_revocation.css */
+html body #wpsg_revocation_dialog .inner { background-color:var(--wpsg-color-background); color:var(--wpsg-color-foreground); }
 .wpsg-product :where(.wpsg-product__breadcrumbs) { margin:0 0 var(--wpsg-gap); font-size:var(--wpsg-font-size-small); }
 .wpsg-product :where(.wpsg-product__breadcrumbs ol) { display:flex; flex-wrap:wrap; gap:0.25em 0.5em; margin:0; padding:0; list-style:none; }
 .wpsg-product :where(.wpsg-product__breadcrumbs li + li)::before { content:"/" / ""; margin-right:0.5em; opacity:var(--wpsg-muted-opacity); }
diff --git a/views/mods/mod_revocation/ajaxDialogContent.phtml b/views/mods/mod_revocation/ajaxDialogContent.phtml
index 8d27bbc..fd160f0 100644
--- a/views/mods/mod_revocation/ajaxDialogContent.phtml
+++ b/views/mods/mod_revocation/ajaxDialogContent.phtml
@@ -52,27 +52,28 @@ $arReason = \wpsgRevocation\Revocation::getReasons();
 			if (!$oOrder->isLoaded() || !$oOrderProduct->isLoaded()) continue;
 
 			$key = $order_id.'_'.$order_product_id;
+			$id = 'wpsg_rvd_'.$key; // eindeutige ids für die Beschriftungen (W5)
 
 		?>
 
 			<fieldset class="wpsg_revocation_order_product">
-				<legend><?php echo $oOrderProduct->getProduct()->getProductName(); ?></legend>
+				<legend><?php echo \esc_html((string)$oOrderProduct->getProduct()->getProductName()); ?></legend>
 				<div>
 
-					<input type="hidden" readonly name="wpsg_revocation_reason[row][<?php echo $key; ?>][order_product_id]" value="<?php echo $oOrderProduct->getId(); ?>" />
+					<input type="hidden" readonly name="wpsg_revocation_reason[row][<?php echo $key; ?>][order_product_id]" value="<?php echo intval($oOrderProduct->getId()); ?>" />
 
 					<div class="form_field">
-						<div class="label"><?php echo __('Bestellnummer / Menge', 'wpsg'); ?></div>
+						<label class="label" for="<?php echo $id; ?>_order_nr"><?php echo __('Bestellnummer / Menge', 'wpsg'); ?></label>
 						<div class="value">
-							<input type="text" readonly name="wpsg_revocation_reason[row][<?php echo $key; ?>][order_nr]" value="<?php echo $oOrder->getNr(); ?>" />
-							<input type="number" min="1" max="<?php echo $amount; ?>" name="wpsg_revocation_reason[row][<?php echo $key; ?>][amount]" value="<?php echo $amount; ?>" />
+							<input type="text" readonly id="<?php echo $id; ?>_order_nr" name="wpsg_revocation_reason[row][<?php echo $key; ?>][order_nr]" value="<?php echo \esc_attr((string)$oOrder->getNr()); ?>" />
+							<input type="number" min="1" max="<?php echo $amount; ?>" aria-label="<?php echo \esc_attr__('Menge', 'wpsg'); ?>" name="wpsg_revocation_reason[row][<?php echo $key; ?>][amount]" value="<?php echo $amount; ?>" />
 						</div>
 					</div>
 
 					<div class="form_field">
-						<div class="label"><?php echo __('Widerrufsgrund', 'wpsg'); ?></div>
+						<label class="label" for="<?php echo $id; ?>_reason"><?php echo __('Widerrufsgrund', 'wpsg'); ?></label>
 						<div class="value">
-							<select name="wpsg_revocation_reason[row][<?php echo $key; ?>][reason]">
+							<select id="<?php echo $id; ?>_reason" name="wpsg_revocation_reason[row][<?php echo $key; ?>][reason]">
 								<option value=""><?php echo __("Keinen Grund angeben", 'wpsg') ?></option>
 								<?php foreach ($arReason as $reason) { ?>
 									<option value="<?php echo htmlspecialchars($reason['id']); ?>"><?php echo htmlspecialchars($reason['text']); ?></option>
@@ -82,9 +83,9 @@ $arReason = \wpsgRevocation\Revocation::getReasons();
 					</div>
 
 					<div class="form_field">
-						<div class="label"><?php echo __('Bemerkung', 'wpsg'); ?></div>
+						<label class="label" for="<?php echo $id; ?>_comment"><?php echo __('Bemerkung', 'wpsg'); ?></label>
 						<div class="value">
-							<textarea name="wpsg_revocation_reason[row][<?php echo $key; ?>][comment]"></textarea>
+							<textarea id="<?php echo $id; ?>_comment" name="wpsg_revocation_reason[row][<?php echo $key; ?>][comment]"></textarea>
 						</div>
 					</div>
 
@@ -96,30 +97,31 @@ $arReason = \wpsgRevocation\Revocation::getReasons();
 	<?php } else {
 
 		$key = 0;
+		$id = 'wpsg_rvd_0';
 
 	?>
 
 		<fieldset class="wpsg_revocation_order_product">
 
 			<div class="form_field">
-				<div class="label"><?php echo __('Artikel - Nr.', 'wpsg'); ?></div>
+				<label class="label" for="<?php echo $id; ?>_product_nr"><?php echo __('Artikel - Nr.', 'wpsg'); ?></label>
 				<div class="value">
-					<input type="text" name="wpsg_revocation_reason[row][<?php echo $key; ?>][product_nr]" value="<?php echo ($dialog_config['set_product_anr']??''); ?>" />
+					<input type="text" id="<?php echo $id; ?>_product_nr" name="wpsg_revocation_reason[row][<?php echo $key; ?>][product_nr]" value="<?php echo \esc_attr((string)($dialog_config['set_product_anr']??'')); ?>" />
 				</div>
 			</div>
 
 			<div class="form_field">
-				<div class="label"><?php echo __('Bestellnummer / Menge', 'wpsg'); ?></div>
+				<label class="label" for="<?php echo $id; ?>_order_nr"><?php echo __('Bestellnummer / Menge', 'wpsg'); ?></label>
 				<div class="value">
-					<input type="text" name="wpsg_revocation_reason[row][<?php echo $key; ?>][order_nr]" value="" />
-					<input type="number" name="wpsg_revocation_reason[row][<?php echo $key; ?>][amount]" value="1" />
+					<input type="text" id="<?php echo $id; ?>_order_nr" name="wpsg_revocation_reason[row][<?php echo $key; ?>][order_nr]" value="" />
+					<input type="number" aria-label="<?php echo \esc_attr__('Menge', 'wpsg'); ?>" name="wpsg_revocation_reason[row][<?php echo $key; ?>][amount]" value="1" />
 				</div>
 			</div>
 
 			<div class="form_field">
-				<div class="label"><?php echo __('Widerrufsgrund', 'wpsg'); ?></div>
+				<label class="label" for="<?php echo $id; ?>_reason"><?php echo __('Widerrufsgrund', 'wpsg'); ?></label>
 				<div class="value">
-					<select name="wpsg_revocation_reason[row][<?php echo $key; ?>][reason]">
+					<select id="<?php echo $id; ?>_reason" name="wpsg_revocation_reason[row][<?php echo $key; ?>][reason]">
 						<option value=""><?php echo __("Keinen Grund angeben", 'wpsg') ?></option>
 						<?php foreach ($arReason as $reason) { ?>
 							<option value="<?php echo htmlspecialchars($reason['id']); ?>"><?php echo htmlspecialchars($reason['text']); ?></option>
@@ -129,9 +131,9 @@ $arReason = \wpsgRevocation\Revocation::getReasons();
 			</div>
 
 			<div class="form_field">
-				<div class="label"><?php echo __('Bemerkung', 'wpsg'); ?></div>
+				<label class="label" for="<?php echo $id; ?>_comment"><?php echo __('Bemerkung', 'wpsg'); ?></label>
 				<div class="value">
-					<textarea name="wpsg_revocation_reason[row][<?php echo $key; ?>][comment]"></textarea>
+					<textarea id="<?php echo $id; ?>_comment" name="wpsg_revocation_reason[row][<?php echo $key; ?>][comment]"></textarea>
 				</div>
 			</div>
 
@@ -140,16 +142,17 @@ $arReason = \wpsgRevocation\Revocation::getReasons();
 	<?php } ?>
 
 	<div class="form_field">
-		<div class="label"><?php echo __('Kontakt - E-Mail', 'wpsg'); ?></div>
+		<label class="label" for="wpsg_rvd_contact"><?php echo __('Kontakt - E-Mail', 'wpsg'); ?></label>
 		<div class="value">
-			<input type="email" required name="wpsg_revocation_reason[contact]" value="<?php echo $contact_email; ?>"
+			<input type="email" required id="wpsg_rvd_contact" autocomplete="email" name="wpsg_revocation_reason[contact]" value="<?php echo \esc_attr($contact_email); ?>"
 				<?php echo (($contact_email !== '')?'readonly':''); ?>
 			/>
 		</div>
 	</div>
 
 	<p>
-		Es gelten unsere <?php echo '<a href="' . \wpsg_ShopController::getShop()->getURL(wpsg_ShopController::URL_DATENSCHUTZ) . '">Datenschutzbestimmungen</a>' ?>
+		<?php echo \esc_html__('Es gelten unsere', 'wpsg'); ?>
+		<a href="<?php echo \esc_url(\wpsg_ShopController::getShop()->getURL(wpsg_ShopController::URL_DATENSCHUTZ)); ?>"><?php echo \esc_html__('Datenschutzbestimmungen', 'wpsg'); ?></a>.
 	</p>
 
 </form>
\ No newline at end of file
diff --git a/views/mods/mod_revocation/page_form.phtml b/views/mods/mod_revocation/page_form.phtml
index f33695c..c444916 100644
--- a/views/mods/mod_revocation/page_form.phtml
+++ b/views/mods/mod_revocation/page_form.phtml
@@ -49,24 +49,24 @@
 		<fieldset class="wpsg_revocation_order_product">
 
 			<div class="form_field">
-				<div class="label"><?php echo \__('Artikel - Nr.', 'wpsg'); ?></div>
+				<label class="label" for="wpsg_rvp_product_nr"><?php echo \__('Artikel - Nr.', 'wpsg'); ?></label>
 				<div class="value">
-					<input type="text" name="wpsg_revocation_reason[row][<?php echo $key; ?>][product_nr]" value="<?php echo \esc_attr($get_product); ?>" />
+					<input type="text" id="wpsg_rvp_product_nr" name="wpsg_revocation_reason[row][<?php echo $key; ?>][product_nr]" value="<?php echo \esc_attr($get_product); ?>" />
 				</div>
 			</div>
 
 			<div class="form_field">
-				<div class="label"><?php echo \__('Bestellnummer / Menge', 'wpsg'); ?></div>
+				<label class="label" for="wpsg_rvp_order_nr"><?php echo \__('Bestellnummer / Menge', 'wpsg'); ?></label>
 				<div class="value">
-					<input type="text" name="wpsg_revocation_reason[row][<?php echo $key; ?>][order_nr]" value="<?php echo \esc_attr($get_order); ?>" />
-					<input type="number" min="1" name="wpsg_revocation_reason[row][<?php echo $key; ?>][amount]" value="<?php echo intval($get_amount); ?>" />
+					<input type="text" id="wpsg_rvp_order_nr" name="wpsg_revocation_reason[row][<?php echo $key; ?>][order_nr]" value="<?php echo \esc_attr($get_order); ?>" />
+					<input type="number" min="1" aria-label="<?php echo \esc_attr__('Menge', 'wpsg'); ?>" name="wpsg_revocation_reason[row][<?php echo $key; ?>][amount]" value="<?php echo intval($get_amount); ?>" />
 				</div>
 			</div>
 
 			<div class="form_field">
-				<div class="label"><?php echo \__('Widerrufsgrund', 'wpsg'); ?></div>
+				<label class="label" for="wpsg_rvp_reason"><?php echo \__('Widerrufsgrund', 'wpsg'); ?></label>
 				<div class="value">
-					<select name="wpsg_revocation_reason[row][<?php echo $key; ?>][reason]">
+					<select id="wpsg_rvp_reason" name="wpsg_revocation_reason[row][<?php echo $key; ?>][reason]">
 						<option value=""><?php echo __("Keinen Grund angeben", 'wpsg') ?></option>
 						<?php foreach ($arReason as $reason) { ?>
 							<option value="<?php echo \htmlspecialchars($reason['id']); ?>"><?php echo \htmlspecialchars($reason['text']); ?></option>
@@ -76,18 +76,18 @@
 			</div>
 
 			<div class="form_field">
-				<div class="label"><?php echo \__('Bemerkung', 'wpsg'); ?></div>
+				<label class="label" for="wpsg_rvp_comment"><?php echo \__('Bemerkung', 'wpsg'); ?></label>
 				<div class="value">
-					<textarea name="wpsg_revocation_reason[row][<?php echo $key; ?>][comment]"></textarea>
+					<textarea id="wpsg_rvp_comment" name="wpsg_revocation_reason[row][<?php echo $key; ?>][comment]"></textarea>
 				</div>
 			</div>
 
 		</fieldset>
 
 		<div class="form_field">
-			<div class="label"><?php echo \__('Kontakt - E-Mail', 'wpsg'); ?></div>
+			<label class="label" for="wpsg_rvp_contact"><?php echo \__('Kontakt - E-Mail', 'wpsg'); ?></label>
 			<div class="value">
-				<input type="email" required name="wpsg_revocation_reason[contact]" value="<?php echo \esc_attr($contact_email); ?>"
+				<input type="email" required id="wpsg_rvp_contact" autocomplete="email" name="wpsg_revocation_reason[contact]" value="<?php echo \esc_attr($contact_email); ?>"
 					<?php echo (($customer_login_id > 0 && $contact_email !== '') ? 'readonly' : ''); ?>
 				/>
 			</div>
@@ -95,7 +95,7 @@
 
 		<p class="wpsg_revocation_page_datenschutz">
 			<?php echo \__('Es gelten unsere', 'wpsg'); ?>
-			<a href="<?php echo \wpsg_ShopController::getShop()->getURL(wpsg_ShopController::URL_DATENSCHUTZ); ?>"><?php echo \__('Datenschutzbestimmungen', 'wpsg'); ?></a>.
+			<a href="<?php echo \esc_url(\wpsg_ShopController::getShop()->getURL(wpsg_ShopController::URL_DATENSCHUTZ)); ?>"><?php echo \__('Datenschutzbestimmungen', 'wpsg'); ?></a>.
 		</p>
 
 		<div class="form_field wpsg_revocation_page_submit_wrap">
diff --git a/views/mods/mod_revocation/wpsg_revocation.css b/views/mods/mod_revocation/wpsg_revocation.css
index 07af2fc..aae1758 100644
--- a/views/mods/mod_revocation/wpsg_revocation.css
+++ b/views/mods/mod_revocation/wpsg_revocation.css
@@ -53,6 +53,8 @@
 #wpsg_revocation_form legend, #wpsg_revocation_page_form legend { padding:0 0.3684em; font-size:0.95em; font-weight:600; }
 #wpsg_revocation_form .form_field, #wpsg_revocation_page_form .form_field { display:flex; flex-direction:column; gap:0.3em; width:100%; }
 #wpsg_revocation_form .form_field .label, #wpsg_revocation_page_form .form_field .label { color:inherit; font-size:0.85em; opacity:0.7; }
+/* Links in Schriftfarbe: Die Linkfarbe des Themes ist auf dem Dialog sonst zu blass (W5) */
+#wpsg_revocation_dialog .inner a, .wpsg_revocation_page a { color:inherit; text-decoration:underline; }
 #wpsg_revocation_form .form_field .value, #wpsg_revocation_page_form .form_field .value { display:flex; gap:0.5em; justify-content:stretch; }
 #wpsg_revocation_form .form_field .value input, #wpsg_revocation_form .form_field .value textarea, #wpsg_revocation_form .form_field .value select, #wpsg_revocation_page_form .form_field .value input, #wpsg_revocation_page_form .form_field .value textarea, #wpsg_revocation_page_form .form_field .value select { flex:1 1 auto; width:auto; min-width:0; min-height:0; margin:0; padding:0.55em 0.7em; border:1px solid var(--rv-line); border-radius:var(--rv-radius); background:none; color:inherit; font:inherit; text-indent:0; box-shadow:none; }
 #wpsg_revocation_form .form_field .value input:focus, #wpsg_revocation_form .form_field .value textarea:focus, #wpsg_revocation_form .form_field .value select:focus, #wpsg_revocation_page_form .form_field .value input:focus, #wpsg_revocation_page_form .form_field .value textarea:focus, #wpsg_revocation_page_form .form_field .value select:focus { border-color:currentColor; outline:none; }