Skip to content

[Fixed] - HTML Validation issue Replace Attribute with data-* attribute #26055

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 26, 2020
Merged

[Fixed] - HTML Validation issue Replace Attribute with data-* attribute #26055

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dd7674e
fixed-html validation issue for some attribute
niravcodilar Dec 15, 2019
a81a09d
Merge branch '2.4-develop' of http://github.com/magento/magento2 into…
engcom-Echo Feb 27, 2020
4f853e8
Fix static
engcom-Echo Feb 27, 2020
1b3da7e
Fix unit and functional tests
engcom-Echo Feb 27, 2020
7be7c49
Update app/code/Magento/Catalog/Test/Mftf/Test/AdminBackorderAllowedA…
engcom-Echo Mar 4, 2020
c92cd52
Update AdminBackorderAllowedAddProductToCartTest.xml
engcom-Echo Mar 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategorySidebarSection.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<element name="filterOptions" type="text" selector=".filter-options-content .items"/>
<element name="filterOption" type="text" selector=".filter-options-content .item"/>
<element name="optionQty" type="text" selector=".filter-options-content .item .count"/>
<element name="filterOptionByLabel" type="button" selector=" div.filter-options-item div[option-label='{{optionLabel}}']" parameterized="true"/>
<element name="filterOptionByLabel" type="button" selector=" div.filter-options-item div[data-option-label='{{optionLabel}}']" parameterized="true"/>
<element name="removeFilter" type="button" selector="div.filter-current .remove"/>
<element name="activeFilterOptions" type="text" selector=".filter-options-item.active .items"/>
<element name="activeFilterOptionItemByPosition" type="text" selector=".filter-options-item.active .items li:nth-child({{itemPosition}}) a" parameterized="true"/>
Expand Down
1 change: 1 addition & 0 deletions app/code/Magento/Catalog/Test/Mftf/Test/AdminBackorderAllowedAddProductToCartTest.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
<!-- Set Magento back to default configuration -->
<magentoCLI command="config:set {{CatalogInventoryOptionsShowOutOfStockDisable.path}} {{CatalogInventoryOptionsShowOutOfStockDisable.value}}" stepKey="setConfigShowOutOfStockFalse"/>
<magentoCLI command="config:set {{CatalogInventoryItemOptionsBackordersDisable.path}} {{CatalogInventoryItemOptionsBackordersDisable.value}}" stepKey="setConfigAllowBackordersFalse"/>
<magentoCLI command="cache:clean config full_page" stepKey="cleanInvalidatedCache"/>
<deleteData createDataKey="createProduct" stepKey="deleteProduct"/>
</after>

Expand Down
4 changes: 2 additions & 2 deletions app/code/Magento/Swatches/Test/Mftf/Section/StorefrontProductInfoMainSection.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
<sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
<section name="StorefrontProductInfoMainSection">
<element name="swatchOptionByLabel" type="button" selector="div.swatch-option[option-label='{{opt}}']" parameterized="true"/>
<element name="swatchOptionByLabel" type="button" selector="div.swatch-option[data-option-label='{{opt}}']" parameterized="true"/>
<element name="nthSwatchOption" type="button" selector="div.swatch-option:nth-of-type({{var}})" parameterized="true"/>
<element name="selectedSwatchValue" type="text" selector="//div[contains(@class, 'swatch-attribute') and contains(., '{{attr}}')]//span[contains(@class, 'swatch-attribute-selected-option')]" parameterized="true"/>
<element name="swatchAttributeOptions" type="text" selector="div.swatch-attribute-options"/>
<element name="nthSwatchOptionText" type="button" selector="div.swatch-option.text:nth-of-type({{n}})" parameterized="true"/>
<element name="productSwatch" type="button" selector="//div[@class='swatch-option'][@aria-label='{{var1}}']" parameterized="true"/>
<element name="visualSwatchOption" type="button" selector=".swatch-option[option-tooltip-value='#{{visualSwatchOption}}']" parameterized="true"/>
<element name="visualSwatchOption" type="button" selector=".swatch-option[data-option-tooltip-value='#{{visualSwatchOption}}']" parameterized="true"/>
<element name="swatchOptionTooltip" type="block" selector="div.swatch-option-tooltip"/>
</section>
</sections>
9 changes: 4 additions & 5 deletions app/code/Magento/Swatches/Test/Mftf/Test/AdminCreateTextSwatchTest.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
*/
-->

<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
<test name="AdminCreateTextSwatchTest">
<annotations>
<features value="Swatches"/>
Expand Down Expand Up @@ -83,19 +82,19 @@
<amOnPage url="{{_defaultProduct.urlKey}}.html" stepKey="amOnProductPage"/>
<waitForPageLoad stepKey="waitForProductPage"/>
<see selector="{{StorefrontProductInfoMainSection.swatchAttributeOptions}}" userInput="red" stepKey="seeRed"/>
<grabAttributeFrom selector="{{StorefrontProductInfoMainSection.nthSwatchOptionText('1')}}" userInput="option-label" stepKey="grabRedLabel"/>
<grabAttributeFrom selector="{{StorefrontProductInfoMainSection.nthSwatchOptionText('1')}}" userInput="data-option-label" stepKey="grabRedLabel"/>
<assertEquals stepKey="assertRedLabel">
<expectedResult type="string">Something red.</expectedResult>
<actualResult type="string">{$grabRedLabel}</actualResult>
</assertEquals>
<see selector="{{StorefrontProductInfoMainSection.swatchAttributeOptions}}" userInput="green" stepKey="seeGreen"/>
<grabAttributeFrom selector="{{StorefrontProductInfoMainSection.nthSwatchOptionText('2')}}" userInput="option-label" stepKey="grabGreenLabel"/>
<grabAttributeFrom selector="{{StorefrontProductInfoMainSection.nthSwatchOptionText('2')}}" userInput="data-option-label" stepKey="grabGreenLabel"/>
<assertEquals stepKey="assertGreenLabel">
<expectedResult type="string">Something green.</expectedResult>
<actualResult type="string">{$grabGreenLabel}</actualResult>
</assertEquals>
<see selector="{{StorefrontProductInfoMainSection.swatchAttributeOptions}}" userInput="blue" stepKey="seeBlue"/>
<grabAttributeFrom selector="{{StorefrontProductInfoMainSection.nthSwatchOptionText('3')}}" userInput="option-label" stepKey="grabBlueLabel"/>
<grabAttributeFrom selector="{{StorefrontProductInfoMainSection.nthSwatchOptionText('3')}}" userInput="data-option-label" stepKey="grabBlueLabel"/>
<assertEquals stepKey="assertBlueLabel">
<expectedResult type="string">Something blue.</expectedResult>
<actualResult type="string">{$grabBlueLabel}</actualResult>
Expand Down
97 changes: 50 additions & 47 deletions app/code/Magento/Swatches/view/base/web/js/swatch-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,12 @@ define([
/**
* Render tooltips by attributes (only to up).
* Required element attributes:
* - option-type (integer, 0-3)
* - option-label (string)
* - option-tooltip-thumb
* - option-tooltip-value
* - thumb-width
* - thumb-height
* - data-option-type (integer, 0-3)
* - data-option-label (string)
* - data-option-tooltip-thumb
* - data-option-tooltip-value
* - data-thumb-width
* - data-thumb-height
*/
$.widget('mage.SwatchRendererTooltip', {
options: {
Expand All @@ -84,12 +84,12 @@ define([
$this = this.element,
$element = $('.' + $widget.options.tooltipClass),
timer,
type = parseInt($this.attr('option-type'), 10),
label = $this.attr('option-label'),
thumb = $this.attr('option-tooltip-thumb'),
value = $this.attr('option-tooltip-value'),
width = $this.attr('thumb-width'),
height = $this.attr('thumb-height'),
type = parseInt($this.data('option-type'), 10),
label = $this.data('option-label'),
thumb = $this.data('option-tooltip-thumb'),
value = $this.data('option-tooltip-value'),
width = $this.data('thumb-width'),
height = $this.data('thumb-height'),
$image,
$title,
$corner;
Expand Down Expand Up @@ -429,8 +429,8 @@ define([
// Create new control
container.append(
'<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
'attribute-code="' + item.code + '" ' +
'attribute-id="' + item.id + '">' +
'data-attribute-code="' + item.code + '" ' +
'data-attribute-id="' + item.id + '">' +
label +
'<div aria-activedescendant="" ' +
'tabindex="0" ' +
Expand Down Expand Up @@ -462,7 +462,8 @@ define([
if (showTooltip === 1) {
// Connect Tooltip
container
.find('[option-type="1"], [option-type="2"], [option-type="0"], [option-type="3"]')
.find('[data-option-type="1"], [data-option-type="2"],' +
' [data-option-type="0"], [data-option-type="3"]')
.SwatchRendererTooltip();
}

Expand Down Expand Up @@ -537,21 +538,22 @@ define([
' aria-checked="false"' +
' aria-describedby="' + controlId + '"' +
' tabindex="0"' +
' option-type="' + type + '"' +
' option-id="' + id + '"' +
' option-label="' + label + '"' +
' data-option-type="' + type + '"' +
' data-option-id="' + id + '"' +
' data-option-label="' + label + '"' +
' aria-label="' + label + '"' +
' option-tooltip-thumb="' + thumb + '"' +
' option-tooltip-value="' + value + '"' +
' role="option"' +
' thumb-width="' + width + '"' +
' thumb-height="' + height + '"';
' data-thumb-width="' + width + '"' +
' data-thumb-height="' + height + '"';

attr += thumb !== '' ? ' data-option-tooltip-thumb="' + thumb + '"' : '';
attr += value !== '' ? ' data-option-tooltip-value="' + value + '"' : '';

swatchImageWidth = _.has(sizeConfig, 'swatchImage') ? sizeConfig.swatchImage.width : 30;
swatchImageHeight = _.has(sizeConfig, 'swatchImage') ? sizeConfig.swatchImage.height : 20;

if (!this.hasOwnProperty('products') || this.products.length <= 0) {
attr += ' option-empty="true"';
attr += ' data-option-empty="true"';
}

if (type === 0) {
Expand Down Expand Up @@ -599,14 +601,14 @@ define([

html =
'<select class="' + this.options.classes.selectClass + ' ' + config.code + '">' +
'<option value="0" option-id="0">' + chooseText + '</option>';
'<option value="0" data-option-id="0">' + chooseText + '</option>';

$.each(config.options, function () {
var label = this.label,
attr = ' value="' + this.id + '" option-id="' + this.id + '"';
attr = ' value="' + this.id + '" data-option-id="' + this.id + '"';

if (!this.hasOwnProperty('products') || this.products.length <= 0) {
attr += ' option-empty="true"';
attr += ' data-option-empty="true"';
}

html += '<option ' + attr + '>' + label + '</option>';
Expand Down Expand Up @@ -721,7 +723,7 @@ define([
var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
$wrapper = $this.parents('.' + $widget.options.classes.attributeOptionsWrapper),
$label = $parent.find('.' + $widget.options.classes.attributeSelectedOptionLabelClass),
attributeId = $parent.attr('attribute-id'),
attributeId = $parent.data('attribute-id'),
$input = $parent.find('.' + $widget.options.classes.attributeInput),
checkAdditionalData = JSON.parse(this.options.jsonSwatchConfig[attributeId]['additional_data']),
$priceBox = $widget.element.parents($widget.options.selectorProduct)
Expand All @@ -738,14 +740,14 @@ define([
}

if ($this.hasClass('selected')) {
$parent.removeAttr('option-selected').find('.selected').removeClass('selected');
$parent.removeAttr('data-option-selected').find('.selected').removeClass('selected');
$input.val('');
$label.text('');
$this.attr('aria-checked', false);
} else {
$parent.attr('option-selected', $this.attr('option-id')).find('.selected').removeClass('selected');
$label.text($this.attr('option-label'));
$input.val($this.attr('option-id'));
$parent.attr('data-option-selected', $this.data('option-id')).find('.selected').removeClass('selected');
$label.text($this.data('option-label'));
$input.val($this.data('option-id'));
$input.attr('data-attr-name', this._getAttributeCodeById(attributeId));
$this.addClass('selected');
$widget._toggleCheckedAttributes($this, $wrapper);
Expand Down Expand Up @@ -822,7 +824,7 @@ define([
*/
_OnChange: function ($this, $widget) {
var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
attributeId = $parent.attr('attribute-id'),
attributeId = $parent.data('attribute-id'),
$input = $parent.find('.' + $widget.options.classes.attributeInput);

if ($widget.productForm.length > 0) {
Expand All @@ -832,10 +834,10 @@ define([
}

if ($this.val() > 0) {
$parent.attr('option-selected', $this.val());
$parent.attr('data-option-selected', $this.val());
$input.val($this.val());
} else {
$parent.removeAttr('option-selected');
$parent.removeAttr('data-option-selected');
$input.val('');
}

Expand All @@ -862,8 +864,8 @@ define([
* @private
*/
_Rewind: function (controls) {
controls.find('div[option-id], option[option-id]').removeClass('disabled').removeAttr('disabled');
controls.find('div[option-empty], option[option-empty]')
controls.find('div[data-option-id], option[data-option-id]').removeClass('disabled').removeAttr('disabled');
controls.find('div[data-option-empty], option[data-option-empty]')
.attr('disabled', true)
.addClass('disabled')
.attr('tabindex', '-1');
Expand All @@ -876,8 +878,8 @@ define([
*/
_Rebuild: function () {
var $widget = this,
controls = $widget.element.find('.' + $widget.options.classes.attributeClass + '[attribute-id]'),
selected = controls.filter('[option-selected]');
controls = $widget.element.find('.' + $widget.options.classes.attributeClass + '[data-attribute-id]'),
selected = controls.filter('[data-option-selected]');

// Enable all options
$widget._Rewind(controls);
Expand All @@ -890,16 +892,16 @@ define([
// Disable not available options
controls.each(function () {
var $this = $(this),
id = $this.attr('attribute-id'),
id = $this.data('attribute-id'),
products = $widget._CalcProducts(id);

if (selected.length === 1 && selected.first().attr('attribute-id') === id) {
if (selected.length === 1 && selected.first().data('attribute-id') === id) {
return;
}

$this.find('[option-id]').each(function () {
$this.find('[data-option-id]').each(function () {
var $element = $(this),
option = $element.attr('option-id');
option = $element.data('option-id');

if (!$widget.optionsMap.hasOwnProperty(id) || !$widget.optionsMap[id].hasOwnProperty(option) ||
$element.hasClass('selected') ||
Expand All @@ -922,12 +924,13 @@ define([
*/
_CalcProducts: function ($skipAttributeId) {
var $widget = this,
selectedOptions = '.' + $widget.options.classes.attributeClass + '[data-option-selected]',
products = [];

// Generate intersection of products
$widget.element.find('.' + $widget.options.classes.attributeClass + '[option-selected]').each(function () {
var id = $(this).attr('attribute-id'),
option = $(this).attr('option-selected');
$widget.element.find(selectedOptions).each(function () {
var id = $(this).data('attribute-id'),
option = $(this).attr('data-option-selected');

if ($skipAttributeId !== undefined && $skipAttributeId === id) {
return;
Expand Down Expand Up @@ -1341,7 +1344,7 @@ define([
_EmulateSelected: function (selectedAttributes) {
$.each(selectedAttributes, $.proxy(function (attributeCode, optionId) {
var elem = this.element.find('.' + this.options.classes.attributeClass +
'[attribute-code="' + attributeCode + '"] [option-id="' + optionId + '"]'),
'[data-attribute-code="' + attributeCode + '"] [data-option-id="' + optionId + '"]'),
parentInput = elem.parent();

if (elem.hasClass('selected')) {
Expand All @@ -1365,7 +1368,7 @@ define([
_EmulateSelectedByAttributeId: function (selectedAttributes) {
$.each(selectedAttributes, $.proxy(function (attributeId, optionId) {
var elem = this.element.find('.' + this.options.classes.attributeClass +
'[attribute-id="' + attributeId + '"] [option-id="' + optionId + '"]'),
'[data-attribute-id="' + attributeId + '"] [data-option-id="' + optionId + '"]'),
parentInput = elem.parent();

if (elem.hasClass('selected')) {
Expand Down
Loading