[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:
parent
cd4a10222a
commit
acaa5ad7a7
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
|
||||
Add aria-current to the current link in My Account side nav
|
|
@ -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';
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue