From 417ee945a229c09e118774021a5f2956a73d7455 Mon Sep 17 00:00:00 2001
From: Hadas Zeira <82802761+hadasze@users.noreply.github.com>
Date: Wed, 26 Jun 2024 15:13:08 +0300
Subject: [PATCH] PG-592: Adding focus ring prop to control non-interactive
 focusable element  (#1256)

* adding disable focus ring prop
---
 .../src/components/gallery/proGallery/galleryContainer.js     | 1 +
 .../gallery/src/components/gallery/proGallery/galleryView.js  | 1 +
 packages/gallery/src/components/item/itemView.js              | 4 +++-
 packages/lib/src/common/interfaces/galleryTypes.ts            | 1 +
 4 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/gallery/src/components/gallery/proGallery/galleryContainer.js b/packages/gallery/src/components/gallery/proGallery/galleryContainer.js
index eb81c26920..ce3010d699 100644
--- a/packages/gallery/src/components/gallery/proGallery/galleryContainer.js
+++ b/packages/gallery/src/components/gallery/proGallery/galleryContainer.js
@@ -954,6 +954,7 @@ export class GalleryContainer extends React.Component {
           galleryContainerId={`pro-gallery-container-${this.props.id}`}
           scrollTop={this.state?.scrollPosition?.top}
           isScrollLessGallery={this.getIsScrollLessGallery(this.state.options)}
+          shouldDisableItemFocus={this.props.shouldDisableItemFocus}
           actions={{
             ...this.props.actions,
             findNeighborItem: this.findNeighborItem,
diff --git a/packages/gallery/src/components/gallery/proGallery/galleryView.js b/packages/gallery/src/components/gallery/proGallery/galleryView.js
index a1079d5cd7..88f80912be 100644
--- a/packages/gallery/src/components/gallery/proGallery/galleryView.js
+++ b/packages/gallery/src/components/gallery/proGallery/galleryView.js
@@ -174,6 +174,7 @@ class GalleryView extends React.Component {
           ...galleryConfig,
           visible: item.isVisible,
           key: `itemView-${item.id}-${index}`,
+          shouldDisableItemFocus: this.props.shouldDisableItemFocus,
         });
         return React.createElement(itemView, {
           ...itemProps,
diff --git a/packages/gallery/src/components/item/itemView.js b/packages/gallery/src/components/item/itemView.js
index 7c89617a4a..a08f37c30b 100644
--- a/packages/gallery/src/components/item/itemView.js
+++ b/packages/gallery/src/components/item/itemView.js
@@ -898,7 +898,9 @@ class ItemView extends React.Component {
   }
 
   getItemContainerTabIndex() {
-    const tabIndex = this.isHighlight()
+    const tabIndex = this.props.shouldDisableItemFocus
+      ? -1
+      : this.isHighlight()
       ? utils.getTabIndex('currentThumbnail')
       : this.props.activeIndex === this.props.idx
       ? utils.getTabIndex('currentGalleryItem')
diff --git a/packages/lib/src/common/interfaces/galleryTypes.ts b/packages/lib/src/common/interfaces/galleryTypes.ts
index dc24373968..d17e432e4e 100644
--- a/packages/lib/src/common/interfaces/galleryTypes.ts
+++ b/packages/lib/src/common/interfaces/galleryTypes.ts
@@ -32,6 +32,7 @@ export interface GalleryProps {
   isInDisplay?: boolean;
   enableExperimentalFeatures?: boolean;
   virtualizationSettings?: VirtualizationSettings;
+  shouldDisableItemFocus?: boolean;
 }
 
 export interface GalleryState {