Duplicate IDs from select elements of related products

  • Resolved CubicInfinity

    (@cubicinfinity)


    3 years, 4 months ago

    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 5 replies - 1 through 5 (of 5 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.

    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.

    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.

    Thread Starter CubicInfinity

    (@cubicinfinity)

    Yeah, this thread can probably be closed. I don’t like the support thread model of WordPress plugins. It would be much better to track issues like they are on Github.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Duplicate IDs from select elements of related products’ is closed to new replies.