[Accessibility] Add aria-current to the current link in My Account side nav (#49800)

* Add aria-current to the current link in My Account side nav

* Update current page check for dashboard, orders, and payment methods

* Fix PHP linting errors

* Update function for getting current aria for account menu

* Bump template version

* Create a helper function to test current item in the account menu

* Fix liniting errors

---------

Co-authored-by: amesplant <95257231+amesplant-dmv@users.noreply.github.com>
This commit is contained in:
Ames Plant 2024-08-15 11:08:23 -05:00 committed by GitHub
parent cd4a10222a
commit acaa5ad7a7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 29 additions and 13 deletions

View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Add aria-current to the current link in My Account side nav

View File

@ -136,21 +136,15 @@ function wc_get_account_menu_items() {
}
/**
* Get account menu item classes.
* Find current item in account menu.
*
* @since 2.6.0
* @since 9.3.0
* @param string $endpoint Endpoint.
* @return string
* @return bool
*/
function wc_get_account_menu_item_classes( $endpoint ) {
function wc_is_current_account_menu_item( $endpoint ) {
global $wp;
$classes = array(
'woocommerce-MyAccount-navigation-link',
'woocommerce-MyAccount-navigation-link--' . $endpoint,
);
// Set current item class.
$current = isset( $wp->query_vars[ $endpoint ] );
if ( 'dashboard' === $endpoint && ( isset( $wp->query_vars['page'] ) || empty( $wp->query_vars ) ) ) {
$current = true; // Dashboard is not an endpoint, so needs a custom check.
@ -160,7 +154,23 @@ function wc_get_account_menu_item_classes( $endpoint ) {
$current = true;
}
if ( $current ) {
return $current;
}
/**
* Get account menu item classes.
*
* @since 2.6.0
* @param string $endpoint Endpoint.
* @return string
*/
function wc_get_account_menu_item_classes( $endpoint ) {
$classes = array(
'woocommerce-MyAccount-navigation-link',
'woocommerce-MyAccount-navigation-link--' . $endpoint,
);
if ( wc_is_current_account_menu_item( $endpoint ) ) {
$classes[] = 'is-active';
}

View File

@ -12,7 +12,7 @@
*
* @see https://woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 9.0.0
* @version 9.3.0
*/
if ( ! defined( 'ABSPATH' ) ) {
@ -26,7 +26,9 @@ do_action( 'woocommerce_before_account_navigation' );
<ul>
<?php foreach ( wc_get_account_menu_items() as $endpoint => $label ) : ?>
<li class="<?php echo wc_get_account_menu_item_classes( $endpoint ); ?>">
<a href="<?php echo esc_url( wc_get_account_endpoint_url( $endpoint ) ); ?>"><?php echo esc_html( $label ); ?></a>
<a href="<?php echo esc_url( wc_get_account_endpoint_url( $endpoint ) ); ?>" <?php echo wc_is_current_account_menu_item( $endpoint ) ? 'aria-current="page"' : ''; ?>>
<?php echo esc_html( $label ); ?>
</a>
</li>
<?php endforeach; ?>
</ul>