Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Accessibility] Announce notice messages after page loads (#50061) 

* Update makup of add to cart success message

* Update CSS to position the add to cart success message content

* Focus notice message after page loads

* Add changelog file

* Remove tabindex attribute from add-to-cart success message

* Update tests for the add-to-cart success message

* Remove white space on test

* Increase delay before focusing the error message

* Cobine delay with queue method

* Remove unnecessary woocommerce-notice-content class

* Swap view cart link order in notice

* Remove woocommerce-notice-content wrapper

* Refactor to vanilla JS code that focus on notice message

---------

Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
This commit is contained in:
Gabriel Manussakis 2024-08-21 03:24:58 -03:00 committed by GitHub
parent 9ef1b72fc1
commit b449ca840f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce/changelog/fix-43614 Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: enhancement
Make screen readers announce notice messages once page loads.

22
plugins/woocommerce/client/legacy/js/frontend/woocommerce.js
View File

@ -146,4 +146,26 @@ jQuery( function ( $ ) {
},
} );
} );
});
document.addEventListener( 'DOMContentLoaded' , function() {
var noticeClasses = [ 'woocommerce-message', 'woocommerce-error', 'wc-block-components-notice-banner' ];
var noticeSelectors = noticeClasses.map( function( className ) {
return '.' + className + '[role="alert"]';
} ).join( ', ' );
var noticeElements = document.querySelectorAll( noticeSelectors );
if ( noticeElements.length === 0 ) {
return;
}
var firstNotice = noticeElements[0];
firstNotice.setAttribute( 'tabindex', '-1' );
// Wait for the element to get the tabindex attribute so it can be focused.
var delayFocusNoticeId = setTimeout( function() {
firstNotice.focus();
clearTimeout( delayFocusNoticeId );
}, 500 );
} );

10
plugins/woocommerce/includes/class-wc-cart.php
View File

@ -1170,7 +1170,7 @@ class WC_Cart extends WC_Legacy_Cart {
$message = apply_filters( 'woocommerce_cart_product_cannot_add_another_message', $message, $product_data );
$wp_button_class = wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '';
throw new Exception( sprintf( '<a href="%s" class="button wc-forward%s">%s</a> %s', wc_get_cart_url(), esc_attr( $wp_button_class ), __( 'View cart', 'woocommerce' ), $message ) );
throw new Exception( sprintf( '%s <a href="%s" class="button wc-forward%s">%s</a>', $message, wc_get_cart_url(), esc_attr( $wp_button_class ), __( 'View cart', 'woocommerce' ) ) );
}
}
@ -1232,12 +1232,12 @@ class WC_Cart extends WC_Legacy_Cart {
$wp_button_class = wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '';
$message = sprintf(
'<a href="%s" class="button wc-forward%s">%s</a> %s',
'%s <a href="%s" class="button wc-forward%s">%s</a>',
/* translators: 1: quantity in stock 2: current quantity */
sprintf( __( 'You cannot add that amount to the cart &mdash; we have %1$s in stock and you already have %2$s in your cart.', 'woocommerce' ), wc_format_stock_quantity_for_display( $stock_quantity, $product_data ), wc_format_stock_quantity_for_display( $stock_quantity_in_cart, $product_data ) ),
wc_get_cart_url(),
esc_attr( $wp_button_class ),
__( 'View cart', 'woocommerce' ),
/* translators: 1: quantity in stock 2: current quantity */
sprintf( __( 'You cannot add that amount to the cart &mdash; we have %1$s in stock and you already have %2$s in your cart.', 'woocommerce' ), wc_format_stock_quantity_for_display( $stock_quantity, $product_data ), wc_format_stock_quantity_for_display( $stock_quantity_in_cart, $product_data ) )
__( 'View cart', 'woocommerce' )
);
/**

4
plugins/woocommerce/includes/wc-cart-functions.php
View File

@ -123,9 +123,9 @@ function wc_add_to_cart_message( $products, $show_qty = false, $return = false )
$wp_button_class = wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '';
if ( 'yes' === get_option( 'woocommerce_cart_redirect_after_add' ) ) {
$return_to = apply_filters( 'woocommerce_continue_shopping_redirect', wc_get_raw_referer() ? wp_validate_redirect( wc_get_raw_referer(), false ) : wc_get_page_permalink( 'shop' ) );
$message = sprintf( '<a href="%s" tabindex="1" class="button wc-forward%s">%s</a> %s', esc_url( $return_to ), esc_attr( $wp_button_class ), esc_html__( 'Continue shopping', 'woocommerce' ), esc_html( $added_text ) );
$message = sprintf( '%s <a href="%s" class="button wc-forward%s">%s</a>', esc_html( $added_text ), esc_url( $return_to ), esc_attr( $wp_button_class ), esc_html__( 'Continue shopping', 'woocommerce' ) );
} else {
$message = sprintf( '<a href="%s" tabindex="1" class="button wc-forward%s">%s</a> %s', esc_url( wc_get_cart_url() ), esc_attr( $wp_button_class ), esc_html__( 'View cart', 'woocommerce' ), esc_html( $added_text ) );
$message = sprintf( '%s <a href="%s" class="button wc-forward%s">%s</a>', esc_html( $added_text ), esc_url( wc_get_cart_url() ), esc_attr( $wp_button_class ), esc_html__( 'View cart', 'woocommerce' ) );
}
if ( has_filter( 'wc_add_to_cart_message' ) ) {

12
plugins/woocommerce/tests/legacy/unit-tests/cart/functions.php
View File

@ -141,21 +141,21 @@ class WC_Tests_Cart_Functions extends WC_Unit_Test_Case {
$wp_button_class = esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '' );
$message = wc_add_to_cart_message( array( $product->get_id() => 1 ), false, true );
$this->assertEquals( '<a href="http://' . WP_TESTS_DOMAIN . '" tabindex="1" class="button wc-forward' . $wp_button_class . '">View cart</a> &ldquo;Dummy Product&rdquo; has been added to your cart.', $message );
$this->assertEquals( '&ldquo;Dummy Product&rdquo; has been added to your cart. <a href="http://' . WP_TESTS_DOMAIN . '" class="button wc-forward' . $wp_button_class . '">View cart</a>', $message );
$message = wc_add_to_cart_message( array( $product->get_id() => 3 ), false, true );
$this->assertEquals( '<a href="http://' . WP_TESTS_DOMAIN . '" tabindex="1" class="button wc-forward' . $wp_button_class . '">View cart</a> &ldquo;Dummy Product&rdquo; has been added to your cart.', $message );
$this->assertEquals( '&ldquo;Dummy Product&rdquo; has been added to your cart. <a href="http://' . WP_TESTS_DOMAIN . '" class="button wc-forward' . $wp_button_class . '">View cart</a>', $message );
$message = wc_add_to_cart_message( array( $product->get_id() => 1 ), true, true );
$this->assertEquals( '<a href="http://' . WP_TESTS_DOMAIN . '" tabindex="1" class="button wc-forward' . $wp_button_class . '">View cart</a> &ldquo;Dummy Product&rdquo; has been added to your cart.', $message );
$this->assertEquals( '&ldquo;Dummy Product&rdquo; has been added to your cart. <a href="http://' . WP_TESTS_DOMAIN . '" class="button wc-forward' . $wp_button_class . '">View cart</a>', $message );
$message = wc_add_to_cart_message( array( $product->get_id() => 3 ), true, true );
$this->assertEquals( '<a href="http://' . WP_TESTS_DOMAIN . '" tabindex="1" class="button wc-forward' . $wp_button_class . '">View cart</a> 3 &times; &ldquo;Dummy Product&rdquo; have been added to your cart.', $message );
$this->assertEquals( '3 &times; &ldquo;Dummy Product&rdquo; have been added to your cart. <a href="http://' . WP_TESTS_DOMAIN . '" class="button wc-forward' . $wp_button_class . '">View cart</a>', $message );
$message = wc_add_to_cart_message( $product->get_id(), false, true );
$this->assertEquals( '<a href="http://' . WP_TESTS_DOMAIN . '" tabindex="1" class="button wc-forward' . $wp_button_class . '">View cart</a> &ldquo;Dummy Product&rdquo; has been added to your cart.', $message );
$this->assertEquals( '&ldquo;Dummy Product&rdquo; has been added to your cart. <a href="http://' . WP_TESTS_DOMAIN . '" class="button wc-forward' . $wp_button_class . '">View cart</a>', $message );
$message = wc_add_to_cart_message( $product->get_id(), true, true );
$this->assertEquals( '<a href="http://' . WP_TESTS_DOMAIN . '" tabindex="1" class="button wc-forward' . $wp_button_class . '">View cart</a> &ldquo;Dummy Product&rdquo; has been added to your cart.', $message );
$this->assertEquals( '&ldquo;Dummy Product&rdquo; has been added to your cart. <a href="http://' . WP_TESTS_DOMAIN . '" class="button wc-forward' . $wp_button_class . '">View cart</a>', $message );
}
}