From 39f30c0c3a9ff23ac8c94f62a2933523a9e8bad7 Mon Sep 17 00:00:00 2001
From: Khalid Adil <khalidadil29@gmail.com>
Date: Thu, 9 Nov 2023 11:56:27 -0600
Subject: [PATCH 01/34] Add css class to flexible layouts to allow them to be
 styled, reset selections on save, disable styling on flexible layout
 containers, and fix styling on plots on flexible layouts

---
 src/plugins/flexibleLayout/components/FlexibleLayout.vue | 2 +-
 .../inspectorViews/styles/StylesInspectorViewProvider.js | 9 ++++++---
 src/plugins/plot/stackedPlot/StackedPlot.vue             | 2 +-
 src/ui/components/ObjectView.vue                         | 6 +++++-
 src/ui/layout/BrowseBar.vue                              | 4 ++++
 5 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/plugins/flexibleLayout/components/FlexibleLayout.vue b/src/plugins/flexibleLayout/components/FlexibleLayout.vue
index 6e92ef00e70..44a251c1af9 100644
--- a/src/plugins/flexibleLayout/components/FlexibleLayout.vue
+++ b/src/plugins/flexibleLayout/components/FlexibleLayout.vue
@@ -29,7 +29,7 @@
     </div>
 
     <div
-      class="c-fl__container-holder"
+      class="c-fl__container-holder u-style-receiver js-style-receiver"
       :class="{
         'c-fl--rows': rowsLayout === true
       }"
diff --git a/src/plugins/inspectorViews/styles/StylesInspectorViewProvider.js b/src/plugins/inspectorViews/styles/StylesInspectorViewProvider.js
index 41ae3b3485f..fbe9b1d40ae 100644
--- a/src/plugins/inspectorViews/styles/StylesInspectorViewProvider.js
+++ b/src/plugins/inspectorViews/styles/StylesInspectorViewProvider.js
@@ -46,14 +46,17 @@ export default function StylesInspectorViewProvider(openmct) {
     glyph: 'icon-paint-bucket',
     canView: function (selection) {
       const objectSelection = selection?.[0];
-      const layoutItem = objectSelection?.[0]?.context?.layoutItem;
-      const domainObject = objectSelection?.[0]?.context?.item;
+      const objectContext = objectSelection?.[0]?.context;
+      const layoutItem = objectContext?.layoutItem;
+      const domainObject = objectContext?.item;
+      const isFlexibleLayoutContainer =
+        domainObject?.type === 'flexible-layout' && objectContext.type === 'container';
 
       if (layoutItem) {
         return true;
       }
 
-      if (!domainObject) {
+      if (!domainObject || isFlexibleLayoutContainer) {
         return false;
       }
 
diff --git a/src/plugins/plot/stackedPlot/StackedPlot.vue b/src/plugins/plot/stackedPlot/StackedPlot.vue
index d38ec05fd9b..ca2ccce296f 100644
--- a/src/plugins/plot/stackedPlot/StackedPlot.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlot.vue
@@ -23,7 +23,7 @@
 <template>
   <div
     v-if="loaded"
-    class="c-plot c-plot--stacked holder holder-plot has-control-bar"
+    class="c-plot c-plot--stacked holder holder-plot has-control-bar u-style-receiver js-style-receiver"
     :class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
   >
     <plot-legend
diff --git a/src/ui/components/ObjectView.vue b/src/ui/components/ObjectView.vue
index 58a23b61e91..dcd7b3e2437 100644
--- a/src/ui/components/ObjectView.vue
+++ b/src/ui/components/ObjectView.vue
@@ -230,7 +230,11 @@ export default {
         if (elemToStyle) {
           if (typeof styleObj[key] === 'string' && styleObj[key].indexOf('__no_value') > -1) {
             if (elemToStyle.style[key]) {
-              elemToStyle.style[key] = '';
+              if (key === 'background-color') {
+                elemToStyle.style[key] = 'transparent';
+              } else {
+                elemToStyle.style[key] = '';
+              }
             }
           } else {
             if (
diff --git a/src/ui/layout/BrowseBar.vue b/src/ui/layout/BrowseBar.vue
index ee57e99029f..4909c0e8a63 100644
--- a/src/ui/layout/BrowseBar.vue
+++ b/src/ui/layout/BrowseBar.vue
@@ -368,6 +368,10 @@ export default {
         title: 'Saving'
       });
 
+      const currentSelection = this.openmct.selection.selected[0];
+      const parentObject = currentSelection[currentSelection.length - 1];
+      this.openmct.selection.select(parentObject);
+
       return this.openmct.editor
         .save()
         .then(() => {

From 30b34a2bcdf4913a2b93a73706921974b6ab22df Mon Sep 17 00:00:00 2001
From: Khalid Adil <khalidadil29@gmail.com>
Date: Wed, 20 Dec 2023 05:48:20 -0600
Subject: [PATCH 02/34] Add tests

---
 e2e/tests/visual/styling.visual.spec.js | 301 ++++++++++++++++++++++++
 1 file changed, 301 insertions(+)
 create mode 100644 e2e/tests/visual/styling.visual.spec.js

diff --git a/e2e/tests/visual/styling.visual.spec.js b/e2e/tests/visual/styling.visual.spec.js
new file mode 100644
index 00000000000..22dca2792c9
--- /dev/null
+++ b/e2e/tests/visual/styling.visual.spec.js
@@ -0,0 +1,301 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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.
+ *****************************************************************************/
+
+/**
+ * This test is dedicated to test styling of various plugins
+ */
+
+const { test, expect } = require('../../pluginFixtures');
+const { createDomainObjectWithDefaults } = require('../../appActions');
+
+test.describe('Flexible Layout styling', () => {
+  let sineWaveObject;
+  let sineWaveObject2;
+  let treePane;
+  let sineWaveGeneratorTreeItem;
+  let sineWaveGeneratorTreeItem2;
+  let stackedPlotTreeItem;
+  let stackedPlot;
+  let flexibleLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+
+    // Create a few Sine Wave Generators
+    sineWaveObject = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator'
+    });
+
+    sineWaveObject2 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator'
+    });
+
+    // Define the Sine Wave Generator items
+    treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(sineWaveObject.name)
+    });
+    sineWaveGeneratorTreeItem2 = treePane.getByRole('treeitem', {
+      name: new RegExp(sineWaveObject2.name)
+    });
+
+    // Create a Stacked Plot
+    stackedPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot'
+    });
+
+    // Add the Sine Wave Generators to the Stacked Plot
+    await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-plot--stacked.holder'));
+    await sineWaveGeneratorTreeItem2.dragTo(page.locator('.c-plot--stacked.holder'));
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    stackedPlotTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(stackedPlot.name)
+    });
+
+    // Create a Flexible Layout
+    flexibleLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout'
+    });
+
+    // Add the Sine Wave Generators and the Stacked Plot to the Flexible Layout
+    await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container').first());
+    await sineWaveGeneratorTreeItem2.dragTo(page.locator('.c-fl__container').first());
+    await stackedPlotTreeItem.dragTo(page.locator('.c-fl__container').nth(1));
+
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+  });
+
+  test('selecting a flexible layout column hides the styles tab', async ({ page }) => {
+    // Edit Flexible Layout
+    await page.locator('[title="Edit"]').click();
+    // Expect to find a styles tab
+    let stylesTab = await page.locator('.c-inspector__tab[title="Styles"]').count();
+    expect(stylesTab).toBe(1);
+
+    // Select flexible layout column
+    await page.locator('.c-fl-container__header').first().click();
+    // Expect to find no styles tab
+    stylesTab = await page.locator('.c-inspector__tab[title="Styles"]').count();
+    expect(stylesTab).toBe(0);
+  });
+
+  test('styling the flexible layout properly applies the styles to the container', async ({
+    page
+  }) => {
+    const backgroundColor = 'rgb(91, 15, 0)';
+    const fontColor = 'rgb(230, 184, 175)';
+    // Edit Flexible Layout
+    await page.locator('[title="Edit"]').click();
+    // Select styles tab
+    await page.locator('.c-inspector__tab[title="Styles"]').click();
+    // Set background color
+    await page.locator('.c-icon-button.icon-paint-bucket').click();
+    await page.locator(`.c-palette__item[style="background: ${backgroundColor};"]`).click();
+    // Set font color
+    await page.locator('.c-icon-button.icon-font').click();
+    await page.locator(`.c-palette__item[style="background: ${fontColor};"]`).click();
+
+    // Find Flexible Layout container
+    let flexibleLayoutContainer = await page.locator('.c-fl__container-holder');
+    let layoutStyles = await flexibleLayoutContainer.evaluate((el) => {
+      return {
+        background: window.getComputedStyle(el).getPropertyValue('background-color'),
+        fontColor: window.getComputedStyle(el).getPropertyValue('color')
+      };
+    });
+
+    // Verify styles match set styles
+    expect(layoutStyles.background).toBe(backgroundColor);
+    expect(layoutStyles.fontColor).toBe(fontColor);
+
+    // Save Flexible Layout
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // Reload page and check styles again
+    await page.goto(flexibleLayout.url);
+    flexibleLayoutContainer = await page.locator('.c-fl__container-holder');
+    layoutStyles = await flexibleLayoutContainer.evaluate((el) => {
+      return {
+        background: window.getComputedStyle(el).getPropertyValue('background-color'),
+        fontColor: window.getComputedStyle(el).getPropertyValue('color')
+      };
+    });
+
+    // Verify styles match set styles
+    expect(layoutStyles.background).toBe(backgroundColor);
+    expect(layoutStyles.fontColor).toBe(fontColor);
+  });
+
+  test('styling a child object of the flexible layout properly applies that style to only that child', async ({
+    page
+  }) => {
+    const backgroundColor = 'rgb(91, 15, 0)';
+    const fontColor = 'rgb(230, 184, 175)';
+    // Edit Flexible Layout
+    await page.locator('[title="Edit"]').click();
+    // Select Stacked Plot
+    let stackedPlotContainer = await page.locator('.c-plot--stacked');
+    // eslint-disable-next-line playwright/no-force-option
+    stackedPlotContainer.click({ force: true });
+
+    // Select styles tab
+    await page.locator('.c-inspector__tab[title="Styles"]').click();
+    // Set background color
+    await page.locator('.c-icon-button.icon-paint-bucket').click();
+    await page.locator(`.c-palette__item[style="background: ${backgroundColor};"]`).click();
+    // Set font color
+    await page.locator('.c-icon-button.icon-font[title="Set text color"]').click();
+    await page.locator(`.c-palette__item[style="background: ${fontColor};"]`).click();
+
+    // Get Stacked Plot styles
+    let stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
+      return {
+        background: window.getComputedStyle(el).getPropertyValue('background-color'),
+        fontColor: window.getComputedStyle(el).getPropertyValue('color')
+      };
+    });
+
+    // Verify styles match set styles
+    expect(stackedPlotStyles.background).toBe(backgroundColor);
+    expect(stackedPlotStyles.fontColor).toBe(fontColor);
+
+    // Save Flexible Layout
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // Reload page and check styles again
+    await page.goto(flexibleLayout.url);
+    stackedPlotContainer = await page.locator('.c-plot--stacked');
+    stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
+      return {
+        background: window.getComputedStyle(el).getPropertyValue('background-color'),
+        fontColor: window.getComputedStyle(el).getPropertyValue('color')
+      };
+    });
+
+    // Verify styles match set styles
+    expect(stackedPlotStyles.background).toBe(backgroundColor);
+    expect(stackedPlotStyles.fontColor).toBe(fontColor);
+  });
+
+  test('When the "no style" option is selected, background and text should be reset to inherited styles', async ({
+    page
+  }) => {
+    // Set background and font color on Stacked Plot object
+    const backgroundColor = 'rgb(91, 15, 0)';
+    const fontColor = 'rgb(230, 184, 175)';
+    const inheritedBackgroundColor = 'rgba(0, 0, 0, 0)'; // inherited from the theme
+    const inheritedFontColor = 'rgb(170, 170, 170)'; // inherited from the body style
+    // Edit Flexible Layout
+    await page.locator('[title="Edit"]').click();
+    // Select Stacked Plot
+    let stackedPlotContainer = await page.locator('.c-plot--stacked');
+    // eslint-disable-next-line playwright/no-force-option
+    stackedPlotContainer.click({ force: true });
+
+    // Select styles tab
+    await page.locator('.c-inspector__tab[title="Styles"]').click();
+    // Set background color
+    await page.locator('.c-icon-button.icon-paint-bucket').click();
+    await page.locator(`.c-palette__item[style="background: ${backgroundColor};"]`).click();
+    // Set font color
+    await page.locator('.c-icon-button.icon-font[title="Set text color"]').click();
+    await page.locator(`.c-palette__item[style="background: ${fontColor};"]`).click();
+
+    // Get Stacked Plot styles
+    let stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
+      return {
+        background: window.getComputedStyle(el).getPropertyValue('background-color'),
+        fontColor: window.getComputedStyle(el).getPropertyValue('color')
+      };
+    });
+
+    // Verify styles match set styles
+    expect(stackedPlotStyles.background).toBe(backgroundColor);
+    expect(stackedPlotStyles.fontColor).toBe(fontColor);
+
+    // Save Flexible Layout
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // Reload page and set styles to "None"
+    await page.goto(flexibleLayout.url);
+
+    // Edit Flexible Layout
+    await page.locator('[title="Edit"]').click();
+    // Select Stacked Plot
+    stackedPlotContainer = await page.locator('.c-plot--stacked');
+    // eslint-disable-next-line playwright/no-force-option
+    stackedPlotContainer.click({ force: true });
+
+    // Select styles tab
+    await page.locator('.c-inspector__tab[title="Styles"]').click();
+    // Set background color
+    await page.locator('.c-icon-button.icon-paint-bucket').click();
+    await page.locator(`.c-palette__item-none`).click();
+    // Set font color
+    await page.locator('.c-icon-button.icon-font[title="Set text color"]').click();
+    await page.locator(`.c-palette__item-none`).click();
+
+    // Get Stacked Plot styles
+    stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
+      return {
+        background: window.getComputedStyle(el).getPropertyValue('background-color'),
+        fontColor: window.getComputedStyle(el).getPropertyValue('color')
+      };
+    });
+
+    // Verify styles match inherited styles
+    expect(stackedPlotStyles.background).toBe(inheritedBackgroundColor);
+    expect(stackedPlotStyles.fontColor).toBe(inheritedFontColor);
+
+    // Save Flexible Layout
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // Reload page and check styles again after resetting styles to "None"
+    await page.goto(flexibleLayout.url);
+
+    // Select Stacked Plot
+    stackedPlotContainer = await page.locator('.c-plot--stacked');
+
+    // Get Stacked Plot styles
+    stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
+      return {
+        background: window.getComputedStyle(el).getPropertyValue('background-color'),
+        fontColor: window.getComputedStyle(el).getPropertyValue('color')
+      };
+    });
+
+    // Verify styles match inherited styles
+    expect(stackedPlotStyles.background).toBe(inheritedBackgroundColor);
+    expect(stackedPlotStyles.fontColor).toBe(inheritedFontColor);
+  });
+});

From 58893763d99b4394f3118db4139d918f2413ac28 Mon Sep 17 00:00:00 2001
From: Khalid Adil <khalidadil29@gmail.com>
Date: Wed, 20 Dec 2023 05:51:19 -0600
Subject: [PATCH 03/34] Add tests

---
 e2e/tests/visual/styling.visual.spec.js | 301 ++++++++++++++++++++++++
 1 file changed, 301 insertions(+)
 create mode 100644 e2e/tests/visual/styling.visual.spec.js

diff --git a/e2e/tests/visual/styling.visual.spec.js b/e2e/tests/visual/styling.visual.spec.js
new file mode 100644
index 00000000000..22dca2792c9
--- /dev/null
+++ b/e2e/tests/visual/styling.visual.spec.js
@@ -0,0 +1,301 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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.
+ *****************************************************************************/
+
+/**
+ * This test is dedicated to test styling of various plugins
+ */
+
+const { test, expect } = require('../../pluginFixtures');
+const { createDomainObjectWithDefaults } = require('../../appActions');
+
+test.describe('Flexible Layout styling', () => {
+  let sineWaveObject;
+  let sineWaveObject2;
+  let treePane;
+  let sineWaveGeneratorTreeItem;
+  let sineWaveGeneratorTreeItem2;
+  let stackedPlotTreeItem;
+  let stackedPlot;
+  let flexibleLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+
+    // Create a few Sine Wave Generators
+    sineWaveObject = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator'
+    });
+
+    sineWaveObject2 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator'
+    });
+
+    // Define the Sine Wave Generator items
+    treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(sineWaveObject.name)
+    });
+    sineWaveGeneratorTreeItem2 = treePane.getByRole('treeitem', {
+      name: new RegExp(sineWaveObject2.name)
+    });
+
+    // Create a Stacked Plot
+    stackedPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot'
+    });
+
+    // Add the Sine Wave Generators to the Stacked Plot
+    await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-plot--stacked.holder'));
+    await sineWaveGeneratorTreeItem2.dragTo(page.locator('.c-plot--stacked.holder'));
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    stackedPlotTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(stackedPlot.name)
+    });
+
+    // Create a Flexible Layout
+    flexibleLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout'
+    });
+
+    // Add the Sine Wave Generators and the Stacked Plot to the Flexible Layout
+    await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container').first());
+    await sineWaveGeneratorTreeItem2.dragTo(page.locator('.c-fl__container').first());
+    await stackedPlotTreeItem.dragTo(page.locator('.c-fl__container').nth(1));
+
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+  });
+
+  test('selecting a flexible layout column hides the styles tab', async ({ page }) => {
+    // Edit Flexible Layout
+    await page.locator('[title="Edit"]').click();
+    // Expect to find a styles tab
+    let stylesTab = await page.locator('.c-inspector__tab[title="Styles"]').count();
+    expect(stylesTab).toBe(1);
+
+    // Select flexible layout column
+    await page.locator('.c-fl-container__header').first().click();
+    // Expect to find no styles tab
+    stylesTab = await page.locator('.c-inspector__tab[title="Styles"]').count();
+    expect(stylesTab).toBe(0);
+  });
+
+  test('styling the flexible layout properly applies the styles to the container', async ({
+    page
+  }) => {
+    const backgroundColor = 'rgb(91, 15, 0)';
+    const fontColor = 'rgb(230, 184, 175)';
+    // Edit Flexible Layout
+    await page.locator('[title="Edit"]').click();
+    // Select styles tab
+    await page.locator('.c-inspector__tab[title="Styles"]').click();
+    // Set background color
+    await page.locator('.c-icon-button.icon-paint-bucket').click();
+    await page.locator(`.c-palette__item[style="background: ${backgroundColor};"]`).click();
+    // Set font color
+    await page.locator('.c-icon-button.icon-font').click();
+    await page.locator(`.c-palette__item[style="background: ${fontColor};"]`).click();
+
+    // Find Flexible Layout container
+    let flexibleLayoutContainer = await page.locator('.c-fl__container-holder');
+    let layoutStyles = await flexibleLayoutContainer.evaluate((el) => {
+      return {
+        background: window.getComputedStyle(el).getPropertyValue('background-color'),
+        fontColor: window.getComputedStyle(el).getPropertyValue('color')
+      };
+    });
+
+    // Verify styles match set styles
+    expect(layoutStyles.background).toBe(backgroundColor);
+    expect(layoutStyles.fontColor).toBe(fontColor);
+
+    // Save Flexible Layout
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // Reload page and check styles again
+    await page.goto(flexibleLayout.url);
+    flexibleLayoutContainer = await page.locator('.c-fl__container-holder');
+    layoutStyles = await flexibleLayoutContainer.evaluate((el) => {
+      return {
+        background: window.getComputedStyle(el).getPropertyValue('background-color'),
+        fontColor: window.getComputedStyle(el).getPropertyValue('color')
+      };
+    });
+
+    // Verify styles match set styles
+    expect(layoutStyles.background).toBe(backgroundColor);
+    expect(layoutStyles.fontColor).toBe(fontColor);
+  });
+
+  test('styling a child object of the flexible layout properly applies that style to only that child', async ({
+    page
+  }) => {
+    const backgroundColor = 'rgb(91, 15, 0)';
+    const fontColor = 'rgb(230, 184, 175)';
+    // Edit Flexible Layout
+    await page.locator('[title="Edit"]').click();
+    // Select Stacked Plot
+    let stackedPlotContainer = await page.locator('.c-plot--stacked');
+    // eslint-disable-next-line playwright/no-force-option
+    stackedPlotContainer.click({ force: true });
+
+    // Select styles tab
+    await page.locator('.c-inspector__tab[title="Styles"]').click();
+    // Set background color
+    await page.locator('.c-icon-button.icon-paint-bucket').click();
+    await page.locator(`.c-palette__item[style="background: ${backgroundColor};"]`).click();
+    // Set font color
+    await page.locator('.c-icon-button.icon-font[title="Set text color"]').click();
+    await page.locator(`.c-palette__item[style="background: ${fontColor};"]`).click();
+
+    // Get Stacked Plot styles
+    let stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
+      return {
+        background: window.getComputedStyle(el).getPropertyValue('background-color'),
+        fontColor: window.getComputedStyle(el).getPropertyValue('color')
+      };
+    });
+
+    // Verify styles match set styles
+    expect(stackedPlotStyles.background).toBe(backgroundColor);
+    expect(stackedPlotStyles.fontColor).toBe(fontColor);
+
+    // Save Flexible Layout
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // Reload page and check styles again
+    await page.goto(flexibleLayout.url);
+    stackedPlotContainer = await page.locator('.c-plot--stacked');
+    stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
+      return {
+        background: window.getComputedStyle(el).getPropertyValue('background-color'),
+        fontColor: window.getComputedStyle(el).getPropertyValue('color')
+      };
+    });
+
+    // Verify styles match set styles
+    expect(stackedPlotStyles.background).toBe(backgroundColor);
+    expect(stackedPlotStyles.fontColor).toBe(fontColor);
+  });
+
+  test('When the "no style" option is selected, background and text should be reset to inherited styles', async ({
+    page
+  }) => {
+    // Set background and font color on Stacked Plot object
+    const backgroundColor = 'rgb(91, 15, 0)';
+    const fontColor = 'rgb(230, 184, 175)';
+    const inheritedBackgroundColor = 'rgba(0, 0, 0, 0)'; // inherited from the theme
+    const inheritedFontColor = 'rgb(170, 170, 170)'; // inherited from the body style
+    // Edit Flexible Layout
+    await page.locator('[title="Edit"]').click();
+    // Select Stacked Plot
+    let stackedPlotContainer = await page.locator('.c-plot--stacked');
+    // eslint-disable-next-line playwright/no-force-option
+    stackedPlotContainer.click({ force: true });
+
+    // Select styles tab
+    await page.locator('.c-inspector__tab[title="Styles"]').click();
+    // Set background color
+    await page.locator('.c-icon-button.icon-paint-bucket').click();
+    await page.locator(`.c-palette__item[style="background: ${backgroundColor};"]`).click();
+    // Set font color
+    await page.locator('.c-icon-button.icon-font[title="Set text color"]').click();
+    await page.locator(`.c-palette__item[style="background: ${fontColor};"]`).click();
+
+    // Get Stacked Plot styles
+    let stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
+      return {
+        background: window.getComputedStyle(el).getPropertyValue('background-color'),
+        fontColor: window.getComputedStyle(el).getPropertyValue('color')
+      };
+    });
+
+    // Verify styles match set styles
+    expect(stackedPlotStyles.background).toBe(backgroundColor);
+    expect(stackedPlotStyles.fontColor).toBe(fontColor);
+
+    // Save Flexible Layout
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // Reload page and set styles to "None"
+    await page.goto(flexibleLayout.url);
+
+    // Edit Flexible Layout
+    await page.locator('[title="Edit"]').click();
+    // Select Stacked Plot
+    stackedPlotContainer = await page.locator('.c-plot--stacked');
+    // eslint-disable-next-line playwright/no-force-option
+    stackedPlotContainer.click({ force: true });
+
+    // Select styles tab
+    await page.locator('.c-inspector__tab[title="Styles"]').click();
+    // Set background color
+    await page.locator('.c-icon-button.icon-paint-bucket').click();
+    await page.locator(`.c-palette__item-none`).click();
+    // Set font color
+    await page.locator('.c-icon-button.icon-font[title="Set text color"]').click();
+    await page.locator(`.c-palette__item-none`).click();
+
+    // Get Stacked Plot styles
+    stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
+      return {
+        background: window.getComputedStyle(el).getPropertyValue('background-color'),
+        fontColor: window.getComputedStyle(el).getPropertyValue('color')
+      };
+    });
+
+    // Verify styles match inherited styles
+    expect(stackedPlotStyles.background).toBe(inheritedBackgroundColor);
+    expect(stackedPlotStyles.fontColor).toBe(inheritedFontColor);
+
+    // Save Flexible Layout
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // Reload page and check styles again after resetting styles to "None"
+    await page.goto(flexibleLayout.url);
+
+    // Select Stacked Plot
+    stackedPlotContainer = await page.locator('.c-plot--stacked');
+
+    // Get Stacked Plot styles
+    stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
+      return {
+        background: window.getComputedStyle(el).getPropertyValue('background-color'),
+        fontColor: window.getComputedStyle(el).getPropertyValue('color')
+      };
+    });
+
+    // Verify styles match inherited styles
+    expect(stackedPlotStyles.background).toBe(inheritedBackgroundColor);
+    expect(stackedPlotStyles.fontColor).toBe(inheritedFontColor);
+  });
+});

From 6ab76ba8630bf3e0e476e24c2e7a24618a7ddfa9 Mon Sep 17 00:00:00 2001
From: Khalid Adil <khalidadil29@gmail.com>
Date: Wed, 20 Dec 2023 05:52:25 -0600
Subject: [PATCH 04/34] Remove accidental commit

---
 e2e/tests/visual/styling.visual.spec.js | 301 ------------------------
 1 file changed, 301 deletions(-)
 delete mode 100644 e2e/tests/visual/styling.visual.spec.js

diff --git a/e2e/tests/visual/styling.visual.spec.js b/e2e/tests/visual/styling.visual.spec.js
deleted file mode 100644
index 22dca2792c9..00000000000
--- a/e2e/tests/visual/styling.visual.spec.js
+++ /dev/null
@@ -1,301 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2023, 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.
- *****************************************************************************/
-
-/**
- * This test is dedicated to test styling of various plugins
- */
-
-const { test, expect } = require('../../pluginFixtures');
-const { createDomainObjectWithDefaults } = require('../../appActions');
-
-test.describe('Flexible Layout styling', () => {
-  let sineWaveObject;
-  let sineWaveObject2;
-  let treePane;
-  let sineWaveGeneratorTreeItem;
-  let sineWaveGeneratorTreeItem2;
-  let stackedPlotTreeItem;
-  let stackedPlot;
-  let flexibleLayout;
-  test.beforeEach(async ({ page }) => {
-    await page.goto('./', { waitUntil: 'domcontentloaded' });
-
-    // Expand the 'My Items' folder in the left tree
-    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
-
-    // Create a few Sine Wave Generators
-    sineWaveObject = await createDomainObjectWithDefaults(page, {
-      type: 'Sine Wave Generator'
-    });
-
-    sineWaveObject2 = await createDomainObjectWithDefaults(page, {
-      type: 'Sine Wave Generator'
-    });
-
-    // Define the Sine Wave Generator items
-    treePane = page.getByRole('tree', {
-      name: 'Main Tree'
-    });
-    sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
-      name: new RegExp(sineWaveObject.name)
-    });
-    sineWaveGeneratorTreeItem2 = treePane.getByRole('treeitem', {
-      name: new RegExp(sineWaveObject2.name)
-    });
-
-    // Create a Stacked Plot
-    stackedPlot = await createDomainObjectWithDefaults(page, {
-      type: 'Stacked Plot'
-    });
-
-    // Add the Sine Wave Generators to the Stacked Plot
-    await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-plot--stacked.holder'));
-    await sineWaveGeneratorTreeItem2.dragTo(page.locator('.c-plot--stacked.holder'));
-    await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
-
-    stackedPlotTreeItem = treePane.getByRole('treeitem', {
-      name: new RegExp(stackedPlot.name)
-    });
-
-    // Create a Flexible Layout
-    flexibleLayout = await createDomainObjectWithDefaults(page, {
-      type: 'Flexible Layout'
-    });
-
-    // Add the Sine Wave Generators and the Stacked Plot to the Flexible Layout
-    await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container').first());
-    await sineWaveGeneratorTreeItem2.dragTo(page.locator('.c-fl__container').first());
-    await stackedPlotTreeItem.dragTo(page.locator('.c-fl__container').nth(1));
-
-    await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
-  });
-
-  test('selecting a flexible layout column hides the styles tab', async ({ page }) => {
-    // Edit Flexible Layout
-    await page.locator('[title="Edit"]').click();
-    // Expect to find a styles tab
-    let stylesTab = await page.locator('.c-inspector__tab[title="Styles"]').count();
-    expect(stylesTab).toBe(1);
-
-    // Select flexible layout column
-    await page.locator('.c-fl-container__header').first().click();
-    // Expect to find no styles tab
-    stylesTab = await page.locator('.c-inspector__tab[title="Styles"]').count();
-    expect(stylesTab).toBe(0);
-  });
-
-  test('styling the flexible layout properly applies the styles to the container', async ({
-    page
-  }) => {
-    const backgroundColor = 'rgb(91, 15, 0)';
-    const fontColor = 'rgb(230, 184, 175)';
-    // Edit Flexible Layout
-    await page.locator('[title="Edit"]').click();
-    // Select styles tab
-    await page.locator('.c-inspector__tab[title="Styles"]').click();
-    // Set background color
-    await page.locator('.c-icon-button.icon-paint-bucket').click();
-    await page.locator(`.c-palette__item[style="background: ${backgroundColor};"]`).click();
-    // Set font color
-    await page.locator('.c-icon-button.icon-font').click();
-    await page.locator(`.c-palette__item[style="background: ${fontColor};"]`).click();
-
-    // Find Flexible Layout container
-    let flexibleLayoutContainer = await page.locator('.c-fl__container-holder');
-    let layoutStyles = await flexibleLayoutContainer.evaluate((el) => {
-      return {
-        background: window.getComputedStyle(el).getPropertyValue('background-color'),
-        fontColor: window.getComputedStyle(el).getPropertyValue('color')
-      };
-    });
-
-    // Verify styles match set styles
-    expect(layoutStyles.background).toBe(backgroundColor);
-    expect(layoutStyles.fontColor).toBe(fontColor);
-
-    // Save Flexible Layout
-    await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
-
-    // Reload page and check styles again
-    await page.goto(flexibleLayout.url);
-    flexibleLayoutContainer = await page.locator('.c-fl__container-holder');
-    layoutStyles = await flexibleLayoutContainer.evaluate((el) => {
-      return {
-        background: window.getComputedStyle(el).getPropertyValue('background-color'),
-        fontColor: window.getComputedStyle(el).getPropertyValue('color')
-      };
-    });
-
-    // Verify styles match set styles
-    expect(layoutStyles.background).toBe(backgroundColor);
-    expect(layoutStyles.fontColor).toBe(fontColor);
-  });
-
-  test('styling a child object of the flexible layout properly applies that style to only that child', async ({
-    page
-  }) => {
-    const backgroundColor = 'rgb(91, 15, 0)';
-    const fontColor = 'rgb(230, 184, 175)';
-    // Edit Flexible Layout
-    await page.locator('[title="Edit"]').click();
-    // Select Stacked Plot
-    let stackedPlotContainer = await page.locator('.c-plot--stacked');
-    // eslint-disable-next-line playwright/no-force-option
-    stackedPlotContainer.click({ force: true });
-
-    // Select styles tab
-    await page.locator('.c-inspector__tab[title="Styles"]').click();
-    // Set background color
-    await page.locator('.c-icon-button.icon-paint-bucket').click();
-    await page.locator(`.c-palette__item[style="background: ${backgroundColor};"]`).click();
-    // Set font color
-    await page.locator('.c-icon-button.icon-font[title="Set text color"]').click();
-    await page.locator(`.c-palette__item[style="background: ${fontColor};"]`).click();
-
-    // Get Stacked Plot styles
-    let stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
-      return {
-        background: window.getComputedStyle(el).getPropertyValue('background-color'),
-        fontColor: window.getComputedStyle(el).getPropertyValue('color')
-      };
-    });
-
-    // Verify styles match set styles
-    expect(stackedPlotStyles.background).toBe(backgroundColor);
-    expect(stackedPlotStyles.fontColor).toBe(fontColor);
-
-    // Save Flexible Layout
-    await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
-
-    // Reload page and check styles again
-    await page.goto(flexibleLayout.url);
-    stackedPlotContainer = await page.locator('.c-plot--stacked');
-    stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
-      return {
-        background: window.getComputedStyle(el).getPropertyValue('background-color'),
-        fontColor: window.getComputedStyle(el).getPropertyValue('color')
-      };
-    });
-
-    // Verify styles match set styles
-    expect(stackedPlotStyles.background).toBe(backgroundColor);
-    expect(stackedPlotStyles.fontColor).toBe(fontColor);
-  });
-
-  test('When the "no style" option is selected, background and text should be reset to inherited styles', async ({
-    page
-  }) => {
-    // Set background and font color on Stacked Plot object
-    const backgroundColor = 'rgb(91, 15, 0)';
-    const fontColor = 'rgb(230, 184, 175)';
-    const inheritedBackgroundColor = 'rgba(0, 0, 0, 0)'; // inherited from the theme
-    const inheritedFontColor = 'rgb(170, 170, 170)'; // inherited from the body style
-    // Edit Flexible Layout
-    await page.locator('[title="Edit"]').click();
-    // Select Stacked Plot
-    let stackedPlotContainer = await page.locator('.c-plot--stacked');
-    // eslint-disable-next-line playwright/no-force-option
-    stackedPlotContainer.click({ force: true });
-
-    // Select styles tab
-    await page.locator('.c-inspector__tab[title="Styles"]').click();
-    // Set background color
-    await page.locator('.c-icon-button.icon-paint-bucket').click();
-    await page.locator(`.c-palette__item[style="background: ${backgroundColor};"]`).click();
-    // Set font color
-    await page.locator('.c-icon-button.icon-font[title="Set text color"]').click();
-    await page.locator(`.c-palette__item[style="background: ${fontColor};"]`).click();
-
-    // Get Stacked Plot styles
-    let stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
-      return {
-        background: window.getComputedStyle(el).getPropertyValue('background-color'),
-        fontColor: window.getComputedStyle(el).getPropertyValue('color')
-      };
-    });
-
-    // Verify styles match set styles
-    expect(stackedPlotStyles.background).toBe(backgroundColor);
-    expect(stackedPlotStyles.fontColor).toBe(fontColor);
-
-    // Save Flexible Layout
-    await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
-
-    // Reload page and set styles to "None"
-    await page.goto(flexibleLayout.url);
-
-    // Edit Flexible Layout
-    await page.locator('[title="Edit"]').click();
-    // Select Stacked Plot
-    stackedPlotContainer = await page.locator('.c-plot--stacked');
-    // eslint-disable-next-line playwright/no-force-option
-    stackedPlotContainer.click({ force: true });
-
-    // Select styles tab
-    await page.locator('.c-inspector__tab[title="Styles"]').click();
-    // Set background color
-    await page.locator('.c-icon-button.icon-paint-bucket').click();
-    await page.locator(`.c-palette__item-none`).click();
-    // Set font color
-    await page.locator('.c-icon-button.icon-font[title="Set text color"]').click();
-    await page.locator(`.c-palette__item-none`).click();
-
-    // Get Stacked Plot styles
-    stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
-      return {
-        background: window.getComputedStyle(el).getPropertyValue('background-color'),
-        fontColor: window.getComputedStyle(el).getPropertyValue('color')
-      };
-    });
-
-    // Verify styles match inherited styles
-    expect(stackedPlotStyles.background).toBe(inheritedBackgroundColor);
-    expect(stackedPlotStyles.fontColor).toBe(inheritedFontColor);
-
-    // Save Flexible Layout
-    await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
-
-    // Reload page and check styles again after resetting styles to "None"
-    await page.goto(flexibleLayout.url);
-
-    // Select Stacked Plot
-    stackedPlotContainer = await page.locator('.c-plot--stacked');
-
-    // Get Stacked Plot styles
-    stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
-      return {
-        background: window.getComputedStyle(el).getPropertyValue('background-color'),
-        fontColor: window.getComputedStyle(el).getPropertyValue('color')
-      };
-    });
-
-    // Verify styles match inherited styles
-    expect(stackedPlotStyles.background).toBe(inheritedBackgroundColor);
-    expect(stackedPlotStyles.fontColor).toBe(inheritedFontColor);
-  });
-});

From e28abcbbc90de048fadc58f8495ed8b9ce41e072 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Thu, 21 Dec 2023 22:21:11 -0800
Subject: [PATCH 05/34] first pass

---
 .../styling.e2e.spec.js}                      | 82 ++++++++-----------
 1 file changed, 32 insertions(+), 50 deletions(-)
 rename e2e/tests/{visual-a11y/styling.visual.spec.js => functional/styling.e2e.spec.js} (83%)

diff --git a/e2e/tests/visual-a11y/styling.visual.spec.js b/e2e/tests/functional/styling.e2e.spec.js
similarity index 83%
rename from e2e/tests/visual-a11y/styling.visual.spec.js
rename to e2e/tests/functional/styling.e2e.spec.js
index 22dca2792c9..088b886be9b 100644
--- a/e2e/tests/visual-a11y/styling.visual.spec.js
+++ b/e2e/tests/functional/styling.e2e.spec.js
@@ -39,70 +39,52 @@ test.describe('Flexible Layout styling', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
-    // Expand the 'My Items' folder in the left tree
-    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
-
-    // Create a few Sine Wave Generators
-    sineWaveObject = await createDomainObjectWithDefaults(page, {
-      type: 'Sine Wave Generator'
-    });
-
-    sineWaveObject2 = await createDomainObjectWithDefaults(page, {
-      type: 'Sine Wave Generator'
-    });
-
-    // Define the Sine Wave Generator items
-    treePane = page.getByRole('tree', {
-      name: 'Main Tree'
-    });
-    sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
-      name: new RegExp(sineWaveObject.name)
-    });
-    sineWaveGeneratorTreeItem2 = treePane.getByRole('treeitem', {
-      name: new RegExp(sineWaveObject2.name)
+    // Create a Flexible Layout and attach to the Stacked Plot
+    flexibleLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout',
+      name: 'Flexible Layout'
     });
+    console.log('flexibleLayout', flexibleLayout.uuid);
 
-    // Create a Stacked Plot
+    // Create a Stacked Plot and attach to the Flexible Layout
     stackedPlot = await createDomainObjectWithDefaults(page, {
-      type: 'Stacked Plot'
+      type: 'Stacked Plot',
+      name: 'Stacked Plot',
+      parent: flexibleLayout.uuid
     });
+    console.log('stackedplot', stackedPlot.uuid);
 
-    // Add the Sine Wave Generators to the Stacked Plot
-    await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-plot--stacked.holder'));
-    await sineWaveGeneratorTreeItem2.dragTo(page.locator('.c-plot--stacked.holder'));
-    await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
-
-    stackedPlotTreeItem = treePane.getByRole('treeitem', {
-      name: new RegExp(stackedPlot.name)
+    // Create two SWGs and attach them to the Stacked Plot
+    sineWaveObject = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator 1',
+      parent: stackedPlot.uuid
     });
+    console.log('sineWaveObject', sineWaveObject.uuid);
 
-    // Create a Flexible Layout
-    flexibleLayout = await createDomainObjectWithDefaults(page, {
-      type: 'Flexible Layout'
+    sineWaveObject2 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator 2',
+      parent: stackedPlot.uuid
     });
-
-    // Add the Sine Wave Generators and the Stacked Plot to the Flexible Layout
-    await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container').first());
-    await sineWaveGeneratorTreeItem2.dragTo(page.locator('.c-fl__container').first());
-    await stackedPlotTreeItem.dragTo(page.locator('.c-fl__container').nth(1));
-
-    await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    console.log('sineWaveObject2', sineWaveObject2.uuid);
   });
 
-  test('selecting a flexible layout column hides the styles tab', async ({ page }) => {
+  test.only('selecting a flexible layout column hides the styles tab', async ({ page }) => {
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
     // Edit Flexible Layout
-    await page.locator('[title="Edit"]').click();
-    // Expect to find a styles tab
-    let stylesTab = await page.locator('.c-inspector__tab[title="Styles"]').count();
-    expect(stylesTab).toBe(1);
+    await page.getByLabel('Edit').click();
+
+    // Expect to find styles tab
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
 
     // Select flexible layout column
-    await page.locator('.c-fl-container__header').first().click();
+    // await page.getByLabel('Stacked Plot Frame').click();
+    await page.getByRole('group', { name: /Container \b[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\b/ }).click();
+
     // Expect to find no styles tab
-    stylesTab = await page.locator('.c-inspector__tab[title="Styles"]').count();
-    expect(stylesTab).toBe(0);
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeHidden();
   });
 
   test('styling the flexible layout properly applies the styles to the container', async ({

From b462c6d498d10676b681847aba31666389c664bd Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Fri, 22 Dec 2023 15:04:34 -0800
Subject: [PATCH 06/34] drive-by to improve flex layout git blame

---
 .git-blame-ignore-revs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index 6aa1fd0665d..3b2ed7400f7 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -4,6 +4,8 @@
 # Requires Git > 2.23
 # See https://git-scm.com/docs/git-blame#Documentation/git-blame.txt---ignore-revs-fileltfilegt
 
+# vue-eslint update 2019
+14a0f84c1bcd56886d7c9e4e6afa8f7d292734e5
 # Copyright year update 2022
 4a9744e916d24122a81092f6b7950054048ba860
 # Copyright year update 2023

From 3aaf74b46cebe311712c9aaa5a36c1a2e669eeb1 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Fri, 22 Dec 2023 15:04:47 -0800
Subject: [PATCH 07/34] drive-by to improve watch mode

---
 e2e/playwright-watch.config.js | 54 ++++++++++++++++++++++++++++++++++
 package.json                   |  2 +-
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 e2e/playwright-watch.config.js

diff --git a/e2e/playwright-watch.config.js b/e2e/playwright-watch.config.js
new file mode 100644
index 00000000000..d219d02ff16
--- /dev/null
+++ b/e2e/playwright-watch.config.js
@@ -0,0 +1,54 @@
+/* eslint-disable no-undef */
+// playwright.config.js
+// @ts-check
+
+// eslint-disable-next-line no-unused-vars
+const { devices } = require('@playwright/test');
+const MAX_FAILURES = 5;
+const NUM_WORKERS = 2;
+
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+  retries: 0, //Retries 2 times for a total of 3 runs. When running sharded and with max-failures=5, this should ensure that flake is managed without failing the full suite
+  testDir: 'tests',
+  timeout: 60 * 1000,
+  webServer: {
+    command: 'npm run start', //Start in dev mode for hot reloading
+    url: 'http://localhost:8080/#',
+    timeout: 200 * 1000,
+    reuseExistingServer: true //This was originally disabled to prevent differences in local debugging vs. CI. However, it significantly speeds up local debugging.
+  },
+  maxFailures: MAX_FAILURES, //Limits failures to 5 to reduce CI Waste
+  workers: NUM_WORKERS, //Limit to 2 for CircleCI Agent
+  use: {
+    baseURL: 'http://localhost:8080/',
+    headless: true,
+    ignoreHTTPSErrors: true,
+    screenshot: 'only-on-failure',
+    trace: 'on-first-retry',
+    video: 'off'
+  },
+  projects: [
+    {
+      name: 'chrome',
+      testMatch: '**/*.spec.js', // run all tests
+      use: {
+        browserName: 'chromium'
+      }
+    }
+  ],
+  reporter: [
+    ['list'],
+    [
+      'html',
+      {
+        open: 'never',
+        outputFolder: '../html-test-results' //Must be in different location due to https://github.com/microsoft/playwright/issues/12840
+      }
+    ],
+    ['junit', { outputFile: '../test-results/results.xml' }],
+    ['@deploysentinel/playwright']
+  ]
+};
+
+module.exports = config;
diff --git a/package.json b/package.json
index fd35e7b3876..80e7b5ee431 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
     "test:e2e:visual:ci": "percy exec --config ./e2e/.percy.ci.yml --partial -- npx playwright test --config=e2e/playwright-visual-a11y.config.js --project=chrome --grep-invert @unstable",
     "test:e2e:visual:full": "percy exec --config ./e2e/.percy.nightly.yml -- npx playwright test --config=e2e/playwright-visual-a11y.config.js --grep-invert @unstable",
     "test:e2e:full": "npx playwright test --config=e2e/playwright-ci.config.js --grep-invert @couchdb",
-    "test:e2e:watch": "npx playwright test --ui --config=e2e/playwright-ci.config.js",
+    "test:e2e:watch": "npx playwright test --ui --config=e2e/playwright-watch.config.js",
     "test:perf:contract": "npx playwright test --config=e2e/playwright-performance-dev.config.js",
     "test:perf:localhost": "npx playwright test --config=e2e/playwright-performance-prod.config.js --project=chrome",
     "test:perf:memory": "npx playwright test --config=e2e/playwright-performance-prod.config.js --project=chrome-memory",

From aef2432821a34f529eb00a6232fcca26352df7c7 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Fri, 22 Dec 2023 15:05:27 -0800
Subject: [PATCH 08/34] fix flexlayout toolbar options

---
 src/ui/toolbar/ToolbarContainer.vue            | 2 +-
 src/ui/toolbar/components/ToolbarButton.vue    | 2 ++
 src/ui/toolbar/components/ToolbarSeparator.vue | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/ui/toolbar/ToolbarContainer.vue b/src/ui/toolbar/ToolbarContainer.vue
index 4a64ec545d9..6e771e065ee 100644
--- a/src/ui/toolbar/ToolbarContainer.vue
+++ b/src/ui/toolbar/ToolbarContainer.vue
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="c-toolbar">
+  <div role="menubar" class="c-toolbar">
     <div class="c-toolbar__element-controls">
       <component
         :is="item.control"
diff --git a/src/ui/toolbar/components/ToolbarButton.vue b/src/ui/toolbar/components/ToolbarButton.vue
index c14eabe9f19..b5f4c76767d 100644
--- a/src/ui/toolbar/components/ToolbarButton.vue
+++ b/src/ui/toolbar/components/ToolbarButton.vue
@@ -24,6 +24,8 @@
     <div
       ref="button"
       class="c-icon-button"
+      role="menuitem"
+      :aria-label="options.title"
       :title="options.title"
       :class="{
         [options.icon]: true,
diff --git a/src/ui/toolbar/components/ToolbarSeparator.vue b/src/ui/toolbar/components/ToolbarSeparator.vue
index 22f614fb38d..6bdf7614dd2 100644
--- a/src/ui/toolbar/components/ToolbarSeparator.vue
+++ b/src/ui/toolbar/components/ToolbarSeparator.vue
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="c-toolbar__separator"></div>
+  <div role="separator" class="c-toolbar__separator"></div>
 </template>
 
 <script>

From 8bd57577c305b7e20c5f5f53e5b7cfb81f252cbd Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Fri, 22 Dec 2023 15:05:46 -0800
Subject: [PATCH 09/34] fix roles for flexlayout to be a grid instead of group

---
 e2e/tests/functional/styling.e2e.spec.js                   | 2 +-
 .../flexibleLayout/components/ContainerComponent.vue       | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/e2e/tests/functional/styling.e2e.spec.js b/e2e/tests/functional/styling.e2e.spec.js
index 088b886be9b..8aa50453f93 100644
--- a/e2e/tests/functional/styling.e2e.spec.js
+++ b/e2e/tests/functional/styling.e2e.spec.js
@@ -81,7 +81,7 @@ test.describe('Flexible Layout styling', () => {
 
     // Select flexible layout column
     // await page.getByLabel('Stacked Plot Frame').click();
-    await page.getByRole('group', { name: /Container \b[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\b/ }).click();
+    await page.getByRole('gridcell', { name: '50%' }).first().click();
 
     // Expect to find no styles tab
     await expect(page.getByRole('tab', { name: 'Styles' })).toBeHidden();
diff --git a/src/plugins/flexibleLayout/components/ContainerComponent.vue b/src/plugins/flexibleLayout/components/ContainerComponent.vue
index 69ae78ccf4f..cd5fc297ee7 100644
--- a/src/plugins/flexibleLayout/components/ContainerComponent.vue
+++ b/src/plugins/flexibleLayout/components/ContainerComponent.vue
@@ -25,13 +25,13 @@
     class="c-fl-container"
     :style="[{ 'flex-basis': sizeString }]"
     :class="{ 'is-empty': !frames.length }"
-    role="group"
-    :aria-label="`Container ${container.id}`"
+    role="grid"
   >
     <div
       v-show="isEditing"
       class="c-fl-container__header"
       draggable="true"
+      role="gridcell"
       @dragstart="startContainerDrag"
     >
       <span class="c-fl-container__size-indicator">{{ sizeString }}</span>
@@ -44,12 +44,13 @@
       @object-drop-to="moveOrCreateNewFrame"
     />
 
-    <div class="c-fl-container__frames-holder">
+    <div role="rowheader" class="c-fl-container__frames-holder">
       <template v-for="(frame, i) in frames" :key="frame.id">
         <frame-component
           class="c-fl-container__frame"
           :frame="frame"
           :index="i"
+          role="gridcell"
           :container-index="index"
           :is-editing="isEditing"
           :object-path="objectPath"

From 3b56b67cb5913aa825a40d4950cbc7ef3a23a284 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Sat, 23 Dec 2023 07:36:26 -0800
Subject: [PATCH 10/34] driveby git blame ignore

---
 .git-blame-ignore-revs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index 3b2ed7400f7..839df6c0f94 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -6,6 +6,8 @@
 
 # vue-eslint update 2019
 14a0f84c1bcd56886d7c9e4e6afa8f7d292734e5
+# eslint changes 2022
+d80b6923541704ab925abf0047cbbc58735c27e2
 # Copyright year update 2022
 4a9744e916d24122a81092f6b7950054048ba860
 # Copyright year update 2023

From 81903880b3d6fbfcf182579d797aab7e837dcbf3 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Tue, 26 Dec 2023 08:55:02 -0800
Subject: [PATCH 11/34] Some more testability improvements

---
 .../components/ContainerComponent.vue            |  6 ++++--
 src/ui/toolbar/components/ToolbarColorPicker.vue | 16 +++++++++++-----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/plugins/flexibleLayout/components/ContainerComponent.vue b/src/plugins/flexibleLayout/components/ContainerComponent.vue
index cd5fc297ee7..e0cdac738c8 100644
--- a/src/plugins/flexibleLayout/components/ContainerComponent.vue
+++ b/src/plugins/flexibleLayout/components/ContainerComponent.vue
@@ -31,7 +31,8 @@
       v-show="isEditing"
       class="c-fl-container__header"
       draggable="true"
-      role="gridcell"
+      role="columnheader"
+      :aria-label="`Container Handle ${index}`"
       @dragstart="startContainerDrag"
     >
       <span class="c-fl-container__size-indicator">{{ sizeString }}</span>
@@ -44,13 +45,14 @@
       @object-drop-to="moveOrCreateNewFrame"
     />
 
-    <div role="rowheader" class="c-fl-container__frames-holder">
+    <div role="row" class="c-fl-container__frames-holder">
       <template v-for="(frame, i) in frames" :key="frame.id">
         <frame-component
           class="c-fl-container__frame"
           :frame="frame"
           :index="i"
           role="gridcell"
+          :aria-label="`Container Frame ${index}`"
           :container-index="index"
           :is-editing="isEditing"
           :object-path="objectPath"
diff --git a/src/ui/toolbar/components/ToolbarColorPicker.vue b/src/ui/toolbar/components/ToolbarColorPicker.vue
index c42b4f62b6e..ac347deee9d 100644
--- a/src/ui/toolbar/components/ToolbarColorPicker.vue
+++ b/src/ui/toolbar/components/ToolbarColorPicker.vue
@@ -21,23 +21,26 @@
 -->
 <template>
   <div class="c-ctrl-wrapper">
-    <div
+    <button
       class="c-icon-button c-icon-button--swatched"
       :class="[options.icon, { 'c-icon-button--mixed': nonSpecific }]"
       :title="options.title"
+      :aria-label="options.title"
       @click="handleClick"
     >
       <div
         class="c-swatch"
-        :style="{
-          background: options.value
-        }"
+        :style="{ background: options.value }"
+        role="img"
+        :aria-label="None"
       ></div>
-    </div>
+    </button>
     <div v-if="open" class="c-menu c-palette c-palette--color">
       <div
         v-if="!options.preventNone"
         class="c-palette__item-none"
+        role="grid"
+        aria-label="No Style"
         @click="select({ value: 'transparent' })"
       >
         <div class="c-palette__item"></div>
@@ -47,8 +50,11 @@
         <div
           v-for="(color, index) in colorPalette"
           :key="index"
+          role="gridcell"
           class="c-palette__item"
           :style="{ background: color.value }"
+          :title="color.value"
+          :aria-label="color.value"
           @click="select(color)"
         ></div>
       </div>

From 81651173c0aa7dc14fcdcac6545855bd32a8c77f Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Tue, 26 Dec 2023 08:55:21 -0800
Subject: [PATCH 12/34] Improving the tests

---
 e2e/tests/functional/styling.e2e.spec.js | 352 ++++++++++++-----------
 1 file changed, 181 insertions(+), 171 deletions(-)

diff --git a/e2e/tests/functional/styling.e2e.spec.js b/e2e/tests/functional/styling.e2e.spec.js
index 8aa50453f93..cb07f0fb03a 100644
--- a/e2e/tests/functional/styling.e2e.spec.js
+++ b/e2e/tests/functional/styling.e2e.spec.js
@@ -27,13 +27,38 @@
 const { test, expect } = require('../../pluginFixtures');
 const { createDomainObjectWithDefaults } = require('../../appActions');
 
+test.describe('Flex Layout Style Inspector Options', () => {
+  let flexibleLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a Flexible Layout and attach to the Stacked Plot
+    flexibleLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout',
+      name: 'Flexible Layout'
+    });
+  });
+
+  test('selecting a flexible layout column hides the styles tab', async ({ page }) => {
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit').click();
+
+    // Expect to find styles tab
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
+
+    // Select flexible layout column
+    await page.getByLabel('Container Handle 0').click();
+
+    // Expect to find no styles tab
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeHidden();
+  });
+});
+
 test.describe('Flexible Layout styling', () => {
   let sineWaveObject;
   let sineWaveObject2;
-  let treePane;
-  let sineWaveGeneratorTreeItem;
-  let sineWaveGeneratorTreeItem2;
-  let stackedPlotTreeItem;
   let stackedPlot;
   let flexibleLayout;
   test.beforeEach(async ({ page }) => {
@@ -44,7 +69,6 @@ test.describe('Flexible Layout styling', () => {
       type: 'Flexible Layout',
       name: 'Flexible Layout'
     });
-    console.log('flexibleLayout', flexibleLayout.uuid);
 
     // Create a Stacked Plot and attach to the Flexible Layout
     stackedPlot = await createDomainObjectWithDefaults(page, {
@@ -52,7 +76,6 @@ test.describe('Flexible Layout styling', () => {
       name: 'Stacked Plot',
       parent: flexibleLayout.uuid
     });
-    console.log('stackedplot', stackedPlot.uuid);
 
     // Create two SWGs and attach them to the Stacked Plot
     sineWaveObject = await createDomainObjectWithDefaults(page, {
@@ -60,131 +83,96 @@ test.describe('Flexible Layout styling', () => {
       name: 'Sine Wave Generator 1',
       parent: stackedPlot.uuid
     });
-    console.log('sineWaveObject', sineWaveObject.uuid);
 
     sineWaveObject2 = await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Sine Wave Generator 2',
       parent: stackedPlot.uuid
     });
-    console.log('sineWaveObject2', sineWaveObject2.uuid);
   });
 
-  test.only('selecting a flexible layout column hides the styles tab', async ({ page }) => {
+  test('styling the flexible layout properly applies the styles to all containers', async ({
+    page
+  }) => {
+    // Values to set styles to
+    const backgroundColor = '#5b0f00';
+    const textColor = '#e6b8af';
+
+    // Directly navigate to the flexible layout
     await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
 
     // Edit Flexible Layout
     await page.getByLabel('Edit').click();
 
-    // Expect to find styles tab
-    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
-
-    // Select flexible layout column
-    // await page.getByLabel('Stacked Plot Frame').click();
-    await page.getByRole('gridcell', { name: '50%' }).first().click();
-
-    // Expect to find no styles tab
-    await expect(page.getByRole('tab', { name: 'Styles' })).toBeHidden();
-  });
-
-  test('styling the flexible layout properly applies the styles to the container', async ({
-    page
-  }) => {
-    const backgroundColor = 'rgb(91, 15, 0)';
-    const fontColor = 'rgb(230, 184, 175)';
-    // Edit Flexible Layout
-    await page.locator('[title="Edit"]').click();
     // Select styles tab
-    await page.locator('.c-inspector__tab[title="Styles"]').click();
-    // Set background color
-    await page.locator('.c-icon-button.icon-paint-bucket').click();
-    await page.locator(`.c-palette__item[style="background: ${backgroundColor};"]`).click();
-    // Set font color
-    await page.locator('.c-icon-button.icon-font').click();
-    await page.locator(`.c-palette__item[style="background: ${fontColor};"]`).click();
-
-    // Find Flexible Layout container
-    let flexibleLayoutContainer = await page.locator('.c-fl__container-holder');
-    let layoutStyles = await flexibleLayoutContainer.evaluate((el) => {
-      return {
-        background: window.getComputedStyle(el).getPropertyValue('background-color'),
-        fontColor: window.getComputedStyle(el).getPropertyValue('color')
-      };
-    });
+    await page.getByRole('tab', { name: 'Styles' }).click();
 
-    // Verify styles match set styles
-    expect(layoutStyles.background).toBe(backgroundColor);
-    expect(layoutStyles.fontColor).toBe(fontColor);
+    // Set styles using setStyles function
+    await setStyles(page, backgroundColor, textColor, page.locator('.c-fl__container-holder'));
 
-    // Save Flexible Layout
-    await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    // Check styles using checkStyles function
+    await checkStyles(
+      page,
+      hexToRGB(backgroundColor),
+      hexToRGB(textColor),
+      page.locator('.c-fl__container-holder')
+    );
 
-    // Reload page and check styles again
-    await page.goto(flexibleLayout.url);
-    flexibleLayoutContainer = await page.locator('.c-fl__container-holder');
-    layoutStyles = await flexibleLayoutContainer.evaluate((el) => {
-      return {
-        background: window.getComputedStyle(el).getPropertyValue('background-color'),
-        fontColor: window.getComputedStyle(el).getPropertyValue('color')
-      };
-    });
-
-    // Verify styles match set styles
-    expect(layoutStyles.background).toBe(backgroundColor);
-    expect(layoutStyles.fontColor).toBe(fontColor);
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Reload page
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Check styles using checkStyles function
+    await checkStyles(
+      page,
+      hexToRGB(backgroundColor),
+      hexToRGB(textColor),
+      page.locator('.c-fl__container-holder')
+    );
   });
 
   test('styling a child object of the flexible layout properly applies that style to only that child', async ({
     page
   }) => {
-    const backgroundColor = 'rgb(91, 15, 0)';
-    const fontColor = 'rgb(230, 184, 175)';
+    const backgroundColor = '#5b0f00';
+    const textColor = '#e6b8af';
+    // Directly navigate to the flexible layout
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
     // Edit Flexible Layout
-    await page.locator('[title="Edit"]').click();
-    // Select Stacked Plot
-    let stackedPlotContainer = await page.locator('.c-plot--stacked');
-    // eslint-disable-next-line playwright/no-force-option
-    stackedPlotContainer.click({ force: true });
+    await page.getByLabel('Edit').click();
 
     // Select styles tab
-    await page.locator('.c-inspector__tab[title="Styles"]').click();
-    // Set background color
-    await page.locator('.c-icon-button.icon-paint-bucket').click();
-    await page.locator(`.c-palette__item[style="background: ${backgroundColor};"]`).click();
-    // Set font color
-    await page.locator('.c-icon-button.icon-font[title="Set text color"]').click();
-    await page.locator(`.c-palette__item[style="background: ${fontColor};"]`).click();
-
-    // Get Stacked Plot styles
-    let stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
-      return {
-        background: window.getComputedStyle(el).getPropertyValue('background-color'),
-        fontColor: window.getComputedStyle(el).getPropertyValue('color')
-      };
-    });
+    await page.getByRole('tab', { name: 'Styles' }).click();
 
-    // Verify styles match set styles
-    expect(stackedPlotStyles.background).toBe(backgroundColor);
-    expect(stackedPlotStyles.fontColor).toBe(fontColor);
+    // Set styles using setStyles function
+    await setStyles(page, backgroundColor, textColor, page.getByLabel('Stacked Plot Frame'));
 
-    // Save Flexible Layout
-    await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
-
-    // Reload page and check styles again
-    await page.goto(flexibleLayout.url);
-    stackedPlotContainer = await page.locator('.c-plot--stacked');
-    stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
-      return {
-        background: window.getComputedStyle(el).getPropertyValue('background-color'),
-        fontColor: window.getComputedStyle(el).getPropertyValue('color')
-      };
-    });
+    // Check styles using checkStyles function
+    await checkStyles(
+      page,
+      hexToRGB(backgroundColor),
+      hexToRGB(textColor),
+      page.getByLabel('Stacked Plot Frame')
+    );
 
-    // Verify styles match set styles
-    expect(stackedPlotStyles.background).toBe(backgroundColor);
-    expect(stackedPlotStyles.fontColor).toBe(fontColor);
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Reload page
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Check styles using checkStyles function
+    await checkStyles(
+      page,
+      hexToRGB(backgroundColor),
+      hexToRGB(textColor),
+      page.getByLabel('Stacked Plot Frame')
+    );
   });
 
   test('When the "no style" option is selected, background and text should be reset to inherited styles', async ({
@@ -192,92 +180,114 @@ test.describe('Flexible Layout styling', () => {
   }) => {
     // Set background and font color on Stacked Plot object
     const backgroundColor = 'rgb(91, 15, 0)';
-    const fontColor = 'rgb(230, 184, 175)';
-    const inheritedBackgroundColor = 'rgba(0, 0, 0, 0)'; // inherited from the theme
-    const inheritedFontColor = 'rgb(170, 170, 170)'; // inherited from the body style
+    const textColor = 'rgb(230, 184, 175)';
+    const inheritedBackgroundColor = '#000000'; // inherited from the theme
+    const inheritedColor = '#aaaaaa'; // inherited from the body style
+
+    // Directly navigate to the flexible layout
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
     // Edit Flexible Layout
-    await page.locator('[title="Edit"]').click();
-    // Select Stacked Plot
-    let stackedPlotContainer = await page.locator('.c-plot--stacked');
-    // eslint-disable-next-line playwright/no-force-option
-    stackedPlotContainer.click({ force: true });
+    await page.getByLabel('Edit').click();
 
     // Select styles tab
-    await page.locator('.c-inspector__tab[title="Styles"]').click();
-    // Set background color
-    await page.locator('.c-icon-button.icon-paint-bucket').click();
-    await page.locator(`.c-palette__item[style="background: ${backgroundColor};"]`).click();
-    // Set font color
-    await page.locator('.c-icon-button.icon-font[title="Set text color"]').click();
-    await page.locator(`.c-palette__item[style="background: ${fontColor};"]`).click();
-
-    // Get Stacked Plot styles
-    let stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
-      return {
-        background: window.getComputedStyle(el).getPropertyValue('background-color'),
-        fontColor: window.getComputedStyle(el).getPropertyValue('color')
-      };
-    });
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    // Set styles using setStyles function
+    await setStyles(page, backgroundColor, textColor, page.getByLabel('Stacked Plot Frame'));
 
-    // Verify styles match set styles
-    expect(stackedPlotStyles.background).toBe(backgroundColor);
-    expect(stackedPlotStyles.fontColor).toBe(fontColor);
+    // Check styles using checkStyles function
+    await checkStyles(
+      page,
+      hexToRGB(backgroundColor),
+      hexToRGB(textColor),
+      page.getByLabel('Stacked Plot Frame')
+    );
 
     // Save Flexible Layout
-    await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
-    // Reload page and set styles to "None"
-    await page.goto(flexibleLayout.url);
+    // Reload page and set Styles to 'None'
+    await page.reload({ waitUntil: 'domcontentloaded' });
 
     // Edit Flexible Layout
-    await page.locator('[title="Edit"]').click();
-    // Select Stacked Plot
-    stackedPlotContainer = await page.locator('.c-plot--stacked');
-    // eslint-disable-next-line playwright/no-force-option
-    stackedPlotContainer.click({ force: true });
+    await page.getByLabel('Edit').click();
 
     // Select styles tab
-    await page.locator('.c-inspector__tab[title="Styles"]').click();
-    // Set background color
-    await page.locator('.c-icon-button.icon-paint-bucket').click();
-    await page.locator(`.c-palette__item-none`).click();
-    // Set font color
-    await page.locator('.c-icon-button.icon-font[title="Set text color"]').click();
-    await page.locator(`.c-palette__item-none`).click();
-
-    // Get Stacked Plot styles
-    stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
-      return {
-        background: window.getComputedStyle(el).getPropertyValue('background-color'),
-        fontColor: window.getComputedStyle(el).getPropertyValue('color')
-      };
-    });
+    await page.getByRole('tab', { name: 'Styles' }).click();
 
-    // Verify styles match inherited styles
-    expect(stackedPlotStyles.background).toBe(inheritedBackgroundColor);
-    expect(stackedPlotStyles.fontColor).toBe(inheritedFontColor);
+    await setStyles(page, 'No Style', 'No Style', page.getByLabel('Stacked Plot Frame'));
 
+    // Check styles using checkStyles function
+    await checkStyles(
+      page,
+      hexToRGB(inheritedBackgroundColor),
+      hexToRGB(inheritedColor),
+      page.getByLabel('Stacked Plot Frame')
+    );
     // Save Flexible Layout
     await page.locator('button[title="Save"]').click();
     await page.locator('text=Save and Finish Editing').click();
 
-    // Reload page and check styles again after resetting styles to "None"
-    await page.goto(flexibleLayout.url);
+    // Reload page and verify that styles persist
+    await page.reload({ waitUntil: 'domcontentloaded' });
 
-    // Select Stacked Plot
-    stackedPlotContainer = await page.locator('.c-plot--stacked');
+    // Check styles using checkStyles function
+    await checkStyles(
+      page,
+      hexToRGB(inheritedBackgroundColor),
+      hexToRGB(inheritedColor),
+      page.getByLabel('Stacked Plot Frame')
+    );
+  });
+});
 
-    // Get Stacked Plot styles
-    stackedPlotStyles = await stackedPlotContainer.evaluate((el) => {
-      return {
-        background: window.getComputedStyle(el).getPropertyValue('background-color'),
-        fontColor: window.getComputedStyle(el).getPropertyValue('color')
-      };
-    });
+/**
+ * Converts a hex color value to its RGB equivalent.
+ *
+ * @param {string} hex - The hex color value.
+ * @returns {string} The RGB equivalent of the hex color.
+ */
+function hexToRGB(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})`
+    : null;
+}
+
+/**
+ * Sets the background and text color of a given element.
+ *
+ * @param {object} page - The Playwright page object.
+ * @param {string} backgroundColorHex - The hex value of the background color to set.
+ * @param {string} textColorHex - The hex value of the text color to set.
+ * @param {object} locator - The Playwright locator for the element whose style is to be set.
+ */
+async function setStyles(page, backgroundColorHex, textColorHex, locator) {
+  await locator.click(); // Assuming the locator is clickable and opens the style setting UI
+  await page.getByLabel('Set background color').click();
+  await page.getByLabel(backgroundColorHex).click();
+  await page.getByLabel('Set text color').click();
+  await page.getByLabel(textColorHex).click();
+}
 
-    // Verify styles match inherited styles
-    expect(stackedPlotStyles.background).toBe(inheritedBackgroundColor);
-    expect(stackedPlotStyles.fontColor).toBe(inheritedFontColor);
+/**
+ * Checks if the styles of an element match the expected values.
+ *
+ * @param {object} page - The Playwright page object.
+ * @param {string} expectedBackgroundColor - The expected background color in RGB format.
+ * @param {string} expectedTextColor - The expected text color in RGB format.
+ * @param {object} locator - The Playwright locator for the element whose style is to be checked.
+ */
+async function checkStyles(page, expectedBackgroundColor, expectedTextColor, locator) {
+  const layoutStyles = await locator.evaluate((el) => {
+    return {
+      background: window.getComputedStyle(el).getPropertyValue('background-color'),
+      fontColor: window.getComputedStyle(el).getPropertyValue('color')
+    };
   });
-});
+
+  expect(layoutStyles.background).toContain(expectedBackgroundColor);
+  expect(layoutStyles.fontColor).toContain(expectedTextColor);
+}

From 742e8e0ed4a8ccdc81de33d9ce95b91c87b3246e Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Tue, 26 Dec 2023 09:40:24 -0800
Subject: [PATCH 13/34] fixes

---
 e2e/tests/functional/styling.e2e.spec.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/e2e/tests/functional/styling.e2e.spec.js b/e2e/tests/functional/styling.e2e.spec.js
index cb07f0fb03a..a545f007c38 100644
--- a/e2e/tests/functional/styling.e2e.spec.js
+++ b/e2e/tests/functional/styling.e2e.spec.js
@@ -179,8 +179,8 @@ test.describe('Flexible Layout styling', () => {
     page
   }) => {
     // Set background and font color on Stacked Plot object
-    const backgroundColor = 'rgb(91, 15, 0)';
-    const textColor = 'rgb(230, 184, 175)';
+    const backgroundColor = '#5b0f00';
+    const textColor = '#e6b8af';
     const inheritedBackgroundColor = '#000000'; // inherited from the theme
     const inheritedColor = '#aaaaaa'; // inherited from the body style
 
@@ -217,6 +217,7 @@ test.describe('Flexible Layout styling', () => {
     // Select styles tab
     await page.getByRole('tab', { name: 'Styles' }).click();
 
+    //Select the 'No Style' option
     await setStyles(page, 'No Style', 'No Style', page.getByLabel('Stacked Plot Frame'));
 
     // Check styles using checkStyles function
@@ -260,8 +261,8 @@ function hexToRGB(hex) {
  * Sets the background and text color of a given element.
  *
  * @param {object} page - The Playwright page object.
- * @param {string} backgroundColorHex - The hex value of the background color to set.
- * @param {string} textColorHex - The hex value of the text color to set.
+ * @param {string} backgroundColorHex - The hex value of the background color to set, or 'No Style'.
+ * @param {string} textColorHex - The hex value of the text color to set, or 'No Style'.
  * @param {object} locator - The Playwright locator for the element whose style is to be set.
  */
 async function setStyles(page, backgroundColorHex, textColorHex, locator) {

From 5f5c07ee502196cf22e345b0374a0dac342421a1 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Thu, 28 Dec 2023 12:18:57 -0800
Subject: [PATCH 14/34] test(e2e): fix styling tests

---
 e2e/tests/functional/styling.e2e.spec.js      | 49 +++++++++----------
 .../components/FlexibleLayout.vue             |  1 +
 src/plugins/plot/stackedPlot/StackedPlot.vue  |  1 +
 3 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/e2e/tests/functional/styling.e2e.spec.js b/e2e/tests/functional/styling.e2e.spec.js
index a545f007c38..452a640eed8 100644
--- a/e2e/tests/functional/styling.e2e.spec.js
+++ b/e2e/tests/functional/styling.e2e.spec.js
@@ -57,8 +57,6 @@ test.describe('Flex Layout Style Inspector Options', () => {
 });
 
 test.describe('Flexible Layout styling', () => {
-  let sineWaveObject;
-  let sineWaveObject2;
   let stackedPlot;
   let flexibleLayout;
   test.beforeEach(async ({ page }) => {
@@ -78,13 +76,13 @@ test.describe('Flexible Layout styling', () => {
     });
 
     // Create two SWGs and attach them to the Stacked Plot
-    sineWaveObject = await createDomainObjectWithDefaults(page, {
+    await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Sine Wave Generator 1',
       parent: stackedPlot.uuid
     });
 
-    sineWaveObject2 = await createDomainObjectWithDefaults(page, {
+    await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Sine Wave Generator 2',
       parent: stackedPlot.uuid
@@ -108,14 +106,18 @@ test.describe('Flexible Layout styling', () => {
     await page.getByRole('tab', { name: 'Styles' }).click();
 
     // Set styles using setStyles function
-    await setStyles(page, backgroundColor, textColor, page.locator('.c-fl__container-holder'));
+    await setStyles(
+      page,
+      backgroundColor,
+      textColor,
+      page.getByLabel('Flexible Layout Style Target')
+    );
 
     // Check styles using checkStyles function
     await checkStyles(
-      page,
       hexToRGB(backgroundColor),
       hexToRGB(textColor),
-      page.locator('.c-fl__container-holder')
+      page.getByLabel('Flexible Layout Style Target')
     );
 
     // Save Flexible Layout
@@ -127,10 +129,9 @@ test.describe('Flexible Layout styling', () => {
 
     // Check styles using checkStyles function
     await checkStyles(
-      page,
       hexToRGB(backgroundColor),
       hexToRGB(textColor),
-      page.locator('.c-fl__container-holder')
+      page.getByLabel('Flexible Layout Style Target')
     );
   });
 
@@ -153,10 +154,9 @@ test.describe('Flexible Layout styling', () => {
 
     // Check styles using checkStyles function
     await checkStyles(
-      page,
       hexToRGB(backgroundColor),
       hexToRGB(textColor),
-      page.getByLabel('Stacked Plot Frame')
+      page.getByLabel('Stacked Plot Style Target')
     );
 
     // Save Flexible Layout
@@ -168,10 +168,9 @@ test.describe('Flexible Layout styling', () => {
 
     // Check styles using checkStyles function
     await checkStyles(
-      page,
       hexToRGB(backgroundColor),
       hexToRGB(textColor),
-      page.getByLabel('Stacked Plot Frame')
+      page.getByLabel('Stacked Plot Style Target')
     );
   });
 
@@ -181,8 +180,8 @@ test.describe('Flexible Layout styling', () => {
     // Set background and font color on Stacked Plot object
     const backgroundColor = '#5b0f00';
     const textColor = '#e6b8af';
-    const inheritedBackgroundColor = '#000000'; // inherited from the theme
     const inheritedColor = '#aaaaaa'; // inherited from the body style
+    const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)';
 
     // Directly navigate to the flexible layout
     await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
@@ -198,10 +197,9 @@ test.describe('Flexible Layout styling', () => {
 
     // Check styles using checkStyles function
     await checkStyles(
-      page,
       hexToRGB(backgroundColor),
       hexToRGB(textColor),
-      page.getByLabel('Stacked Plot Frame')
+      page.getByLabel('Stacked Plot Style Target')
     );
 
     // Save Flexible Layout
@@ -222,10 +220,9 @@ test.describe('Flexible Layout styling', () => {
 
     // Check styles using checkStyles function
     await checkStyles(
-      page,
-      hexToRGB(inheritedBackgroundColor),
+      NO_STYLE_RGBA,
       hexToRGB(inheritedColor),
-      page.getByLabel('Stacked Plot Frame')
+      page.getByLabel('Stacked Plot Style Target')
     );
     // Save Flexible Layout
     await page.locator('button[title="Save"]').click();
@@ -236,10 +233,9 @@ test.describe('Flexible Layout styling', () => {
 
     // Check styles using checkStyles function
     await checkStyles(
-      page,
-      hexToRGB(inheritedBackgroundColor),
+      NO_STYLE_RGBA,
       hexToRGB(inheritedColor),
-      page.getByLabel('Stacked Plot Frame')
+      page.getByLabel('Stacked Plot Style Target')
     );
   });
 });
@@ -260,10 +256,10 @@ function hexToRGB(hex) {
 /**
  * Sets the background and text color of a given element.
  *
- * @param {object} page - The Playwright page object.
+ * @param {import('@playwright/test').Page} page - The Playwright page object.
  * @param {string} backgroundColorHex - The hex value of the background color to set, or 'No Style'.
  * @param {string} textColorHex - The hex value of the text color to set, or 'No Style'.
- * @param {object} locator - The Playwright locator for the element whose style is to be set.
+ * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be set.
  */
 async function setStyles(page, backgroundColorHex, textColorHex, locator) {
   await locator.click(); // Assuming the locator is clickable and opens the style setting UI
@@ -276,12 +272,11 @@ async function setStyles(page, backgroundColorHex, textColorHex, locator) {
 /**
  * Checks if the styles of an element match the expected values.
  *
- * @param {object} page - The Playwright page object.
  * @param {string} expectedBackgroundColor - The expected background color in RGB format.
  * @param {string} expectedTextColor - The expected text color in RGB format.
- * @param {object} locator - The Playwright locator for the element whose style is to be checked.
+ * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be checked.
  */
-async function checkStyles(page, expectedBackgroundColor, expectedTextColor, locator) {
+async function checkStyles(expectedBackgroundColor, expectedTextColor, locator) {
   const layoutStyles = await locator.evaluate((el) => {
     return {
       background: window.getComputedStyle(el).getPropertyValue('background-color'),
diff --git a/src/plugins/flexibleLayout/components/FlexibleLayout.vue b/src/plugins/flexibleLayout/components/FlexibleLayout.vue
index c81e7b48231..859353c7748 100644
--- a/src/plugins/flexibleLayout/components/FlexibleLayout.vue
+++ b/src/plugins/flexibleLayout/components/FlexibleLayout.vue
@@ -33,6 +33,7 @@
       :class="{
         'c-fl--rows': rowsLayout === true
       }"
+      aria-label="Flexible Layout Style Target"
     >
       <template v-for="(container, index) in containers" :key="`component-${container.id}`">
         <drop-hint
diff --git a/src/plugins/plot/stackedPlot/StackedPlot.vue b/src/plugins/plot/stackedPlot/StackedPlot.vue
index 02866814d7f..263a2f816e6 100644
--- a/src/plugins/plot/stackedPlot/StackedPlot.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlot.vue
@@ -25,6 +25,7 @@
     v-if="loaded"
     class="c-plot c-plot--stacked holder holder-plot has-control-bar u-style-receiver js-style-receiver"
     :class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
+    aria-label="Stacked Plot Style Target"
   >
     <plot-legend
       v-if="compositionObjectsConfigLoaded && showLegendsForChildren === false"

From 70ad07428b23855b17d0ff0336af997fa07553a4 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Thu, 28 Dec 2023 14:53:46 -0800
Subject: [PATCH 15/34] test(e2e): fix flex layout toolbar test

---
 .../plugins/flexibleLayout/flexibleLayout.e2e.spec.js  | 10 ++++++----
 .../flexibleLayout/components/ContainerComponent.vue   |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js b/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
index 1db3e2486d3..b63c8828ce4 100644
--- a/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
+++ b/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
@@ -284,16 +284,18 @@ test.describe('Flexible Layout Toolbar Actions @localStorage', () => {
       type: 'issue',
       description: 'https://github.com/nasa/openmct/issues/7234'
     });
-    expect(await page.getByRole('group', { name: 'Container' }).count()).toEqual(2);
-    await page.getByRole('group', { name: 'Container' }).nth(1).click();
+
+    const containerHandles = page.getByRole('columnheader', { name: 'Handle' });
+    expect(await containerHandles.count()).toEqual(2);
+    await page.getByRole('columnheader', { name: 'Container Handle 1' }).click();
     await page.getByTitle('Add Container').click();
-    expect(await page.getByRole('group', { name: 'Container' }).count()).toEqual(3);
+    expect(await containerHandles.count()).toEqual(3);
     await page.getByTitle('Remove Container').click();
     await expect(page.getByRole('dialog')).toHaveText(
       'This action will permanently delete this container from this Flexible Layout. Do you want to continue?'
     );
     await page.getByRole('button', { name: 'OK' }).click();
-    expect(await page.getByRole('group', { name: 'Container' }).count()).toEqual(2);
+    expect(await containerHandles.count()).toEqual(2);
   });
   test('Remove Frame', async ({ page }) => {
     expect(await page.getByRole('group', { name: 'Frame' }).count()).toEqual(2);
diff --git a/src/plugins/flexibleLayout/components/ContainerComponent.vue b/src/plugins/flexibleLayout/components/ContainerComponent.vue
index e0cdac738c8..dd1c65a6469 100644
--- a/src/plugins/flexibleLayout/components/ContainerComponent.vue
+++ b/src/plugins/flexibleLayout/components/ContainerComponent.vue
@@ -32,7 +32,7 @@
       class="c-fl-container__header"
       draggable="true"
       role="columnheader"
-      :aria-label="`Container Handle ${index}`"
+      :aria-label="`Container Handle ${index + 1}`"
       @dragstart="startContainerDrag"
     >
       <span class="c-fl-container__size-indicator">{{ sizeString }}</span>

From a8ac603c86a676472764c01f4ef6b3683180d907 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Thu, 28 Dec 2023 15:14:13 -0800
Subject: [PATCH 16/34] test(e2e): fix row/column layout test

---
 .../flexibleLayout/flexibleLayout.e2e.spec.js       |  9 +++++----
 e2e/tests/functional/styling.e2e.spec.js            | 13 ++++---------
 .../flexibleLayout/components/FlexibleLayout.vue    |  2 +-
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js b/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
index b63c8828ce4..dc7358e3004 100644
--- a/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
+++ b/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
@@ -308,11 +308,12 @@ test.describe('Flexible Layout Toolbar Actions @localStorage', () => {
     expect(await page.getByRole('group', { name: 'Frame' }).count()).toEqual(1);
   });
   test('Columns/Rows Layout Toggle', async ({ page }) => {
-    await page.getByRole('group', { name: 'Container' }).nth(1).click();
-    expect(await page.locator('.c-fl--rows').count()).toEqual(0);
+    await page.getByRole('columnheader', { name: 'Container Handle 1' }).click();
+    const flexRows = page.getByLabel('Flexible Layout Row');
+    expect(await flexRows.count()).toEqual(0);
     await page.getByTitle('Columns layout').click();
-    expect(await page.locator('.c-fl--rows').count()).toEqual(1);
+    expect(await flexRows.count()).toEqual(1);
     await page.getByTitle('Rows layout').click();
-    expect(await page.locator('.c-fl--rows').count()).toEqual(0);
+    expect(await flexRows.count()).toEqual(0);
   });
 });
diff --git a/e2e/tests/functional/styling.e2e.spec.js b/e2e/tests/functional/styling.e2e.spec.js
index 452a640eed8..9fbab6b7e21 100644
--- a/e2e/tests/functional/styling.e2e.spec.js
+++ b/e2e/tests/functional/styling.e2e.spec.js
@@ -49,7 +49,7 @@ test.describe('Flex Layout Style Inspector Options', () => {
     await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
 
     // Select flexible layout column
-    await page.getByLabel('Container Handle 0').click();
+    await page.getByLabel('Container Handle 1').click();
 
     // Expect to find no styles tab
     await expect(page.getByRole('tab', { name: 'Styles' })).toBeHidden();
@@ -106,18 +106,13 @@ test.describe('Flexible Layout styling', () => {
     await page.getByRole('tab', { name: 'Styles' }).click();
 
     // Set styles using setStyles function
-    await setStyles(
-      page,
-      backgroundColor,
-      textColor,
-      page.getByLabel('Flexible Layout Style Target')
-    );
+    await setStyles(page, backgroundColor, textColor, page.getByLabel('Flexible Layout Column'));
 
     // Check styles using checkStyles function
     await checkStyles(
       hexToRGB(backgroundColor),
       hexToRGB(textColor),
-      page.getByLabel('Flexible Layout Style Target')
+      page.getByLabel('Flexible Layout Column')
     );
 
     // Save Flexible Layout
@@ -131,7 +126,7 @@ test.describe('Flexible Layout styling', () => {
     await checkStyles(
       hexToRGB(backgroundColor),
       hexToRGB(textColor),
-      page.getByLabel('Flexible Layout Style Target')
+      page.getByLabel('Flexible Layout Column')
     );
   });
 
diff --git a/src/plugins/flexibleLayout/components/FlexibleLayout.vue b/src/plugins/flexibleLayout/components/FlexibleLayout.vue
index 859353c7748..cb8ce2f79ba 100644
--- a/src/plugins/flexibleLayout/components/FlexibleLayout.vue
+++ b/src/plugins/flexibleLayout/components/FlexibleLayout.vue
@@ -33,7 +33,7 @@
       :class="{
         'c-fl--rows': rowsLayout === true
       }"
-      aria-label="Flexible Layout Style Target"
+      :aria-label="`Flexible Layout ${rowsLayout ? 'Row' : 'Column'}`"
     >
       <template v-for="(container, index) in containers" :key="`component-${container.id}`">
         <drop-hint

From 877b54ab7a43e42090a0bc886964bcb1b68feec3 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Date: Thu, 28 Dec 2023 16:02:47 -0800
Subject: [PATCH 17/34] a11y: "More options" -> "More actions"

- fix restricted notebook test locators
---
 e2e/tests/framework/exampleTemplate.e2e.spec.js     |  2 +-
 .../framework/generateLocalStorageData.e2e.spec.js  |  4 ++--
 e2e/tests/functional/clearDataAction.e2e.spec.js    |  2 +-
 e2e/tests/functional/forms.e2e.spec.js              |  2 +-
 .../plugins/conditionSet/conditionSet.e2e.spec.js   |  4 ++--
 .../functional/plugins/gauge/gauge.e2e.spec.js      |  4 ++--
 .../plugins/notebook/notebook.e2e.spec.js           |  2 +-
 .../plugins/notebook/notebookSnapshots.e2e.spec.js  |  6 +++---
 .../plugins/notebook/restrictedNotebook.e2e.spec.js | 10 +++++-----
 .../functional/plugins/notebook/tags.e2e.spec.js    |  2 +-
 .../plugins/plot/plotRendering.e2e.spec.js          |  2 +-
 .../functional/plugins/timer/timer.e2e.spec.js      |  6 +++---
 e2e/tests/visual-a11y/ladTable.visual.spec.js       |  2 +-
 src/api/menu/components/MenuComponent.vue           | 10 ++++++++--
 src/api/menu/components/SuperMenu.vue               | 13 ++++++++++++-
 .../inspectorDataVisualization/TelemetryFrame.vue   |  3 ++-
 src/plugins/notebook/components/NotebookEmbed.vue   |  3 ++-
 src/ui/layout/BrowseBar.vue                         |  3 ++-
 src/ui/preview/PreviewHeader.vue                    |  3 ++-
 19 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/e2e/tests/framework/exampleTemplate.e2e.spec.js b/e2e/tests/framework/exampleTemplate.e2e.spec.js
index 7435f861a4f..8ebc522ca9f 100644
--- a/e2e/tests/framework/exampleTemplate.e2e.spec.js
+++ b/e2e/tests/framework/exampleTemplate.e2e.spec.js
@@ -164,7 +164,7 @@ async function renameTimerFrom3DotMenu(page, timerUrl, newNameForTimer) {
   await page.goto(timerUrl);
 
   // Click on 3 Dot Menu
-  await page.locator('button[title="More options"]').click();
+  await page.locator('button[title="More actions"]').click();
 
   // Click text=Edit Properties...
   await page.locator('text=Edit Properties...').click();
diff --git a/e2e/tests/framework/generateLocalStorageData.e2e.spec.js b/e2e/tests/framework/generateLocalStorageData.e2e.spec.js
index 62de8b44e60..49f2004d0a0 100644
--- a/e2e/tests/framework/generateLocalStorageData.e2e.spec.js
+++ b/e2e/tests/framework/generateLocalStorageData.e2e.spec.js
@@ -130,7 +130,7 @@ test.describe('Generate Visual Test Data @localStorage @generatedata', () => {
     const exampleTelemetry = await createExampleTelemetryObject(page);
 
     // Make Link from Telemetry Object to Overlay Plot
-    await page.locator('button[title="More options"]').click();
+    await page.locator('button[title="More actions"]').click();
 
     // Select 'Create Link' from dropdown
     await page.getByRole('menuitem', { name: ' Create Link' }).click();
@@ -203,7 +203,7 @@ test.describe('Generate Visual Test Data @localStorage @generatedata', () => {
     const swgWith5sDelay = await createExampleTelemetryObject(page, overlayPlot.uuid);
 
     await page.goto(swgWith5sDelay.url);
-    await page.getByTitle('More options').click();
+    await page.getByTitle('More actions').click();
     await page.getByRole('menuitem', { name: ' Edit Properties...' }).click();
 
     //Edit Example Telemetry Object to include 5s loading Delay
diff --git a/e2e/tests/functional/clearDataAction.e2e.spec.js b/e2e/tests/functional/clearDataAction.e2e.spec.js
index 366907013c3..5f227a4df0d 100644
--- a/e2e/tests/functional/clearDataAction.e2e.spec.js
+++ b/e2e/tests/functional/clearDataAction.e2e.spec.js
@@ -45,7 +45,7 @@ test.describe('Clear Data Action', () => {
   test('works as expected with Example Imagery', async ({ page }) => {
     await expect(await page.locator('.c-thumb__image').count()).toBeGreaterThan(0);
     // Click the "Clear Data" menu action
-    await page.getByTitle('More options').click();
+    await page.getByTitle('More actions').click();
     const clearDataMenuItem = page.getByRole('menuitem', {
       name: 'Clear Data'
     });
diff --git a/e2e/tests/functional/forms.e2e.spec.js b/e2e/tests/functional/forms.e2e.spec.js
index 4f3c2fd0f34..29e92c3e62b 100644
--- a/e2e/tests/functional/forms.e2e.spec.js
+++ b/e2e/tests/functional/forms.e2e.spec.js
@@ -157,7 +157,7 @@ test.describe('Persistence operations @couchdb', () => {
     });
 
     // Open the edit form for the clock object
-    await page.click('button[title="More options"]');
+    await page.click('button[title="More actions"]');
     await page.click('li[title="Edit properties of this object."]');
 
     // Modify the display format from default 12hr -> 24hr and click 'Save'
diff --git a/e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js b/e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js
index 5217d71a0d4..cce3c54ae49 100644
--- a/e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js
+++ b/e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js
@@ -192,7 +192,7 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
       .first()
       .click();
     // Click hamburger button
-    await page.locator('[title="More options"]').click();
+    await page.locator('[title="More actions"]').click();
 
     // Click 'Remove' and press OK
     await page.locator('li[role="menuitem"]:has-text("Remove")').click();
@@ -362,7 +362,7 @@ test.describe('Basic Condition Set Use', () => {
 
     // Edit SWG to add 8 second loading delay to simulate the case
     // where telemetry is not available.
-    await page.getByTitle('More options').click();
+    await page.getByTitle('More actions').click();
     await page.getByRole('menuitem', { name: 'Edit Properties...' }).click();
     await page.getByRole('spinbutton', { name: 'Loading Delay (ms)' }).fill('8000');
     await page.getByLabel('Save').click();
diff --git a/e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js b/e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js
index 47118d6765a..5d007e17c37 100644
--- a/e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js
+++ b/e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js
@@ -127,7 +127,7 @@ test.describe('Gauge', () => {
 
     // Create the gauge with defaults
     await createDomainObjectWithDefaults(page, { type: 'Gauge' });
-    await page.click('button[title="More options"]');
+    await page.click('button[title="More actions"]');
     await page.click('li[role="menuitem"]:has-text("Edit Properties")');
     // FIXME: We need better selectors for these custom form controls
     const displayCurrentValueSwitch = page.locator('.c-toggle-switch__slider >> nth=0');
@@ -147,7 +147,7 @@ test.describe('Gauge', () => {
     const swgWith5sDelay = await createExampleTelemetryObject(page, gauge.uuid);
 
     await page.goto(swgWith5sDelay.url);
-    await page.getByTitle('More options').click();
+    await page.getByTitle('More actions').click();
     await page.getByRole('menuitem', { name: /Edit Properties.../ }).click();
 
     //Edit Example Telemetry Object to include 5s loading Delay
diff --git a/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js
index 354b2e72585..722de9964ae 100644
--- a/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js
@@ -246,7 +246,7 @@ test.describe('Notebook export tests', () => {
   test('can export notebook as text', async ({ page }) => {
     await nbUtils.enterTextEntry(page, `Foo bar entry`);
     // Click on 3 Dot Menu
-    await page.locator('button[title="More options"]').click();
+    await page.locator('button[title="More actions"]').click();
     const downloadPromise = page.waitForEvent('download');
 
     await page.getByRole('menuitem', { name: /Export Notebook as Text/ }).click();
diff --git a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
index 877da4da556..a48a7ebe5cc 100644
--- a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
@@ -104,7 +104,7 @@ test.describe('Snapshot Container tests', () => {
   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 options').click();
+      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();
@@ -117,7 +117,7 @@ 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 options').click();
+    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();
   });
@@ -209,7 +209,7 @@ test.describe('Snapshot image tests', () => {
     // expect two embedded images now
     expect(await page.getByRole('img', { name: 'favicon-96x96.png thumbnail' }).count()).toBe(2);
 
-    await page.locator('.c-snapshot.c-ne__embed').first().getByTitle('More options').click();
+    await page.locator('.c-snapshot.c-ne__embed').first().getByTitle('More actions').click();
 
     await page.getByRole('menuitem', { name: /Remove This Embed/ }).click();
     await page.getByRole('button', { name: 'Ok', exact: true }).click();
diff --git a/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js b/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js
index 669c09241d1..9ec2d5f3c68 100644
--- a/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js
@@ -152,18 +152,18 @@ test.describe('Restricted Notebook with a page locked and with an embed @addInit
 
   test('Allows embeds to be deleted if page unlocked @addInit', async ({ page }) => {
     // Click embed popup menu
-    await page.locator('.c-ne__embed__name .c-icon-button').click();
+    await page.getByLabel('Notebook Entry').getByLabel('More actions').click();
 
-    const embedMenu = page.locator('body >> .c-menu');
+    const embedMenu = page.getByLabel('Super Menu');
     await expect(embedMenu).toContainText('Remove This Embed');
   });
 
   test('Disallows embeds to be deleted if page locked @addInit', async ({ page }) => {
     await lockPage(page);
     // Click embed popup menu
-    await page.locator('.c-ne__embed__name .c-icon-button').click();
+    await page.getByLabel('Notebook Entry').getByLabel('More actions').click();
 
-    const embedMenu = page.locator('body >> .c-menu');
+    const embedMenu = page.getByLabel('Super Menu');
     await expect(embedMenu).not.toContainText('Remove This Embed');
   });
 });
@@ -176,7 +176,7 @@ test.describe('can export restricted notebook as text', () => {
   test('basic functionality ', async ({ page }) => {
     await enterTextEntry(page, `Foo bar entry`);
     // Click on 3 Dot Menu
-    await page.locator('button[title="More options"]').click();
+    await page.locator('button[title="More actions"]').click();
     const downloadPromise = page.waitForEvent('download');
 
     await page.getByRole('menuitem', { name: /Export Notebook as Text/ }).click();
diff --git a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
index b520bf1fb54..6a55a6faf3c 100644
--- a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
@@ -167,7 +167,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
   test('Can delete objects with tags and neither return in search', async ({ page }) => {
     await createNotebookEntryAndTags(page);
     // Delete Notebook
-    await page.locator('button[title="More options"]').click();
+    await page.locator('button[title="More actions"]').click();
     await page.locator('li[title="Remove this object from its containing object."]').click();
     await page.locator('button:has-text("OK")').click();
     await page.goto('./', { waitUntil: 'domcontentloaded' });
diff --git a/e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js b/e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js
index 767a6a1757d..845b521a10e 100644
--- a/e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js
@@ -73,7 +73,7 @@ test.describe('Plot Rendering', () => {
 async function editSineWaveToUseInfinityOption(page, sineWaveGeneratorObject) {
   await page.goto(sineWaveGeneratorObject.url);
   // Edit SWG properties to include infinity values
-  await page.locator('[title="More options"]').click();
+  await page.locator('[title="More actions"]').click();
   await page.locator('[title="Edit properties of this object."]').click();
   await page
     .getByRole('switch', {
diff --git a/e2e/tests/functional/plugins/timer/timer.e2e.spec.js b/e2e/tests/functional/plugins/timer/timer.e2e.spec.js
index bdab38997b7..2df1ab96bbd 100644
--- a/e2e/tests/functional/plugins/timer/timer.e2e.spec.js
+++ b/e2e/tests/functional/plugins/timer/timer.e2e.spec.js
@@ -85,7 +85,7 @@ test.describe('Timer with target date', () => {
 
   test('Can count down to a target date', async ({ page }) => {
     // Set the target date to 2024-11-24 03:30:00
-    await page.getByTitle('More options').click();
+    await page.getByTitle('More actions').click();
     await page.getByRole('menuitem', { name: /Edit Properties.../ }).click();
     await page.getByPlaceholder('YYYY-MM-DD').fill('2024-11-24');
     await page.locator('input[name="hour"]').fill('3');
@@ -108,7 +108,7 @@ test.describe('Timer with target date', () => {
 
   test('Can count up from a target date', async ({ page }) => {
     // Set the target date to 2020-11-23 03:30:00
-    await page.getByTitle('More options').click();
+    await page.getByTitle('More actions').click();
     await page.getByRole('menuitem', { name: /Edit Properties.../ }).click();
     await page.getByPlaceholder('YYYY-MM-DD').fill('2020-11-23');
     await page.locator('input[name="hour"]').fill('3');
@@ -159,7 +159,7 @@ async function triggerTimerContextMenuAction(page, timerUrl, action) {
  */
 async function triggerTimer3dotMenuAction(page, action) {
   const menuAction = `.c-menu ul li >> text="${action}"`;
-  const threeDotMenuButton = 'button[title="More options"]';
+  const threeDotMenuButton = 'button[title="More actions"]';
   let isActionAvailable = false;
   let iterations = 0;
   // Dismiss/open the 3dot menu until the action is available
diff --git a/e2e/tests/visual-a11y/ladTable.visual.spec.js b/e2e/tests/visual-a11y/ladTable.visual.spec.js
index f64cfc17c70..ecdc46f2ea1 100644
--- a/e2e/tests/visual-a11y/ladTable.visual.spec.js
+++ b/e2e/tests/visual-a11y/ladTable.visual.spec.js
@@ -45,7 +45,7 @@ test.describe('Visual - LAD Table', () => {
     });
 
     //Modify SWG to create a really stable SWG
-    await page.locator('button[title="More options"]').click();
+    await page.locator('button[title="More actions"]').click();
 
     await page.getByRole('menuitem', { name: ' Edit Properties...' }).click();
 
diff --git a/src/api/menu/components/MenuComponent.vue b/src/api/menu/components/MenuComponent.vue
index 68b1136b3d2..0c01efc88d3 100644
--- a/src/api/menu/components/MenuComponent.vue
+++ b/src/api/menu/components/MenuComponent.vue
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="c-menu" :class="options.menuClass" :style="styleObject">
+  <div :aria-label="getLabel" class="c-menu" :class="options.menuClass" :style="styleObject">
     <ul v-if="options.actions.length && options.actions[0].length" role="menu">
       <template v-for="(actionGroups, index) in options.actions" :key="index">
         <div role="group">
@@ -65,6 +65,12 @@
 import popupMenuMixin from '../mixins/popupMenuMixin';
 export default {
   mixins: [popupMenuMixin],
-  inject: ['options']
+  inject: ['options'],
+  computed: {
+    getLabel() {
+      const label = this.options.label ? `${this.options.label} Menu` : 'Menu';
+      return label;
+    }
+  }
 };
 </script>
diff --git a/src/api/menu/components/SuperMenu.vue b/src/api/menu/components/SuperMenu.vue
index 808750d8ca3..3e2157f9c6f 100644
--- a/src/api/menu/components/SuperMenu.vue
+++ b/src/api/menu/components/SuperMenu.vue
@@ -20,7 +20,12 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="c-menu" :class="[options.menuClass, 'c-super-menu']" :style="styleObject">
+  <div
+    :aria-label="getLabel"
+    class="c-menu"
+    :class="[options.menuClass, 'c-super-menu']"
+    :style="styleObject"
+  >
     <ul
       v-if="options.actions.length && options.actions[0].length"
       role="menu"
@@ -88,6 +93,12 @@ export default {
       hoveredItem: {}
     };
   },
+  computed: {
+    getLabel() {
+      const label = this.options.label ? `${this.options.label} Super Menu` : 'Super Menu';
+      return label;
+    }
+  },
   methods: {
     toggleItemDescription(action = {}) {
       const hoveredItem = {
diff --git a/src/plugins/inspectorDataVisualization/TelemetryFrame.vue b/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
index 23b53fdd783..5b18b966d68 100644
--- a/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
+++ b/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
@@ -29,7 +29,8 @@
       </span>
       <button
         ref="menu-button"
-        title="More options"
+        title="More actions"
+        aria-label="More actions"
         class="l-browse-bar__actions c-icon-button icon-3-dots"
         @click="toggleMenu"
       ></button>
diff --git a/src/plugins/notebook/components/NotebookEmbed.vue b/src/plugins/notebook/components/NotebookEmbed.vue
index 7a1d5346a8f..5d1faf06de9 100644
--- a/src/plugins/notebook/components/NotebookEmbed.vue
+++ b/src/plugins/notebook/components/NotebookEmbed.vue
@@ -36,7 +36,8 @@
         </a>
         <button
           class="c-ne__embed__actions c-icon-button icon-3-dots"
-          title="More options"
+          title="More actions"
+          aria-label="More actions"
           @click.prevent.stop="showMenuItems($event)"
         ></button>
       </div>
diff --git a/src/ui/layout/BrowseBar.vue b/src/ui/layout/BrowseBar.vue
index 60afaf76a1a..4b50d7934e6 100644
--- a/src/ui/layout/BrowseBar.vue
+++ b/src/ui/layout/BrowseBar.vue
@@ -128,7 +128,8 @@
         ></button>
         <button
           class="l-browse-bar__actions c-icon-button icon-3-dots"
-          title="More options"
+          title="More actions"
+          aria-label="More actions"
           @click.prevent.stop="showMenuItems($event)"
         ></button>
       </div>
diff --git a/src/ui/preview/PreviewHeader.vue b/src/ui/preview/PreviewHeader.vue
index 6424dc2068a..21aa5fe91f3 100644
--- a/src/ui/preview/PreviewHeader.vue
+++ b/src/ui/preview/PreviewHeader.vue
@@ -48,7 +48,8 @@
         ></button>
         <button
           class="l-browse-bar__actions c-icon-button icon-3-dots"
-          title="More options"
+          title="More actions"
+          aria-label="More actions"
           @click.prevent.stop="showMenuItems($event)"
         ></button>
       </div>

From 3e16f0f36e50881a2fe252ff4d667b0abade7cc5 Mon Sep 17 00:00:00 2001
From: Khalid Adil <khalidadil29@gmail.com>
Date: Fri, 29 Dec 2023 19:10:11 -0600
Subject: [PATCH 18/34] Change name of computed property for options label from
 getLabel to optionsLabel

---
 src/api/menu/components/MenuComponent.vue | 4 ++--
 src/api/menu/components/SuperMenu.vue     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/api/menu/components/MenuComponent.vue b/src/api/menu/components/MenuComponent.vue
index 0c01efc88d3..4d74d56a3b6 100644
--- a/src/api/menu/components/MenuComponent.vue
+++ b/src/api/menu/components/MenuComponent.vue
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div :aria-label="getLabel" class="c-menu" :class="options.menuClass" :style="styleObject">
+  <div :aria-label="optionsLabel" class="c-menu" :class="options.menuClass" :style="styleObject">
     <ul v-if="options.actions.length && options.actions[0].length" role="menu">
       <template v-for="(actionGroups, index) in options.actions" :key="index">
         <div role="group">
@@ -67,7 +67,7 @@ export default {
   mixins: [popupMenuMixin],
   inject: ['options'],
   computed: {
-    getLabel() {
+    optionsLabel() {
       const label = this.options.label ? `${this.options.label} Menu` : 'Menu';
       return label;
     }
diff --git a/src/api/menu/components/SuperMenu.vue b/src/api/menu/components/SuperMenu.vue
index 3e2157f9c6f..29077b164e9 100644
--- a/src/api/menu/components/SuperMenu.vue
+++ b/src/api/menu/components/SuperMenu.vue
@@ -21,7 +21,7 @@
 -->
 <template>
   <div
-    :aria-label="getLabel"
+    :aria-label="optionsLabel"
     class="c-menu"
     :class="[options.menuClass, 'c-super-menu']"
     :style="styleObject"
@@ -94,7 +94,7 @@ export default {
     };
   },
   computed: {
-    getLabel() {
+    optionsLabel() {
       const label = this.options.label ? `${this.options.label} Super Menu` : 'Super Menu';
       return label;
     }

From 9945814b5776350f1b5c75fc43e8aef0cd7599cc Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Tue, 2 Jan 2024 10:02:11 -0800
Subject: [PATCH 19/34] split up tests and work on stackedPlotStyling

---
 e2e/helper/stylingUtils.js                    |  78 ++++
 .../styling/flexLayoutStyling.e2e.spec.js     | 392 ++++++++++++++++++
 .../styling/stackedPlotStyling.e2e.spec.js}   | 199 ++++-----
 3 files changed, 553 insertions(+), 116 deletions(-)
 create mode 100644 e2e/helper/stylingUtils.js
 create mode 100644 e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js
 rename e2e/tests/functional/{styling.e2e.spec.js => plugins/styling/stackedPlotStyling.e2e.spec.js} (54%)

diff --git a/e2e/helper/stylingUtils.js b/e2e/helper/stylingUtils.js
new file mode 100644
index 00000000000..03a81e5f26a
--- /dev/null
+++ b/e2e/helper/stylingUtils.js
@@ -0,0 +1,78 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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.
+ *****************************************************************************/
+
+const { expect } = require('../pluginFixtures');
+
+/**
+ * Converts a hex color value to its RGB equivalent.
+ *
+ * @param {string} hex - The hex color value.
+ * @returns {string} The RGB equivalent of the hex color.
+ */
+function hexToRGB(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})`
+    : null;
+}
+
+/**
+ * Sets the background and text color of a given element.
+ *
+ * @param {import('@playwright/test').Page} page - The Playwright page object.
+ * @param {string} backgroundColorHex - The hex value of the background color to set, or 'No Style'.
+ * @param {string} textColorHex - The hex value of the text color to set, or 'No Style'.
+ * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be set.
+ */
+async function setStyles(page, backgroundColorHex, textColorHex, locator) {
+  await locator.click(); // Assuming the locator is clickable and opens the style setting UI
+  await page.getByLabel('Set background color').click();
+  await page.getByLabel(backgroundColorHex).click();
+  await page.getByLabel('Set text color').click();
+  await page.getByLabel(textColorHex).click();
+}
+
+/**
+ * Checks if the styles of an element match the expected values.
+ *
+ * @param {string} expectedBackgroundColor - The expected background color in RGB format.
+ * @param {string} expectedTextColor - The expected text color in RGB format.
+ * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be checked.
+ */
+async function checkStyles(expectedBackgroundColor, expectedTextColor, locator) {
+  const layoutStyles = await locator.evaluate((el) => {
+    return {
+      background: window.getComputedStyle(el).getPropertyValue('background-color'),
+      fontColor: window.getComputedStyle(el).getPropertyValue('color')
+    };
+  });
+
+  expect(layoutStyles.background).toContain(expectedBackgroundColor);
+  expect(layoutStyles.fontColor).toContain(expectedTextColor);
+}
+
+// eslint-disable-next-line no-undef
+module.exports = {
+  checkStyles,
+  setStyles,
+  hexToRGB
+};
diff --git a/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js
new file mode 100644
index 00000000000..8aa186674e8
--- /dev/null
+++ b/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js
@@ -0,0 +1,392 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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.
+ *****************************************************************************/
+
+/**
+ * This test is dedicated to test styling of various plugins
+ */
+
+const { test, expect } = require('../../../../pluginFixtures');
+const { createDomainObjectWithDefaults } = require('../../../../appActions');
+const { hexToRGB, setStyles, checkStyles } = require('../../../../helper/stylingUtils');
+
+test.describe('Style Inspector Options', () => {
+  let flexibleLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a Flexible Layout and attach to the Stacked Plot
+    flexibleLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout',
+      name: 'Flexible Layout'
+    });
+    // Create a Stacked Plot and attach to the Flexible Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'Stacked Plot',
+      parent: flexibleLayout.uuid
+    });
+  });
+
+  test('styles button appears when appropriate component selected', async ({ page }) => {
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit').click();
+
+    // The overall Flex Layout or Stacked Plot itself MUST be style-able.
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
+
+    // Select flexible layout column
+    await page.getByLabel('Container Handle 1').click();
+
+    // Flex Layout containers should NOT be style-able.
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeHidden();
+
+    // Select Flex Layout Column
+    await page.getByLabel('Flexible Layout Column').click();
+
+    // The overall Flex Layout or Stacked Plot itself MUST be style-able.
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
+
+    // Select Stacked Layout Column
+    await page.getByLabel('Stacked Plot Frame').click();
+
+    // The overall Flex Layout or Stacked Plot itself MUST be style-able.
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
+  });
+});
+
+test.describe('Flexible Layout styling', () => {
+  let stackedPlot;
+  let flexibleLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a Flexible Layout and attach to the Stacked Plot
+    flexibleLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout',
+      name: 'Flexible Layout'
+    });
+
+    // Create a Stacked Plot and attach to the Flexible Layout
+    stackedPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'StackedPlot1',
+      parent: flexibleLayout.uuid
+    });
+
+    // Create a Stacked Plot and attach to the Flexible Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'StackedPlot2',
+      parent: flexibleLayout.uuid
+    });
+  });
+
+  test('styling the flexible layout properly applies the styles to all containers', async ({
+    page
+  }) => {
+    // Set background and font color on first Flex Colum
+    const setBackgroundColor = '#5b0f00';
+    const setTextColor = '#e6b8af';
+
+    // Directly navigate to the flexible layout
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    // Set styles using setStyles function
+    await setStyles(
+      page,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('Flexible Layout Column')
+    );
+
+    // Check styles using checkStyles function
+    await checkStyles(
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('Flexible Layout Column')
+    );
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Reload page
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Check styles using checkStyles function
+    await checkStyles(
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('Flexible Layout Column')
+    );
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+  });
+
+  test('styling a child object of the flexible layout properly applies that style to only that child', async ({
+    page
+  }) => {
+    // Set background and font color on Stacked Plot object
+    const setBackgroundColor = '#5b0f00';
+    const setTextColor = '#e6b8af';
+    const defaultTextColor = '#aaaaaa'; // default text color
+    const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
+
+    // Directly navigate to the flexible layout
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
+    await setStyles(page, setBackgroundColor, setTextColor, page.getByLabel('StackedPlot1 Frame'));
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Reload page and verify that styles persist
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+  });
+
+  test('a previously styled object will keep its style properties if modified as part of a flex layout', async ({
+    page
+  }) => {
+    // Set background and font color on Stacked Plot object
+    const setBackgroundColor = '#5b0f00';
+    const setTextColor = '#e6b8af';
+    const defaultTextColor = '#aaaaaa'; // default text color
+    const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
+
+    //Navigate to stackedPlot
+    await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
+    await setStyles(
+      page,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('Stacked Plot Style Target').locator('div')
+    );
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Directly navigate to the flexible layout
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Set styles using setStyles function on StackedPlot2
+    await setStyles(page, setBackgroundColor, setTextColor, page.getByLabel('StackedPlot2 Frame'));
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Reload page and verify that styles persist
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+  });
+
+  test('When the "no style" option is selected, background and text should be reset to inherited styles', async ({
+    page
+  }) => {
+    // Set background and font color on Stacked Plot object
+    const backgroundColor = '#5b0f00';
+    const textColor = '#e6b8af';
+    const inheritedColor = '#aaaaaa'; // inherited from the body style
+    const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)';
+
+    // Directly navigate to the flexible layout
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    // Set styles using setStyles function
+    await setStyles(page, backgroundColor, textColor, page.getByLabel('StackedPlot1 Frame'));
+
+    // Check styles using checkStyles function
+    await checkStyles(
+      hexToRGB(backgroundColor),
+      hexToRGB(textColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Reload page and set Styles to 'None'
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    //Select the 'No Style' option
+    await setStyles(page, 'No Style', 'No Style', page.getByLabel('StackedPlot1 Frame'));
+
+    // Check styles using checkStyles function
+    await checkStyles(
+      NO_STYLE_RGBA,
+      hexToRGB(inheritedColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+    // Save Flexible Layout
+    await page.locator('button[title="Save"]').click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // Reload page and verify that styles persist
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Check styles using checkStyles function
+    await checkStyles(
+      NO_STYLE_RGBA,
+      hexToRGB(inheritedColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+  });
+});
diff --git a/e2e/tests/functional/styling.e2e.spec.js b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
similarity index 54%
rename from e2e/tests/functional/styling.e2e.spec.js
rename to e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
index 9fbab6b7e21..e0d6d259194 100644
--- a/e2e/tests/functional/styling.e2e.spec.js
+++ b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
@@ -24,55 +24,19 @@
  * This test is dedicated to test styling of various plugins
  */
 
-const { test, expect } = require('../../pluginFixtures');
-const { createDomainObjectWithDefaults } = require('../../appActions');
+const { test, expect } = require('../../../../pluginFixtures');
+const { createDomainObjectWithDefaults } = require('../../../../appActions');
+const { hexToRGB, setStyles, checkStyles } = require('../../../../helper/stylingUtils');
 
-test.describe('Flex Layout Style Inspector Options', () => {
-  let flexibleLayout;
-  test.beforeEach(async ({ page }) => {
-    await page.goto('./', { waitUntil: 'domcontentloaded' });
-
-    // Create a Flexible Layout and attach to the Stacked Plot
-    flexibleLayout = await createDomainObjectWithDefaults(page, {
-      type: 'Flexible Layout',
-      name: 'Flexible Layout'
-    });
-  });
-
-  test('selecting a flexible layout column hides the styles tab', async ({ page }) => {
-    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
-
-    // Edit Flexible Layout
-    await page.getByLabel('Edit').click();
-
-    // Expect to find styles tab
-    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
-
-    // Select flexible layout column
-    await page.getByLabel('Container Handle 1').click();
-
-    // Expect to find no styles tab
-    await expect(page.getByRole('tab', { name: 'Styles' })).toBeHidden();
-  });
-});
-
-test.describe('Flexible Layout styling', () => {
+test.describe('Stacked Plot styling', () => {
   let stackedPlot;
-  let flexibleLayout;
   test.beforeEach(async ({ page }) => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
-    // Create a Flexible Layout and attach to the Stacked Plot
-    flexibleLayout = await createDomainObjectWithDefaults(page, {
-      type: 'Flexible Layout',
-      name: 'Flexible Layout'
-    });
-
-    // Create a Stacked Plot and attach to the Flexible Layout
+    // Create a Stacked Plot
     stackedPlot = await createDomainObjectWithDefaults(page, {
       type: 'Stacked Plot',
-      name: 'Stacked Plot',
-      parent: flexibleLayout.uuid
+      name: 'StackedPlot1'
     });
 
     // Create two SWGs and attach them to the Stacked Plot
@@ -92,9 +56,9 @@ test.describe('Flexible Layout styling', () => {
   test('styling the flexible layout properly applies the styles to all containers', async ({
     page
   }) => {
-    // Values to set styles to
-    const backgroundColor = '#5b0f00';
-    const textColor = '#e6b8af';
+    // Set background and font color on first Flex Colum
+    const setBackgroundColor = '#5b0f00';
+    const setTextColor = '#e6b8af';
 
     // Directly navigate to the flexible layout
     await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
@@ -106,12 +70,17 @@ test.describe('Flexible Layout styling', () => {
     await page.getByRole('tab', { name: 'Styles' }).click();
 
     // Set styles using setStyles function
-    await setStyles(page, backgroundColor, textColor, page.getByLabel('Flexible Layout Column'));
+    await setStyles(
+      page,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('Flexible Layout Column')
+    );
 
     // Check styles using checkStyles function
     await checkStyles(
-      hexToRGB(backgroundColor),
-      hexToRGB(textColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
       page.getByLabel('Flexible Layout Column')
     );
 
@@ -124,17 +93,35 @@ test.describe('Flexible Layout styling', () => {
 
     // Check styles using checkStyles function
     await checkStyles(
-      hexToRGB(backgroundColor),
-      hexToRGB(textColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
       page.getByLabel('Flexible Layout Column')
     );
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
   });
 
   test('styling a child object of the flexible layout properly applies that style to only that child', async ({
     page
   }) => {
-    const backgroundColor = '#5b0f00';
-    const textColor = '#e6b8af';
+    // Set background and font color on Stacked Plot object
+    const setBackgroundColor = '#5b0f00';
+    const setTextColor = '#e6b8af';
+    const defaultTextColor = '#aaaaaa'; // default text color
+    const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
+
     // Directly navigate to the flexible layout
     await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
 
@@ -144,28 +131,56 @@ test.describe('Flexible Layout styling', () => {
     // Select styles tab
     await page.getByRole('tab', { name: 'Styles' }).click();
 
-    // Set styles using setStyles function
-    await setStyles(page, backgroundColor, textColor, page.getByLabel('Stacked Plot Frame'));
+    // Check styles on StackedPlot2
+    await checkStyles(
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
 
-    // Check styles using checkStyles function
+    // Check styles on StackedPlot2
     await checkStyles(
-      hexToRGB(backgroundColor),
-      hexToRGB(textColor),
-      page.getByLabel('Stacked Plot Style Target')
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
+    await setStyles(page, setBackgroundColor, setTextColor, page.getByLabel('StackedPlot1 Frame'));
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
     );
 
     // Save Flexible Layout
     await page.getByRole('button', { name: 'Save' }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
-    // Reload page
+    // Reload page and verify that styles persist
     await page.reload({ waitUntil: 'domcontentloaded' });
 
-    // Check styles using checkStyles function
+    // Check styles on StackedPlot1
     await checkStyles(
-      hexToRGB(backgroundColor),
-      hexToRGB(textColor),
-      page.getByLabel('Stacked Plot Style Target')
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
     );
   });
 
@@ -188,13 +203,13 @@ test.describe('Flexible Layout styling', () => {
     await page.getByRole('tab', { name: 'Styles' }).click();
 
     // Set styles using setStyles function
-    await setStyles(page, backgroundColor, textColor, page.getByLabel('Stacked Plot Frame'));
+    await setStyles(page, backgroundColor, textColor, page.getByLabel('StackedPlot1 Frame'));
 
     // Check styles using checkStyles function
     await checkStyles(
       hexToRGB(backgroundColor),
       hexToRGB(textColor),
-      page.getByLabel('Stacked Plot Style Target')
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
     );
 
     // Save Flexible Layout
@@ -211,13 +226,13 @@ test.describe('Flexible Layout styling', () => {
     await page.getByRole('tab', { name: 'Styles' }).click();
 
     //Select the 'No Style' option
-    await setStyles(page, 'No Style', 'No Style', page.getByLabel('Stacked Plot Frame'));
+    await setStyles(page, 'No Style', 'No Style', page.getByLabel('StackedPlot1 Frame'));
 
     // Check styles using checkStyles function
     await checkStyles(
       NO_STYLE_RGBA,
       hexToRGB(inheritedColor),
-      page.getByLabel('Stacked Plot Style Target')
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
     );
     // Save Flexible Layout
     await page.locator('button[title="Save"]').click();
@@ -230,55 +245,7 @@ test.describe('Flexible Layout styling', () => {
     await checkStyles(
       NO_STYLE_RGBA,
       hexToRGB(inheritedColor),
-      page.getByLabel('Stacked Plot Style Target')
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
     );
   });
 });
-
-/**
- * Converts a hex color value to its RGB equivalent.
- *
- * @param {string} hex - The hex color value.
- * @returns {string} The RGB equivalent of the hex color.
- */
-function hexToRGB(hex) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})`
-    : null;
-}
-
-/**
- * Sets the background and text color of a given element.
- *
- * @param {import('@playwright/test').Page} page - The Playwright page object.
- * @param {string} backgroundColorHex - The hex value of the background color to set, or 'No Style'.
- * @param {string} textColorHex - The hex value of the text color to set, or 'No Style'.
- * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be set.
- */
-async function setStyles(page, backgroundColorHex, textColorHex, locator) {
-  await locator.click(); // Assuming the locator is clickable and opens the style setting UI
-  await page.getByLabel('Set background color').click();
-  await page.getByLabel(backgroundColorHex).click();
-  await page.getByLabel('Set text color').click();
-  await page.getByLabel(textColorHex).click();
-}
-
-/**
- * Checks if the styles of an element match the expected values.
- *
- * @param {string} expectedBackgroundColor - The expected background color in RGB format.
- * @param {string} expectedTextColor - The expected text color in RGB format.
- * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be checked.
- */
-async function checkStyles(expectedBackgroundColor, expectedTextColor, locator) {
-  const layoutStyles = await locator.evaluate((el) => {
-    return {
-      background: window.getComputedStyle(el).getPropertyValue('background-color'),
-      fontColor: window.getComputedStyle(el).getPropertyValue('color')
-    };
-  });
-
-  expect(layoutStyles.background).toContain(expectedBackgroundColor);
-  expect(layoutStyles.fontColor).toContain(expectedTextColor);
-}

From 3644534ccf9efde7f90487de528cb582b18eb83c Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Tue, 2 Jan 2024 15:55:17 -0800
Subject: [PATCH 20/34] add border styling

---
 e2e/helper/stylingUtils.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/e2e/helper/stylingUtils.js b/e2e/helper/stylingUtils.js
index 03a81e5f26a..6f0c8e3d594 100644
--- a/e2e/helper/stylingUtils.js
+++ b/e2e/helper/stylingUtils.js
@@ -39,12 +39,15 @@ function hexToRGB(hex) {
  * Sets the background and text color of a given element.
  *
  * @param {import('@playwright/test').Page} page - The Playwright page object.
+ * @param {string} borderColorHex - The hex value of the border color to set, or 'No Style'.
  * @param {string} backgroundColorHex - The hex value of the background color to set, or 'No Style'.
  * @param {string} textColorHex - The hex value of the text color to set, or 'No Style'.
  * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be set.
  */
-async function setStyles(page, backgroundColorHex, textColorHex, locator) {
+async function setStyles(page, borderColorHex, backgroundColorHex, textColorHex, locator) {
   await locator.click(); // Assuming the locator is clickable and opens the style setting UI
+  await page.getByLabel('Set border color').click();
+  await page.getByLabel(borderColorHex).click();
   await page.getByLabel('Set background color').click();
   await page.getByLabel(backgroundColorHex).click();
   await page.getByLabel('Set text color').click();
@@ -54,18 +57,25 @@ async function setStyles(page, backgroundColorHex, textColorHex, locator) {
 /**
  * Checks if the styles of an element match the expected values.
  *
+ * @param {string} expectedBorderColor - The expected border color in RGB format. Default is '#e6b8af' or 'rgb(230, 184, 175)'
  * @param {string} expectedBackgroundColor - The expected background color in RGB format.
- * @param {string} expectedTextColor - The expected text color in RGB format.
+ * @param {string} expectedTextColor - The expected text color in RGB format. Default is #aaaaaa or 'rgb(170, 170, 170)'
  * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be checked.
  */
-async function checkStyles(expectedBackgroundColor, expectedTextColor, locator) {
+async function checkStyles(
+  expectedBorderColor,
+  expectedBackgroundColor,
+  expectedTextColor,
+  locator
+) {
   const layoutStyles = await locator.evaluate((el) => {
     return {
+      border: window.getComputedStyle(el).getPropertyValue('border-top-color'), //infer the left, right, and bottom
       background: window.getComputedStyle(el).getPropertyValue('background-color'),
       fontColor: window.getComputedStyle(el).getPropertyValue('color')
     };
   });
-
+  expect(layoutStyles.border).toContain(expectedBorderColor);
   expect(layoutStyles.background).toContain(expectedBackgroundColor);
   expect(layoutStyles.fontColor).toContain(expectedTextColor);
 }

From 72320b20f0a3089cdde4e4d20f6b880ffec2a331 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Tue, 2 Jan 2024 15:55:32 -0800
Subject: [PATCH 21/34] break out conditional and style inspector

---
 .../styling/conditionalStyling.e2e.spec.js    | 48 ++++++++++
 .../styling/styleInspectorOptions.e2e.spec.js | 90 +++++++++++++++++++
 2 files changed, 138 insertions(+)
 create mode 100644 e2e/tests/functional/plugins/styling/conditionalStyling.e2e.spec.js
 create mode 100644 e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js

diff --git a/e2e/tests/functional/plugins/styling/conditionalStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/conditionalStyling.e2e.spec.js
new file mode 100644
index 00000000000..0e787b9c3e6
--- /dev/null
+++ b/e2e/tests/functional/plugins/styling/conditionalStyling.e2e.spec.js
@@ -0,0 +1,48 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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.
+ *****************************************************************************/
+
+/**
+ * This test is dedicated to test conditional styling
+ */
+
+const { test } = require('../../../../pluginFixtures');
+
+test.describe('Conditional Styling', () => {
+  test.fixme(
+    'Conditional Styling can be applied to Flex Layout and its children',
+    async ({ page }) => {
+      //test
+    }
+  );
+  test.fixme(
+    'Conditional Styling can be applied to Overlay Plot and its children',
+    async ({ page }) => {
+      //test
+    }
+  );
+  test.fixme(
+    'Conditional Styling changes the styling of the object the condition changes state',
+    async ({ page }) => {
+      //test
+    }
+  );
+});
diff --git a/e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js b/e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js
new file mode 100644
index 00000000000..00e6ea4a3e2
--- /dev/null
+++ b/e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js
@@ -0,0 +1,90 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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.
+ *****************************************************************************/
+
+/**
+ * This test is dedicated to test styling changes in the inspector tool
+ */
+
+const { test, expect } = require('../../../../pluginFixtures');
+const { createDomainObjectWithDefaults } = require('../../../../appActions');
+
+test.describe('Style Inspector Options', () => {
+  let flexibleLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a Flexible Layout and attach to the Stacked Plot
+    flexibleLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout',
+      name: 'Flexible Layout'
+    });
+    // Create a Stacked Plot and attach to the Flexible Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'Stacked Plot',
+      parent: flexibleLayout.uuid
+    });
+  });
+
+  test('styles button only appears when appropriate component selected', async ({ page }) => {
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit').click();
+
+    // The overall Flex Layout or Stacked Plot itself MUST be style-able.
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
+
+    // Select flexible layout column
+    await page.getByLabel('Container Handle 1').click();
+
+    // Flex Layout containers should NOT be style-able.
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeHidden();
+
+    // Select Flex Layout Column
+    await page.getByLabel('Flexible Layout Column').click();
+
+    // The overall Flex Layout or Stacked Plot itself MUST be style-able.
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
+
+    // Select Stacked Layout Column
+    await page.getByLabel('Stacked Plot Frame').click();
+
+    // The overall Flex Layout or Stacked Plot itself MUST be style-able.
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
+  });
+});
+
+test.describe('Saved Styles', () => {
+  test.fixme('historical styles appear as an option once used', async ({ page }) => {
+    //test
+  });
+  test.fixme('at least 5 saved styles appear in the saved styles list', async ({ page }) => {
+    //test
+  });
+  test.fixme('Saved Styles can be deleted once used', async ({ page }) => {
+    //test
+  });
+  test.fixme('can apply a saved style to the currently selected target', async ({ page }) => {
+    //test
+  });
+});

From 5001f66833d840e4aa6441ac060eeb7d3796b276 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Tue, 2 Jan 2024 15:55:55 -0800
Subject: [PATCH 22/34] update flexlayout tests and add stackedplot (wip)

---
 .../styling/flexLayoutStyling.e2e.spec.js     | 214 ++++++++++--------
 .../styling/stackedPlotStyling.e2e.spec.js    |  39 ++--
 2 files changed, 139 insertions(+), 114 deletions(-)

diff --git a/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js
index 8aa186674e8..57123ed710e 100644
--- a/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js
+++ b/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js
@@ -21,59 +21,22 @@
  *****************************************************************************/
 
 /**
- * This test is dedicated to test styling of various plugins
+ * This test is dedicated to test styling of flex layouts
  */
 
-const { test, expect } = require('../../../../pluginFixtures');
+const { test } = require('../../../../pluginFixtures');
 const { createDomainObjectWithDefaults } = require('../../../../appActions');
 const { hexToRGB, setStyles, checkStyles } = require('../../../../helper/stylingUtils');
 
-test.describe('Style Inspector Options', () => {
-  let flexibleLayout;
-  test.beforeEach(async ({ page }) => {
-    await page.goto('./', { waitUntil: 'domcontentloaded' });
-
-    // Create a Flexible Layout and attach to the Stacked Plot
-    flexibleLayout = await createDomainObjectWithDefaults(page, {
-      type: 'Flexible Layout',
-      name: 'Flexible Layout'
-    });
-    // Create a Stacked Plot and attach to the Flexible Layout
-    await createDomainObjectWithDefaults(page, {
-      type: 'Stacked Plot',
-      name: 'Stacked Plot',
-      parent: flexibleLayout.uuid
-    });
-  });
-
-  test('styles button appears when appropriate component selected', async ({ page }) => {
-    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
-
-    // Edit Flexible Layout
-    await page.getByLabel('Edit').click();
-
-    // The overall Flex Layout or Stacked Plot itself MUST be style-able.
-    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
-
-    // Select flexible layout column
-    await page.getByLabel('Container Handle 1').click();
-
-    // Flex Layout containers should NOT be style-able.
-    await expect(page.getByRole('tab', { name: 'Styles' })).toBeHidden();
-
-    // Select Flex Layout Column
-    await page.getByLabel('Flexible Layout Column').click();
-
-    // The overall Flex Layout or Stacked Plot itself MUST be style-able.
-    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
-
-    // Select Stacked Layout Column
-    await page.getByLabel('Stacked Plot Frame').click();
-
-    // The overall Flex Layout or Stacked Plot itself MUST be style-able.
-    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
-  });
-});
+const setBorderColor = '#ff00ff';
+const setBackgroundColor = '#5b0f00';
+const setTextColor = '#e6b8af';
+const defaultFrameBorderColor = '#e6b8af'; //default border color
+const defaultBorderTargetColor = '#aaaaaa';
+const defaultTextColor = '#aaaaaa'; // default text color
+const inheritedColor = '#aaaaaa'; // inherited from the body style
+const pukeGreen = '#6aa84f'; //Ugliest green known to man
+const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
 
 test.describe('Flexible Layout styling', () => {
   let stackedPlot;
@@ -102,13 +65,9 @@ test.describe('Flexible Layout styling', () => {
     });
   });
 
-  test('styling the flexible layout properly applies the styles to all containers', async ({
+  test('styling the flexible layout properly applies the styles to flex layout', async ({
     page
   }) => {
-    // Set background and font color on first Flex Colum
-    const setBackgroundColor = '#5b0f00';
-    const setTextColor = '#e6b8af';
-
     // Directly navigate to the flexible layout
     await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
 
@@ -121,13 +80,15 @@ test.describe('Flexible Layout styling', () => {
     // Set styles using setStyles function
     await setStyles(
       page,
+      setBorderColor,
       setBackgroundColor,
       setTextColor,
       page.getByLabel('Flexible Layout Column')
     );
 
-    // Check styles using checkStyles function
+    // Flex Layout Column matches set styles
     await checkStyles(
+      hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
       page.getByLabel('Flexible Layout Column')
@@ -140,23 +101,26 @@ test.describe('Flexible Layout styling', () => {
     // Reload page
     await page.reload({ waitUntil: 'domcontentloaded' });
 
-    // Check styles using checkStyles function
+    // Check styles of overall Flex Layout
     await checkStyles(
+      hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
       page.getByLabel('Flexible Layout Column')
     );
 
-    // Check styles on StackedPlot1
+    // Check styles on StackedPlot1. Note: https://github.com/nasa/openmct/issues/7337
     await checkStyles(
-      hexToRGB(setBackgroundColor),
+      hexToRGB(defaultFrameBorderColor),
+      NO_STYLE_RGBA,
       hexToRGB(setTextColor),
       page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
     );
 
-    // Check styles on StackedPlot2
+    // Check styles on StackedPlot2. Note: https://github.com/nasa/openmct/issues/7337
     await checkStyles(
-      hexToRGB(setBackgroundColor),
+      hexToRGB(defaultFrameBorderColor),
+      NO_STYLE_RGBA,
       hexToRGB(setTextColor),
       page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
     );
@@ -165,12 +129,6 @@ test.describe('Flexible Layout styling', () => {
   test('styling a child object of the flexible layout properly applies that style to only that child', async ({
     page
   }) => {
-    // Set background and font color on Stacked Plot object
-    const setBackgroundColor = '#5b0f00';
-    const setTextColor = '#e6b8af';
-    const defaultTextColor = '#aaaaaa'; // default text color
-    const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
-
     // Directly navigate to the flexible layout
     await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
 
@@ -180,8 +138,9 @@ test.describe('Flexible Layout styling', () => {
     // Select styles tab
     await page.getByRole('tab', { name: 'Styles' }).click();
 
-    // Check styles on StackedPlot2
+    // Check styles on StackedPlot1
     await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
       page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
@@ -189,16 +148,24 @@ test.describe('Flexible Layout styling', () => {
 
     // Check styles on StackedPlot2
     await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
       page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
     );
 
     // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
-    await setStyles(page, setBackgroundColor, setTextColor, page.getByLabel('StackedPlot1 Frame'));
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('StackedPlot1 Frame')
+    );
 
     // Check styles on StackedPlot1
     await checkStyles(
+      hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
       page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
@@ -206,6 +173,7 @@ test.describe('Flexible Layout styling', () => {
 
     // Check styles on StackedPlot2
     await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
       page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
@@ -220,6 +188,7 @@ test.describe('Flexible Layout styling', () => {
 
     // Check styles on StackedPlot1
     await checkStyles(
+      hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
       page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
@@ -227,33 +196,28 @@ test.describe('Flexible Layout styling', () => {
 
     // Check styles on StackedPlot2
     await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
       page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
     );
   });
 
-  test('a previously styled object will keep its style properties if modified as part of a flex layout', async ({
+  test('if an overall style has been applied to the parent layout or plot, the individual styling should be able to coexist with that', async ({
     page
   }) => {
-    // Set background and font color on Stacked Plot object
-    const setBackgroundColor = '#5b0f00';
-    const setTextColor = '#e6b8af';
-    const defaultTextColor = '#aaaaaa'; // default text color
-    const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
-
     //Navigate to stackedPlot
     await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });
 
-    // Edit Flexible Layout
+    // Edit stackedPlot
     await page.getByLabel('Edit').click();
 
-    // Select styles tab
     await page.getByRole('tab', { name: 'Styles' }).click();
 
     // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
     await setStyles(
       page,
+      setBorderColor,
       setBackgroundColor,
       setTextColor,
       page.getByLabel('Stacked Plot Style Target').locator('div')
@@ -272,25 +236,49 @@ test.describe('Flexible Layout styling', () => {
     // Select styles tab
     await page.getByRole('tab', { name: 'Styles' }).click();
 
-    // Check styles on StackedPlot1
+    // Check styles on StackedPlot1 to match the set colors
     await checkStyles(
+      hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
       page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
     );
 
-    // Check styles on StackedPlot2
+    // Check styles on StackedPlot2 to verify they are the default
     await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
       page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
     );
 
     // Set styles using setStyles function on StackedPlot2
-    await setStyles(page, setBackgroundColor, setTextColor, page.getByLabel('StackedPlot2 Frame'));
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('StackedPlot2 Frame')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Reload page and verify that styles persist
+    await page.reload({ waitUntil: 'domcontentloaded' });
 
     // Check styles on StackedPlot1
     await checkStyles(
+      hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
       page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
@@ -298,42 +286,61 @@ test.describe('Flexible Layout styling', () => {
 
     // Check styles on StackedPlot2
     await checkStyles(
+      hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
       page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
     );
 
+    // Directly navigate to the flexible layout
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    // Set Flex Layout Column to puke green
+    await setStyles(
+      page,
+      pukeGreen,
+      pukeGreen,
+      pukeGreen,
+      page.getByLabel('Flexible Layout Column')
+    );
     // Save Flexible Layout
     await page.getByRole('button', { name: 'Save' }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
-    // Reload page and verify that styles persist
-    await page.reload({ waitUntil: 'domcontentloaded' });
+    // Flex Layout Column matches set styles
+    await checkStyles(
+      hexToRGB(pukeGreen),
+      hexToRGB(pukeGreen),
+      hexToRGB(pukeGreen),
+      page.getByLabel('Flexible Layout Column')
+    );
 
-    // Check styles on StackedPlot1
+    // Check styles on StackedPlot1 matches previously set colors
     await checkStyles(
+      hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
       page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
     );
 
-    // Check styles on StackedPlot2
+    // Check styles on StackedPlot2 matches previous set colors
     await checkStyles(
-      NO_STYLE_RGBA,
-      hexToRGB(defaultTextColor),
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
       page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
     );
   });
 
-  test('When the "no style" option is selected, background and text should be reset to inherited styles', async ({
+  test('when the "no style" option is selected, background and text should be reset to inherited styles', async ({
     page
   }) => {
-    // Set background and font color on Stacked Plot object
-    const backgroundColor = '#5b0f00';
-    const textColor = '#e6b8af';
-    const inheritedColor = '#aaaaaa'; // inherited from the body style
-    const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)';
-
     // Directly navigate to the flexible layout
     await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
 
@@ -344,12 +351,19 @@ test.describe('Flexible Layout styling', () => {
     await page.getByRole('tab', { name: 'Styles' }).click();
 
     // Set styles using setStyles function
-    await setStyles(page, backgroundColor, textColor, page.getByLabel('StackedPlot1 Frame'));
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('StackedPlot1 Frame')
+    );
 
     // Check styles using checkStyles function
     await checkStyles(
-      hexToRGB(backgroundColor),
-      hexToRGB(textColor),
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
       page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
     );
 
@@ -367,10 +381,17 @@ test.describe('Flexible Layout styling', () => {
     await page.getByRole('tab', { name: 'Styles' }).click();
 
     //Select the 'No Style' option
-    await setStyles(page, 'No Style', 'No Style', page.getByLabel('StackedPlot1 Frame'));
+    await setStyles(
+      page,
+      'No Style',
+      'No Style',
+      'No Style',
+      page.getByLabel('StackedPlot1 Frame')
+    );
 
     // Check styles using checkStyles function
     await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
       NO_STYLE_RGBA,
       hexToRGB(inheritedColor),
       page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
@@ -384,6 +405,7 @@ test.describe('Flexible Layout styling', () => {
 
     // Check styles using checkStyles function
     await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
       NO_STYLE_RGBA,
       hexToRGB(inheritedColor),
       page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
diff --git a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
index e0d6d259194..0dd3f40c3af 100644
--- a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
+++ b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
@@ -21,13 +21,23 @@
  *****************************************************************************/
 
 /**
- * This test is dedicated to test styling of various plugins
+ * This test is dedicated to test styling of stacked plots
  */
 
 const { test, expect } = require('../../../../pluginFixtures');
 const { createDomainObjectWithDefaults } = require('../../../../appActions');
 const { hexToRGB, setStyles, checkStyles } = require('../../../../helper/stylingUtils');
 
+const setBorderColor = '#ff00ff';
+const setBackgroundColor = '#5b0f00';
+const setTextColor = '#e6b8af';
+const defaultFrameBorderColor = '#e6b8af'; //default border color
+const defaultBorderTargetColor = '#aaaaaa';
+const defaultTextColor = '#aaaaaa'; // default text color
+const inheritedColor = '#aaaaaa'; // inherited from the body style
+const pukeGreen = '#6aa84f'; //Ugliest green known to man
+const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
+
 test.describe('Stacked Plot styling', () => {
   let stackedPlot;
   test.beforeEach(async ({ page }) => {
@@ -53,41 +63,34 @@ test.describe('Stacked Plot styling', () => {
     });
   });
 
-  test('styling the flexible layout properly applies the styles to all containers', async ({
+  test('styling the overlay plot properly applies the styles to all containers', async ({
     page
   }) => {
-    // Set background and font color on first Flex Colum
-    const setBackgroundColor = '#5b0f00';
-    const setTextColor = '#e6b8af';
-
-    // Directly navigate to the flexible layout
-    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+    // Directly navigate to the stackedplot
+    await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });
 
-    // Edit Flexible Layout
     await page.getByLabel('Edit').click();
 
-    // Select styles tab
     await page.getByRole('tab', { name: 'Styles' }).click();
 
-    // Set styles using setStyles function
     await setStyles(
       page,
+      setBorderColor,
       setBackgroundColor,
       setTextColor,
-      page.getByLabel('Flexible Layout Column')
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1').getByLabel('Stacked Plot Style Target')
     );
 
-    // Check styles using checkStyles function
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
     await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
-      page.getByLabel('Flexible Layout Column')
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
     );
 
-    // Save Flexible Layout
-    await page.getByRole('button', { name: 'Save' }).click();
-    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
-
     // Reload page
     await page.reload({ waitUntil: 'domcontentloaded' });
 

From d0fadd33ea1ee3412842759d09e31afbfe957a7c Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Tue, 2 Jan 2024 18:41:47 -0800
Subject: [PATCH 23/34] fix imports

---
 e2e/helper/stylingUtils.js                             |  9 ++-------
 .../plugins/styling/conditionalStyling.e2e.spec.js     |  2 +-
 .../plugins/styling/flexLayoutStyling.e2e.spec.js      |  6 +++---
 .../plugins/styling/stackedPlotStyling.e2e.spec.js     | 10 ++++++----
 .../plugins/styling/styleInspectorOptions.e2e.spec.js  |  4 ++--
 5 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/e2e/helper/stylingUtils.js b/e2e/helper/stylingUtils.js
index 6f0c8e3d594..907fa90ae31 100644
--- a/e2e/helper/stylingUtils.js
+++ b/e2e/helper/stylingUtils.js
@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { expect } = require('../pluginFixtures');
+import { expect } from '../pluginFixtures.js';
 
 /**
  * Converts a hex color value to its RGB equivalent.
@@ -80,9 +80,4 @@ async function checkStyles(
   expect(layoutStyles.fontColor).toContain(expectedTextColor);
 }
 
-// eslint-disable-next-line no-undef
-module.exports = {
-  checkStyles,
-  setStyles,
-  hexToRGB
-};
+export { checkStyles, hexToRGB, setStyles };
diff --git a/e2e/tests/functional/plugins/styling/conditionalStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/conditionalStyling.e2e.spec.js
index 0e787b9c3e6..8f028c8d830 100644
--- a/e2e/tests/functional/plugins/styling/conditionalStyling.e2e.spec.js
+++ b/e2e/tests/functional/plugins/styling/conditionalStyling.e2e.spec.js
@@ -24,7 +24,7 @@
  * This test is dedicated to test conditional styling
  */
 
-const { test } = require('../../../../pluginFixtures');
+import { test } from '../../../../pluginFixtures.js';
 
 test.describe('Conditional Styling', () => {
   test.fixme(
diff --git a/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js
index 57123ed710e..a873c0eab00 100644
--- a/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js
+++ b/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js
@@ -24,9 +24,9 @@
  * This test is dedicated to test styling of flex layouts
  */
 
-const { test } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
-const { hexToRGB, setStyles, checkStyles } = require('../../../../helper/stylingUtils');
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { checkStyles, hexToRGB, setStyles } from '../../../../helper/stylingUtils.js';
+import { test } from '../../../../pluginFixtures.js';
 
 const setBorderColor = '#ff00ff';
 const setBackgroundColor = '#5b0f00';
diff --git a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
index 0dd3f40c3af..7e0f29112cc 100644
--- a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
+++ b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
@@ -24,9 +24,9 @@
  * This test is dedicated to test styling of stacked plots
  */
 
-const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
-const { hexToRGB, setStyles, checkStyles } = require('../../../../helper/stylingUtils');
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { checkStyles, hexToRGB, setStyles } from '../../../../helper/stylingUtils.js';
+import { expect, test } from '../../../../pluginFixtures.js';
 
 const setBorderColor = '#ff00ff';
 const setBackgroundColor = '#5b0f00';
@@ -78,7 +78,9 @@ test.describe('Stacked Plot styling', () => {
       setBorderColor,
       setBackgroundColor,
       setTextColor,
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 1').getByLabel('Stacked Plot Style Target')
+      page
+        .getByLabel('Stacked Plot Item Sine Wave Generator 1')
+        .getByLabel('Stacked Plot Style Target')
     );
 
     await page.getByRole('button', { name: 'Save' }).click();
diff --git a/e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js b/e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js
index 00e6ea4a3e2..dc73928f91a 100644
--- a/e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js
+++ b/e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js
@@ -24,8 +24,8 @@
  * This test is dedicated to test styling changes in the inspector tool
  */
 
-const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
 
 test.describe('Style Inspector Options', () => {
   let flexibleLayout;

From ffdba247d811391d634e7dd24293d98ee37fe89b Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Tue, 2 Jan 2024 22:49:24 -0800
Subject: [PATCH 24/34] Add visual test

---
 e2e/.percy.ci.yml                            |   7 +-
 e2e/.percy.nightly.yml                       |   4 +
 e2e/tests/visual-a11y/styling.visual.spec.js | 186 +++++++++++++++++++
 3 files changed, 196 insertions(+), 1 deletion(-)
 create mode 100644 e2e/tests/visual-a11y/styling.visual.spec.js

diff --git a/e2e/.percy.ci.yml b/e2e/.percy.ci.yml
index e15de3f810d..bccb093fc90 100644
--- a/e2e/.percy.ci.yml
+++ b/e2e/.percy.ci.yml
@@ -25,4 +25,9 @@ snapshot:
     /* Time Conductor Start Time */
     .c-compact-tc__setting-value{
       opacity: 0 !important;
-    }
\ No newline at end of file
+    }
+    /* Chart Area for Plots */
+    .gl-plot-chart-area{
+      opacity: 0 !important;
+    }
+   
\ No newline at end of file
diff --git a/e2e/.percy.nightly.yml b/e2e/.percy.nightly.yml
index 7f9d8ec8131..b5b3d7ecfa2 100644
--- a/e2e/.percy.nightly.yml
+++ b/e2e/.percy.nightly.yml
@@ -25,4 +25,8 @@ snapshot:
     /* Time Conductor Start Time */
     .c-compact-tc__setting-value{
       opacity: 0 !important;
+    }
+    /* Chart Area for Plots */
+    .gl-plot-chart-area{
+      opacity: 0 !important;
     }
\ No newline at end of file
diff --git a/e2e/tests/visual-a11y/styling.visual.spec.js b/e2e/tests/visual-a11y/styling.visual.spec.js
new file mode 100644
index 00000000000..3f47c802cb6
--- /dev/null
+++ b/e2e/tests/visual-a11y/styling.visual.spec.js
@@ -0,0 +1,186 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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.
+ *****************************************************************************/
+
+/**
+ * This test is dedicated to test notification banner functionality and its accessibility attributes.
+ */
+
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
+import { setStyles } from '../../helper/stylingUtils.js';
+
+const setBorderColor = '#ff00ff';
+const setBackgroundColor = '#5b0f00';
+const setTextColor = '#e6b8af';
+
+test.describe('Flexible Layout styling @a11y', () => {
+  let flexibleLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a Flexible Layout and attach to the Stacked Plot
+    flexibleLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout',
+      name: 'Flexible Layout'
+    });
+
+    // Create a Stacked Plot and attach to the Flexible Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'StackedPlot1',
+      parent: flexibleLayout.uuid
+    });
+
+    // Create a Stacked Plot and attach to the Flexible Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'StackedPlot2',
+      parent: flexibleLayout.uuid
+    });
+  });
+
+  test('styling the flexible layout properly applies the styles to flex layout', async ({
+    page,
+    theme
+  }) => {
+    // Directly navigate to the flexible layout
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    await percySnapshot(page, `Flex Layout with 2 children (theme: '${theme}')`);
+
+    // Set styles using setStyles function
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('Flexible Layout Column')
+    );
+
+    await percySnapshot(page, `Edit Mode Styled Flex Layout Column (theme: '${theme}')`);
+
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('StackedPlot1 Frame')
+    );
+
+    await percySnapshot(
+      page,
+      `Edit Mode Styled Flex Layout with Styled StackedPlot (theme: '${theme}')`
+    );
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await percySnapshot(
+      page,
+      `Saved Styled Flex Layout with Styled StackedPlot (theme: '${theme}')`
+    );
+  });
+  test.afterEach(async ({ page }, testInfo) => {
+    await scanForA11yViolations(page, testInfo.title);
+  });
+});
+
+test.describe.only('Stacked Plot styling @a11y', () => {
+  let stackedPlot;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a Stacked Plot
+    stackedPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'StackedPlot1'
+    });
+
+    // Create two SWGs and attach them to the Stacked Plot
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator 1',
+      parent: stackedPlot.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator 2',
+      parent: stackedPlot.uuid
+    });
+  });
+
+  test('styling the flexible layout properly applies the styles to flex layout', async ({
+    page,
+    theme
+  }) => {
+    // Directly navigate to the flexible layout
+    await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    await percySnapshot(page, `StackedPlot with 2 SWG (theme: '${theme}')`);
+
+    // Set styles using setStyles function
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByRole('tab', { name: 'Styles' }) //Workaround for https://github.com/nasa/openmct/issues/7229
+    );
+
+    await percySnapshot(page, `Edit Mode StackedPlot Styled (theme: '${theme}')`);
+
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+    );
+
+    await percySnapshot(page, `Edit Mode StackedPlot with Styled SWG (theme: '${theme}')`);
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await percySnapshot(page, `Saved Styled StackedPlot (theme: '${theme}')`);
+  });
+  test.afterEach(async ({ page }, testInfo) => {
+    await scanForA11yViolations(page, testInfo.title);
+  });
+});

From 46d4a29566cd6fa8cb635a2252de6882a7862d99 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Tue, 2 Jan 2024 22:49:40 -0800
Subject: [PATCH 25/34] update stackedplot test

---
 .../styling/stackedPlotStyling.e2e.spec.js    | 139 +++++-------------
 1 file changed, 38 insertions(+), 101 deletions(-)

diff --git a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
index 7e0f29112cc..25605366103 100644
--- a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
+++ b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
@@ -78,179 +78,116 @@ test.describe('Stacked Plot styling', () => {
       setBorderColor,
       setBackgroundColor,
       setTextColor,
-      page
-        .getByLabel('Stacked Plot Item Sine Wave Generator 1')
-        .getByLabel('Stacked Plot Style Target')
+      page.getByRole('tab', { name: 'Styles' }) //Workaround for https://github.com/nasa/openmct/issues/7229
     );
 
     await page.getByRole('button', { name: 'Save' }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     await checkStyles(
-      hexToRGB(defaultBorderTargetColor),
+      hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+      page.getByLabel('Stacked Plot Style Target')
     );
 
     // Reload page
     await page.reload({ waitUntil: 'domcontentloaded' });
 
-    // Check styles using checkStyles function
+    //Verify styles are correct after reload
     await checkStyles(
+      hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
-      page.getByLabel('Flexible Layout Column')
+      page.getByLabel('Stacked Plot Style Target')
     );
 
-    // Check styles on StackedPlot1
+    //Verify that stacked Plot Items inherit only text properties
     await checkStyles(
-      hexToRGB(setBackgroundColor),
+      NO_STYLE_RGBA,
+      NO_STYLE_RGBA,
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
     );
 
-    // Check styles on StackedPlot2
     await checkStyles(
-      hexToRGB(setBackgroundColor),
+      NO_STYLE_RGBA,
+      NO_STYLE_RGBA,
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
     );
   });
 
   test('styling a child object of the flexible layout properly applies that style to only that child', async ({
     page
   }) => {
-    // Set background and font color on Stacked Plot object
-    const setBackgroundColor = '#5b0f00';
-    const setTextColor = '#e6b8af';
-    const defaultTextColor = '#aaaaaa'; // default text color
-    const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
-
-    // Directly navigate to the flexible layout
-    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+    await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });
 
-    // Edit Flexible Layout
     await page.getByLabel('Edit').click();
 
-    // Select styles tab
     await page.getByRole('tab', { name: 'Styles' }).click();
 
-    // Check styles on StackedPlot2
+    //Check default styles for SWG1 and SWG2
     await checkStyles(
+      NO_STYLE_RGBA,
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
     );
 
-    // Check styles on StackedPlot2
     await checkStyles(
+      NO_STYLE_RGBA,
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
-      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
     );
 
     // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
-    await setStyles(page, setBackgroundColor, setTextColor, page.getByLabel('StackedPlot1 Frame'));
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+    );
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Check styles on StackedPlot1
     await checkStyles(
+      hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
     );
 
     // Check styles on StackedPlot2
     await checkStyles(
+      NO_STYLE_RGBA,
       NO_STYLE_RGBA,
       hexToRGB(defaultTextColor),
-      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
     );
 
-    // Save Flexible Layout
-    await page.getByRole('button', { name: 'Save' }).click();
-    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
-
     // Reload page and verify that styles persist
     await page.reload({ waitUntil: 'domcontentloaded' });
 
     // Check styles on StackedPlot1
     await checkStyles(
+      hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
       hexToRGB(setTextColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
     );
 
     // Check styles on StackedPlot2
     await checkStyles(
       NO_STYLE_RGBA,
-      hexToRGB(defaultTextColor),
-      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
-    );
-  });
-
-  test('When the "no style" option is selected, background and text should be reset to inherited styles', async ({
-    page
-  }) => {
-    // Set background and font color on Stacked Plot object
-    const backgroundColor = '#5b0f00';
-    const textColor = '#e6b8af';
-    const inheritedColor = '#aaaaaa'; // inherited from the body style
-    const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)';
-
-    // Directly navigate to the flexible layout
-    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
-
-    // Edit Flexible Layout
-    await page.getByLabel('Edit').click();
-
-    // Select styles tab
-    await page.getByRole('tab', { name: 'Styles' }).click();
-
-    // Set styles using setStyles function
-    await setStyles(page, backgroundColor, textColor, page.getByLabel('StackedPlot1 Frame'));
-
-    // Check styles using checkStyles function
-    await checkStyles(
-      hexToRGB(backgroundColor),
-      hexToRGB(textColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
-    );
-
-    // Save Flexible Layout
-    await page.getByRole('button', { name: 'Save' }).click();
-    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
-
-    // Reload page and set Styles to 'None'
-    await page.reload({ waitUntil: 'domcontentloaded' });
-
-    // Edit Flexible Layout
-    await page.getByLabel('Edit').click();
-
-    // Select styles tab
-    await page.getByRole('tab', { name: 'Styles' }).click();
-
-    //Select the 'No Style' option
-    await setStyles(page, 'No Style', 'No Style', page.getByLabel('StackedPlot1 Frame'));
-
-    // Check styles using checkStyles function
-    await checkStyles(
-      NO_STYLE_RGBA,
-      hexToRGB(inheritedColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
-    );
-    // Save Flexible Layout
-    await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
-
-    // Reload page and verify that styles persist
-    await page.reload({ waitUntil: 'domcontentloaded' });
-
-    // Check styles using checkStyles function
-    await checkStyles(
       NO_STYLE_RGBA,
-      hexToRGB(inheritedColor),
-      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+      hexToRGB(defaultTextColor),
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
     );
   });
 });

From 8eb58566117fe13679172fc7f58c45ed697c4bb6 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Tue, 2 Jan 2024 22:50:06 -0800
Subject: [PATCH 26/34] Add a11y label

---
 src/plugins/inspectorViews/styles/FontStyleEditor.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/plugins/inspectorViews/styles/FontStyleEditor.vue b/src/plugins/inspectorViews/styles/FontStyleEditor.vue
index a3e2fbfe0c3..82ce8fd45e2 100644
--- a/src/plugins/inspectorViews/styles/FontStyleEditor.vue
+++ b/src/plugins/inspectorViews/styles/FontStyleEditor.vue
@@ -24,13 +24,18 @@
     <div ref="fontSizeMenu" class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
         class="c-icon-button c-button--menu icon-font-size"
+        aria-label="Font Size"
         @click.prevent.stop="showFontSizeMenu"
       >
         <span class="c-button__label">{{ fontSizeLabel }}</span>
       </button>
     </div>
     <div ref="fontMenu" class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
-      <button class="c-icon-button c-button--menu icon-font" @click.prevent.stop="showFontMenu">
+      <button
+        class="c-icon-button c-button--menu icon-font"
+        aria-label="Font Type"
+        @click.prevent.stop="showFontMenu"
+      >
         <span class="c-button__label">{{ fontTypeLabel }}</span>
       </button>
     </div>

From f3409b3d606e8c8f2e7c20938fab9bf6850724c2 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Wed, 3 Jan 2024 08:26:17 -0800
Subject: [PATCH 27/34] add font styles checks

---
 e2e/helper/stylingUtils.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/e2e/helper/stylingUtils.js b/e2e/helper/stylingUtils.js
index 907fa90ae31..69d67728f98 100644
--- a/e2e/helper/stylingUtils.js
+++ b/e2e/helper/stylingUtils.js
@@ -80,4 +80,22 @@ async function checkStyles(
   expect(layoutStyles.fontColor).toContain(expectedTextColor);
 }
 
-export { checkStyles, hexToRGB, setStyles };
+/**
+ * Checks if the font Styles of an element match the expected values.
+ *
+ * @param {string} expectedFontSize - The expected border color in RGB format. Default is '#e6b8af' or 'rgb(230, 184, 175)'
+ * @param {string} expectedFontType - The expected text color in RGB format. Default is #aaaaaa or 'rgb(170, 170, 170)'
+ * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be checked.
+ */
+async function checkFontStyles(expectedFontSize, expectedFontType, locator) {
+  const layoutStyles = await locator.evaluate((el) => {
+    return {
+      fontSize: window.getComputedStyle(el).getPropertyValue('font-size'),
+      fontType: window.getComputedStyle(el).getPropertyValue('font-family')
+    };
+  });
+  expect(layoutStyles.fontSize).toContain(expectedFontSize);
+  expect(layoutStyles.fontFamily).toContain(expectedFontType);
+}
+
+export { checkFontStyles, checkStyles, hexToRGB, setStyles };

From 5371591a536d666b2c7ff0409c9a6c9514b177ce Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Wed, 3 Jan 2024 08:26:29 -0800
Subject: [PATCH 28/34] add font checking

---
 .../styling/stackedPlotStyling.e2e.spec.js    | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
index 25605366103..ba76f6366bb 100644
--- a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
+++ b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
@@ -25,7 +25,12 @@
  */
 
 import { createDomainObjectWithDefaults } from '../../../../appActions.js';
-import { checkStyles, hexToRGB, setStyles } from '../../../../helper/stylingUtils.js';
+import {
+  checkFontStyles,
+  checkStyles,
+  hexToRGB,
+  setStyles
+} from '../../../../helper/stylingUtils.js';
 import { expect, test } from '../../../../pluginFixtures.js';
 
 const setBorderColor = '#ff00ff';
@@ -37,6 +42,8 @@ const defaultTextColor = '#aaaaaa'; // default text color
 const inheritedColor = '#aaaaaa'; // inherited from the body style
 const pukeGreen = '#6aa84f'; //Ugliest green known to man
 const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
+const setFontSize = '72px';
+const setFontType = 'sans-serif'; //Andale Mono", sans-serif
 
 test.describe('Stacked Plot styling', () => {
   let stackedPlot;
@@ -81,6 +88,15 @@ test.describe('Stacked Plot styling', () => {
       page.getByRole('tab', { name: 'Styles' }) //Workaround for https://github.com/nasa/openmct/issues/7229
     );
 
+    //Set Font Size to 72
+    await page.getByLabel('Set Font Size').click();
+    await page.getByRole('menuitem', { name: '72px' }).click();
+
+    //Set Font Type to Monospace Bold
+    await page.getByLabel('Set Font Type').click();
+    await page.getByRole('menuitem', { name: 'Monospace Bold' }).click();
+
+    //Save
     await page.getByRole('button', { name: 'Save' }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
@@ -91,6 +107,8 @@ test.describe('Stacked Plot styling', () => {
       page.getByLabel('Stacked Plot Style Target')
     );
 
+    await checkFontStyles(setFontSize, setFontType, page.getByLabel('Stacked Plot Item Sine Wave Generator 1'));
+
     // Reload page
     await page.reload({ waitUntil: 'domcontentloaded' });
 

From 1b7f0b35a1d206465a7669121e846e4419c5e686 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Wed, 3 Jan 2024 08:26:40 -0800
Subject: [PATCH 29/34] add visual tests

---
 e2e/tests/visual-a11y/styling.visual.spec.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/e2e/tests/visual-a11y/styling.visual.spec.js b/e2e/tests/visual-a11y/styling.visual.spec.js
index 3f47c802cb6..26188d0165f 100644
--- a/e2e/tests/visual-a11y/styling.visual.spec.js
+++ b/e2e/tests/visual-a11y/styling.visual.spec.js
@@ -162,6 +162,14 @@ test.describe.only('Stacked Plot styling @a11y', () => {
       page.getByRole('tab', { name: 'Styles' }) //Workaround for https://github.com/nasa/openmct/issues/7229
     );
 
+    //Set Font Size to 72
+    await page.getByLabel('Set Font Size').click();
+    await page.getByRole('menuitem', { name: '72px' }).click();
+
+    //Set Font Type to Monospace Bold
+    await page.getByLabel('Set Font Type').click();
+    await page.getByRole('menuitem', { name: 'Monospace Bold' }).click();
+
     await percySnapshot(page, `Edit Mode StackedPlot Styled (theme: '${theme}')`);
 
     await setStyles(

From cf2681e64c3c0c377d46628a7eaa13aa84c437ae Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Wed, 3 Jan 2024 08:26:57 -0800
Subject: [PATCH 30/34] Update toolbar to use aria

---
 src/plugins/inspectorViews/styles/FontStyleEditor.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/inspectorViews/styles/FontStyleEditor.vue b/src/plugins/inspectorViews/styles/FontStyleEditor.vue
index 82ce8fd45e2..c8cc92ebd6b 100644
--- a/src/plugins/inspectorViews/styles/FontStyleEditor.vue
+++ b/src/plugins/inspectorViews/styles/FontStyleEditor.vue
@@ -24,7 +24,7 @@
     <div ref="fontSizeMenu" class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
         class="c-icon-button c-button--menu icon-font-size"
-        aria-label="Font Size"
+        aria-label="Set Font Size"
         @click.prevent.stop="showFontSizeMenu"
       >
         <span class="c-button__label">{{ fontSizeLabel }}</span>
@@ -33,7 +33,7 @@
     <div ref="fontMenu" class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
         class="c-icon-button c-button--menu icon-font"
-        aria-label="Font Type"
+        aria-label="Set Font Type"
         @click.prevent.stop="showFontMenu"
       >
         <span class="c-button__label">{{ fontTypeLabel }}</span>

From 4971bce1379b8033a12c5792a290354898f24fa5 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Wed, 3 Jan 2024 09:13:54 -0800
Subject: [PATCH 31/34] linting and comments

---
 .cspell.json                                  |  4 +-
 e2e/helper/stylingUtils.js                    | 15 +++---
 .../styling/stackedPlotStyling.e2e.spec.js    | 50 ++++++++++++++-----
 e2e/tests/visual-a11y/styling.visual.spec.js  |  2 +-
 4 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/.cspell.json b/.cspell.json
index 024e09d1782..1baa99e4ad4 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -491,7 +491,9 @@
     "oger",
     "lcovonly",
     "gcov",
-    "WCAG"
+    "WCAG",
+    "stackedplot",
+    "Andale"
   ],
   "dictionaries": ["npm", "softwareTerms", "node", "html", "css", "bash", "en_US"],
   "ignorePaths": [
diff --git a/e2e/helper/stylingUtils.js b/e2e/helper/stylingUtils.js
index 69d67728f98..83f5858662c 100644
--- a/e2e/helper/stylingUtils.js
+++ b/e2e/helper/stylingUtils.js
@@ -25,7 +25,7 @@ import { expect } from '../pluginFixtures.js';
 /**
  * Converts a hex color value to its RGB equivalent.
  *
- * @param {string} hex - The hex color value.
+ * @param {string} hex - The hex color value. i.e. '#5b0f00'
  * @returns {string} The RGB equivalent of the hex color.
  */
 function hexToRGB(hex) {
@@ -83,19 +83,22 @@ async function checkStyles(
 /**
  * Checks if the font Styles of an element match the expected values.
  *
- * @param {string} expectedFontSize - The expected border color in RGB format. Default is '#e6b8af' or 'rgb(230, 184, 175)'
- * @param {string} expectedFontType - The expected text color in RGB format. Default is #aaaaaa or 'rgb(170, 170, 170)'
+ * @param {string} expectedFontSize - The expected font size in '72px' format. Default is 'Default'
+ * @param {string} expectedFontWeight - The expected font Type. Format as '700' for bold. Default is 'Default'
+ * @param {string} expectedFontFamily - The expected font Type. Format unkown. Default is 'Default'
  * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be checked.
  */
-async function checkFontStyles(expectedFontSize, expectedFontType, locator) {
+async function checkFontStyles(expectedFontSize, expectedFontWeight, expectedFontFamily, locator) {
   const layoutStyles = await locator.evaluate((el) => {
     return {
       fontSize: window.getComputedStyle(el).getPropertyValue('font-size'),
-      fontType: window.getComputedStyle(el).getPropertyValue('font-family')
+      fontWeight: window.getComputedStyle(el).getPropertyValue('font-weight'),
+      fontFamily: window.getComputedStyle(el).getPropertyValue('font-family')
     };
   });
   expect(layoutStyles.fontSize).toContain(expectedFontSize);
-  expect(layoutStyles.fontFamily).toContain(expectedFontType);
+  expect(layoutStyles.fontWeight).toContain(expectedFontWeight);
+  expect(layoutStyles.fontFamily).toContain(expectedFontFamily);
 }
 
 export { checkFontStyles, checkStyles, hexToRGB, setStyles };
diff --git a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
index ba76f6366bb..2142a65d9b3 100644
--- a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
+++ b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
@@ -31,19 +31,17 @@ import {
   hexToRGB,
   setStyles
 } from '../../../../helper/stylingUtils.js';
-import { expect, test } from '../../../../pluginFixtures.js';
+import { test } from '../../../../pluginFixtures.js';
 
 const setBorderColor = '#ff00ff';
 const setBackgroundColor = '#5b0f00';
 const setTextColor = '#e6b8af';
-const defaultFrameBorderColor = '#e6b8af'; //default border color
-const defaultBorderTargetColor = '#aaaaaa';
 const defaultTextColor = '#aaaaaa'; // default text color
-const inheritedColor = '#aaaaaa'; // inherited from the body style
-const pukeGreen = '#6aa84f'; //Ugliest green known to man
 const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
 const setFontSize = '72px';
-const setFontType = 'sans-serif'; //Andale Mono", sans-serif
+const setFontWeight = '700'; //bold for monospace bold
+// eslint-disable-next-line prettier/prettier
+const setFontFamily = "\"Andale Mono\", sans-serif";
 
 test.describe('Stacked Plot styling', () => {
   let stackedPlot;
@@ -92,14 +90,10 @@ test.describe('Stacked Plot styling', () => {
     await page.getByLabel('Set Font Size').click();
     await page.getByRole('menuitem', { name: '72px' }).click();
 
-    //Set Font Type to Monospace Bold
+    //Set Font Type to Monospace Bold. See setFontWeight and setFontFamily variables
     await page.getByLabel('Set Font Type').click();
     await page.getByRole('menuitem', { name: 'Monospace Bold' }).click();
 
-    //Save
-    await page.getByRole('button', { name: 'Save' }).click();
-    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
-
     await checkStyles(
       hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
@@ -107,7 +101,16 @@ test.describe('Stacked Plot styling', () => {
       page.getByLabel('Stacked Plot Style Target')
     );
 
-    await checkFontStyles(setFontSize, setFontType, page.getByLabel('Stacked Plot Item Sine Wave Generator 1'));
+    await checkFontStyles(
+      setFontSize,
+      setFontWeight,
+      setFontFamily,
+      page.getByLabel('Stacked Plot Style Target')
+    );
+
+    //Save
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Reload page
     await page.reload({ waitUntil: 'domcontentloaded' });
@@ -120,6 +123,13 @@ test.describe('Stacked Plot styling', () => {
       page.getByLabel('Stacked Plot Style Target')
     );
 
+    await checkFontStyles(
+      setFontSize,
+      setFontWeight,
+      setFontFamily,
+      page.getByLabel('Stacked Plot Style Target')
+    );
+
     //Verify that stacked Plot Items inherit only text properties
     await checkStyles(
       NO_STYLE_RGBA,
@@ -134,6 +144,13 @@ test.describe('Stacked Plot styling', () => {
       hexToRGB(setTextColor),
       page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
     );
+
+    await checkFontStyles(
+      setFontSize,
+      setFontWeight,
+      setFontFamily,
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+    );
   });
 
   test('styling a child object of the flexible layout properly applies that style to only that child', async ({
@@ -169,6 +186,15 @@ test.describe('Stacked Plot styling', () => {
       page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
     );
 
+    await page.getByLabel('Stacked Plot Item Sine Wave Generator 1').click();
+    //Set Font Size to 72
+    await page.getByLabel('Set Font Size').click();
+    await page.getByRole('menuitem', { name: '72px' }).click();
+
+    //Set Font Type to Monospace Bold. See setFontWeight and setFontFamily variables
+    await page.getByLabel('Set Font Type').click();
+    await page.getByRole('menuitem', { name: 'Monospace Bold' }).click();
+
     // Save Flexible Layout
     await page.getByRole('button', { name: 'Save' }).click();
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
diff --git a/e2e/tests/visual-a11y/styling.visual.spec.js b/e2e/tests/visual-a11y/styling.visual.spec.js
index 26188d0165f..e13168262d2 100644
--- a/e2e/tests/visual-a11y/styling.visual.spec.js
+++ b/e2e/tests/visual-a11y/styling.visual.spec.js
@@ -113,7 +113,7 @@ test.describe('Flexible Layout styling @a11y', () => {
   });
 });
 
-test.describe.only('Stacked Plot styling @a11y', () => {
+test.describe('Stacked Plot styling @a11y', () => {
   let stackedPlot;
   test.beforeEach(async ({ page }) => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });

From 1df1f727541d3a01f8be8f5f4b4d2646a62fddf4 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Wed, 3 Jan 2024 09:52:51 -0800
Subject: [PATCH 32/34] lint fix

---
 e2e/helper/stylingUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/helper/stylingUtils.js b/e2e/helper/stylingUtils.js
index 83f5858662c..9d59196aec1 100644
--- a/e2e/helper/stylingUtils.js
+++ b/e2e/helper/stylingUtils.js
@@ -85,7 +85,7 @@ async function checkStyles(
  *
  * @param {string} expectedFontSize - The expected font size in '72px' format. Default is 'Default'
  * @param {string} expectedFontWeight - The expected font Type. Format as '700' for bold. Default is 'Default'
- * @param {string} expectedFontFamily - The expected font Type. Format unkown. Default is 'Default'
+ * @param {string} expectedFontFamily - The expected font Type. Format as "\"Andale Mono\", sans-serif". Default is 'Default'
  * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be checked.
  */
 async function checkFontStyles(expectedFontSize, expectedFontWeight, expectedFontFamily, locator) {

From 6e5fd05501a53786f2adc1eb196fc12ff82a28a0 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Wed, 3 Jan 2024 14:33:09 -0800
Subject: [PATCH 33/34] update comments

---
 .../plugins/styling/stackedPlotStyling.e2e.spec.js          | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
index 2142a65d9b3..7c922a42670 100644
--- a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
+++ b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
@@ -71,13 +71,14 @@ test.describe('Stacked Plot styling', () => {
   test('styling the overlay plot properly applies the styles to all containers', async ({
     page
   }) => {
-    // Directly navigate to the stackedplot
+    // Directly navigate to the stacked plot
     await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });
 
     await page.getByLabel('Edit').click();
 
     await page.getByRole('tab', { name: 'Styles' }).click();
 
+    //Set styles on overall stacked plot
     await setStyles(
       page,
       setBorderColor,
@@ -94,6 +95,7 @@ test.describe('Stacked Plot styling', () => {
     await page.getByLabel('Set Font Type').click();
     await page.getByRole('menuitem', { name: 'Monospace Bold' }).click();
 
+    //Check styles of stacked plot
     await checkStyles(
       hexToRGB(setBorderColor),
       hexToRGB(setBackgroundColor),
@@ -101,6 +103,7 @@ test.describe('Stacked Plot styling', () => {
       page.getByLabel('Stacked Plot Style Target')
     );
 
+    //Check font styles of stacked plot
     await checkFontStyles(
       setFontSize,
       setFontWeight,
@@ -186,6 +189,7 @@ test.describe('Stacked Plot styling', () => {
       page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
     );
 
+    //Set Font Styles on SWG1 but not SWG2
     await page.getByLabel('Stacked Plot Item Sine Wave Generator 1').click();
     //Set Font Size to 72
     await page.getByLabel('Set Font Size').click();

From 8cf081db0ecafe64c370bf54cab6c205d4d824c6 Mon Sep 17 00:00:00 2001
From: John Hill <john.c.hill@nasa.gov>
Date: Wed, 3 Jan 2024 16:57:23 -0800
Subject: [PATCH 34/34] skip test for bug

---
 .../styling/stackedPlotStyling.e2e.spec.js    | 169 +++++++++---------
 1 file changed, 87 insertions(+), 82 deletions(-)

diff --git a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
index 7c922a42670..82d38cf309e 100644
--- a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
+++ b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
@@ -156,86 +156,91 @@ test.describe('Stacked Plot styling', () => {
     );
   });
 
-  test('styling a child object of the flexible layout properly applies that style to only that child', async ({
-    page
-  }) => {
-    await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });
-
-    await page.getByLabel('Edit').click();
-
-    await page.getByRole('tab', { name: 'Styles' }).click();
-
-    //Check default styles for SWG1 and SWG2
-    await checkStyles(
-      NO_STYLE_RGBA,
-      NO_STYLE_RGBA,
-      hexToRGB(defaultTextColor),
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
-    );
-
-    await checkStyles(
-      NO_STYLE_RGBA,
-      NO_STYLE_RGBA,
-      hexToRGB(defaultTextColor),
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
-    );
-
-    // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
-    await setStyles(
-      page,
-      setBorderColor,
-      setBackgroundColor,
-      setTextColor,
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
-    );
-
-    //Set Font Styles on SWG1 but not SWG2
-    await page.getByLabel('Stacked Plot Item Sine Wave Generator 1').click();
-    //Set Font Size to 72
-    await page.getByLabel('Set Font Size').click();
-    await page.getByRole('menuitem', { name: '72px' }).click();
-
-    //Set Font Type to Monospace Bold. See setFontWeight and setFontFamily variables
-    await page.getByLabel('Set Font Type').click();
-    await page.getByRole('menuitem', { name: 'Monospace Bold' }).click();
-
-    // Save Flexible Layout
-    await page.getByRole('button', { name: 'Save' }).click();
-    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
-
-    // Check styles on StackedPlot1
-    await checkStyles(
-      hexToRGB(setBorderColor),
-      hexToRGB(setBackgroundColor),
-      hexToRGB(setTextColor),
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
-    );
-
-    // Check styles on StackedPlot2
-    await checkStyles(
-      NO_STYLE_RGBA,
-      NO_STYLE_RGBA,
-      hexToRGB(defaultTextColor),
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
-    );
-
-    // Reload page and verify that styles persist
-    await page.reload({ waitUntil: 'domcontentloaded' });
-
-    // Check styles on StackedPlot1
-    await checkStyles(
-      hexToRGB(setBorderColor),
-      hexToRGB(setBackgroundColor),
-      hexToRGB(setTextColor),
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
-    );
-
-    // Check styles on StackedPlot2
-    await checkStyles(
-      NO_STYLE_RGBA,
-      NO_STYLE_RGBA,
-      hexToRGB(defaultTextColor),
-      page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
-    );
-  });
+  test.fixme(
+    'styling a child object of the flexible layout properly applies that style to only that child',
+    async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/nasa/openmct/issues/7338'
+      });
+      await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });
+
+      await page.getByLabel('Edit').click();
+
+      await page.getByRole('tab', { name: 'Styles' }).click();
+
+      //Check default styles for SWG1 and SWG2
+      await checkStyles(
+        NO_STYLE_RGBA,
+        NO_STYLE_RGBA,
+        hexToRGB(defaultTextColor),
+        page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+      );
+
+      await checkStyles(
+        NO_STYLE_RGBA,
+        NO_STYLE_RGBA,
+        hexToRGB(defaultTextColor),
+        page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
+      );
+
+      // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
+      await setStyles(
+        page,
+        setBorderColor,
+        setBackgroundColor,
+        setTextColor,
+        page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+      );
+
+      //Set Font Styles on SWG1 but not SWG2
+      await page.getByLabel('Stacked Plot Item Sine Wave Generator 1').click();
+      //Set Font Size to 72
+      await page.getByLabel('Set Font Size').click();
+      await page.getByRole('menuitem', { name: '72px' }).click();
+
+      //Set Font Type to Monospace Bold. See setFontWeight and setFontFamily variables
+      await page.getByLabel('Set Font Type').click();
+      await page.getByRole('menuitem', { name: 'Monospace Bold' }).click();
+
+      // Save Flexible Layout
+      await page.getByRole('button', { name: 'Save' }).click();
+      await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+      // Check styles on StackedPlot1
+      await checkStyles(
+        hexToRGB(setBorderColor),
+        hexToRGB(setBackgroundColor),
+        hexToRGB(setTextColor),
+        page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+      );
+
+      // Check styles on StackedPlot2
+      await checkStyles(
+        NO_STYLE_RGBA,
+        NO_STYLE_RGBA,
+        hexToRGB(defaultTextColor),
+        page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
+      );
+
+      // Reload page and verify that styles persist
+      await page.reload({ waitUntil: 'domcontentloaded' });
+
+      // Check styles on StackedPlot1
+      await checkStyles(
+        hexToRGB(setBorderColor),
+        hexToRGB(setBackgroundColor),
+        hexToRGB(setTextColor),
+        page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+      );
+
+      // Check styles on StackedPlot2
+      await checkStyles(
+        NO_STYLE_RGBA,
+        NO_STYLE_RGBA,
+        hexToRGB(defaultTextColor),
+        page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
+      );
+    }
+  );
 });