Add aria-label support to cart fragments (and handheld footer bar icons)

[EdithAllison]

Currently the handheld footer bar doesn't have aria labels. This becomes especially tricky when it comes to the cart as the cart is built as fragment and therefore replacing it with custom code requires more work / duplication. The cart does have a title attribute; but not aria-label.

Suggestion: Add aria-label attribute to the function storefront_handheld_footer_bar_cart_link();

<a  aria-label="<?php esc_attr_e( 'View your shopping cart', 'storefront' ); ?>" class="footer-cart-contents" href="<?php echo esc_url( wc_get_cart_url() ); ?>" title="<?php esc_attr_e( 'View your shopping cart', 'storefront' ); ?>">
    <span class="count"><?php echo wp_kses_data( WC()->cart->get_cart_contents_count() ); ?></span>
</a>

And for consistency, the accessibility support for the following functions could also be updated. Currently these functions use Text inside a SPAN tag which is hidden by pushing it off-screen, but this could be changed to aria-label / title: storefront_handheld_footer_bar_account_link(); storefront_handheld_footer_bar_search();

This would then also allow the footer bar to be used as a desktop design element with full accessibility support.

And looking at fragments, the aria-label could also be added to the deskop cart fragment: storefront_cart_link();

<a aria-label="<?php esc_attr_e( 'View your shopping cart', 'storefront' ); ?>" class="cart-contents" href="<?php echo esc_url( wc_get_cart_url() ); ?>" title="<?php esc_attr_e( 'View your shopping cart', 'storefront' ); ?>">
    <?php /* translators: %d: number of items in cart */ ?>
    <?php echo wp_kses_post( WC()->cart->get_cart_subtotal() ); ?> <span class="count"><?php echo wp_kses_data( sprintf( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count(), 'storefront' ), WC()->cart->get_cart_contents_count() ) ); ?></span>
</a>

[haszari]

Thanks for the feedback @EdithAllison. You've identified are some good opportunities to improve accessibility in Storefront. We can look at this in a future release.