Support » Plugin: WooCommerce » Duplicate IDs from select elements of related products

  • Resolved CubicInfinity

    (@cubicinfinity)


    Related (variable) products on the product page have the same attribute select IDs (#strength, in my case). As we know, on a given page, the “id” attributes are supposed to be unique. This has been a minor issue for a long time, so I’m finally looking to change it. It doesn’t interfere with any custom JavaScript, but it does affect the accessibility metrics on Lighthouse (non-unique ARIA IDs).

    The best solution I’ve come up with is to give the frontend select tags the id “attributeName-productId”, like id="strength-1068". If absolutely necessary, variable product attribute IDs can then be targeted with regex selectors.

    Can we implement some sort of solution to this issue?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter CubicInfinity

    (@cubicinfinity)

    On this matter, how can I get the product ID for each product listed in a .products.columns-n type element (backend php or javascript)?

    Thread Starter CubicInfinity

    (@cubicinfinity)

    I have not used the product IDs. As a possibly better solution, I included this in my page:

    // ARIA labels for related products
    var related_products = document.querySelectorAll("li.product");
    related_products.forEach(product => {
    	var title = product.querySelector(".woocommerce-loop-product__title > a").innerHTML;
    	// Replace in future with a forEach for different variation attributes
    	var attribute_select = product.querySelector("ul.variations select");
    	var attribute_name = "";
    	if (new RegExp("^pa_").test(attribute_select.id)) {
    		attribute_name = attribute_select.id.replace("pa_", "");
    	} else {
    		attribute_name = attribute_select.id;
    	}
    	var aria_label = attribute_name + " for " + title;
    	attribute_select.outerHTML = attribute_select.outerHTML.replace("<select ", "<select aria-label=\"" + aria_label + "\" ");
    });

    Note that this is not a solution to this thread as it doesn’t fix the problem in WooCommerce, but it fixes part of accessibility for product pages on my site.

    Update: Lighthouse does not actually consider this fixed: ARIA labels are not enough to replace IDs.

    Plugin Support Adam a11n

    (@adamkheckler)

    Hello!

    This is at the edge of my knowledge and ability, since I am not a frontend developer myself, but I think this problem may have already been flagged as a bug here:

    https://github.com/woocommerce/woocommerce/issues/26832

    (Or at least, that looks like it’s related to me anyway.)

    If that issue is not related, I’d encourage you to file a new bug report here:

    https://github.com/woocommerce/woocommerce/issues/new?assignees=&labels=&template=4-Bug-report.md&title=

    … complete with comprehensive steps to reproduce the issue.

    Plugin Support maykato

    (@maykato)

    Hi @cubicinfinity

    We’ve not heard back from you in a while, so I’m marking this thread as resolved. If you have further questions, please feel free to open a new topic.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.