`aria-describedby` attribute is set incorrectly

webmandesign commented 1 year ago

Prerequisites

[X] I have carried out troubleshooting steps and I believe I have found a bug.
[X] I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

Since WooCommerce 7.8.0, the aria-describedby attribute set on the add to cart button of variable products in products list renders an accessibility error (tested with WAVE).

Expected behavior

aria-describedby attribute value should be set to an ID of an HTML element containing the description text.

(To fix the issue, perhaps aria-description attribute can be used instead, depending on the intention of this WooCommerce 7.8.0 code.)

Actual behavior

In WooCommerce 7.8.0 the value of aria-describedby attribute is set with the actual description text, which is incorrect.

Steps to reproduce

Take a WooCommerce 7.8.0 website
Navigate to a page containing a list of products where at least one product is a variable product.
Test the page with https://wave.webaim.org/ and check for accessibility errors.

Example: https://wave.webaim.org/report#/https://themedemos.webmandesign.eu/eimear/product-category/furniture/

WordPress Environment

n/a

Isolating the problem

[X] I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
[X] This bug happens with a default WordPress theme active, or Storefront.
[X] I can reproduce this bug consistently using the steps above.

github-actions[bot] commented 1 year ago

We are adding the status: needs reproduction label to this issue to try reproduce it on the current released version of WooCommerce.

Thank you for your patience.

umarsear commented 1 year ago

I am seeing similar issue since upgrading; is there something I can do to help in reproducing the issue so that it can be resolved?

github-actions[bot] commented 1 year ago

Hi @webmandesign,

Thank you for opening the issue! It requires further feedback from the WooCommerce Core team.

We are adding the needs developer feedback label to this issue so that the Core team could take a look.

Please note it may take a few days for them to get to this issue. Thank you for your patience.

shameemreza commented 10 months ago

Another report here: https://wordpress.org/support/topic/wave-aria-labelledby-or-aria-describedby-issue-on-variable-products/

7357648-zen

Mldiguardi commented 10 months ago

With the amount of lawsuits against small businesses continuing to be on the rise in the U.S. for ADA Compliance websites the "Broken ARIA" Reference is an issue. The broken ARIA reference is on all variable product where the "Select Options" appears (woocommerce category pages, product pages that have linked products, etc).

I had found the below code here which removed the "Select Options" on the variable products, which then corrected the "Broken ARIA" Reference.

The display of the "Select Options" on ecommerce, not only looks better but ALSO lets a visiting customer know that there are additional choices of the product(s).

// Remove "Select options" button from (variable) products on the main WooCommerce shop page.
add_filter( 'woocommerce_loop_add_to_cart_link', function( $product ) {

    global $product;

    if ( is_shop() && 'variable' === $product->product_type ) {
        return '';
    } else {
        sprintf( '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
            esc_url( $product->add_to_cart_url() ),
            esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
            esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
            isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
            esc_html( $product->add_to_cart_text() )
        );
    }

} );

Thank you.

ju1ius commented 6 months ago

status: needs reproduction

This bug does not need reproduction. It is reproducable on any woocommerce installation.

The woocommerce_template_loop_add_to_cart function adds the aria-describedby attribute by calling WC_Product::add_to_cart_aria_describedby(), which is documented as such:

/**
 * Get the aria-describedby description for the add to cart button.
 *
 * @return string
 */
public function add_to_cart_aria_describedby() {}

We can clearly see there's a fundamental misunderstanding here. The aria-describedby should contain the ID of a DOM element containing the description, not the description itself.

woocommerce / woocommerce