Add role="status" to woocommerce-info type notices (#60253)

In #44283, when moving new notice styles to display in block themes only,
there was an oversight in removing the `role="alert"` for the classic info notices.

The other notices, `success` and `error`, already have `role="alert"` applied to
them, so that was inconsistent and meant that `info` notices were not read by
screen readers. This affected all extensions that used `wc_add_notice` to display
info notices.

To make it more in line with the correct level of priority of the notices, we use
`role="status"`, instead of `alert`.
This commit is contained in:
Lucio Giannotta 2025-08-08 15:35:56 +02:00 committed by GitHub
parent a7b4e7ba8e
commit 22fbf4331a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 9 additions and 5 deletions

View file

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Fixed accessibility for all classic store notices added by the `wc_add_notice` function.

View file

@ -12,7 +12,7 @@
*
* @see https://woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 8.6.0
* @version 10.2.0
*/
if ( ! defined( 'ABSPATH' ) ) {
@ -26,7 +26,7 @@ if ( ! $notices ) {
?>
<?php foreach ( $notices as $notice ) : ?>
<div class="woocommerce-info"<?php echo wc_get_notice_data_attr( $notice ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
<div class="woocommerce-info"<?php echo wc_get_notice_data_attr( $notice ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> role="status">
<?php echo wc_kses_notice( $notice['notice'] ); ?>
</div>
<?php endforeach; ?>

View file

@ -119,7 +119,7 @@ class WC_Tests_Notice_Functions extends WC_Unit_Test_Case {
wc_add_notice( 'One True Notice', 'notice' );
wc_add_notice( 'Second True Notice', 'notice', array( 'id' => 'second_notice' ) );
$this->expectOutputString( '<div class="woocommerce-info">One True Notice</div><div class="woocommerce-info" data-id="second_notice">Second True Notice</div>' );
$this->expectOutputString( '<div class="woocommerce-info" role="status">One True Notice</div><div class="woocommerce-info" data-id="second_notice" role="status">Second True Notice</div>' );
wc_print_notices();
@ -131,7 +131,7 @@ class WC_Tests_Notice_Functions extends WC_Unit_Test_Case {
* when first parameter is set to true.
*/
public function test_wc_print_notices_should_return_notices() {
$expected_return = "\n <div class=\"woocommerce-info\">\n One True Notice </div>\n";
$expected_return = "\n <div class=\"woocommerce-info\" role=\"status\">\n One True Notice </div>\n";
wc_add_notice( 'One True Notice', 'notice' );
@ -161,7 +161,7 @@ class WC_Tests_Notice_Functions extends WC_Unit_Test_Case {
*/
public function test_wc_print_info_notice() {
$this->expectOutputString( '<div class="woocommerce-info">Info!</div>' );
$this->expectOutputString( '<div class="woocommerce-info" role="status">Info!</div>' );
wc_print_notice( 'Info!', 'notice' );
}