[Backport] Update details.phtml

[amol2jcommerce]

Original Pull Request

#20858
Good afternoon,

I just encountered a problem with product's tabs in product info.
I realized when description or other custom tabs have links, when you click on it, nothing happen.

It caused by the script mage/tabs.js in details.phtml.

The current link to trigger the tab is declared with data-role="switch" instead of a data-role="trigger".

magento2/app/code/Magento/Catalog/view/frontend/templates/product/view/details.phtml

Lines 24 to 37 in 4f23251

	<div class="data item title"
	aria-labelledby="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title"
	data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */ $alias ?>">
	<a class="data switch"
	tabindex="-1"
	data-toggle="switch"
	href="#<?= /* @escapeNotVerified */ $alias ?>"
	id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">
	<?= /* @escapeNotVerified */ $label ?>
	</a>
	</div>
	<div class="data item content" id="<?= /* @escapeNotVerified */ $alias ?>" data-role="content">
	<?= /* @escapeNotVerified */ $html ?>
	</div>

When not even the trigger and the header is declared respectively by data-role="heading" and data-role="trigger", the script based it search on the current collapsible panel declared by data-role="collapsible".

magento2/lib/web/mage/tabs.js

Lines 99 to 124 in 4f23251

	/**
	* Prepare the elements for instantiating the collapsible widget
	* @private
	*/
	_processPanels: function () {
	this.contents = this.element.find(this.options.content);
	this.collapsibles = this.element.find(this.options.collapsibleElement);
	this.collapsibles
	.attr('role', 'presentation')
	.parent()
	.attr('role', 'tablist');
	this.headers = this.element.find(this.options.header);
	if (this.headers.length === 0) {
	this.headers = this.collapsibles;
	}
	this.triggers = this.element.find(this.options.trigger);
	if (this.triggers.length === 0) {
	this.triggers = this.headers;
	}
	this._callCollapsible();
	},

You can simply try by adding a link in the product description.

Tell me if I am wrong.

Cheers,
Ilan PARMENTIER

[magento-engcom-team]

Hi @amol2jcommerce. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento-engcom-team give me test instance - deploy test instance based on PR changes
• @magento-engcom-team give me 2.2-develop instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Assistant documentation

[magento-engcom-team]

Hi @ihor-sviziev, thank you for the review.
ENGCOM-4411 has been created to process this Pull Request

[sdzhepa]

@magento-engcom-team give me test instance

[magento-engcom-team]

Hi @sdzhepa. Thank you for your request. I'm working on Magento instance for you

[magento-engcom-team]

Hi @sdzhepa, here is your new Magento instance.
Admin access: https://pr-21531.instances.magento-community.engineering/admin
Login: admin Password: 123123q

[sdzhepa]

✔️ QA passed

Tested ability to open and switch between tabs on Product Details page.
Tested for several product types and with different browsers

[ghost]

Hi @amol2jcommerce, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.