test(e2e): update legend a11y and add test

nasa · Feb 28, 2024 · f9dc9de · f9dc9de
1 parent fc3b568
commit f9dc9de
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
@@ -305,6 +305,10 @@ test.describe('Overlay Plot', () => {
       type: 'Sine Wave Generator',
       parent: overlayPlot.uuid
     });
+    const swgB = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
 
     await page.goto(overlayPlot.url);
     // Wait for plot series data to load and be drawn
@@ -319,6 +323,23 @@ test.describe('Overlay Plot', () => {
     await page.getByRole('menuitem', { name: 'Remove' }).click();
     await page.getByRole('button', { name: 'OK', exact: true }).click();
     await expect(swgAElementsPoolItem).toBeHidden();
+
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7530'
+    });
+    await test.step('Verify that the legend is correct after removing a series', async () => {
+      await page.getByLabel('Plot Canvas').hover();
+      await page.mouse.move(50, 0, {
+        steps: 10
+      });
+      await expect(page.getByLabel('Plot Legend Item')).toHaveCount(1);
+      await expect(page.getByLabel(`Plot Legend Item for ${swgA.name}`)).toBeHidden();
+      await expect(page.getByLabel(`Plot Legend Item for ${swgB.name}`)).toBeVisible();
+    });
   });
 });
 

diff --git a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
@@ -22,7 +22,7 @@
 <template>
   <div
     class="plot-legend-item"
-    :aria-label="`Plot Legend Item for ${domainObject?.name}`"
+    :aria-label="`Plot Legend Item for ${seriesName}`"
     :class="{
       'is-stale': isStale,
       'is-status--missing': isMissing
@@ -36,9 +36,8 @@
       @mouseover.ctrl="showToolTip"
       @mouseleave="hideToolTip"
     >
-      <span class="plot-series-color-swatch" :style="{ 'background-color': colorAsHexString }">
-      </span>
-      <span class="is-status__indicator" title="This item is missing or suspect"></span>
+      <span class="plot-series-color-swatch" :style="{ 'background-color': colorAsHexString }" />
+      <span class="is-status__indicator" title="This item is missing or suspect" />
       <span class="plot-series-name">{{ nameWithUnit }}</span>
     </div>
     <div
@@ -89,6 +88,7 @@ export default {
       isMissing: false,
       colorAsHexString: '',
       nameWithUnit: '',
+      seriesName: '',
       formattedYValue: '',
       formattedXValue: '',
       mctLimitStateClass: '',
@@ -223,6 +223,7 @@ export default {
 
       this.isMissing = seriesObject.domainObject.status === 'missing';
       this.colorAsHexString = seriesObject.get('color').asHexString();
+      this.seriesName = seriesObject.domainObject.name;
       this.nameWithUnit = seriesObject.nameWithUnit();
 
       const closest = seriesObject.closest;