Skip to content

Commit f8a7358

Browse files
lenaorobeilenaorobei
authored
ENGCOM-7042: [Fixed] - HTML Validation issue Replace Attribute with data-* attribute #26055 
2 parents fa1a862 + b00619f commit f8a7358

File tree

9 files changed

+221
-217
lines changed

9 files changed

+221
-217
lines changed

‎app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategorySidebarSection.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<element name="filterOptions" type="text" selector=".filter-options-content .items"/>
1414
<element name="filterOption" type="text" selector=".filter-options-content .item"/>
1515
<element name="optionQty" type="text" selector=".filter-options-content .item .count"/>
16-
<element name="filterOptionByLabel" type="button" selector=" div.filter-options-item div[option-label='{{optionLabel}}']" parameterized="true"/>
16+
<element name="filterOptionByLabel" type="button" selector=" div.filter-options-item div[data-option-label='{{optionLabel}}']" parameterized="true"/>
1717
<element name="removeFilter" type="button" selector="div.filter-current .remove"/>
1818
<element name="activeFilterOptions" type="text" selector=".filter-options-item.active .items"/>
1919
<element name="activeFilterOptionItemByPosition" type="text" selector=".filter-options-item.active .items li:nth-child({{itemPosition}}) a" parameterized="true"/>

‎app/code/Magento/Catalog/Test/Mftf/Test/AdminBackorderAllowedAddProductToCartTest.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
<!-- Set Magento back to default configuration -->
3232
<magentoCLI command="config:set {{CatalogInventoryOptionsShowOutOfStockDisable.path}} {{CatalogInventoryOptionsShowOutOfStockDisable.value}}" stepKey="setConfigShowOutOfStockFalse"/>
3333
<magentoCLI command="config:set {{CatalogInventoryItemOptionsBackordersDisable.path}} {{CatalogInventoryItemOptionsBackordersDisable.value}}" stepKey="setConfigAllowBackordersFalse"/>
34+
<magentoCLI command="cache:clean config full_page" stepKey="cleanInvalidatedCache"/>
3435
<deleteData createDataKey="createProduct" stepKey="deleteProduct"/>
3536
</after>
3637

‎app/code/Magento/Swatches/Test/Mftf/Section/StorefrontProductInfoMainSection.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
<sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
1010
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
1111
<section name="StorefrontProductInfoMainSection">
12-
<element name="swatchOptionByLabel" type="button" selector="div.swatch-option[option-label='{{opt}}']" parameterized="true"/>
12+
<element name="swatchOptionByLabel" type="button" selector="div.swatch-option[data-option-label='{{opt}}']" parameterized="true"/>
1313
<element name="nthSwatchOption" type="button" selector="div.swatch-option:nth-of-type({{var}})" parameterized="true"/>
1414
<element name="selectedSwatchValue" type="text" selector="//div[contains(@class, 'swatch-attribute') and contains(., '{{attr}}')]//span[contains(@class, 'swatch-attribute-selected-option')]" parameterized="true"/>
1515
<element name="swatchAttributeOptions" type="text" selector="div.swatch-attribute-options"/>
1616
<element name="nthSwatchOptionText" type="button" selector="div.swatch-option.text:nth-of-type({{n}})" parameterized="true"/>
1717
<element name="productSwatch" type="button" selector="//div[@class='swatch-option'][@aria-label='{{var1}}']" parameterized="true"/>
18-
<element name="visualSwatchOption" type="button" selector=".swatch-option[option-tooltip-value='#{{visualSwatchOption}}']" parameterized="true"/>
18+
<element name="visualSwatchOption" type="button" selector=".swatch-option[data-option-tooltip-value='#{{visualSwatchOption}}']" parameterized="true"/>
1919
<element name="swatchOptionTooltip" type="block" selector="div.swatch-option-tooltip"/>
2020
<element name="swatchAttributeSelectedOption" type="text" selector="#product-options-wrapper .swatch-option.selected"/>
2121
</section>

‎app/code/Magento/Swatches/Test/Mftf/Test/AdminCreateTextSwatchTest.xml

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
*/
77
-->
88

9-
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
10-
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
9+
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
1110
<test name="AdminCreateTextSwatchTest">
1211
<annotations>
1312
<features value="Swatches"/>
@@ -83,19 +82,19 @@
8382
<amOnPage url="{{_defaultProduct.urlKey}}.html" stepKey="amOnProductPage"/>
8483
<waitForPageLoad stepKey="waitForProductPage"/>
8584
<see selector="{{StorefrontProductInfoMainSection.swatchAttributeOptions}}" userInput="red" stepKey="seeRed"/>
86-
<grabAttributeFrom selector="{{StorefrontProductInfoMainSection.nthSwatchOptionText('1')}}" userInput="option-label" stepKey="grabRedLabel"/>
85+
<grabAttributeFrom selector="{{StorefrontProductInfoMainSection.nthSwatchOptionText('1')}}" userInput="data-option-label" stepKey="grabRedLabel"/>
8786
<assertEquals stepKey="assertRedLabel">
8887
<expectedResult type="string">Something red.</expectedResult>
8988
<actualResult type="string">{$grabRedLabel}</actualResult>
9089
</assertEquals>
9190
<see selector="{{StorefrontProductInfoMainSection.swatchAttributeOptions}}" userInput="green" stepKey="seeGreen"/>
92-
<grabAttributeFrom selector="{{StorefrontProductInfoMainSection.nthSwatchOptionText('2')}}" userInput="option-label" stepKey="grabGreenLabel"/>
91+
<grabAttributeFrom selector="{{StorefrontProductInfoMainSection.nthSwatchOptionText('2')}}" userInput="data-option-label" stepKey="grabGreenLabel"/>
9392
<assertEquals stepKey="assertGreenLabel">
9493
<expectedResult type="string">Something green.</expectedResult>
9594
<actualResult type="string">{$grabGreenLabel}</actualResult>
9695
</assertEquals>
9796
<see selector="{{StorefrontProductInfoMainSection.swatchAttributeOptions}}" userInput="blue" stepKey="seeBlue"/>
98-
<grabAttributeFrom selector="{{StorefrontProductInfoMainSection.nthSwatchOptionText('3')}}" userInput="option-label" stepKey="grabBlueLabel"/>
97+
<grabAttributeFrom selector="{{StorefrontProductInfoMainSection.nthSwatchOptionText('3')}}" userInput="data-option-label" stepKey="grabBlueLabel"/>
9998
<assertEquals stepKey="assertBlueLabel">
10099
<expectedResult type="string">Something blue.</expectedResult>
101100
<actualResult type="string">{$grabBlueLabel}</actualResult>

‎app/code/Magento/Swatches/view/base/web/js/swatch-renderer.js

Lines changed: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,12 @@ define([
6363
/**
6464
* Render tooltips by attributes (only to up).
6565
* Required element attributes:
66-
* - option-type (integer, 0-3)
67-
* - option-label (string)
68-
* - option-tooltip-thumb
69-
* - option-tooltip-value
70-
* - thumb-width
71-
* - thumb-height
66+
* - data-option-type (integer, 0-3)
67+
* - data-option-label (string)
68+
* - data-option-tooltip-thumb
69+
* - data-option-tooltip-value
70+
* - data-thumb-width
71+
* - data-thumb-height
7272
*/
7373
$.widget('mage.SwatchRendererTooltip', {
7474
options: {
@@ -84,12 +84,12 @@ define([
8484
$this = this.element,
8585
$element = $('.' + $widget.options.tooltipClass),
8686
timer,
87-
type = parseInt($this.attr('option-type'), 10),
88-
label = $this.attr('option-label'),
89-
thumb = $this.attr('option-tooltip-thumb'),
90-
value = $this.attr('option-tooltip-value'),
91-
width = $this.attr('thumb-width'),
92-
height = $this.attr('thumb-height'),
87+
type = parseInt($this.data('option-type'), 10),
88+
label = $this.data('option-label'),
89+
thumb = $this.data('option-tooltip-thumb'),
90+
value = $this.data('option-tooltip-value'),
91+
width = $this.data('thumb-width'),
92+
height = $this.data('thumb-height'),
9393
$image,
9494
$title,
9595
$corner;
@@ -429,8 +429,8 @@ define([
429429
// Create new control
430430
container.append(
431431
'<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
432-
'attribute-code="' + item.code + '" ' +
433-
'attribute-id="' + item.id + '">' +
432+
'data-attribute-code="' + item.code + '" ' +
433+
'data-attribute-id="' + item.id + '">' +
434434
label +
435435
'<div aria-activedescendant="" ' +
436436
'tabindex="0" ' +
@@ -462,7 +462,8 @@ define([
462462
if (showTooltip === 1) {
463463
// Connect Tooltip
464464
container
465-
.find('[option-type="1"], [option-type="2"], [option-type="0"], [option-type="3"]')
465+
.find('[data-option-type="1"], [data-option-type="2"],' +
466+
' [data-option-type="0"], [data-option-type="3"]')
466467
.SwatchRendererTooltip();
467468
}
468469

@@ -537,21 +538,22 @@ define([
537538
' aria-checked="false"' +
538539
' aria-describedby="' + controlId + '"' +
539540
' tabindex="0"' +
540-
' option-type="' + type + '"' +
541-
' option-id="' + id + '"' +
542-
' option-label="' + label + '"' +
541+
' data-option-type="' + type + '"' +
542+
' data-option-id="' + id + '"' +
543+
' data-option-label="' + label + '"' +
543544
' aria-label="' + label + '"' +
544-
' option-tooltip-thumb="' + thumb + '"' +
545-
' option-tooltip-value="' + value + '"' +
546545
' role="option"' +
547-
' thumb-width="' + width + '"' +
548-
' thumb-height="' + height + '"';
546+
' data-thumb-width="' + width + '"' +
547+
' data-thumb-height="' + height + '"';
548+
549+
attr += thumb !== '' ? ' data-option-tooltip-thumb="' + thumb + '"' : '';
550+
attr += value !== '' ? ' data-option-tooltip-value="' + value + '"' : '';
549551

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

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

557559
if (type === 0) {
@@ -599,14 +601,14 @@ define([
599601

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

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

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

612614
html += '<option ' + attr + '>' + label + '</option>';
@@ -721,7 +723,7 @@ define([
721723
var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
722724
$wrapper = $this.parents('.' + $widget.options.classes.attributeOptionsWrapper),
723725
$label = $parent.find('.' + $widget.options.classes.attributeSelectedOptionLabelClass),
724-
attributeId = $parent.attr('attribute-id'),
726+
attributeId = $parent.data('attribute-id'),
725727
$input = $parent.find('.' + $widget.options.classes.attributeInput),
726728
checkAdditionalData = JSON.parse(this.options.jsonSwatchConfig[attributeId]['additional_data']),
727729
$priceBox = $widget.element.parents($widget.options.selectorProduct)
@@ -738,14 +740,14 @@ define([
738740
}
739741

740742
if ($this.hasClass('selected')) {
741-
$parent.removeAttr('option-selected').find('.selected').removeClass('selected');
743+
$parent.removeAttr('data-option-selected').find('.selected').removeClass('selected');
742744
$input.val('');
743745
$label.text('');
744746
$this.attr('aria-checked', false);
745747
} else {
746-
$parent.attr('option-selected', $this.attr('option-id')).find('.selected').removeClass('selected');
747-
$label.text($this.attr('option-label'));
748-
$input.val($this.attr('option-id'));
748+
$parent.attr('data-option-selected', $this.data('option-id')).find('.selected').removeClass('selected');
749+
$label.text($this.data('option-label'));
750+
$input.val($this.data('option-id'));
749751
$input.attr('data-attr-name', this._getAttributeCodeById(attributeId));
750752
$this.addClass('selected');
751753
$widget._toggleCheckedAttributes($this, $wrapper);
@@ -822,7 +824,7 @@ define([
822824
*/
823825
_OnChange: function ($this, $widget) {
824826
var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
825-
attributeId = $parent.attr('attribute-id'),
827+
attributeId = $parent.data('attribute-id'),
826828
$input = $parent.find('.' + $widget.options.classes.attributeInput);
827829

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

834836
if ($this.val() > 0) {
835-
$parent.attr('option-selected', $this.val());
837+
$parent.attr('data-option-selected', $this.val());
836838
$input.val($this.val());
837839
} else {
838-
$parent.removeAttr('option-selected');
840+
$parent.removeAttr('data-option-selected');
839841
$input.val('');
840842
}
841843

@@ -862,8 +864,8 @@ define([
862864
* @private
863865
*/
864866
_Rewind: function (controls) {
865-
controls.find('div[option-id], option[option-id]').removeClass('disabled').removeAttr('disabled');
866-
controls.find('div[option-empty], option[option-empty]')
867+
controls.find('div[data-option-id], option[data-option-id]').removeClass('disabled').removeAttr('disabled');
868+
controls.find('div[data-option-empty], option[data-option-empty]')
867869
.attr('disabled', true)
868870
.addClass('disabled')
869871
.attr('tabindex', '-1');
@@ -876,8 +878,8 @@ define([
876878
*/
877879
_Rebuild: function () {
878880
var $widget = this,
879-
controls = $widget.element.find('.' + $widget.options.classes.attributeClass + '[attribute-id]'),
880-
selected = controls.filter('[option-selected]');
881+
controls = $widget.element.find('.' + $widget.options.classes.attributeClass + '[data-attribute-id]'),
882+
selected = controls.filter('[data-option-selected]');
881883

882884
// Enable all options
883885
$widget._Rewind(controls);
@@ -890,16 +892,16 @@ define([
890892
// Disable not available options
891893
controls.each(function () {
892894
var $this = $(this),
893-
id = $this.attr('attribute-id'),
895+
id = $this.data('attribute-id'),
894896
products = $widget._CalcProducts(id);
895897

896-
if (selected.length === 1 && selected.first().attr('attribute-id') === id) {
898+
if (selected.length === 1 && selected.first().data('attribute-id') === id) {
897899
return;
898900
}
899901

900-
$this.find('[option-id]').each(function () {
902+
$this.find('[data-option-id]').each(function () {
901903
var $element = $(this),
902-
option = $element.attr('option-id');
904+
option = $element.data('option-id');
903905

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

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

932935
if ($skipAttributeId !== undefined && $skipAttributeId === id) {
933936
return;
@@ -1353,7 +1356,7 @@ define([
13531356
_EmulateSelected: function (selectedAttributes) {
13541357
$.each(selectedAttributes, $.proxy(function (attributeCode, optionId) {
13551358
var elem = this.element.find('.' + this.options.classes.attributeClass +
1356-
'[attribute-code="' + attributeCode + '"] [option-id="' + optionId + '"]'),
1359+
'[data-attribute-code="' + attributeCode + '"] [data-option-id="' + optionId + '"]'),
13571360
parentInput = elem.parent();
13581361

13591362
if (elem.hasClass('selected')) {
@@ -1377,7 +1380,7 @@ define([
13771380
_EmulateSelectedByAttributeId: function (selectedAttributes) {
13781381
$.each(selectedAttributes, $.proxy(function (attributeId, optionId) {
13791382
var elem = this.element.find('.' + this.options.classes.attributeClass +
1380-
'[attribute-id="' + attributeId + '"] [option-id="' + optionId + '"]'),
1383+
'[data-attribute-id="' + attributeId + '"] [data-option-id="' + optionId + '"]'),
13811384
parentInput = elem.parent();
13821385

13831386
if (elem.hasClass('selected')) {

0 commit comments

Comments
 (0)