PG-592: Adding focus ring prop to control non-interactive focusable e…

…lement (#1256) * adding disable focus ring prop
wix-incubator · Jun 26, 2024 · 417ee94 · 417ee94
1 parent 9de5082
commit 417ee94
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -32,6 +32,7 @@ export interface GalleryProps {
   isInDisplay?: boolean;
   enableExperimentalFeatures?: boolean;
   virtualizationSettings?: VirtualizationSettings;
+  shouldDisableItemFocus?: boolean;
 }
 
 export interface GalleryState {