ENGCOM-4145: focus-not-proper-on-configurable-product-swatches:: focus not proper … #20992

Author: sidolov

app/design/frontend/Magento/blank/Magento_Swatches/web/css/source/_module.less

@@ -91,15 +91,19 @@
             &-options {
                 margin-top: @indent__s;
 
+                &:focus {
+                    box-shadow: none;
+                }
+
                 .swatch-option-tooltip-layered .title {
                     .lib-css(color, @swatch-option-tooltip-layered-title__color);
-                    width: 100%;
-                    height: 20px;
-                    position: absolute;
                     bottom: -5px;
+                    height: 20px;
                     left: 0;
-                    text-align: center;
                     margin-bottom: @indent__s;
+                    position: absolute;
+                    text-align: center;
+                    width: 100%;
                 }
             }
 
@@ -132,15 +136,19 @@
             text-align: center;
             text-overflow: ellipsis;
 
+            &:focus {
+                box-shadow: @focus__box-shadow;
+            }
+
             &.text {
                 .lib-css(background, @swatch-option-text__background);
                 .lib-css(color, @swatch-option-text__color);
                 font-size: @font-size__s;
                 font-weight: @font-weight__bold;
                 line-height: 20px;
-                padding: 4px 8px;
-                min-width: 22px;
                 margin-right: 7px;
+                min-width: 22px;
+                padding: 4px 8px;
 
                 &.selected {
                     .lib-css(background-color, @swatch-option-text__selected__background-color) !important;

app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/_module.less

@@ -294,6 +294,12 @@
     }
 
     .product-options-wrapper {
+        .fieldset {
+            &:focus {
+                box-shadow: none;
+            }
+        }
+
         .fieldset-product-options-inner {
             .legend {
                 .lib-css(font-weight, @font-weight__semibold);