From 92e5cba6d329995f3499ff84d79aaec0ccf723fe Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <ozyx@users.noreply.github.com>
Date: Mon, 15 Jul 2024 13:28:29 -0700
Subject: [PATCH 1/5] test(visual): skip flaky visual test (#7776)

---
 .../visual-a11y/components/timeConductor.visual.spec.js   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/e2e/tests/visual-a11y/components/timeConductor.visual.spec.js b/e2e/tests/visual-a11y/components/timeConductor.visual.spec.js
index eef1114e40..bd089bbb6c 100644
--- a/e2e/tests/visual-a11y/components/timeConductor.visual.spec.js
+++ b/e2e/tests/visual-a11y/components/timeConductor.visual.spec.js
@@ -48,7 +48,13 @@ test.describe('Visual - Time Conductor', () => {
   //   await scanForA11yViolations(page, testInfo.title);
   // });
 
-  test('Visual - Time Conductor (Fixed time) @clock @snapshot', async ({ page }) => {
+  /**
+   * FIXME: This test fails sporadically due to layout shift during initial load.
+   * The layout shift seems to be caused by loading Open MCT's icons, which are not preloaded
+   * and load after the initial DOM content has loaded.
+   * @see https://github.com/nasa/openmct/issues/7775
+   */
+  test.fixme('Visual - Time Conductor (Fixed time) @clock @snapshot', async ({ page }) => {
     // Navigate to a specific view that uses the Time Conductor in Fixed Time mode with inspect and browse panes collapsed
     await page.goto(
       `./#/browse/mine?tc.mode=fixed&tc.startBound=${MISSION_TIME_FIXED_START}&tc.endBound=${MISSION_TIME_FIXED_END}&tc.timeSystem=utc&view=grid&hideInspector=true&hideTree=true`,

From 6983148abab54f141be97b4f54d12cb0151cb507 Mon Sep 17 00:00:00 2001
From: Even Stensberg <evenstensberg@gmail.com>
Date: Tue, 16 Jul 2024 00:09:42 +0200
Subject: [PATCH 2/5] fix(package.json): consistent props (#7768)

---
 e2e/package.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/e2e/package.json b/e2e/package.json
index 056e57761f..a891a042df 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -21,6 +21,9 @@
     "@axe-core/playwright": "4.8.5",
     "sinon": "17.0.0"
   },
-  "author": "NASA Ames Research Center",
+  "author": {
+    "name": "National Aeronautics and Space Administration",
+    "url": "https://www.nasa.gov"
+  },
   "license": "Apache-2.0"
 }
\ No newline at end of file

From db808b4d54936451ae85c0a07201c41663734fc4 Mon Sep 17 00:00:00 2001
From: Shefali Joshi <simplyrender@gmail.com>
Date: Tue, 16 Jul 2024 10:57:12 -0700
Subject: [PATCH 3/5] Plots correctly use configuration set on the parent if
 they can't their own (#7770)

* For telemetry that cannot have it's own configuration, ensure that it is correct initialized by the parent.

* stacked plot test checks that config properties for immutable telemetry points are applied correctly

* add tab navigation to inspector tabs

* add accessibility metadata to this component

* Update title to be on the correct component. Add expand/collapse logic

* clean up test

* refactor: better a11y for plot forms, fix "expand by default" test, refactor out `plotActions.js`

* a11y: aria label for plotOptionsItem

* refactor(a11y): PlotOptionsBrowse structure to have better a11y

* fixed tests

* address comment

* reverted to match previous commit

---------

Co-authored-by: Hill, John (ARC-TI)[KBR Wyle Services, LLC] <john.c.hill@nasa.gov>
Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>
---
 .../plugins/plot/autoscale.e2e.spec.js        |   8 +-
 .../plugins/plot/overlayPlot.e2e.spec.js      |  33 +--
 .../functional/plugins/plot/plotActions.js    |  42 ---
 .../plugins/plot/plotControls.e2e.spec.js     |   8 +-
 .../plugins/plot/stackedPlot.e2e.spec.js      | 147 ++++++----
 .../charts/bar/inspector/SeriesOptions.vue    |   2 +-
 .../plot/inspector/PlotOptionsBrowse.vue      | 258 +++++++++++-------
 .../plot/inspector/PlotOptionsEdit.vue        |  14 +-
 .../plot/inspector/PlotOptionsItem.vue        | 186 +++++++------
 .../plot/inspector/forms/SeriesForm.vue       |  40 ++-
 .../plot/inspector/forms/YAxisForm.vue        |  58 ++--
 .../plot/stackedPlot/StackedPlotItem.vue      |   5 +-
 src/ui/inspector/InspectorTabs.vue            |   2 +
 13 files changed, 455 insertions(+), 348 deletions(-)
 delete mode 100644 e2e/tests/functional/plugins/plot/plotActions.js

diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js
index 9cfbd63cfd..1cd53295c3 100644
--- a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js
@@ -26,7 +26,6 @@ Testsuite for plot autoscale.
 
 import { createDomainObjectWithDefaults } from '../../../../appActions.js';
 import { expect, test } from '../../../../pluginFixtures.js';
-import { setUserDefinedMinAndMax, turnOffAutoscale } from './plotActions.js';
 test.use({
   viewport: {
     width: 1280,
@@ -62,9 +61,12 @@ test.describe('Autoscale', () => {
     await page.getByLabel('Edit Object').click();
 
     await page.getByRole('tab', { name: 'Config' }).click();
-    await turnOffAutoscale(page);
 
-    await setUserDefinedMinAndMax(page, '-2', '2');
+    // turn off autoscale
+    await page.getByRole('checkbox', { name: 'Auto scale' }).uncheck();
+
+    await page.getByLabel('Y Axis 1 Minimum value').fill('-2');
+    await page.getByLabel('Y Axis 1 Maximum value').fill('2');
 
     // save
     await page.click('button[title="Save"]');
diff --git a/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
index 114d8beb79..c5a9aa6874 100644
--- a/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
@@ -91,7 +91,7 @@ test.describe('Overlay Plot', () => {
     // Assert that the legend is collapsed by default
     await expect(page.getByLabel('Plot Legend Collapsed')).toBeVisible();
     await expect(page.getByLabel('Plot Legend Expanded')).toBeHidden();
-    await expect(page.getByLabel('Expand by Default')).toHaveText('No');
+    await expect(page.getByLabel('Expand by Default')).toHaveText(/No/);
 
     expect(await page.getByLabel('Plot Legend Item').count()).toBe(3);
 
@@ -106,7 +106,7 @@ test.describe('Overlay Plot', () => {
     await expect(page.getByRole('cell', { name: 'Name' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'Value' })).toBeVisible();
-    await expect(page.getByLabel('Expand by Default')).toHaveText('Yes');
+    await expect(page.getByLabel('Expand by Default')).toHaveText(/Yes/);
     await expect(page.getByLabel('Plot Legend Item')).toHaveCount(3);
 
     // Assert that the legend is expanded on page load
@@ -116,7 +116,7 @@ test.describe('Overlay Plot', () => {
     await expect(page.getByRole('cell', { name: 'Name' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
     await expect(page.getByRole('cell', { name: 'Value' })).toBeVisible();
-    await expect(page.getByLabel('Expand by Default')).toHaveText('Yes');
+    await expect(page.getByLabel('Expand by Default')).toHaveText(/Yes/);
     await expect(page.getByLabel('Plot Legend Item')).toHaveCount(3);
   });
 
@@ -144,15 +144,8 @@ test.describe('Overlay Plot', () => {
 
     // Expand the "Sine Wave Generator" plot series options and enable limit lines
     await page.getByRole('tab', { name: 'Config' }).click();
-    await page
-      .getByRole('list', { name: 'Plot Series Properties' })
-      .locator('span')
-      .first()
-      .click();
-    await page
-      .getByRole('list', { name: 'Plot Series Properties' })
-      .locator('[title="Display limit lines"]~div input')
-      .check();
+    await page.getByLabel('Expand Sine Wave Generator:').click();
+    await page.getByLabel('Limit lines').check();
 
     await assertLimitLinesExistAndAreVisible(page);
 
@@ -215,21 +208,13 @@ test.describe('Overlay Plot', () => {
 
     // Expand the "Sine Wave Generator" plot series options and enable limit lines
     await page.getByRole('tab', { name: 'Config' }).click();
-    await page
-      .getByRole('list', { name: 'Plot Series Properties' })
-      .locator('span')
-      .first()
-      .click();
-    await page
-      .getByRole('list', { name: 'Plot Series Properties' })
-      .getByRole('checkbox', { name: 'Limit lines' })
-      .check();
+    await page.getByLabel('Expand Sine Wave Generator:').click();
+    await page.getByLabel('Limit lines').check();
 
     await assertLimitLinesExistAndAreVisible(page);
 
-    // Save (exit edit mode)
-    await page.locator('button[title="Save"]').click();
-    await page.locator('li[title="Save and Finish Editing"]').click();
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     const initialCoords = await assertLimitLinesExistAndAreVisible(page);
     // Resize the chart container by showing the snapshot pane.
diff --git a/e2e/tests/functional/plugins/plot/plotActions.js b/e2e/tests/functional/plugins/plot/plotActions.js
deleted file mode 100644
index 14e697f3c6..0000000000
--- a/e2e/tests/functional/plugins/plot/plotActions.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2024, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/**
- * @param {import('@playwright/test').Page} page
- */
-async function turnOffAutoscale(page) {
-  // uncheck autoscale
-  await page.getByRole('checkbox', { name: 'Auto scale' }).uncheck();
-}
-
-/**
- * @param {import('@playwright/test').Page} page
- * @param {string} min
- * @param {string} max
- */
-async function setUserDefinedMinAndMax(page, min, max) {
-  // set minimum value
-  await page.getByRole('spinbutton').first().fill(min);
-  // set maximum value
-  await page.getByRole('spinbutton').nth(1).fill(max);
-}
-
-export { setUserDefinedMinAndMax, turnOffAutoscale };
diff --git a/e2e/tests/functional/plugins/plot/plotControls.e2e.spec.js b/e2e/tests/functional/plugins/plot/plotControls.e2e.spec.js
index b66e0a8e65..ba614cf90c 100644
--- a/e2e/tests/functional/plugins/plot/plotControls.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/plotControls.e2e.spec.js
@@ -33,7 +33,6 @@ import {
   setStartOffset
 } from '../../../../appActions.js';
 import { expect, test } from '../../../../pluginFixtures.js';
-import { setUserDefinedMinAndMax, turnOffAutoscale } from './plotActions.js';
 
 test.describe('Plot Controls', () => {
   let overlayPlot;
@@ -78,9 +77,12 @@ test.describe('Plot Controls', () => {
     await page.getByLabel('Edit Object').click();
 
     await page.getByRole('tab', { name: 'Config' }).click();
-    await turnOffAutoscale(page);
 
-    await setUserDefinedMinAndMax(page, '-1', '1');
+    // turn off autoscale
+    await page.getByRole('checkbox', { name: 'Auto scale' }).uncheck();
+
+    await page.getByLabel('Y Axis 1 Minimum value').fill('-1');
+    await page.getByLabel('Y Axis 1 Maximum value').fill('1');
 
     // save
     await page.click('button[title="Save"]');
diff --git a/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js
index 3cffb3b28c..aed64e7e8c 100644
--- a/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js
@@ -39,19 +39,23 @@ test.describe('Stacked Plot', () => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
     stackedPlot = await createDomainObjectWithDefaults(page, {
-      type: 'Stacked Plot'
+      type: 'Stacked Plot',
+      name: 'Stacked Plot'
     });
 
     swgA = await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator A',
       parent: stackedPlot.uuid
     });
     swgB = await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator B',
       parent: stackedPlot.uuid
     });
     swgC = await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator C',
       parent: stackedPlot.uuid
     });
   });
@@ -151,40 +155,80 @@ test.describe('Stacked Plot', () => {
     await page.getByRole('tab', { name: 'Config' }).click();
 
     // Click on the 1st plot
-    await page.locator(`[aria-label="Stacked Plot Item ${swgA.name}"] canvas`).nth(1).click();
+    await page
+      .getByLabel('Stacked Plot Item Sine Wave Generator A')
+      .getByLabel('Plot Canvas')
+      .click();
 
     // Assert that the inspector shows the Y Axis properties for swgA
-    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
-      'Plot Series'
-    );
+    await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
     await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
     await expect(
-      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
-    ).toContainText(swgA.name);
+      page.getByLabel('Inspector Views').getByText('Sine Wave Generator A', { exact: true })
+    ).toBeVisible();
 
     // Click on the 2nd plot
-    await page.locator(`[aria-label="Stacked Plot Item ${swgB.name}"] canvas`).nth(1).click();
-
+    await page
+      .getByLabel('Stacked Plot Item Sine Wave Generator B')
+      .getByLabel('Plot Canvas')
+      .click();
     // Assert that the inspector shows the Y Axis properties for swgB
-    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
-      'Plot Series'
-    );
+    await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
     await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
     await expect(
-      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
-    ).toContainText(swgB.name);
+      page.getByLabel('Inspector Views').getByText('Sine Wave Generator B', { exact: true })
+    ).toBeVisible();
 
     // Click on the 3rd plot
-    await page.locator(`[aria-label="Stacked Plot Item ${swgC.name}"] canvas`).nth(1).click();
-
-    // Assert that the inspector shows the Y Axis properties for swgC
-    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
-      'Plot Series'
-    );
+    await page
+      .getByLabel('Stacked Plot Item Sine Wave Generator C')
+      .getByLabel('Plot Canvas')
+      .click();
+    // Assert that the inspector shows the Y Axis properties for swgB
+    await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
     await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
     await expect(
-      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
-    ).toContainText(swgC.name);
+      page.getByLabel('Inspector Views').getByText('Sine Wave Generator C', { exact: true })
+    ).toBeVisible();
+
+    // Go into edit mode
+    await page.getByLabel('Edit Object').click();
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+
+    // Click on the 1st plot
+    await page.getByLabel('Stacked Plot Item Sine Wave Generator A').click();
+
+    // Assert that the inspector shows the Y Axis properties for swgA
+    await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
+    await expect(
+      page.getByLabel('Inspector Views').getByText('Sine Wave Generator A', { exact: true })
+    ).toBeVisible();
+
+    // Click on the 2nd plot
+    await page.getByLabel('Stacked Plot Item Sine Wave Generator B').click();
+
+    // Assert that the inspector shows the Y Axis properties for swgB
+    await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
+    await expect(
+      page.getByLabel('Inspector Views').getByText('Sine Wave Generator B', { exact: true })
+    ).toBeVisible();
+
+    // Click on the 3rd plot
+    await page.getByLabel('Stacked Plot Item Sine Wave Generator C').click();
+
+    // Assert that the inspector shows the Y Axis properties for swgC
+    await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
+    await expect(
+      page.getByLabel('Inspector Views').getByText('Sine Wave Generator C', { exact: true })
+    ).toBeVisible();
+  });
+
+  test('Changing properties of an immutable child plot are applied correctly', async ({ page }) => {
+    await page.goto(stackedPlot.url);
 
     // Go into edit mode
     await page.getByLabel('Edit Object').click();
@@ -192,40 +236,35 @@ test.describe('Stacked Plot', () => {
     await page.getByRole('tab', { name: 'Config' }).click();
 
     // Click on canvas for the 1st plot
-    await page.locator(`[aria-label="Stacked Plot Item ${swgA.name}"]`).click();
+    await page.getByLabel(`Stacked Plot Item ${swgA.name}`).click();
 
-    // Assert that the inspector shows the Y Axis properties for swgA
-    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
-      'Plot Series'
-    );
-    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
+    // Expand config for the series
+    await page.getByLabel('Expand Sine Wave Generator').click();
+
+    // turn off alarm markers
+    await page.getByLabel('Alarm Markers').uncheck();
+
+    // save
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // reload page and waitForPlotsToRender
+    await page.reload();
+    await waitForPlotsToRender(page);
+
+    // Click on canvas for the 1st plot
+    await page.getByLabel(`Stacked Plot Item ${swgA.name}`).click();
+
+    // Expand config for the series
+    //TODO Fix this locator
+    await page.getByLabel('Expand Sine Wave Generator A generator').click();
+
+    // Assert that alarm markers are still turned off
     await expect(
-      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
-    ).toContainText(swgA.name);
-
-    //Click on canvas for the 2nd plot
-    await page.locator(`[aria-label="Stacked Plot Item ${swgB.name}"]`).click();
-
-    // Assert that the inspector shows the Y Axis properties for swgB
-    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
-      'Plot Series'
-    );
-    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
-    await expect(
-      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
-    ).toContainText(swgB.name);
-
-    //Click on canvas for the 3rd plot
-    await page.locator(`[aria-label="Stacked Plot Item ${swgC.name}"]`).click();
-
-    // Assert that the inspector shows the Y Axis properties for swgC
-    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
-      'Plot Series'
-    );
-    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
-    await expect(
-      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
-    ).toContainText(swgC.name);
+      page
+        .getByTitle('Display markers visually denoting points in alarm.')
+        .getByRole('cell', { name: 'Disabled' })
+    ).toBeVisible();
   });
 
   test('the legend toggles between aggregate and per child', async ({ page }) => {
diff --git a/src/plugins/charts/bar/inspector/SeriesOptions.vue b/src/plugins/charts/bar/inspector/SeriesOptions.vue
index 06b02d52b8..eae12be23b 100644
--- a/src/plugins/charts/bar/inspector/SeriesOptions.vue
+++ b/src/plugins/charts/bar/inspector/SeriesOptions.vue
@@ -21,7 +21,7 @@
 -->
 <template>
   <ul>
-    <li class="c-tree__item menus-to-left" :class="aliasCss">
+    <li class="c-tree__item menus-to-left" :class="aliasCss" role="treeitem">
       <span
         class="c-disclosure-triangle is-enabled flex-elem"
         :class="expandedCssClass"
diff --git a/src/plugins/plot/inspector/PlotOptionsBrowse.vue b/src/plugins/plot/inspector/PlotOptionsBrowse.vue
index ba4e368266..b690d1fbe5 100644
--- a/src/plugins/plot/inspector/PlotOptionsBrowse.vue
+++ b/src/plugins/plot/inspector/PlotOptionsBrowse.vue
@@ -20,109 +20,55 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div v-if="loaded" class="js-plot-options-browse">
-    <ul v-if="!isStackedPlotObject" class="c-tree" aria-label="Plot Series Properties">
-      <h2 class="--first" title="Plot series display properties in this object">Plot Series</h2>
-      <PlotOptionsItem v-for="series in plotSeries" :key="series.keyString" :series="series" />
-    </ul>
-    <div v-if="plotSeries.length && !isStackedPlotObject" class="grid-properties">
-      <ul
+  <ul v-if="loaded" class="js-plot-options-browse" aria-label="Plot Configuration">
+    <li v-if="showPlotSeries" class="c-tree" aria-labelledby="plot-series-header">
+      <h2 id="plot-series-header" class="--first">Plot Series</h2>
+      <ul aria-label="Plot Series Items" class="l-inspector-part">
+        <PlotOptionsItem v-for="series in plotSeries" :key="series.keyString" :series="series" />
+      </ul>
+    </li>
+    <ul v-if="showYAxisProperties" aria-label="Y Axes" class="l-inspector-part js-yaxis-properties">
+      <li
         v-for="(yAxis, index) in yAxesWithSeries"
         :key="`yAxis-${index}`"
-        class="l-inspector-part js-yaxis-properties"
-        :aria-label="
-          yAxesWithSeries.length > 1 ? `Y Axis ${yAxis.id} Properties` : 'Y Axis Properties'
-        "
+        :aria-labelledby="getYAxisHeaderId(index)"
       >
-        <h2 title="Y axis settings for this object">
+        <h2 :id="getYAxisHeaderId(index)">
           Y Axis {{ yAxesWithSeries.length > 1 ? yAxis.id : '' }}
         </h2>
-        <li class="grid-row">
-          <div class="grid-cell label" title="Manually override how the Y axis is labeled.">
-            Label
-          </div>
-          <div class="grid-cell value">{{ yAxis.label ? yAxis.label : 'Not defined' }}</div>
-        </li>
-        <li class="grid-row">
-          <div class="grid-cell label" title="Enable log mode.">Log mode</div>
-          <div class="grid-cell value">
-            {{ yAxis.logMode ? 'Enabled' : 'Disabled' }}
-          </div>
-        </li>
-        <li class="grid-row">
-          <div
-            class="grid-cell label"
-            title="Automatically scale the Y axis to keep all values in view."
+        <ul class="grid-properties" :aria-label="`Y Axis ${yAxis.id} Properties`">
+          <li
+            v-for="(prop, key) in yAxisProperties(yAxis)"
+            :key="key"
+            :aria-labelledby="getYAxisPropId(index, prop.label)"
+            class="grid-row"
+            role="grid"
           >
-            Auto scale
-          </div>
-          <div class="grid-cell value">
-            {{ yAxis.autoscale ? 'Enabled: ' + yAxis.autoscalePadding : 'Disabled' }}
-          </div>
-        </li>
-        <li v-if="!yAxis.autoscale && yAxis.rangeMin !== ''" class="grid-row">
-          <div class="grid-cell label" title="Minimum Y axis value.">Minimum value</div>
-          <div class="grid-cell value">{{ yAxis.rangeMin }}</div>
-        </li>
-        <li v-if="!yAxis.autoscale && yAxis.rangeMax !== ''" class="grid-row">
-          <div class="grid-cell label" title="Maximum Y axis value.">Maximum value</div>
-          <div class="grid-cell value">{{ yAxis.rangeMax }}</div>
-        </li>
-      </ul>
-    </div>
-    <div v-if="isStackedPlotObject || !isNestedWithinAStackedPlot" class="grid-properties">
-      <ul class="l-inspector-part js-legend-properties">
-        <h2 class="--first" title="Legend settings for this object">Legend</h2>
-        <li v-if="isStackedPlotObject" class="grid-row">
-          <div class="grid-cell label" title="Display legends per sub plot.">
-            Show legend per plot
-          </div>
-          <div class="grid-cell value">{{ showLegendsForChildren ? 'Yes' : 'No' }}</div>
-        </li>
-        <li v-if="showLegendDetails" class="grid-row">
-          <div
-            class="grid-cell label"
-            title="The position of the legend relative to the plot display area."
-          >
-            Position
-          </div>
-          <div class="grid-cell value capitalize">{{ position }}</div>
-        </li>
-        <li v-if="showLegendDetails" class="grid-row">
-          <div class="grid-cell label" title="Hide the legend when the plot is small">
-            Hide when plot small
-          </div>
-          <div class="grid-cell value">{{ hideLegendWhenSmall ? 'Yes' : 'No' }}</div>
-        </li>
-        <li v-if="showLegendDetails" class="grid-row">
-          <div class="grid-cell label" title="Show the legend expanded by default">
-            Expand by Default
-          </div>
-          <div aria-label="Expand by Default" class="grid-cell value">
-            {{ expandByDefault ? 'Yes' : 'No' }}
-          </div>
-        </li>
-        <li v-if="showLegendDetails" class="grid-row">
-          <div class="grid-cell label" title="What to display in the legend when it's collapsed.">
-            Show when collapsed:
-          </div>
-          <div class="grid-cell value">{{ valueToShowWhenCollapsed.replace('nearest', '') }}</div>
-        </li>
-        <li v-if="showLegendDetails" class="grid-row">
-          <div class="grid-cell label" title="What to display in the legend when it's expanded.">
-            Show when expanded:
-          </div>
-          <div class="grid-cell value comma-list">
-            <span v-if="showTimestampWhenExpanded">Timestamp</span>
-            <span v-if="showValueWhenExpanded">Value</span>
-            <span v-if="showMinimumWhenExpanded">Min</span>
-            <span v-if="showMaximumWhenExpanded">Max</span>
-            <span v-if="showUnitsWhenExpanded">Unit</span>
+            <div
+              :id="getYAxisPropId(index, prop.label)"
+              class="grid-cell label"
+              :title="prop.title"
+              role="gridcell"
+            >
+              {{ prop.label }}
+            </div>
+            <div class="grid-cell value" role="gridcell">{{ prop.value }}</div>
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <li v-if="showLegendProperties" class="grid-properties" aria-label="Legend Configuration">
+      <ul class="l-inspector-part js-legend-properties" aria-labelledby="legend-header">
+        <h2 id="legend-header" class="--first">Legend</h2>
+        <li v-for="(prop, key) in legendProperties" :key="key" class="grid-row">
+          <div class="u-contents" :aria-label="prop.label">
+            <div class="grid-cell label" :title="prop.title">{{ prop.label }}</div>
+            <div class="grid-cell value" :class="prop.class">{{ prop.value }}</div>
           </div>
         </li>
       </ul>
-    </div>
-  </div>
+    </li>
+  </ul>
 </template>
 
 <script>
@@ -173,6 +119,60 @@ export default {
     },
     yAxesWithSeries() {
       return this.yAxes.filter((yAxis) => yAxis.seriesCount > 0);
+    },
+    showPlotSeries() {
+      return !this.isStackedPlotObject;
+    },
+    showYAxisProperties() {
+      return this.plotSeries.length && !this.isStackedPlotObject;
+    },
+    showLegendProperties() {
+      return this.isStackedPlotObject || !this.isNestedWithinAStackedPlot;
+    },
+    legendProperties() {
+      const props = {};
+
+      if (this.isStackedPlotObject) {
+        props.showLegendsForChildren = {
+          label: 'Show legend per plot',
+          title: 'Display legends per sub plot.',
+          value: this.showLegendsForChildren ? 'Yes' : 'No'
+        };
+      }
+
+      if (this.showLegendDetails) {
+        Object.assign(props, {
+          position: {
+            label: 'Position',
+            title: 'The position of the legend relative to the plot display area.',
+            value: this.position,
+            class: 'capitalize'
+          },
+          hideLegendWhenSmall: {
+            label: 'Hide when plot small',
+            title: 'Hide the legend when the plot is small',
+            value: this.hideLegendWhenSmall ? 'Yes' : 'No'
+          },
+          expandByDefault: {
+            label: 'Expand by Default',
+            title: 'Show the legend expanded by default',
+            value: this.expandByDefault ? 'Yes' : 'No'
+          },
+          valueToShowWhenCollapsed: {
+            label: 'Show when collapsed:',
+            title: "What to display in the legend when it's collapsed.",
+            value: this.valueToShowWhenCollapsed.replace('nearest', '')
+          },
+          expandedValues: {
+            label: 'Show when expanded:',
+            title: "What to display in the legend when it's expanded.",
+            value: this.getExpandedValues(),
+            class: 'comma-list'
+          }
+        });
+      }
+
+      return props;
     }
   },
   mounted() {
@@ -282,6 +282,76 @@ export default {
       if (foundYAxis) {
         foundYAxis.seriesCount = foundYAxis.seriesCount + updateCount;
       }
+    },
+    getYAxisHeaderId(index) {
+      return `yAxis-${index}-header`;
+    },
+
+    getYAxisPropId(index, label) {
+      return `y-axis-${index}-${label.toLowerCase().replace(' ', '-')}`;
+    },
+
+    yAxisAriaLabel(yAxis) {
+      return this.yAxesWithSeries.length > 1
+        ? `Y Axis ${yAxis.id} Properties`
+        : 'Y Axis Properties';
+    },
+    yAxisProperties(yAxis) {
+      const props = {
+        label: {
+          label: 'Label',
+          title: 'Manually override how the Y axis is labeled.',
+          value: yAxis.label ? yAxis.label : 'Not defined'
+        },
+        logMode: {
+          label: 'Log mode',
+          title: 'Enable log mode.',
+          value: yAxis.logMode ? 'Enabled' : 'Disabled'
+        },
+        autoscale: {
+          label: 'Auto scale',
+          title: 'Automatically scale the Y axis to keep all values in view.',
+          value: yAxis.autoscale ? `Enabled: ${yAxis.autoscalePadding}` : 'Disabled'
+        }
+      };
+
+      if (!yAxis.autoscale) {
+        if (yAxis.rangeMin !== '') {
+          props.rangeMin = {
+            label: 'Minimum value',
+            title: 'Minimum Y axis value.',
+            value: yAxis.rangeMin
+          };
+        }
+        if (yAxis.rangeMax !== '') {
+          props.rangeMax = {
+            label: 'Maximum value',
+            title: 'Maximum Y axis value.',
+            value: yAxis.rangeMax
+          };
+        }
+      }
+
+      return props;
+    },
+    getExpandedValues() {
+      const values = [];
+      if (this.showTimestampWhenExpanded) {
+        values.push('Timestamp');
+      }
+      if (this.showValueWhenExpanded) {
+        values.push('Value');
+      }
+      if (this.showMinimumWhenExpanded) {
+        values.push('Min');
+      }
+      if (this.showMaximumWhenExpanded) {
+        values.push('Max');
+      }
+      if (this.showUnitsWhenExpanded) {
+        values.push('Unit');
+      }
+      return values.join(', ');
     }
   }
 };
diff --git a/src/plugins/plot/inspector/PlotOptionsEdit.vue b/src/plugins/plot/inspector/PlotOptionsEdit.vue
index 114c768123..18a06e19e1 100644
--- a/src/plugins/plot/inspector/PlotOptionsEdit.vue
+++ b/src/plugins/plot/inspector/PlotOptionsEdit.vue
@@ -21,8 +21,8 @@
 -->
 <template>
   <div v-if="loaded" class="js-plot-options-edit">
-    <ul v-if="!isStackedPlotObject" class="c-tree" aria-label="Plot Series Properties">
-      <h2 class="--first" title="Display properties for this object">Plot Series</h2>
+    <ul v-if="!isStackedPlotObject" class="c-tree" role="tree">
+      <h2 class="--first" title="Display properties for this Plot Series object">Plot Series</h2>
       <li v-for="series in plotSeries" :key="series.keyString">
         <series-form :series="series" @series-updated="updateSeriesConfigForObject" />
       </li>
@@ -33,15 +33,18 @@
       :key="`yAxis-${index}`"
       class="grid-properties js-yaxis-grid-properties"
       :y-axis="config.yAxis"
+      role="group"
+      aria-labelledby="y-axis-group"
       @series-updated="updateSeriesConfigForObject"
     />
     <ul
       v-if="isStackedPlotObject || !isStackedPlotNestedObject"
       class="l-inspector-part"
       aria-label="Legend Properties"
+      role="tree"
     >
       <h2 class="--first" title="Legend options">Legend</h2>
-      <legend-form class="grid-properties" :legend="config.legend" />
+      <legend-form role="treeitem" tabindex="0" class="grid-properties" :legend="config.legend" />
     </ul>
   </div>
 </template>
@@ -83,7 +86,10 @@ export default {
       );
     },
     yAxesIds() {
-      return !this.isStackedPlotObject && this.yAxes.filter((yAxis) => yAxis.seriesCount > 0);
+      if (this.isStackedPlotObject) {
+        return [];
+      }
+      return this.yAxes.filter((yAxis) => yAxis.seriesCount > 0);
     }
   },
   created() {
diff --git a/src/plugins/plot/inspector/PlotOptionsItem.vue b/src/plugins/plot/inspector/PlotOptionsItem.vue
index 2513283b88..fcac8b955f 100644
--- a/src/plugins/plot/inspector/PlotOptionsItem.vue
+++ b/src/plugins/plot/inspector/PlotOptionsItem.vue
@@ -20,98 +20,93 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <ul>
-    <li class="c-tree__item menus-to-left" :class="isAliasClass">
-      <span
-        class="c-disclosure-triangle is-enabled flex-elem"
-        :class="expandedCssClass"
-        @click="toggleExpanded"
-      >
-      </span>
-      <div class="c-object-label" :class="statusClass">
-        <div class="c-object-label__type-icon" :class="getSeriesClass">
-          <span class="is-status__indicator" title="This item is missing or suspect"></span>
-        </div>
-        <div class="c-object-label__name">{{ series.domainObject.name }}</div>
+  <li class="c-tree__item menus-to-left" :class="isAliasClass" :aria-label="ariaLabel">
+    <span
+      class="c-disclosure-triangle is-enabled flex-elem"
+      :class="expandedCssClass"
+      role="button"
+      :aria-label="ariaLabelExpandCollapse"
+      tabindex="0"
+      @click="toggleExpanded"
+      @keydown.enter="toggleExpanded"
+    ></span>
+    <div class="c-object-label" :class="statusClass">
+      <div class="c-object-label__type-icon" :class="getSeriesClass">
+        <span class="is-status__indicator" title="This item is missing or suspect"></span>
       </div>
-    </li>
-    <li v-show="expanded" class="c-tree__item menus-to-left" role="table">
-      <ul class="grid-properties js-plot-options-browse-properties" role="rowgroup">
-        <li class="grid-row" role="row">
-          <div
-            class="grid-cell label"
-            title="The field to be plotted as a value for this series."
-            role="cell"
-          >
-            Value
-          </div>
-          <div class="grid-cell value" role="cell">
-            {{ yKey }}
-          </div>
-        </li>
-        <li class="grid-row" role="row">
-          <div
-            class="grid-cell label"
-            title="The rendering method to join lines for this series."
-            role="cell"
-          >
-            Line Method
-          </div>
-          <div class="grid-cell value" role="cell">
-            {{
-              {
-                none: 'None',
-                linear: 'Linear interpolation',
-                stepAfter: 'Step After'
-              }[interpolate]
-            }}
-          </div>
-        </li>
-        <li class="grid-row" role="row">
-          <div
-            class="grid-cell label"
-            title="Whether markers are displayed, and their size."
-            role="cell"
-          >
-            Markers
-          </div>
-          <div class="grid-cell value" role="cell">
-            {{ markerOptionsDisplayText }}
-          </div>
-        </li>
-        <li class="grid-row" role="row">
-          <div
-            class="grid-cell label"
-            title="Display markers visually denoting points in alarm."
-            role="cell"
-          >
-            Alarm Markers
-          </div>
-          <div class="grid-cell value" role="cell">
-            {{ alarmMarkers ? 'Enabled' : 'Disabled' }}
-          </div>
-        </li>
-        <li class="grid-row" role="row">
-          <div
-            class="grid-cell label"
-            title="Display lines visually denoting alarm limits."
-            role="cell"
-          >
-            Limit Lines
-          </div>
-          <div class="grid-cell value" role="cell">
-            {{ limitLines ? 'Enabled' : 'Disabled' }}
-          </div>
-        </li>
-        <ColorSwatch
-          :current-color="seriesHexColor"
-          edit-title="Manually set the plot line and marker color for this series."
-          view-title="The plot line and marker color for this series."
-          short-label="Color"
-        />
-      </ul>
-    </li>
-  </ul>
+      <div class="c-object-label__name">{{ series.domainObject.name }}</div>
+    </div>
+  </li>
+  <li v-show="expanded" class="c-tree__item menus-to-left" role="table">
+    <ul class="grid-properties js-plot-options-browse-properties" role="rowgroup">
+      <li class="grid-row" role="row">
+        <div
+          class="grid-cell label"
+          title="The field to be plotted as a value for this series."
+          role="cell"
+        >
+          Value
+        </div>
+        <div class="grid-cell value" role="cell">
+          {{ yKey }}
+        </div>
+      </li>
+      <li class="grid-row" role="row">
+        <div
+          class="grid-cell label"
+          title="The rendering method to join lines for this series."
+          role="cell"
+        >
+          Line Method
+        </div>
+        <div class="grid-cell value" role="cell">
+          {{
+            {
+              none: 'None',
+              linear: 'Linear interpolation',
+              stepAfter: 'Step After'
+            }[interpolate]
+          }}
+        </div>
+      </li>
+      <li class="grid-row" role="row">
+        <div
+          class="grid-cell label"
+          title="Whether markers are displayed, and their size."
+          role="cell"
+        >
+          Markers
+        </div>
+        <div class="grid-cell value" role="cell">
+          {{ markerOptionsDisplayText }}
+        </div>
+      </li>
+      <li class="grid-row" role="row" title="Display markers visually denoting points in alarm.">
+        <div class="grid-cell label" role="cell">Alarm Markers</div>
+        <div class="grid-cell value" role="cell">
+          {{ alarmMarkers ? 'Enabled' : 'Disabled' }}
+        </div>
+      </li>
+      <li class="grid-row" role="row">
+        <div
+          class="grid-cell label"
+          title="Display lines visually denoting alarm limits."
+          role="cell"
+        >
+          Limit Lines
+        </div>
+        <div class="grid-cell value" role="cell">
+          {{ limitLines ? 'Enabled' : 'Disabled' }}
+        </div>
+      </li>
+      <ColorSwatch
+        :current-color="seriesHexColor"
+        edit-title="Manually set the plot line and marker color for this series."
+        view-title="The plot line and marker color for this series."
+        short-label="Color"
+      />
+    </ul>
+  </li>
 </template>
 
 <script>
@@ -137,6 +132,15 @@ export default {
     };
   },
   computed: {
+    ariaLabel() {
+      return this.series?.domainObject?.name ?? '';
+    },
+    ariaLabelExpandCollapse() {
+      const name = this.series.domainObject.name ? ` ${this.series.domainObject.name}` : '';
+      const type = this.series.domainObject.type ? ` ${this.series.domainObject.type}` : '';
+
+      return `${this.expanded ? 'Collapse' : 'Expand'}${name}${type}`;
+    },
     isAliasClass() {
       let cssClass = '';
       const domainObjectPath = [this.series.domainObject, ...this.path];
diff --git a/src/plugins/plot/inspector/forms/SeriesForm.vue b/src/plugins/plot/inspector/forms/SeriesForm.vue
index d0a39e2d74..afad59da87 100644
--- a/src/plugins/plot/inspector/forms/SeriesForm.vue
+++ b/src/plugins/plot/inspector/forms/SeriesForm.vue
@@ -21,15 +21,19 @@
 -->
 <template>
   <ul>
-    <li class="c-tree__item menus-to-left" :class="isAliasCss">
+    <li class="c-tree__item menus-to-left" :class="isAliasCss" role="treeitem">
       <span
         class="c-disclosure-triangle is-enabled flex-elem"
         :class="expandedCssClass"
+        role="button"
+        :aria-label="ariaLabelValue"
+        tabindex="0"
         @click="toggleExpanded"
+        @keydown.enter="toggleExpanded"
       >
       </span>
       <div :class="objectLabelCss">
-        <div class="c-object-label__type-icon" :class="[seriesCss]">
+        <div class="c-object-label__type-icon" :class="seriesCss">
           <span class="is-status__indicator" title="This item is missing or suspect"></span>
         </div>
         <div class="c-object-label__name">{{ series.domainObject.name }}</div>
@@ -43,12 +47,7 @@
         </div>
         <div class="grid-cell value">
           <select v-model="yKey" @change="updateForm('yKey')">
-            <option
-              v-for="option in yKeyOptions"
-              :key="option.value"
-              :value="option.value"
-              :selected="option.value == yKey"
-            >
+            <option v-for="option in yKeyOptions" :key="option.value" :value="option.value">
               {{ option.name }}
             </option>
           </select>
@@ -84,10 +83,15 @@
       </li>
       <li class="grid-row">
         <div class="grid-cell label" title="Display markers visually denoting points in alarm.">
-          Alarm Markers
+          <label for="alarm-markers-checkbox">Alarm Markers</label>
         </div>
         <div class="grid-cell value">
-          <input v-model="alarmMarkers" type="checkbox" @change="updateForm('alarmMarkers')" />
+          <input
+            id="alarm-markers-checkbox"
+            v-model="alarmMarkers"
+            type="checkbox"
+            @change="updateForm('alarmMarkers')"
+          />
         </div>
       </li>
       <li class="grid-row">
@@ -169,18 +173,24 @@ export default {
     };
   },
   computed: {
+    ariaLabelValue() {
+      const name = this.series.domainObject.name ? ` ${this.series.domainObject.name}` : '';
+      const type = this.series.domainObject.type ? ` ${this.series.domainObject.type}` : '';
+
+      return `${this.expanded ? 'Collapse' : 'Expand'}${name}${type}`;
+    },
     colorPalette() {
       return this.series.collection.palette.groups();
     },
     objectLabelCss() {
-      return this.status ? `c-object-label is-status--${this.status}'` : 'c-object-label';
+      return this.status ? `c-object-label is-status--${this.status}` : 'c-object-label';
     },
     seriesCss() {
-      let type = this.openmct.types.get(this.series.domainObject.type);
+      const type = this.openmct.types.get(this.series.domainObject.type);
+      const baseClass = 'c-object-label__type-icon';
+      const typeClass = type.definition.cssClass || '';
 
-      return type.definition.cssClass
-        ? `c-object-label__type-icon ${type.definition.cssClass}`
-        : `c-object-label__type-icon`;
+      return `${baseClass} ${typeClass}`.trim();
     },
     isAliasCss() {
       let cssClass = '';
diff --git a/src/plugins/plot/inspector/forms/YAxisForm.vue b/src/plugins/plot/inspector/forms/YAxisForm.vue
index de6c2b88c7..6cc363535f 100644
--- a/src/plugins/plot/inspector/forms/YAxisForm.vue
+++ b/src/plugins/plot/inspector/forms/YAxisForm.vue
@@ -31,25 +31,36 @@
           Label
         </div>
         <div class="grid-cell value">
-          <input v-model="label" class="c-input--flex" type="text" @change="updateForm('label')" />
-        </div>
-      </li>
-      <li class="grid-row">
-        <div id="log-mode-checkbox" class="grid-cell label" title="Enable log mode.">Log mode</div>
-        <div class="grid-cell value">
-          <!-- eslint-disable-next-line vue/html-self-closing -->
+          <label :for="`y-axis-${id}-label`" class="visually-hidden">Y Axis {{ id }} Label</label>
           <input
-            v-model="logMode"
-            class="js-log-mode-input"
-            aria-labelledby="log-mode-checkbox"
-            type="checkbox"
-            @change="updateForm('logMode')"
+            :id="`y-axis-${id}-label`"
+            v-model="label"
+            class="c-input--flex"
+            type="text"
+            @change="updateForm('label')"
           />
         </div>
       </li>
+      <li class="grid-row">
+        <div :id="`log-mode-checkbox-${id}`" class="grid-cell label" title="Enable log mode.">
+          Log mode
+        </div>
+        <div class="grid-cell value">
+          <input
+            :id="`log-mode-input-${id}`"
+            v-model="logMode"
+            class="js-log-mode-input"
+            type="checkbox"
+            @change="updateForm('logMode')"
+          />
+          <label :for="`log-mode-input-${id}`" class="visually-hidden"
+            >Y Axis {{ id }} Log mode</label
+          >
+        </div>
+      </li>
       <li class="grid-row">
         <div
-          id="autoscale-checkbox"
+          :id="`autoscale-checkbox-${id}`"
           class="grid-cell label"
           title="Automatically scale the Y axis to keep all values in view."
         >
@@ -57,11 +68,14 @@
         </div>
         <div class="grid-cell value">
           <input
+            :id="`autoscale-input-${id}`"
             v-model="autoscale"
             type="checkbox"
-            aria-labelledby="autoscale-checkbox"
             @change="updateForm('autoscale')"
           />
+          <label :for="`autoscale-input-${id}`" class="visually-hidden"
+            >Y Axis {{ id }} Auto scale</label
+          >
         </div>
       </li>
       <li v-show="autoscale" class="grid-row">
@@ -72,7 +86,11 @@
           Padding
         </div>
         <div class="grid-cell value">
+          <label :for="`autoscale-padding-${id}`" class="visually-hidden"
+            >Y Axis {{ id }} Autoscale Padding</label
+          >
           <input
+            :id="`autoscale-padding-${id}`"
             v-model="autoscalePadding"
             class="c-input--flex"
             type="text"
@@ -88,8 +106,12 @@
       <li class="grid-row force-border">
         <div class="grid-cell label" title="Minimum Y axis value.">Minimum Value</div>
         <div class="grid-cell value">
+          <label :for="`range-min-${id}`" class="visually-hidden"
+            >Y Axis {{ id }} Minimum value</label
+          >
           <input
-            v-model.lazy="rangeMin"
+            :id="`range-min-${id}`"
+            v-model="rangeMin"
             class="c-input--flex"
             type="number"
             @change="updateForm('range')"
@@ -99,8 +121,12 @@
       <li class="grid-row">
         <div class="grid-cell label" title="Maximum Y axis value.">Maximum Value</div>
         <div class="grid-cell value">
+          <label :for="`range-max-${id}`" class="visually-hidden"
+            >Y Axis {{ id }} Maximum value</label
+          >
           <input
-            v-model.lazy="rangeMax"
+            :id="`range-max-${id}`"
+            v-model="rangeMax"
             class="c-input--flex"
             type="number"
             @change="updateForm('range')"
diff --git a/src/plugins/plot/stackedPlot/StackedPlotItem.vue b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
index a53b13ee71..834264e3e2 100644
--- a/src/plugins/plot/stackedPlot/StackedPlotItem.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
@@ -122,8 +122,11 @@ export default {
     'grid-lines',
     'plot-y-tick-width'
   ],
-  mounted() {
+  beforeMount() {
+    // We must do this before mounted to use any series configuration options set at the stacked plot level
     this.updateView();
+  },
+  mounted() {
     this.isEditing = this.openmct.editor.isEditing();
     this.openmct.editor.on('isEditing', this.setEditState);
     this.setupClockChangedEvent((domainObject) => {
diff --git a/src/ui/inspector/InspectorTabs.vue b/src/ui/inspector/InspectorTabs.vue
index b536d3a46f..085267e5ce 100644
--- a/src/ui/inspector/InspectorTabs.vue
+++ b/src/ui/inspector/InspectorTabs.vue
@@ -28,8 +28,10 @@
       role="tab"
       class="c-inspector__tab c-tab"
       :class="{ 'is-current': isSelected(tab) }"
+      tabindex="0"
       :title="tab.name"
       @click="selectTab(tab)"
+      @keydown.enter="selectTab(tab)"
     >
       <span class="c-inspector__tab-name c-tab__name">{{ tab.name }}</span>
     </div>

From c763937455253223d7f0d3f18b2d9d9d85fca515 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <ozyx@users.noreply.github.com>
Date: Tue, 16 Jul 2024 11:26:35 -0700
Subject: [PATCH 4/5] chore: disable codeql scanning for `e2e/` folder (#7784)

---
 .github/codeql/codeql-config.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.github/codeql/codeql-config.yml b/.github/codeql/codeql-config.yml
index 98f45f4da8..ab0dddd782 100644
--- a/.github/codeql/codeql-config.yml
+++ b/.github/codeql/codeql-config.yml
@@ -1 +1,5 @@
 name: 'Custom CodeQL config'
+
+paths-ignore:
+  # Ignore e2e tests and framework
+  - e2e

From 762762945decd27582c2f86bae15e8535f397fe5 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <ozyx@users.noreply.github.com>
Date: Tue, 16 Jul 2024 11:51:44 -0700
Subject: [PATCH 5/5] chore: bump playwright to `1.45.2` (#7785)

* chore: bump playwright to `1.45.2`

* chore: update package-lock
---
 .circleci/config.yml                  |  4 ++--
 .github/workflows/e2e-couchdb.yml     |  2 +-
 .github/workflows/e2e-flakefinder.yml |  2 +-
 .github/workflows/e2e-perf.yml        |  2 +-
 .github/workflows/e2e-pr.yml          |  2 +-
 e2e/package.json                      |  2 +-
 package-lock.json                     | 24 ++++++++++++------------
 7 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 33b4d81ec2..3f7988be22 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -5,7 +5,7 @@ orbs:
 executors:
   pw-focal-development:
     docker:
-      - image: mcr.microsoft.com/playwright:v1.45.0-focal
+      - image: mcr.microsoft.com/playwright:v1.45.2-focal
     environment:
       NODE_ENV: development # Needed to ensure 'dist' folder created and devDependencies installed
       PERCY_POSTINSTALL_BROWSER: 'true' # Needed to store the percy browser in cache deps
@@ -159,7 +159,7 @@ jobs:
     steps:
       - build_and_install:
           node-version: lts/hydrogen
-      - run: npx playwright@1.45.0 install #Necessary for bare ubuntu machine
+      - run: npx playwright@1.45.2 install #Necessary for bare ubuntu machine
       - run: |
           export $(cat src/plugins/persistence/couch/.env.ci | xargs)
           docker-compose -f src/plugins/persistence/couch/couchdb-compose.yaml up --detach
diff --git a/.github/workflows/e2e-couchdb.yml b/.github/workflows/e2e-couchdb.yml
index 8a72a1a3db..61ccdf6274 100644
--- a/.github/workflows/e2e-couchdb.yml
+++ b/.github/workflows/e2e-couchdb.yml
@@ -37,7 +37,7 @@ jobs:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - run: npx playwright@1.45.0 install
+      - run: npx playwright@1.45.2 install
 
       - name: Start CouchDB Docker Container and Init with Setup Scripts
         run: |
diff --git a/.github/workflows/e2e-flakefinder.yml b/.github/workflows/e2e-flakefinder.yml
index 89bbb25119..4688e5d18a 100644
--- a/.github/workflows/e2e-flakefinder.yml
+++ b/.github/workflows/e2e-flakefinder.yml
@@ -30,7 +30,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - run: npx playwright@1.45.0 install
+      - run: npx playwright@1.45.2 install
       - run: npm ci --no-audit --progress=false
 
       - name: Run E2E Tests (Repeated 10 Times)
diff --git a/.github/workflows/e2e-perf.yml b/.github/workflows/e2e-perf.yml
index 4003590d0a..27bfad23cb 100644
--- a/.github/workflows/e2e-perf.yml
+++ b/.github/workflows/e2e-perf.yml
@@ -28,7 +28,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - run: npx playwright@1.45.0 install
+      - run: npx playwright@1.45.2 install
       - run: npm ci --no-audit --progress=false
       - run: npm run test:perf:localhost
       - run: npm run test:perf:contract
diff --git a/.github/workflows/e2e-pr.yml b/.github/workflows/e2e-pr.yml
index caf59f174b..9c0724f645 100644
--- a/.github/workflows/e2e-pr.yml
+++ b/.github/workflows/e2e-pr.yml
@@ -33,7 +33,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - run: npx playwright@1.45.0 install
+      - run: npx playwright@1.45.2 install
       - run: npx playwright install chrome-beta
       - run: npm ci --no-audit --progress=false
       - run: npm run test:e2e:full -- --max-failures=40
diff --git a/e2e/package.json b/e2e/package.json
index a891a042df..3b1343d0e5 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -17,7 +17,7 @@
     "@types/sinonjs__fake-timers": "8.1.5",
     "@percy/cli": "1.27.4",
     "@percy/playwright": "1.0.4",
-    "@playwright/test": "1.45.0",
+    "@playwright/test": "1.45.2",
     "@axe-core/playwright": "4.8.5",
     "sinon": "17.0.0"
   },
diff --git a/package-lock.json b/package-lock.json
index 02d656549e..002dd4c0a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -104,7 +104,7 @@
         "@axe-core/playwright": "4.8.5",
         "@percy/cli": "1.27.4",
         "@percy/playwright": "1.0.4",
-        "@playwright/test": "1.45.0",
+        "@playwright/test": "1.45.2",
         "@types/sinonjs__fake-timers": "8.1.5",
         "sinon": "17.0.0"
       }
@@ -1550,12 +1550,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.0.tgz",
-      "integrity": "sha512-TVYsfMlGAaxeUllNkywbwek67Ncf8FRGn8ZlRdO291OL3NjG9oMbfVhyP82HQF0CZLMrYsvesqoUekxdWuF9Qw==",
+      "version": "1.45.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.2.tgz",
+      "integrity": "sha512-JxG9eq92ET75EbVi3s+4sYbcG7q72ECeZNbdBlaMkGcNbiDQ4cAi8U2QP5oKkOx+1gpaiL1LDStmzCaEM1Z6fQ==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.45.0"
+        "playwright": "1.45.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8813,12 +8813,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.0.tgz",
-      "integrity": "sha512-4z3ac3plDfYzGB6r0Q3LF8POPR20Z8D0aXcxbJvmfMgSSq1hkcgvFRXJk9rUq5H/MJ0Ktal869hhOdI/zUTeLA==",
+      "version": "1.45.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.2.tgz",
+      "integrity": "sha512-ReywF2t/0teRvNBpfIgh5e4wnrI/8Su8ssdo5XsQKpjxJj+jspm00jSoz9BTg91TT0c9HRjXO7LBNVrgYj9X0g==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.45.0"
+        "playwright-core": "1.45.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8831,9 +8831,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.0.tgz",
-      "integrity": "sha512-lZmHlFQ0VYSpAs43dRq1/nJ9G/6SiTI7VPqidld9TDefL9tX87bTKExWZZUF5PeRyqtXqd8fQi2qmfIedkwsNQ==",
+      "version": "1.45.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.2.tgz",
+      "integrity": "sha512-ha175tAWb0dTK0X4orvBIqi3jGEt701SMxMhyujxNrgd8K0Uy5wMSwwcQHtyB4om7INUkfndx02XnQ2p6dvLDw==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"