[A11Y] - fix tab index issues on fullscreen (#1350)

* [A11Y] - fix tab index issues on fullscreen

* fix lint

Author: Galpittel

packages/gallery/src/components/gallery/proGallery/navigationArrows.js

@@ -115,7 +115,6 @@ export function NavigationArrows({
           next,
           directionIsLeft,
           arrowsBaseClasses,
-          tabIndex: utils.getTabIndex.bind(utils),
           containerStyle,
           prevContainerStyle,
           nextContainerStyle,
@@ -168,7 +167,6 @@ export function ArrowButton({
   directionIsLeft,
   renderArrowSvg,
   next,
-  tabIndex,
   arrowBoxStyle,
   navArrowsContainerWidth,
   navArrowsContainerHeight,
@@ -180,7 +178,7 @@ export function ArrowButton({
     className: arrowsBaseClasses.join(' '),
     onClick: () => setTimeout(nextAction, 0),
     ['aria-label']: `${isNext ? 'Next' : 'Previous'} Item`,
-    tabIndex: tabIndex(isNext ? 'slideshowNext' : 'slideshowPrev'),
+    tabIndex: '-1',
     key: !isNext ? 'nav-arrow-back' : 'nav-arrow-next',
     ['data-hook']: !isNext ? 'nav-arrow-back' : 'nav-arrow-next',
     style: {

packages/gallery/src/components/item/itemView.js

@@ -53,7 +53,6 @@ class ItemView extends React.Component {
     this.getItemAriaLabel = this.getItemAriaLabel.bind(this);
     this.getItemContainerClass = this.getItemContainerClass.bind(this);
     this.getItemWrapperClass = this.getItemWrapperClass.bind(this);
-    this.getItemContainerTabIndex = this.getItemContainerTabIndex.bind(this);
     this.isIconTag = this.isIconTag.bind(this);
     this.onMouseEnter = this.onMouseEnter.bind(this);
     this.onMouseLeave = this.onMouseLeave.bind(this);
@@ -864,15 +863,6 @@ class ItemView extends React.Component {
     return classes.join(' ');
   }
 
-  getItemContainerTabIndex() {
-    const tabIndex = this.isHighlight()
-      ? utils.getTabIndex('currentThumbnail')
-      : this.props.activeIndex === this.props.idx
-      ? utils.getTabIndex('currentGalleryItem')
-      : -1;
-    return tabIndex;
-  }
-
   //-----------------------------------------| REACT |--------------------------------------------//
 
   componentDidMount() {
@@ -969,7 +959,7 @@ class ItemView extends React.Component {
         onMouseLeave={this.onMouseLeave}
         onFocus={this.onFocus}
         onBlur={this.onBlur} // The onblur event is the opposite of the onfocus event.
-        tabIndex={this.getItemContainerTabIndex()}
+        tabIndex="-1"
         aria-label={this.getItemAriaLabel()}
         data-hash={hash}
         data-id={photoId}