ENGCOM-5643: #23705 : Css selector [role='button'] in related products javascript is not specific enough #23774

 - Merge Pull Request #23774 from konarshankar07/magento2:23705_css_selector_issue
 - Merged commits:
   1. 3bac25f

Author: magento-engcom-team

app/code/Magento/Catalog/view/frontend/templates/product/list/items.phtml

@@ -170,7 +170,7 @@ switch ($type = $block->getType()) {
                 <?php if ($type == 'related' && $canItemsAddToCart) :?>
                     <div class="block-actions">
                         <?= $block->escapeHtml(__('Check items to add to the cart or')) ?>
-                        <button type="button" class="action select" role="button"><span><?= $block->escapeHtml(__('select all')) ?></span></button>
+                        <button type="button" class="action select" data-role="select-all"><span><?= $block->escapeHtml(__('select all')) ?></span></button>
                     </div>
                 <?php endif; ?>
                 <div class="products wrapper grid products-grid products-<?= $block->escapeHtmlAttr($type) ?>">

app/code/Magento/Catalog/view/frontend/web/js/related-products.js

@@ -17,7 +17,7 @@ define([
             relatedProductsField: '#related-products-field', // Hidden input field that stores related products.
             selectAllMessage: $.mage.__('select all'),
             unselectAllMessage: $.mage.__('unselect all'),
-            selectAllLink: '[role="button"]',
+            selectAllLink: '[data-role="select-all"]',
             elementsSelector: '.item.product'
         },