Catalog Widget causes accessibility issues with duplicate ids

[dmanners]

Preconditions and environment

• Magento version 2.4.5-p3,
• A home page with the product list catalog widget (in carousel mode) on it with a selection of products with at least one having a special price/discount/tier price setup,
• We are using cypress-axe to run an accessibility test on the given pages,

Steps to reproduce

1. Navigate to store home page,
2. Inspect html and see that the span id="old-price-X-widget-product-carousel" when X is equal to the product id is on the page more than once,

Expected result

Price classes and ids are built in the same way as the product list and as such do not cause any duplicate id issues.

Actual result

Accessibility report contains the following:

Fix any of the following:
  Document has multiple static elements with the same id attribute: old-price-64199-widget-product-carousel"

<span id="old-price-64199-widget-product-carousel" data-price-amount="4.9" data-price-type="finalPrice" class="price-wrapper "><span class="price">4,90&nbsp;€</span></span>

Additional information

We have the following patch in our system to fix this.

diff --git a/vendor/magento/module-catalog-widget/Block/Product/ProductsList.php b/vendor/magento/module-catalog-widget/Block/Product/ProductsList.php
index 7e6693c..f856123 100644
--- a/vendor/magento/module-catalog-widget/Block/Product/ProductsList.php
+++ b/vendor/magento/module-catalog-widget/Block/Product/ProductsList.php
@@ -246,9 +246,6 @@ class ProductsList extends AbstractProduct implements BlockInterface, IdentityIn
         if (!isset($arguments['zone'])) {
             $arguments['zone'] = $renderZone;
         }
-        $arguments['price_id'] = isset($arguments['price_id'])
-            ? $arguments['price_id']
-            : 'old-price-' . $product->getId() . '-' . $priceType;
         $arguments['include_container'] = isset($arguments['include_container'])
             ? $arguments['include_container']
             : true;

Release note

No response

Triage and priority

• Severity: S0 - Affects critical data or functionality and leaves users without workaround.
• Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
• Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
• Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
• Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

[m2-assistant]

Hi @dmanners. Thank you for your report.
To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

• @magento give me 2.4-develop instance - upcoming 2.4.x release
• For more details, review the Magento Contributor Assistant documentation.
• Add a comment to assign the issue: @magento I am working on this
• To learn more about issue processing workflow, refer to the Code Contributions.

---

Join Magento Community Engineering Slack and ask your questions in #github channel.
⚠️ According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.
🕙 You can find the schedule on the Magento Community Calendar page.
📞 The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

[dmanners]

One extra note here is that even with this resetting of the price_id there will still be issues if the product price rendering happens on one page multiple times for a product. For example if you add the product list on the category page or search results page.

[m2-assistant]

Hi @engcom-Bravo. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: 👇

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• 4. Verify that the issue is reproducible on 2.4-develop branch
  Details

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
• 5. Add label Issue: Confirmed once verification is complete.
• 6. Make sure that automatic system confirms that report has been added to the backlog.

[engcom-Bravo]

Hi @dmanners,

Thank you for reporting and collaboration.

Verified the issue on Magento 2.4-develop instance and the issue is not reproducible.Kindly refer the screenshots.

Steps to reproduce

• navigate to admin panel > content > widgets
• Add widgets > Type = catalog product list , Design Theme > click on continue
• Fill all the details as required , please check the screen shot for your reference and save
• Navigate to storefront and go click on advance search option at botton of the page
• ABC widgets seen there > Right click on any product price and inspect > check the span id

We have not found any duplicate id issues are found

Kindly recheck the behaviour on Magento 2.4-develop instance and elaborate steps to reproduce if the issue is still reproducible.

Thanks.

[dmanners]

Ah sorry I think it happens when the product itself has a tier price or special price and then the same id is used for both the products prices.

[engcom-Bravo]

Hi @dmanners,

Thanks for your update.

Verified the issue on Magento 2.4-develop instance and the issue is reproducible.Kindly refer the screenshots.

Steps to reproduce

• navigate to admin panel > content > widgets
• Add widgets > Type = catalog product list , Design Theme > click on continue
• Fill all the details as required , please check the screen shot for your reference and save
• Navigate to storefront and go click on advance search option at botton of the page
• ABC widgets seen there > Right click on any product price and inspect > check the span id

Catalog widget causing duplicate Id's when product having advanced pricing.

Hence Confirming this issue.

Thanks.