diff --git a/packages/gallery/src/components/item/itemHelper.js b/packages/gallery/src/components/item/itemHelper.js index 257c0b954..1d1300083 100644 --- a/packages/gallery/src/components/item/itemHelper.js +++ b/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(); } } } diff --git a/packages/gallery/src/components/item/itemHover.js b/packages/gallery/src/components/item/itemHover.js index 867cf81c5..46a72e3fd 100644 --- a/packages/gallery/src/components/item/itemHover.js +++ b/packages/gallery/src/components/item/itemHover.js @@ -176,7 +176,6 @@ export default class ItemHover extends React.Component {
+
(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 })} + >
+ {this.getTopInfoElementIfNeeded()} {this.getLeftInfoElementIfNeeded()}
{ }); 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(); });