fix(#7552): Fix notebook snapshot image annotations

e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js

@@ -290,7 +290,7 @@ test.describe('Flexible Layout Toolbar Actions @localStorage', () => {
     await page.getByTitle('Add Container').click();
     expect(await containerHandles.count()).toEqual(3);
     await page.getByTitle('Remove Container').click();
-    await expect(page.getByRole('dialog', { name: 'Overlay' })).toHaveText(
+    await expect(page.getByRole('dialog', { name: 'Overlay' })).toContainText(
       'This action will permanently delete this container from this Flexible Layout. Do you want to continue?'
     );
     await page.getByRole('button', { name: 'OK', exact: true }).click();
@@ -300,7 +300,7 @@ test.describe('Flexible Layout Toolbar Actions @localStorage', () => {
     expect(await page.getByRole('group', { name: 'Frame' }).count()).toEqual(2);
     await page.getByRole('group', { name: 'Child Layout 1' }).click();
     await page.getByTitle('Remove Frame').click();
-    await expect(page.getByRole('dialog', { name: 'Overlay' })).toHaveText(
+    await expect(page.getByRole('dialog', { name: 'Overlay' })).toContainText(
       'This action will remove this frame from this Flexible Layout. Do you want to continue?'
     );
     await page.getByRole('button', { name: 'OK', exact: true }).click();

e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js

@@ -90,23 +90,35 @@ test.describe('Snapshot Container tests', () => {
   test('A snapshot can be Quick Viewed from Container with 3 dot action menu', async ({ page }) => {
     await page.locator('.c-snapshot.c-ne__embed').first().getByTitle('More actions').click();
     await page.getByRole('menuitem', { name: 'Quick View' }).click();
-    await expect(page.locator('.c-overlay__outer')).toBeVisible();
+    await expect(page.getByLabel('Modal Overlay')).toBeVisible();
+    await expect(page.getByLabel('Preview Container')).toBeVisible();
+  });
+  test('A snapshot can be Viewed, Annotated, display deleted, and saved from Container with 3 dot action menu', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7552'
+    });
+    await page.getByLabel('My Items Notebook Embed').getByLabel('More actions').click();
+    await page.getByRole('menuitem', { name: 'View Snapshot' }).click();
+    await expect(page.getByRole('dialog', { name: 'Modal Overlay' })).toBeVisible();
+    await page.getByTitle('Annotate').click();
+    await expect(page.locator('#snap-annotation-canvas')).toBeVisible();
+    // Clear the canvas
+    await page.getByRole('button', { name: 'Put text [T]' }).click();
+    // Click in the Painterro canvas to add a text annotation
+    await page.locator('.ptro-crp-el').click();
+    await page.keyboard.type('...is there life on mars?');
+    // Click save button with no a11y
+    await page.getByRole('button', { name: '' }).click();
+    // Painterro save dialog should be hidden now
+    await expect(page.getByRole('button', { name: '' })).toBeHidden();
+
+    // Save and exit annotation window
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('button', { name: 'Done' }).click();
   });
-  test.fixme(
-    'A snapshot can be Viewed, Annotated, display deleted, and saved from Container with 3 dot action menu',
-    async ({ page }) => {
-      await page.locator('.c-snapshot.c-ne__embed').first().getByTitle('More actions').click();
-      await page.getByRole('menuitem', { name: ' View Snapshot' }).click();
-      await expect(page.locator('.c-overlay__outer')).toBeVisible();
-      await page.getByTitle('Annotate').click();
-      await expect(page.locator('#snap-annotation-canvas')).toBeVisible();
-      await page.getByRole('button', { name: '' }).click();
-      // await expect(page.locator('#snap-annotation-canvas')).not.toBeVisible();
-      await page.getByRole('button', { name: 'Save' }).click();
-      await page.getByRole('button', { name: 'Done' }).click();
-      //await expect(await page.locator)
-    }
-  );
   test.fixme('5 Snapshots can be added to a container', async ({ page }) => {});
   test.fixme(
     '5 Snapshots can be added to a container and Deleted with Delete All action',

src/api/overlays/components/OverlayComponent.vue

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="c-overlay js-overlay">
+  <div class="c-overlay js-overlay" role="dialog" aria-modal="true" aria-label="Modal Overlay">
     <div class="c-overlay__blocker" @click="destroy"></div>
     <div class="c-overlay__outer">
       <button
@@ -34,9 +34,6 @@
           ref="element"
           class="c-overlay__contents js-notebook-snapshot-item-wrapper"
           tabindex="0"
-          aria-modal="true"
-          aria-label="Overlay"
-          role="dialog"
         ></div>
         <div v-if="buttons" class="c-overlay__button-bar">
           <button
@@ -61,7 +58,7 @@
 export default {
   inject: ['dismiss', 'element', 'buttons', 'dismissable'],
   emits: ['destroy'],
-  data: function () {
+  data() {
     return {
       focusIndex: -1
     };

src/plugins/notebook/components/NotebookEmbed.vue

@@ -23,6 +23,7 @@
   <div
     ref="notebookEmbed"
     class="c-snapshot c-ne__embed"
+    :aria-label="`${embed.name} Notebook Embed`"
     @mouseover.ctrl="showToolTip"
     @mouseleave="hideToolTip"
   >

src/plugins/notebook/utils/painterroInstance.js

@@ -46,7 +46,7 @@ export default class PainterroInstance {
     this.config.id = this.elementId;
     this.config.saveHandler = this.saveHandler.bind(this);
 
-    this.painterro = Painterro(this.config);
+    this.painterro = Painterro.default(this.config);
   }
 
   save(callback) {

src/plugins/timelist/TimelistComponent.vue

@@ -38,39 +38,41 @@
       >
       </expanded-view-item>
     </template>
-    <div v-else class="c-table c-table--sortable c-list-view c-list-view--sticky-header sticky">
-      <table class="c-table__body js-table__body">
-        <thead class="c-table__header">
-          <tr>
-            <list-header
-              v-for="headerItem in headerItems"
-              :key="headerItem.property"
-              :direction="
-                defaultSort.property === headerItem.property
-                  ? defaultSort.defaultDirection
-                  : headerItem.defaultDirection
-              "
-              :is-sortable="headerItem.isSortable"
-              :aria-label="headerItem.name"
-              :title="headerItem.name"
-              :property="headerItem.property"
-              :current-sort="defaultSort.property"
-              @sort="sort"
+    <template v-else>
+      <div class="c-table c-table--sortable c-list-view c-list-view--sticky-header sticky">
+        <table class="c-table__body js-table__body">
+          <thead class="c-table__header">
+            <tr>
+              <list-header
+                v-for="headerItem in headerItems"
+                :key="headerItem.property"
+                :direction="
+                  defaultSort.property === headerItem.property
+                    ? defaultSort.defaultDirection
+                    : headerItem.defaultDirection
+                "
+                :is-sortable="headerItem.isSortable"
+                :aria-label="headerItem.name"
+                :title="headerItem.name"
+                :property="headerItem.property"
+                :current-sort="defaultSort.property"
+                @sort="sort"
+              />
+            </tr>
+          </thead>
+          <tbody>
+            <list-item
+              v-for="item in sortedItems"
+              :key="item.key"
+              :class="{ '--is-in-progress': persistedActivityStates[item.id] === 'in-progress' }"
+              :item="item"
+              :item-properties="itemProperties"
+              @click.stop="setSelectionForActivity(item, $event.currentTarget)"
             />
-          </tr>
-        </thead>
-        <tbody>
-          <list-item
-            v-for="item in sortedItems"
-            :key="item.key"
-            :class="{ '--is-in-progress': persistedActivityStates[item.id] === 'in-progress' }"
-            :item="item"
-            :item-properties="itemProperties"
-            @click.stop="setSelectionForActivity(item, $event.currentTarget)"
-          />
-        </tbody>
-      </table>
-    </div>
+          </tbody>
+        </table>
+      </div>
+    </template>
   </div>
 </template>