Improve a11y in Cart icon

[YordanSoares]

A WP.org user suggested improving the a11y for the Cart icon (Accessibility improvements) replacing <i> tags wrapper for <span> instead.

I did some quick research and found these related reading:

• A11Y-101.com > Icons and links
• FontAwesome > Accessibility

[alexmigf]

Curious, I did a test with Axe and no errors are showed, maybe because we use an aria attribute already:

wp-menu-cart/wp-menu-cart.php

Line 609 in 74b88bb

$menu_item_icon = '<i class="wpmenucart-icon-shopping-cart-'.$icon.'" role="img" aria-label="'.__( 'Cart','woocommerce' ).'"></i>';

[YordanSoares]

Indeed, I also saw that, so we met the aria attribute side, but I wonder if replacing the <i> tags for <span> could improve even more a11y and semantic.

[alexmigf]

@YordanSoares see this: FortAwesome/Font-Awesome#16790 (comment)

Of course we could replace <i> for <span> if @Spreeuw agrees with that.

[alexmigf]

Here using <i> the cart icon doesn't show, replacing with <span> solves the issue.

@Spreeuw do you agree with the replacement?

[Spreeuw]

@alexmigf I think that's actually a bad example. The offending style from the theme is this:

.header-style10 .header-bottom .container i

If that was a style targeting span (which is more likely to happen, actually), we'd have the same issue...

[alexmigf]

Sorry, I wasn't finding the route cause for that, I see now it was the opacity in that style.

[Spreeuw]

I'm hesitant to change this for backwards compatibility reasons, and FontAwesome being an industry leading example still using <i> too, I see no reason to switch. Meanwhile, we can prepare our code/CSS to no longer be dependent on the <i> element so that if we change it to <span> in the future, the transition will be more smooth.

That said, if adding aria-hidden="true" also fixes the issue, I'm fine with that (as long as it doesn't negatively affect the regular behavior).