From c94002ed4da45313c4754a600bcd59c1236cdd4f Mon Sep 17 00:00:00 2001
From: Galpittel <95571398+Galpittel@users.noreply.github.com>
Date: Tue, 18 Jun 2024 12:21:38 +0300
Subject: [PATCH] Fix invalid aria role v4 (#1250)

* fix invalid ARIA role attribute on v4

* change 'itemClick' test to match the new role change

* Store the result of this.getItemAriaRole() in a constant
---
 packages/gallery/src/components/item/itemView.js     | 3 ++-
 packages/gallery/tests/styleParams/itemClick.spec.js | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/gallery/src/components/item/itemView.js b/packages/gallery/src/components/item/itemView.js
index e40003620a..7c89617a4a 100644
--- a/packages/gallery/src/components/item/itemView.js
+++ b/packages/gallery/src/components/item/itemView.js
@@ -984,6 +984,7 @@ class ItemView extends React.Component {
     const isItemWrapperEmpty =
       options.titlePlacement !== GALLERY_CONSTS.placements.SHOW_ON_HOVER &&
       !this.hasRequiredMediaUrl;
+    const itemAriaRole = this.getItemAriaRole();
     const innerDiv = (
       <div
         className={this.getItemContainerClass()}
@@ -999,7 +1000,7 @@ class ItemView extends React.Component {
         data-hash={hash}
         data-id={photoId}
         data-idx={idx}
-        role={this.getItemAriaRole()}
+        {...(itemAriaRole && { role: itemAriaRole })}
         data-hook="item-container"
         key={'item-container-' + id}
         style={this.getItemContainerStyles()}
diff --git a/packages/gallery/tests/styleParams/itemClick.spec.js b/packages/gallery/tests/styleParams/itemClick.spec.js
index c0efb58706..2bdd3806ec 100644
--- a/packages/gallery/tests/styleParams/itemClick.spec.js
+++ b/packages/gallery/tests/styleParams/itemClick.spec.js
@@ -49,14 +49,14 @@ describe('options - itemClick', () => {
       expect(item.props().role).to.eq('button');
       driver.detach.proGallery();
     });
-    it('expect "role" to be "" when "itemClick" is "nothing"', async () => {
+    it('expect no "role" attribute when "itemClick" is "nothing"', async () => {
       initialProps.options = mergeNestedObjects(initialProps.options, {
         itemClick: 'nothing',
       });
       driver.mount.proGallery(initialProps);
       await driver.update();
       const item = driver.find.hook('item-container').at(3);
-      expect(item.props().role).to.eq('');
+      expect(item.props()).to.not.have.property('role');
       driver.detach.proGallery();
     });
   });