Merge pull request #53 from AnastasiaBuniakEPAM/JS-255

JS-324: Fix thumb-arrow tabindex

Author: uharbachou

lib/web/fotorama/fotorama.js

@@ -1191,8 +1191,13 @@ fotoramaVersion = '4.6.4';
         return !!el.getAttribute('disabled');
     }
 
-    function disableAttr(FLAG) {
-        return {tabindex: FLAG * -1 + '', disabled: FLAG};
+    function disableAttr(FLAG, disable) {
+        if (disable) {
+            return {disabled: FLAG};
+        } else {
+            return {tabindex: FLAG * -1 + '', disabled: FLAG};
+
+        }
     }
 
     function addEnterUp(el, fn) {
@@ -2613,10 +2618,10 @@ fotoramaVersion = '4.6.4';
                 disableNext = disableDirrection(1);
             $arrPrev
                 .toggleClass(arrDisabledClass, disablePrev)
-                .attr(disableAttr(disablePrev));
+                .attr(disableAttr(disablePrev, false));
             $arrNext
                 .toggleClass(arrDisabledClass, disableNext)
-                .attr(disableAttr(disableNext));
+                .attr(disableAttr(disableNext, false));
         }
 
         function thumbArrUpdate() {
@@ -2633,10 +2638,10 @@ fotoramaVersion = '4.6.4';
             }
             $thumbArrLeft
                 .toggleClass(arrDisabledClass, isLeftDisable)
-                .attr(disableAttr(isLeftDisable));
+                .attr(disableAttr(isLeftDisable, true));
             $thumbArrRight
                 .toggleClass(arrDisabledClass, isRightDisable)
-                .attr(disableAttr(isRightDisable));
+                .attr(disableAttr(isRightDisable, true));
         }
 
         function stageWheelUpdate() {

lib/web/mage/gallery/gallery.html

@@ -25,13 +25,13 @@
         <div class="fotorama__nav-wrap" data-gallery-role="nav-wrap">
             <div class="fotorama__nav fotorama__nav--thumbs">
                 <div class="fotorama__fullscreen-icon" data-gallery-role="fotorama__fullscreen-icon" tabindex="0" aria-label="Exit fullscreen" role="button"></div>
-                <div class="fotorama__thumb__arr fotorama__thumb__arr--left" role="button" aria-label="Previos" data-gallery-role="arrow">
+                <div class="fotorama__thumb__arr fotorama__thumb__arr--left" role="button" aria-label="Previos" data-gallery-role="arrow" tabindex = "-1">
                     <div class="fotorama__thumb--icon"></div>
                 </div>
                 <div class="fotorama__nav__shaft">
                     <div class="fotorama__thumb-border"></div>
                 </div>
-                <div class="fotorama__thumb__arr fotorama__thumb__arr--right" role="button" aria-label="Next" data-gallery-role="arrow">
+                <div class="fotorama__thumb__arr fotorama__thumb__arr--right" role="button" aria-label="Next" data-gallery-role="arrow" tabindex = "-1">
                     <div class="fotorama__thumb--icon"></div>
                 </div>
             </div>

lib/web/mage/gallery/module/_focus.less

@@ -7,7 +7,6 @@
 .fotorama__zoom-out:focus,
 .fotorama__zoom-in:focus,
 .fotorama__arr:focus,
-.fotorama__arr:focus,
 .fotorama__stage__shaft:focus,
 .fotorama__nav__frame--thumb:focus .fotorama__thumb,
 .fotorama__nav__frame--dot:focus .fotorama__dot {
@@ -59,4 +58,9 @@
     .fotorama__thumb.fotorama_vertical_ratio:after{
         bottom: 1px;
     }
-}
+}
+
+.fotorama__thumb__arr {
+    box-shadow: none;
+}
+