[A11Y] - Fix action btn

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

@@ -39,35 +39,35 @@ function isThisGalleryElementInFocus(className, galleryId) {
 export function changeActiveElementIfNeeded({
   prevProps,
   currentProps,
-  itemContainer,
+  itemActionRef,
 }) {
   try {
     if (
       shouldChangeActiveElement() &&
       window.document.activeElement.className
     ) {
-      const isGalleryItemInFocus = isThisGalleryElementInFocus(
-        'gallery-item-container',
+      const isGalleryItemAction = isThisGalleryElementInFocus(
+        'item-action',
         currentProps.galleryId
       );
       const isShowMoreInFocus = isThisGalleryElementInFocus(
         'show-more',
         currentProps.galleryId
       );
-      if (isGalleryItemInFocus || isShowMoreInFocus) {
+      if (isGalleryItemAction || isShowMoreInFocus) {
         if (
           currentProps.thumbnailHighlightId !==
             prevProps.thumbnailHighlightId &&
           currentProps.thumbnailHighlightId === currentProps.id
         ) {
           // if the highlighted thumbnail changed and it is the same as this itemview's
-          itemContainer.focus();
+          itemActionRef.focus();
         } else if (
           currentProps.activeIndex !== prevProps.activeIndex &&
           currentProps.activeIndex === currentProps.idx
         ) {
           //check if activeIndex has changed to the current item
-          itemContainer.focus();
+          itemActionRef.focus();
         }
       }
     }

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

@@ -176,7 +176,6 @@ export default class ItemHover extends React.Component {
         <div
           key={'item-hover-' + idx}
           data-hook={'item-hover-' + idx}
-          aria-hidden={true}
           className={hoverClass}
           onTouchStart={actions.handleItemMouseDown}
           onTouchEnd={actions.handleItemMouseUp}

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

@@ -960,7 +960,7 @@ class ItemView extends React.Component {
     changeActiveElementIfNeeded({
       prevProps,
       currentProps: this.props,
-      itemContainer: this.itemContainer,
+      itemActionRef: this.itemActionRef,
     });
   }
 
@@ -1000,6 +1000,16 @@ class ItemView extends React.Component {
     }
   }
 
+  getItemAriaHaspopup() {
+    switch (this.props.options.itemClick) {
+      case 'expand':
+      case 'fullscreen':
+        return true;
+      default:
+        return '';
+    }
+  }
+
   composeItem() {
     const { photoId, id, hash, idx, options, type, url } = this.props;
 
@@ -1010,6 +1020,8 @@ class ItemView extends React.Component {
       options.titlePlacement !== GALLERY_CONSTS.placements.SHOW_ON_HOVER &&
       !this.hasRequiredMediaUrl;
     const itemAriaRole = this.getItemAriaRole();
+    const itemAriaLabel = this.getItemAriaLabel();
+    const itemAriaHaspopup = this.getItemAriaHaspopup();
     const Element = this.props.elementsOverride?.item || 'div';
     const innerDiv = (
       <Element
@@ -1020,19 +1032,31 @@ class ItemView extends React.Component {
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}
         onFocus={this.onFocus}
-        onBlur={this.onBlur} // The onblur event is the opposite of the onfocus event.
-        tabIndex={this.getItemContainerTabIndex()}
-        aria-label={this.getItemAriaLabel()}
+        onBlur={this.onBlur}
         data-hash={hash}
         data-id={photoId}
         data-idx={idx}
-        {...(itemAriaRole && { role: itemAriaRole })}
         data-hook="item-container"
         key={'item-container-' + id}
         style={this.getItemContainerStyles()}
         onKeyUp={this.onContainerKeyUp}
         onClick={this.onItemWrapperClick}
       >
+        <div
+          data-idx={idx}
+          id={'item-action-' + id}
+          className="item-action"
+          ref={(ref) => (this.itemActionRef = ref)}
+          onKeyUp={this.onContainerKeyUp}
+          tabIndex={this.getItemContainerTabIndex()}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+          data-hook={'item-action'}
+          {...(itemAriaLabel && { ['aria-label']: itemAriaLabel })}
+          {...(itemAriaRole && { role: itemAriaRole })}
+          {...(itemAriaHaspopup && { ['aria-haspopup']: itemAriaHaspopup })}
+        ></div>
+
         {this.getTopInfoElementIfNeeded()}
         {this.getLeftInfoElementIfNeeded()}
         <div

packages/gallery/src/components/styles/gallery.scss

@@ -306,7 +306,19 @@ div.pro-gallery {
     font-size: 11px;
     cursor: default;
     scroll-snap-align: center;
-
+    .item-action {
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      position: absolute;
+      pointer-events: none;
+      z-index: -1;
+      &:focus {
+        --focus-ring-box-shadow: none !important;
+        outline: none !important;
+        box-shadow: none !important;
+      }
+    }
     &:hover {
       .gallery-item-common-info {
         cursor: pointer;
@@ -680,8 +692,7 @@ div.pro-gallery {
     .thumbnailItem.pro-gallery-highlight::after {
       box-shadow: inset 0 0 1px 2px $wix-blue, inset 0 0 7px 0 $white, 0 0 10px -5px $wix-blue;
     }
-
-    .gallery-item-container:focus::after {
+    .gallery-item-container:has(.item-action:focus)::after {
       content: ' ';
       width: 100%;
       height: 100%;

packages/gallery/tests/styleParams/itemClick.spec.js

@@ -25,7 +25,7 @@ describe('options - itemClick', () => {
       });
       driver.mount.proGallery(initialProps);
       await driver.update();
-      const item = driver.find.hook('item-container').at(3);
+      const item = driver.find.hook('item-action').at(3);
       expect(item.props().role).to.eq('link');
       driver.detach.proGallery();
     });
@@ -35,7 +35,7 @@ describe('options - itemClick', () => {
       });
       driver.mount.proGallery(initialProps);
       await driver.update();
-      const item = driver.find.hook('item-container').at(3);
+      const item = driver.find.hook('item-action').at(3);
       expect(item.props().role).to.eq('button');
       driver.detach.proGallery();
     });
@@ -45,7 +45,7 @@ describe('options - itemClick', () => {
       });
       driver.mount.proGallery(initialProps);
       await driver.update();
-      const item = driver.find.hook('item-container').at(3);
+      const item = driver.find.hook('item-action').at(3);
       expect(item.props().role).to.eq('button');
       driver.detach.proGallery();
     });
@@ -55,7 +55,7 @@ describe('options - itemClick', () => {
       });
       driver.mount.proGallery(initialProps);
       await driver.update();
-      const item = driver.find.hook('item-container').at(3);
+      const item = driver.find.hook('item-action').at(3);
       expect(item.props()).to.not.have.property('role');
       driver.detach.proGallery();
     });