← All changes | templates/form-fields/errors.php +30 -3 1.7.0.14 → 1.8.13.1 View file →

		@@ -1,5 +1,11 @@
1	1	<?php
	2	+
	3	+// Exit if accessed directly.
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit;
	6	+}
	7	+
2	8	/**
3	9	* The template used to display error messages.
4	10	*
5	11	* @author WP Charitable LLC
		@@ -4,8 +10,10 @@
4	10	*
5	11	* @author WP Charitable LLC
6	12	* @since 1.0.0
7	13	* @version 1.5.0
	14	+ * @version 1.8.13.1
	15	+ * @package Charitable/Templates/Form Fields
8	16	*/
9	17
10	18	if ( ! array_key_exists( 'errors', $view_args ) || empty( $view_args['errors'] ) ) {
11	19	return;
		@@ -10,12 +18,31 @@
10	18	if ( ! array_key_exists( 'errors', $view_args ) || empty( $view_args['errors'] ) ) {
11	19	return;
12	20	}
13	21
	22	+/*
	23	+ * WCAG 4.1.3 Status Messages / 3.3.1 Error Identification (1.8.13.1).
	24	+ *
	25	+ * role="alert" makes this an assertive live region, which is what announces the
	26	+ * errors on the AJAX path where charitable.js injects this markup into a form
	27	+ * that is already on screen.
	28	+ *
	29	+ * It is NOT sufficient on its own here: a live region only announces content
	30	+ * that CHANGES after the region exists, so a summary rendered server-side on a
	31	+ * failed submit is silent to a screen reader. tabindex="-1" is what closes that
	32	+ * gap -- it makes the summary programmatically focusable so charitable.js can
	33	+ * move focus to it on load, which both announces it and puts a sighted keyboard
	34	+ * user at the problem instead of back at the top of the page.
	35	+ *
	36	+ * data-charitable-error-summary marks this as a GENUINE error summary. The class
	37	+ * .charitable-form-errors is shared by page-level notices that merely borrow the
	38	+ * error styling, and focusing those on page load would steal focus on an ordinary
	39	+ * page view. See templates/form-fields/notices.php.
	40	+ */
14	41	?>
15		-<div class="charitable-form-errors charitable-notice">
	42	+<div class="charitable-form-errors charitable-notice" role="alert" tabindex="-1" data-charitable-error-summary="1">
16	43	<ul class="errors">
17		- <?php foreach ( $view_args['errors'] as $error ) : ?>
18		- <li><?php echo $error ?></li>
	44	+ <?php foreach ( $view_args['errors'] as $error ) : // phpcs:ignore ?>
	45	+ <li><?php echo $error; // phpcs:ignore ?></li>
19	46	<?php endforeach ?>
20	47	</ul>
21	48	</div>