| 1 |
<?php |
| 2 |
|
| 3 |
// Exit if accessed directly. |
| 4 |
if ( ! defined( 'ABSPATH' ) ) { |
| 5 |
exit; |
| 6 |
} |
| 7 |
|
| 8 |
/** |
| 9 |
* The template used to display error messages. |
| 10 |
* |
| 11 |
* @author WP Charitable LLC |
| 12 |
* @since 1.0.0 |
| 13 |
* @version 1.5.0 |
| 14 |
* @version 1.8.13.1 |
| 15 |
* @package Charitable/Templates/Form Fields |
| 16 |
*/ |
| 17 |
|
| 18 |
if ( ! array_key_exists( 'errors', $view_args ) || empty( $view_args['errors'] ) ) { |
| 19 |
return; |
| 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 |
*/ |
| 41 |
?> |
| 42 |
<div class="charitable-form-errors charitable-notice" role="alert" tabindex="-1" data-charitable-error-summary="1"> |
| 43 |
<ul class="errors"> |
| 44 |
<?php foreach ( $view_args['errors'] as $error ) : // phpcs:ignore ?> |
| 45 |
<li><?php echo $error; // phpcs:ignore ?></li> |
| 46 |
<?php endforeach ?> |
| 47 |
</ul> |
| 48 |
</div> |
| 49 |
|
