← All changes | templates/form-fields/errors.php +21 -1 1.8.12.2 → 1.8.13.1 View file →

		@@ -10,8 +10,9 @@
10	10	*
11	11	* @author WP Charitable LLC
12	12	* @since 1.0.0
13	13	* @version 1.5.0
	14	+ * @version 1.8.13.1
14	15	* @package Charitable/Templates/Form Fields
15	16	*/
16	17
17	18	if ( ! array_key_exists( 'errors', $view_args ) || empty( $view_args['errors'] ) ) {
		@@ -17,10 +18,29 @@
17	18	if ( ! array_key_exists( 'errors', $view_args ) || empty( $view_args['errors'] ) ) {
18	19	return;
19	20	}
20	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	+ */
21	41	?>
22		-<div class="charitable-form-errors charitable-notice">
	42	+<div class="charitable-form-errors charitable-notice" role="alert" tabindex="-1" data-charitable-error-summary="1">
23	43	<ul class="errors">
24	44	<?php foreach ( $view_args['errors'] as $error ) : // phpcs:ignore ?>
25	45	<li><?php echo $error; // phpcs:ignore ?></li>
26	46	<?php endforeach ?>