From 11f3ce94704cb050cd4e7543211a3f558497713d Mon Sep 17 00:00:00 2001
From: Marcelo Arias <hello@marceloarias.com>
Date: Sun, 14 Jan 2024 18:55:11 -0500
Subject: [PATCH] fix(#7055): Expand on image with double click (#7308)

* Add double click event to expand image view

* Add performance tests for large view and close
button

* Add example imagery in flexible layout to test double-click functionality

* Remove click event listener in ImageryView.vue

* Move test to 'Example Imagery in Flexible layout'

* Refactor exampleImagery.e2e.spec.js

* Remove unnecessary code for opening and closing
large view in imagery.contract.per.spec.js

* Replace pageSelector with getByRole on double-click image test

* Add role and aria-label to focused image

* Remove unnecessary code and role attribute from ImageryView.vue

---------

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>
---
 .../imagery/exampleImagery.e2e.spec.js        | 28 +++++++++++++++++++
 .../imagery/components/ImageryView.vue        | 11 +++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js b/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js
index cd666d735d..3a1931cd15 100644
--- a/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js
+++ b/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js
@@ -485,6 +485,33 @@ test.describe('Example Imagery in Display Layout', () => {
 
 test.describe('Example Imagery in Flexible layout', () => {
   let flexibleLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    flexibleLayout = await createDomainObjectWithDefaults(page, { type: 'Flexible Layout' });
+
+    // Create Example Imagery inside the Flexible Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Example Imagery',
+      parent: flexibleLayout.uuid
+    });
+
+    // Navigate back to Flexible Layout
+    await page.goto(flexibleLayout.url);
+  });
+
+  test('Can double-click on the image to view large image', async ({ page }) => {
+    // Double-click on the image to open large view
+    const imageElement = await page.getByRole('button', { name: 'Image Wrapper' });
+    await imageElement.dblclick();
+
+    // Check if the large view is visible
+    await page.getByRole('button', { name: 'Background Image', state: 'visible' });
+
+    // Close the large view
+    await page.getByLabel('Close').click();
+  });
+
   test.beforeEach(async ({ page }) => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
@@ -580,6 +607,7 @@ test.describe('Example Imagery in Time Strip', () => {
     // Navigate to timestrip
     await page.goto(timeStripObject.url);
   });
+
   test('Clicking a thumbnail loads the image in large view', async ({ page, browserName }) => {
     test.info().annotations.push({
       type: 'issue',
diff --git a/src/plugins/imagery/components/ImageryView.vue b/src/plugins/imagery/components/ImageryView.vue
index ffc9c89c0b..97ca81fe85 100644
--- a/src/plugins/imagery/components/ImageryView.vue
+++ b/src/plugins/imagery/components/ImageryView.vue
@@ -46,18 +46,26 @@
         @start-pan="startPan"
         @toggle-layer-visibility="toggleLayerVisibility"
       />
-      <div ref="imageBG" class="c-imagery__main-image__bg" @click="expand">
+      <div
+        ref="imageBG"
+        class="c-imagery__main-image__bg"
+        aria-label="Background Image"
+        role="button"
+      >
         <div v-if="zoomFactor > 1" class="c-imagery__hints">
           {{ formatImageAltText }}
         </div>
         <div
+          role="button"
           ref="focusedImageWrapper"
           class="image-wrapper"
+          aria-label="Image Wrapper"
           :style="{
             width: `${sizedImageWidth}px`,
             height: `${sizedImageHeight}px`
           }"
           @mousedown="handlePanZoomClick"
+          @dblclick="expand"
         >
           <div
             v-for="(layer, index) in visibleLayers"
@@ -66,6 +74,7 @@
             :style="getVisibleLayerStyles(layer)"
           ></div>
           <img
+            aria-label="Focused Image"
             ref="focusedImage"
             class="c-imagery__main-image__image js-imageryView-image"
             :src="imageUrl"