Merge branch 'master' of https://github.com/nasa/openmct into eslint_update

2025-01-29 15:43:52 +00:00 · 2024-07-22 09:19:19 -07:00 · 2024-07-22 09:19:19 -07:00 · 2c0bacf3cc
commit 2c0bacf3cc
parent 3ec9ee3ab7 762762945d
21 changed files with 487 additions and 328 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -5,7 +5,7 @@ orbs:
 executors:
  pw-focal-development:
    docker:
-      - image: mcr.microsoft.com/playwright:v1.45.0-focal
+      - image: mcr.microsoft.com/playwright:v1.45.2-focal
    environment:
      NODE_ENV: development # Needed to ensure 'dist' folder created and devDependencies installed
      PERCY_POSTINSTALL_BROWSER: 'true' # Needed to store the percy browser in cache deps
@ -159,7 +159,7 @@ jobs:
    steps:
      - build_and_install:
          node-version: lts/hydrogen
-      - run: npx playwright@1.45.0 install #Necessary for bare ubuntu machine
+      - run: npx playwright@1.45.2 install #Necessary for bare ubuntu machine
      - run: |
          export $(cat src/plugins/persistence/couch/.env.ci | xargs)
          docker-compose -f src/plugins/persistence/couch/couchdb-compose.yaml up --detach
--- a/.github/codeql/codeql-config.yml
+++ b/.github/codeql/codeql-config.yml
@ -1 +1,5 @@
 name: 'Custom CodeQL config'
+
+paths-ignore:
+  # Ignore e2e tests and framework
+  - e2e
--- a/.github/workflows/e2e-couchdb.yml
+++ b/.github/workflows/e2e-couchdb.yml
@ -37,7 +37,7 @@ jobs:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

-      - run: npx playwright@1.45.0 install
+      - run: npx playwright@1.45.2 install

      - name: Start CouchDB Docker Container and Init with Setup Scripts
        run: |
--- a/.github/workflows/e2e-flakefinder.yml
+++ b/.github/workflows/e2e-flakefinder.yml
@ -30,7 +30,7 @@ jobs:
          restore-keys: |
            ${{ runner.os }}-node-

-      - run: npx playwright@1.45.0 install
+      - run: npx playwright@1.45.2 install
      - run: npm ci --no-audit --progress=false

      - name: Run E2E Tests (Repeated 10 Times)
--- a/.github/workflows/e2e-perf.yml
+++ b/.github/workflows/e2e-perf.yml
@ -28,7 +28,7 @@ jobs:
          restore-keys: |
            ${{ runner.os }}-node-

-      - run: npx playwright@1.45.0 install
+      - run: npx playwright@1.45.2 install
      - run: npm ci --no-audit --progress=false
      - run: npm run test:perf:localhost
      - run: npm run test:perf:contract
--- a/.github/workflows/e2e-pr.yml
+++ b/.github/workflows/e2e-pr.yml
@ -33,7 +33,7 @@ jobs:
          restore-keys: |
            ${{ runner.os }}-node-

-      - run: npx playwright@1.45.0 install
+      - run: npx playwright@1.45.2 install
      - run: npx playwright install chrome-beta
      - run: npm ci --no-audit --progress=false
      - run: npm run test:e2e:full -- --max-failures=40
--- a/e2e/package.json
+++ b/e2e/package.json
@ -17,10 +17,13 @@
    "@types/sinonjs__fake-timers": "8.1.5",
    "@percy/cli": "1.27.4",
    "@percy/playwright": "1.0.4",
-    "@playwright/test": "1.45.0",
+    "@playwright/test": "1.45.2",
    "@axe-core/playwright": "4.8.5",
    "sinon": "17.0.0"
  },
-  "author": "NASA Ames Research Center",
+  "author": {
+    "name": "National Aeronautics and Space Administration",
+    "url": "https://www.nasa.gov"
+  },
  "license": "Apache-2.0"
 }
--- a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js
@ -61,11 +61,12 @@ test.describe('Autoscale', () => {
    await page.getByLabel('Edit Object').click();

    await page.getByRole('tab', { name: 'Config' }).click();
+
+    // turn off autoscale
    await page.getByRole('checkbox', { name: 'Auto scale' }).uncheck();

-    await page.getByRole('spinbutton').first().fill(-2);
-    // set maximum value
-    await page.getByRole('spinbutton').nth(1).fill(2);
+    await page.getByLabel('Y Axis 1 Minimum value').fill('-2');
+    await page.getByLabel('Y Axis 1 Maximum value').fill('2');

    // save
    await page.click('button[title="Save"]');
--- a/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
@ -91,7 +91,7 @@ test.describe('Overlay Plot', () => {
    // Assert that the legend is collapsed by default
    await expect(page.getByLabel('Plot Legend Collapsed')).toBeVisible();
    await expect(page.getByLabel('Plot Legend Expanded')).toBeHidden();
-    await expect(page.getByLabel('Expand by Default')).toHaveText('No');
+    await expect(page.getByLabel('Expand by Default')).toHaveText(/No/);

    expect(await page.getByLabel('Plot Legend Item').count()).toBe(3);

@ -106,7 +106,7 @@ test.describe('Overlay Plot', () => {
    await expect(page.getByRole('cell', { name: 'Name' })).toBeVisible();
    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
    await expect(page.getByRole('cell', { name: 'Value' })).toBeVisible();
-    await expect(page.getByLabel('Expand by Default')).toHaveText('Yes');
+    await expect(page.getByLabel('Expand by Default')).toHaveText(/Yes/);
    await expect(page.getByLabel('Plot Legend Item')).toHaveCount(3);

    // Assert that the legend is expanded on page load
@ -116,7 +116,7 @@ test.describe('Overlay Plot', () => {
    await expect(page.getByRole('cell', { name: 'Name' })).toBeVisible();
    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
    await expect(page.getByRole('cell', { name: 'Value' })).toBeVisible();
-    await expect(page.getByLabel('Expand by Default')).toHaveText('Yes');
+    await expect(page.getByLabel('Expand by Default')).toHaveText(/Yes/);
    await expect(page.getByLabel('Plot Legend Item')).toHaveCount(3);
  });

@ -144,15 +144,8 @@ test.describe('Overlay Plot', () => {

    // Expand the "Sine Wave Generator" plot series options and enable limit lines
    await page.getByRole('tab', { name: 'Config' }).click();
-    await page
-      .getByRole('list', { name: 'Plot Series Properties' })
-      .locator('span')
-      .first()
-      .click();
-    await page
-      .getByRole('list', { name: 'Plot Series Properties' })
-      .locator('[title="Display limit lines"]~div input')
-      .check();
+    await page.getByLabel('Expand Sine Wave Generator:').click();
+    await page.getByLabel('Limit lines').check();

    await assertLimitLinesExistAndAreVisible(page);

@ -215,21 +208,13 @@ test.describe('Overlay Plot', () => {

    // Expand the "Sine Wave Generator" plot series options and enable limit lines
    await page.getByRole('tab', { name: 'Config' }).click();
-    await page
-      .getByRole('list', { name: 'Plot Series Properties' })
-      .locator('span')
-      .first()
-      .click();
-    await page
-      .getByRole('list', { name: 'Plot Series Properties' })
-      .getByRole('checkbox', { name: 'Limit lines' })
-      .check();
+    await page.getByLabel('Expand Sine Wave Generator:').click();
+    await page.getByLabel('Limit lines').check();

    await assertLimitLinesExistAndAreVisible(page);

-    // Save (exit edit mode)
-    await page.locator('button[title="Save"]').click();
-    await page.locator('li[title="Save and Finish Editing"]').click();
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();

    const initialCoords = await assertLimitLinesExistAndAreVisible(page);
    // Resize the chart container by showing the snapshot pane.
--- a/e2e/tests/functional/plugins/plot/plotControls.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/plotControls.e2e.spec.js
@ -77,12 +77,12 @@ test.describe('Plot Controls', () => {
    await page.getByLabel('Edit Object').click();

    await page.getByRole('tab', { name: 'Config' }).click();
+
+    // turn off autoscale
    await page.getByRole('checkbox', { name: 'Auto scale' }).uncheck();

-    // set minimum value
-    await page.getByRole('spinbutton').first().fill(-1);
-    // set maximum value
-    await page.getByRole('spinbutton').nth(1).fill(1);
+    await page.getByLabel('Y Axis 1 Minimum value').fill('-1');
+    await page.getByLabel('Y Axis 1 Maximum value').fill('1');

    // save
    await page.click('button[title="Save"]');
--- a/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js
@ -39,19 +39,23 @@ test.describe('Stacked Plot', () => {
    await page.goto('./', { waitUntil: 'domcontentloaded' });

    stackedPlot = await createDomainObjectWithDefaults(page, {
-      type: 'Stacked Plot'
+      type: 'Stacked Plot',
+      name: 'Stacked Plot'
    });

    swgA = await createDomainObjectWithDefaults(page, {
      type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator A',
      parent: stackedPlot.uuid
    });
    swgB = await createDomainObjectWithDefaults(page, {
      type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator B',
      parent: stackedPlot.uuid
    });
    swgC = await createDomainObjectWithDefaults(page, {
      type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator C',
      parent: stackedPlot.uuid
    });
  });
@ -151,40 +155,80 @@ test.describe('Stacked Plot', () => {
    await page.getByRole('tab', { name: 'Config' }).click();

    // Click on the 1st plot
-    await page.locator(`[aria-label="Stacked Plot Item ${swgA.name}"] canvas`).nth(1).click();
+    await page
+      .getByLabel('Stacked Plot Item Sine Wave Generator A')
+      .getByLabel('Plot Canvas')
+      .click();

    // Assert that the inspector shows the Y Axis properties for swgA
-    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
-      'Plot Series'
-    );
+    await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
    await expect(
-      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
-    ).toContainText(swgA.name);
+      page.getByLabel('Inspector Views').getByText('Sine Wave Generator A', { exact: true })
+    ).toBeVisible();

    // Click on the 2nd plot
-    await page.locator(`[aria-label="Stacked Plot Item ${swgB.name}"] canvas`).nth(1).click();
-
+    await page
+      .getByLabel('Stacked Plot Item Sine Wave Generator B')
+      .getByLabel('Plot Canvas')
+      .click();
    // Assert that the inspector shows the Y Axis properties for swgB
-    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
-      'Plot Series'
-    );
+    await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
    await expect(
-      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
-    ).toContainText(swgB.name);
+      page.getByLabel('Inspector Views').getByText('Sine Wave Generator B', { exact: true })
+    ).toBeVisible();

    // Click on the 3rd plot
-    await page.locator(`[aria-label="Stacked Plot Item ${swgC.name}"] canvas`).nth(1).click();
-
-    // Assert that the inspector shows the Y Axis properties for swgC
-    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
-      'Plot Series'
-    );
+    await page
+      .getByLabel('Stacked Plot Item Sine Wave Generator C')
+      .getByLabel('Plot Canvas')
+      .click();
+    // Assert that the inspector shows the Y Axis properties for swgB
+    await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
    await expect(
-      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
-    ).toContainText(swgC.name);
+      page.getByLabel('Inspector Views').getByText('Sine Wave Generator C', { exact: true })
+    ).toBeVisible();
+
+    // Go into edit mode
+    await page.getByLabel('Edit Object').click();
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+
+    // Click on the 1st plot
+    await page.getByLabel('Stacked Plot Item Sine Wave Generator A').click();
+
+    // Assert that the inspector shows the Y Axis properties for swgA
+    await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
+    await expect(
+      page.getByLabel('Inspector Views').getByText('Sine Wave Generator A', { exact: true })
+    ).toBeVisible();
+
+    // Click on the 2nd plot
+    await page.getByLabel('Stacked Plot Item Sine Wave Generator B').click();
+
+    // Assert that the inspector shows the Y Axis properties for swgB
+    await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
+    await expect(
+      page.getByLabel('Inspector Views').getByText('Sine Wave Generator B', { exact: true })
+    ).toBeVisible();
+
+    // Click on the 3rd plot
+    await page.getByLabel('Stacked Plot Item Sine Wave Generator C').click();
+
+    // Assert that the inspector shows the Y Axis properties for swgC
+    await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
+    await expect(
+      page.getByLabel('Inspector Views').getByText('Sine Wave Generator C', { exact: true })
+    ).toBeVisible();
+  });
+
+  test('Changing properties of an immutable child plot are applied correctly', async ({ page }) => {
+    await page.goto(stackedPlot.url);

    // Go into edit mode
    await page.getByLabel('Edit Object').click();
@ -192,40 +236,35 @@ test.describe('Stacked Plot', () => {
    await page.getByRole('tab', { name: 'Config' }).click();

    // Click on canvas for the 1st plot
-    await page.locator(`[aria-label="Stacked Plot Item ${swgA.name}"]`).click();
+    await page.getByLabel(`Stacked Plot Item ${swgA.name}`).click();

-    // Assert that the inspector shows the Y Axis properties for swgA
-    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
-      'Plot Series'
-    );
-    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
+    // Expand config for the series
+    await page.getByLabel('Expand Sine Wave Generator').click();
+
+    // turn off alarm markers
+    await page.getByLabel('Alarm Markers').uncheck();
+
+    // save
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // reload page and waitForPlotsToRender
+    await page.reload();
+    await waitForPlotsToRender(page);
+
+    // Click on canvas for the 1st plot
+    await page.getByLabel(`Stacked Plot Item ${swgA.name}`).click();
+
+    // Expand config for the series
+    //TODO Fix this locator
+    await page.getByLabel('Expand Sine Wave Generator A generator').click();
+
+    // Assert that alarm markers are still turned off
    await expect(
-      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
-    ).toContainText(swgA.name);
-
-    //Click on canvas for the 2nd plot
-    await page.locator(`[aria-label="Stacked Plot Item ${swgB.name}"]`).click();
-
-    // Assert that the inspector shows the Y Axis properties for swgB
-    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
-      'Plot Series'
-    );
-    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
-    await expect(
-      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
-    ).toContainText(swgB.name);
-
-    //Click on canvas for the 3rd plot
-    await page.locator(`[aria-label="Stacked Plot Item ${swgC.name}"]`).click();
-
-    // Assert that the inspector shows the Y Axis properties for swgC
-    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
-      'Plot Series'
-    );
-    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
-    await expect(
-      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
-    ).toContainText(swgC.name);
+      page
+        .getByTitle('Display markers visually denoting points in alarm.')
+        .getByRole('cell', { name: 'Disabled' })
+    ).toBeVisible();
  });

  test('the legend toggles between aggregate and per child', async ({ page }) => {
--- a/e2e/tests/visual-a11y/components/timeConductor.visual.spec.js
+++ b/e2e/tests/visual-a11y/components/timeConductor.visual.spec.js
@ -48,7 +48,13 @@ test.describe('Visual - Time Conductor', () => {
  //   await scanForA11yViolations(page, testInfo.title);
  // });

-  test('Visual - Time Conductor (Fixed time) @clock @snapshot', async ({ page }) => {
+  /**
+   * FIXME: This test fails sporadically due to layout shift during initial load.
+   * The layout shift seems to be caused by loading Open MCT's icons, which are not preloaded
+   * and load after the initial DOM content has loaded.
+   * @see https://github.com/nasa/openmct/issues/7775
+   */
+  test.fixme('Visual - Time Conductor (Fixed time) @clock @snapshot', async ({ page }) => {
    // Navigate to a specific view that uses the Time Conductor in Fixed Time mode with inspect and browse panes collapsed
    await page.goto(
      `./#/browse/mine?tc.mode=fixed&tc.startBound=${MISSION_TIME_FIXED_START}&tc.endBound=${MISSION_TIME_FIXED_END}&tc.timeSystem=utc&view=grid&hideInspector=true&hideTree=true`,
--- a/package-lock.json
+++ b/package-lock.json
@ -104,7 +104,7 @@
        "@axe-core/playwright": "4.8.5",
        "@percy/cli": "1.27.4",
        "@percy/playwright": "1.0.4",
-        "@playwright/test": "1.45.0",
+        "@playwright/test": "1.45.2",
        "@types/sinonjs__fake-timers": "8.1.5",
        "sinon": "17.0.0"
      }
@ -1550,12 +1550,12 @@
      }
    },
    "node_modules/@playwright/test": {
-      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.0.tgz",
-      "integrity": "sha512-TVYsfMlGAaxeUllNkywbwek67Ncf8FRGn8ZlRdO291OL3NjG9oMbfVhyP82HQF0CZLMrYsvesqoUekxdWuF9Qw==",
+      "version": "1.45.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.2.tgz",
+      "integrity": "sha512-JxG9eq92ET75EbVi3s+4sYbcG7q72ECeZNbdBlaMkGcNbiDQ4cAi8U2QP5oKkOx+1gpaiL1LDStmzCaEM1Z6fQ==",
      "dev": true,
      "dependencies": {
-        "playwright": "1.45.0"
+        "playwright": "1.45.2"
      },
      "bin": {
        "playwright": "cli.js"
@ -8849,12 +8849,12 @@
      }
    },
    "node_modules/playwright": {
-      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.0.tgz",
-      "integrity": "sha512-4z3ac3plDfYzGB6r0Q3LF8POPR20Z8D0aXcxbJvmfMgSSq1hkcgvFRXJk9rUq5H/MJ0Ktal869hhOdI/zUTeLA==",
+      "version": "1.45.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.2.tgz",
+      "integrity": "sha512-ReywF2t/0teRvNBpfIgh5e4wnrI/8Su8ssdo5XsQKpjxJj+jspm00jSoz9BTg91TT0c9HRjXO7LBNVrgYj9X0g==",
      "dev": true,
      "dependencies": {
-        "playwright-core": "1.45.0"
+        "playwright-core": "1.45.2"
      },
      "bin": {
        "playwright": "cli.js"
@ -8867,9 +8867,9 @@
      }
    },
    "node_modules/playwright-core": {
-      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.0.tgz",
-      "integrity": "sha512-lZmHlFQ0VYSpAs43dRq1/nJ9G/6SiTI7VPqidld9TDefL9tX87bTKExWZZUF5PeRyqtXqd8fQi2qmfIedkwsNQ==",
+      "version": "1.45.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.2.tgz",
+      "integrity": "sha512-ha175tAWb0dTK0X4orvBIqi3jGEt701SMxMhyujxNrgd8K0Uy5wMSwwcQHtyB4om7INUkfndx02XnQ2p6dvLDw==",
      "dev": true,
      "bin": {
        "playwright-core": "cli.js"
--- a/src/plugins/charts/bar/inspector/SeriesOptions.vue
+++ b/src/plugins/charts/bar/inspector/SeriesOptions.vue
@ -21,7 +21,7 @@
 -->
 <template>
  <ul>
-    <li class="c-tree__item menus-to-left" :class="aliasCss">
+    <li class="c-tree__item menus-to-left" :class="aliasCss" role="treeitem">
      <span
        class="c-disclosure-triangle is-enabled flex-elem"
        :class="expandedCssClass"
--- a/src/plugins/plot/inspector/PlotOptionsBrowse.vue
+++ b/src/plugins/plot/inspector/PlotOptionsBrowse.vue
@ -20,109 +20,55 @@
 at runtime from the About dialog for additional information.
 -->
 <template>
-  <div v-if="loaded" class="js-plot-options-browse">
-    <ul v-if="!isStackedPlotObject" class="c-tree" aria-label="Plot Series Properties">
-      <h2 class="--first" title="Plot series display properties in this object">Plot Series</h2>
-      <PlotOptionsItem v-for="series in plotSeries" :key="series.keyString" :series="series" />
-    </ul>
-    <div v-if="plotSeries.length && !isStackedPlotObject" class="grid-properties">
-      <ul
+  <ul v-if="loaded" class="js-plot-options-browse" aria-label="Plot Configuration">
+    <li v-if="showPlotSeries" class="c-tree" aria-labelledby="plot-series-header">
+      <h2 id="plot-series-header" class="--first">Plot Series</h2>
+      <ul aria-label="Plot Series Items" class="l-inspector-part">
+        <PlotOptionsItem v-for="series in plotSeries" :key="series.keyString" :series="series" />
+      </ul>
+    </li>
+    <ul v-if="showYAxisProperties" aria-label="Y Axes" class="l-inspector-part js-yaxis-properties">
+      <li
        v-for="(yAxis, index) in yAxesWithSeries"
        :key="`yAxis-${index}`"
-        class="l-inspector-part js-yaxis-properties"
-        :aria-label="
-          yAxesWithSeries.length > 1 ? `Y Axis ${yAxis.id} Properties` : 'Y Axis Properties'
-        "
+        :aria-labelledby="getYAxisHeaderId(index)"
      >
-        <h2 title="Y axis settings for this object">
+        <h2 :id="getYAxisHeaderId(index)">
          Y Axis {{ yAxesWithSeries.length > 1 ? yAxis.id : '' }}
        </h2>
-        <li class="grid-row">
-          <div class="grid-cell label" title="Manually override how the Y axis is labeled.">
-            Label
-          </div>
-          <div class="grid-cell value">{{ yAxis.label ? yAxis.label : 'Not defined' }}</div>
-        </li>
-        <li class="grid-row">
-          <div class="grid-cell label" title="Enable log mode.">Log mode</div>
-          <div class="grid-cell value">
-            {{ yAxis.logMode ? 'Enabled' : 'Disabled' }}
-          </div>
-        </li>
-        <li class="grid-row">
-          <div
-            class="grid-cell label"
-            title="Automatically scale the Y axis to keep all values in view."
+        <ul class="grid-properties" :aria-label="`Y Axis ${yAxis.id} Properties`">
+          <li
+            v-for="(prop, key) in yAxisProperties(yAxis)"
+            :key="key"
+            :aria-labelledby="getYAxisPropId(index, prop.label)"
+            class="grid-row"
+            role="grid"
          >
-            Auto scale
-          </div>
-          <div class="grid-cell value">
-            {{ yAxis.autoscale ? 'Enabled: ' + yAxis.autoscalePadding : 'Disabled' }}
-          </div>
-        </li>
-        <li v-if="!yAxis.autoscale && yAxis.rangeMin !== ''" class="grid-row">
-          <div class="grid-cell label" title="Minimum Y axis value.">Minimum value</div>
-          <div class="grid-cell value">{{ yAxis.rangeMin }}</div>
-        </li>
-        <li v-if="!yAxis.autoscale && yAxis.rangeMax !== ''" class="grid-row">
-          <div class="grid-cell label" title="Maximum Y axis value.">Maximum value</div>
-          <div class="grid-cell value">{{ yAxis.rangeMax }}</div>
-        </li>
-      </ul>
-    </div>
-    <div v-if="isStackedPlotObject || !isNestedWithinAStackedPlot" class="grid-properties">
-      <ul class="l-inspector-part js-legend-properties">
-        <h2 class="--first" title="Legend settings for this object">Legend</h2>
-        <li v-if="isStackedPlotObject" class="grid-row">
-          <div class="grid-cell label" title="Display legends per sub plot.">
-            Show legend per plot
-          </div>
-          <div class="grid-cell value">{{ showLegendsForChildren ? 'Yes' : 'No' }}</div>
-        </li>
-        <li v-if="showLegendDetails" class="grid-row">
-          <div
-            class="grid-cell label"
-            title="The position of the legend relative to the plot display area."
-          >
-            Position
-          </div>
-          <div class="grid-cell value capitalize">{{ position }}</div>
-        </li>
-        <li v-if="showLegendDetails" class="grid-row">
-          <div class="grid-cell label" title="Hide the legend when the plot is small">
-            Hide when plot small
-          </div>
-          <div class="grid-cell value">{{ hideLegendWhenSmall ? 'Yes' : 'No' }}</div>
-        </li>
-        <li v-if="showLegendDetails" class="grid-row">
-          <div class="grid-cell label" title="Show the legend expanded by default">
-            Expand by Default
-          </div>
-          <div aria-label="Expand by Default" class="grid-cell value">
-            {{ expandByDefault ? 'Yes' : 'No' }}
-          </div>
-        </li>
-        <li v-if="showLegendDetails" class="grid-row">
-          <div class="grid-cell label" title="What to display in the legend when it's collapsed.">
-            Show when collapsed:
-          </div>
-          <div class="grid-cell value">{{ valueToShowWhenCollapsed.replace('nearest', '') }}</div>
-        </li>
-        <li v-if="showLegendDetails" class="grid-row">
-          <div class="grid-cell label" title="What to display in the legend when it's expanded.">
-            Show when expanded:
-          </div>
-          <div class="grid-cell value comma-list">
-            <span v-if="showTimestampWhenExpanded">Timestamp</span>
-            <span v-if="showValueWhenExpanded">Value</span>
-            <span v-if="showMinimumWhenExpanded">Min</span>
-            <span v-if="showMaximumWhenExpanded">Max</span>
-            <span v-if="showUnitsWhenExpanded">Unit</span>
+            <div
+              :id="getYAxisPropId(index, prop.label)"
+              class="grid-cell label"
+              :title="prop.title"
+              role="gridcell"
+            >
+              {{ prop.label }}
+            </div>
+            <div class="grid-cell value" role="gridcell">{{ prop.value }}</div>
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <li v-if="showLegendProperties" class="grid-properties" aria-label="Legend Configuration">
+      <ul class="l-inspector-part js-legend-properties" aria-labelledby="legend-header">
+        <h2 id="legend-header" class="--first">Legend</h2>
+        <li v-for="(prop, key) in legendProperties" :key="key" class="grid-row">
+          <div class="u-contents" :aria-label="prop.label">
+            <div class="grid-cell label" :title="prop.title">{{ prop.label }}</div>
+            <div class="grid-cell value" :class="prop.class">{{ prop.value }}</div>
          </div>
        </li>
      </ul>
-    </div>
-  </div>
+    </li>
+  </ul>
 </template>

 <script>
@ -173,6 +119,60 @@ export default {
    },
    yAxesWithSeries() {
      return this.yAxes.filter((yAxis) => yAxis.seriesCount > 0);
+    },
+    showPlotSeries() {
+      return !this.isStackedPlotObject;
+    },
+    showYAxisProperties() {
+      return this.plotSeries.length && !this.isStackedPlotObject;
+    },
+    showLegendProperties() {
+      return this.isStackedPlotObject || !this.isNestedWithinAStackedPlot;
+    },
+    legendProperties() {
+      const props = {};
+
+      if (this.isStackedPlotObject) {
+        props.showLegendsForChildren = {
+          label: 'Show legend per plot',
+          title: 'Display legends per sub plot.',
+          value: this.showLegendsForChildren ? 'Yes' : 'No'
+        };
+      }
+
+      if (this.showLegendDetails) {
+        Object.assign(props, {
+          position: {
+            label: 'Position',
+            title: 'The position of the legend relative to the plot display area.',
+            value: this.position,
+            class: 'capitalize'
+          },
+          hideLegendWhenSmall: {
+            label: 'Hide when plot small',
+            title: 'Hide the legend when the plot is small',
+            value: this.hideLegendWhenSmall ? 'Yes' : 'No'
+          },
+          expandByDefault: {
+            label: 'Expand by Default',
+            title: 'Show the legend expanded by default',
+            value: this.expandByDefault ? 'Yes' : 'No'
+          },
+          valueToShowWhenCollapsed: {
+            label: 'Show when collapsed:',
+            title: "What to display in the legend when it's collapsed.",
+            value: this.valueToShowWhenCollapsed.replace('nearest', '')
+          },
+          expandedValues: {
+            label: 'Show when expanded:',
+            title: "What to display in the legend when it's expanded.",
+            value: this.getExpandedValues(),
+            class: 'comma-list'
+          }
+        });
+      }
+
+      return props;
    }
  },
  mounted() {
@ -282,6 +282,76 @@ export default {
      if (foundYAxis) {
        foundYAxis.seriesCount = foundYAxis.seriesCount + updateCount;
      }
+    },
+    getYAxisHeaderId(index) {
+      return `yAxis-${index}-header`;
+    },
+
+    getYAxisPropId(index, label) {
+      return `y-axis-${index}-${label.toLowerCase().replace(' ', '-')}`;
+    },
+
+    yAxisAriaLabel(yAxis) {
+      return this.yAxesWithSeries.length > 1
+        ? `Y Axis ${yAxis.id} Properties`
+        : 'Y Axis Properties';
+    },
+    yAxisProperties(yAxis) {
+      const props = {
+        label: {
+          label: 'Label',
+          title: 'Manually override how the Y axis is labeled.',
+          value: yAxis.label ? yAxis.label : 'Not defined'
+        },
+        logMode: {
+          label: 'Log mode',
+          title: 'Enable log mode.',
+          value: yAxis.logMode ? 'Enabled' : 'Disabled'
+        },
+        autoscale: {
+          label: 'Auto scale',
+          title: 'Automatically scale the Y axis to keep all values in view.',
+          value: yAxis.autoscale ? `Enabled: ${yAxis.autoscalePadding}` : 'Disabled'
+        }
+      };
+
+      if (!yAxis.autoscale) {
+        if (yAxis.rangeMin !== '') {
+          props.rangeMin = {
+            label: 'Minimum value',
+            title: 'Minimum Y axis value.',
+            value: yAxis.rangeMin
+          };
+        }
+        if (yAxis.rangeMax !== '') {
+          props.rangeMax = {
+            label: 'Maximum value',
+            title: 'Maximum Y axis value.',
+            value: yAxis.rangeMax
+          };
+        }
+      }
+
+      return props;
+    },
+    getExpandedValues() {
+      const values = [];
+      if (this.showTimestampWhenExpanded) {
+        values.push('Timestamp');
+      }
+      if (this.showValueWhenExpanded) {
+        values.push('Value');
+      }
+      if (this.showMinimumWhenExpanded) {
+        values.push('Min');
+      }
+      if (this.showMaximumWhenExpanded) {
+        values.push('Max');
+      }
+      if (this.showUnitsWhenExpanded) {
+        values.push('Unit');
+      }
+      return values.join(', ');
    }
  }
 };
--- a/src/plugins/plot/inspector/PlotOptionsEdit.vue
+++ b/src/plugins/plot/inspector/PlotOptionsEdit.vue
@ -21,8 +21,8 @@
 -->
 <template>
  <div v-if="loaded" class="js-plot-options-edit">
-    <ul v-if="!isStackedPlotObject" class="c-tree" aria-label="Plot Series Properties">
-      <h2 class="--first" title="Display properties for this object">Plot Series</h2>
+    <ul v-if="!isStackedPlotObject" class="c-tree" role="tree">
+      <h2 class="--first" title="Display properties for this Plot Series object">Plot Series</h2>
      <li v-for="series in plotSeries" :key="series.keyString">
        <series-form :series="series" @series-updated="updateSeriesConfigForObject" />
      </li>
@ -33,15 +33,18 @@
      :key="`yAxis-${index}`"
      class="grid-properties js-yaxis-grid-properties"
      :y-axis="config.yAxis"
+      role="group"
+      aria-labelledby="y-axis-group"
      @series-updated="updateSeriesConfigForObject"
    />
    <ul
      v-if="isStackedPlotObject || !isStackedPlotNestedObject"
      class="l-inspector-part"
      aria-label="Legend Properties"
+      role="tree"
    >
      <h2 class="--first" title="Legend options">Legend</h2>
-      <legend-form class="grid-properties" :legend="config.legend" />
+      <legend-form role="treeitem" tabindex="0" class="grid-properties" :legend="config.legend" />
    </ul>
  </div>
 </template>
@ -83,7 +86,10 @@ export default {
      );
    },
    yAxesIds() {
-      return !this.isStackedPlotObject && this.yAxes.filter((yAxis) => yAxis.seriesCount > 0);
+      if (this.isStackedPlotObject) {
+        return [];
+      }
+      return this.yAxes.filter((yAxis) => yAxis.seriesCount > 0);
    }
  },
  created() {
--- a/src/plugins/plot/inspector/PlotOptionsItem.vue
+++ b/src/plugins/plot/inspector/PlotOptionsItem.vue
@ -20,98 +20,93 @@
 at runtime from the About dialog for additional information.
 -->
 <template>
-  <ul>
-    <li class="c-tree__item menus-to-left" :class="isAliasClass">
-      <span
-        class="c-disclosure-triangle is-enabled flex-elem"
-        :class="expandedCssClass"
-        @click="toggleExpanded"
-      >
-      </span>
-      <div class="c-object-label" :class="statusClass">
-        <div class="c-object-label__type-icon" :class="getSeriesClass">
-          <span class="is-status__indicator" title="This item is missing or suspect"></span>
-        </div>
-        <div class="c-object-label__name">{{ series.domainObject.name }}</div>
+  <li class="c-tree__item menus-to-left" :class="isAliasClass" :aria-label="ariaLabel">
+    <span
+      class="c-disclosure-triangle is-enabled flex-elem"
+      :class="expandedCssClass"
+      role="button"
+      :aria-label="ariaLabelExpandCollapse"
+      tabindex="0"
+      @click="toggleExpanded"
+      @keydown.enter="toggleExpanded"
+    ></span>
+    <div class="c-object-label" :class="statusClass">
+      <div class="c-object-label__type-icon" :class="getSeriesClass">
+        <span class="is-status__indicator" title="This item is missing or suspect"></span>
      </div>
-    </li>
-    <li v-show="expanded" class="c-tree__item menus-to-left" role="table">
-      <ul class="grid-properties js-plot-options-browse-properties" role="rowgroup">
-        <li class="grid-row" role="row">
-          <div
-            class="grid-cell label"
-            title="The field to be plotted as a value for this series."
-            role="cell"
-          >
-            Value
-          </div>
-          <div class="grid-cell value" role="cell">
-            {{ yKey }}
-          </div>
-        </li>
-        <li class="grid-row" role="row">
-          <div
-            class="grid-cell label"
-            title="The rendering method to join lines for this series."
-            role="cell"
-          >
-            Line Method
-          </div>
-          <div class="grid-cell value" role="cell">
-            {{
-              {
-                none: 'None',
-                linear: 'Linear interpolation',
-                stepAfter: 'Step After'
-              }[interpolate]
-            }}
-          </div>
-        </li>
-        <li class="grid-row" role="row">
-          <div
-            class="grid-cell label"
-            title="Whether markers are displayed, and their size."
-            role="cell"
-          >
-            Markers
-          </div>
-          <div class="grid-cell value" role="cell">
-            {{ markerOptionsDisplayText }}
-          </div>
-        </li>
-        <li class="grid-row" role="row">
-          <div
-            class="grid-cell label"
-            title="Display markers visually denoting points in alarm."
-            role="cell"
-          >
-            Alarm Markers
-          </div>
-          <div class="grid-cell value" role="cell">
-            {{ alarmMarkers ? 'Enabled' : 'Disabled' }}
-          </div>
-        </li>
-        <li class="grid-row" role="row">
-          <div
-            class="grid-cell label"
-            title="Display lines visually denoting alarm limits."
-            role="cell"
-          >
-            Limit Lines
-          </div>
-          <div class="grid-cell value" role="cell">
-            {{ limitLines ? 'Enabled' : 'Disabled' }}
-          </div>
-        </li>
-        <ColorSwatch
-          :current-color="seriesHexColor"
-          edit-title="Manually set the plot line and marker color for this series."
-          view-title="The plot line and marker color for this series."
-          short-label="Color"
-        />
-      </ul>
-    </li>
-  </ul>
+      <div class="c-object-label__name">{{ series.domainObject.name }}</div>
+    </div>
+  </li>
+  <li v-show="expanded" class="c-tree__item menus-to-left" role="table">
+    <ul class="grid-properties js-plot-options-browse-properties" role="rowgroup">
+      <li class="grid-row" role="row">
+        <div
+          class="grid-cell label"
+          title="The field to be plotted as a value for this series."
+          role="cell"
+        >
+          Value
+        </div>
+        <div class="grid-cell value" role="cell">
+          {{ yKey }}
+        </div>
+      </li>
+      <li class="grid-row" role="row">
+        <div
+          class="grid-cell label"
+          title="The rendering method to join lines for this series."
+          role="cell"
+        >
+          Line Method
+        </div>
+        <div class="grid-cell value" role="cell">
+          {{
+            {
+              none: 'None',
+              linear: 'Linear interpolation',
+              stepAfter: 'Step After'
+            }[interpolate]
+          }}
+        </div>
+      </li>
+      <li class="grid-row" role="row">
+        <div
+          class="grid-cell label"
+          title="Whether markers are displayed, and their size."
+          role="cell"
+        >
+          Markers
+        </div>
+        <div class="grid-cell value" role="cell">
+          {{ markerOptionsDisplayText }}
+        </div>
+      </li>
+      <li class="grid-row" role="row" title="Display markers visually denoting points in alarm.">
+        <div class="grid-cell label" role="cell">Alarm Markers</div>
+        <div class="grid-cell value" role="cell">
+          {{ alarmMarkers ? 'Enabled' : 'Disabled' }}
+        </div>
+      </li>
+      <li class="grid-row" role="row">
+        <div
+          class="grid-cell label"
+          title="Display lines visually denoting alarm limits."
+          role="cell"
+        >
+          Limit Lines
+        </div>
+        <div class="grid-cell value" role="cell">
+          {{ limitLines ? 'Enabled' : 'Disabled' }}
+        </div>
+      </li>
+      <ColorSwatch
+        :current-color="seriesHexColor"
+        edit-title="Manually set the plot line and marker color for this series."
+        view-title="The plot line and marker color for this series."
+        short-label="Color"
+      />
+    </ul>
+  </li>
 </template>

 <script>
@ -137,6 +132,15 @@ export default {
    };
  },
  computed: {
+    ariaLabel() {
+      return this.series?.domainObject?.name ?? '';
+    },
+    ariaLabelExpandCollapse() {
+      const name = this.series.domainObject.name ? ` ${this.series.domainObject.name}` : '';
+      const type = this.series.domainObject.type ? ` ${this.series.domainObject.type}` : '';
+
+      return `${this.expanded ? 'Collapse' : 'Expand'}${name}${type}`;
+    },
    isAliasClass() {
      let cssClass = '';
      const domainObjectPath = [this.series.domainObject, ...this.path];
--- a/src/plugins/plot/inspector/forms/SeriesForm.vue
+++ b/src/plugins/plot/inspector/forms/SeriesForm.vue
@ -21,15 +21,19 @@
 -->
 <template>
  <ul>
-    <li class="c-tree__item menus-to-left" :class="isAliasCss">
+    <li class="c-tree__item menus-to-left" :class="isAliasCss" role="treeitem">
      <span
        class="c-disclosure-triangle is-enabled flex-elem"
        :class="expandedCssClass"
+        role="button"
+        :aria-label="ariaLabelValue"
+        tabindex="0"
        @click="toggleExpanded"
+        @keydown.enter="toggleExpanded"
      >
      </span>
      <div :class="objectLabelCss">
-        <div class="c-object-label__type-icon" :class="[seriesCss]">
+        <div class="c-object-label__type-icon" :class="seriesCss">
          <span class="is-status__indicator" title="This item is missing or suspect"></span>
        </div>
        <div class="c-object-label__name">{{ series.domainObject.name }}</div>
@ -43,12 +47,7 @@
        </div>
        <div class="grid-cell value">
          <select v-model="yKey" @change="updateForm('yKey')">
-            <option
-              v-for="option in yKeyOptions"
-              :key="option.value"
-              :value="option.value"
-              :selected="option.value == yKey"
-            >
+            <option v-for="option in yKeyOptions" :key="option.value" :value="option.value">
              {{ option.name }}
            </option>
          </select>
@ -84,10 +83,15 @@
      </li>
      <li class="grid-row">
        <div class="grid-cell label" title="Display markers visually denoting points in alarm.">
-          Alarm Markers
+          <label for="alarm-markers-checkbox">Alarm Markers</label>
        </div>
        <div class="grid-cell value">
-          <input v-model="alarmMarkers" type="checkbox" @change="updateForm('alarmMarkers')" />
+          <input
+            id="alarm-markers-checkbox"
+            v-model="alarmMarkers"
+            type="checkbox"
+            @change="updateForm('alarmMarkers')"
+          />
        </div>
      </li>
      <li class="grid-row">
@ -169,18 +173,24 @@ export default {
    };
  },
  computed: {
+    ariaLabelValue() {
+      const name = this.series.domainObject.name ? ` ${this.series.domainObject.name}` : '';
+      const type = this.series.domainObject.type ? ` ${this.series.domainObject.type}` : '';
+
+      return `${this.expanded ? 'Collapse' : 'Expand'}${name}${type}`;
+    },
    colorPalette() {
      return this.series.collection.palette.groups();
    },
    objectLabelCss() {
-      return this.status ? `c-object-label is-status--${this.status}'` : 'c-object-label';
+      return this.status ? `c-object-label is-status--${this.status}` : 'c-object-label';
    },
    seriesCss() {
-      let type = this.openmct.types.get(this.series.domainObject.type);
+      const type = this.openmct.types.get(this.series.domainObject.type);
+      const baseClass = 'c-object-label__type-icon';
+      const typeClass = type.definition.cssClass || '';

-      return type.definition.cssClass
-        ? `c-object-label__type-icon ${type.definition.cssClass}`
-        : `c-object-label__type-icon`;
+      return `${baseClass} ${typeClass}`.trim();
    },
    isAliasCss() {
      let cssClass = '';
--- a/src/plugins/plot/inspector/forms/YAxisForm.vue
+++ b/src/plugins/plot/inspector/forms/YAxisForm.vue
@ -31,25 +31,36 @@
          Label
        </div>
        <div class="grid-cell value">
-          <input v-model="label" class="c-input--flex" type="text" @change="updateForm('label')" />
-        </div>
-      </li>
-      <li class="grid-row">
-        <div id="log-mode-checkbox" class="grid-cell label" title="Enable log mode.">Log mode</div>
-        <div class="grid-cell value">
-          <!-- eslint-disable-next-line vue/html-self-closing -->
+          <label :for="`y-axis-${id}-label`" class="visually-hidden">Y Axis {{ id }} Label</label>
          <input
-            v-model="logMode"
-            class="js-log-mode-input"
-            aria-labelledby="log-mode-checkbox"
-            type="checkbox"
-            @change="updateForm('logMode')"
+            :id="`y-axis-${id}-label`"
+            v-model="label"
+            class="c-input--flex"
+            type="text"
+            @change="updateForm('label')"
          />
        </div>
      </li>
+      <li class="grid-row">
+        <div :id="`log-mode-checkbox-${id}`" class="grid-cell label" title="Enable log mode.">
+          Log mode
+        </div>
+        <div class="grid-cell value">
+          <input
+            :id="`log-mode-input-${id}`"
+            v-model="logMode"
+            class="js-log-mode-input"
+            type="checkbox"
+            @change="updateForm('logMode')"
+          />
+          <label :for="`log-mode-input-${id}`" class="visually-hidden"
+            >Y Axis {{ id }} Log mode</label
+          >
+        </div>
+      </li>
      <li class="grid-row">
        <div
-          id="autoscale-checkbox"
+          :id="`autoscale-checkbox-${id}`"
          class="grid-cell label"
          title="Automatically scale the Y axis to keep all values in view."
        >
@ -57,11 +68,14 @@
        </div>
        <div class="grid-cell value">
          <input
+            :id="`autoscale-input-${id}`"
            v-model="autoscale"
            type="checkbox"
-            aria-labelledby="autoscale-checkbox"
            @change="updateForm('autoscale')"
          />
+          <label :for="`autoscale-input-${id}`" class="visually-hidden"
+            >Y Axis {{ id }} Auto scale</label
+          >
        </div>
      </li>
      <li v-show="autoscale" class="grid-row">
@ -72,7 +86,11 @@
          Padding
        </div>
        <div class="grid-cell value">
+          <label :for="`autoscale-padding-${id}`" class="visually-hidden"
+            >Y Axis {{ id }} Autoscale Padding</label
+          >
          <input
+            :id="`autoscale-padding-${id}`"
            v-model="autoscalePadding"
            class="c-input--flex"
            type="text"
@ -88,8 +106,12 @@
      <li class="grid-row force-border">
        <div class="grid-cell label" title="Minimum Y axis value.">Minimum Value</div>
        <div class="grid-cell value">
+          <label :for="`range-min-${id}`" class="visually-hidden"
+            >Y Axis {{ id }} Minimum value</label
+          >
          <input
-            v-model.lazy="rangeMin"
+            :id="`range-min-${id}`"
+            v-model="rangeMin"
            class="c-input--flex"
            type="number"
            @change="updateForm('range')"
@ -99,8 +121,12 @@
      <li class="grid-row">
        <div class="grid-cell label" title="Maximum Y axis value.">Maximum Value</div>
        <div class="grid-cell value">
+          <label :for="`range-max-${id}`" class="visually-hidden"
+            >Y Axis {{ id }} Maximum value</label
+          >
          <input
-            v-model.lazy="rangeMax"
+            :id="`range-max-${id}`"
+            v-model="rangeMax"
            class="c-input--flex"
            type="number"
            @change="updateForm('range')"
--- a/src/plugins/plot/stackedPlot/StackedPlotItem.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
@ -122,8 +122,11 @@ export default {
    'grid-lines',
    'plot-y-tick-width'
  ],
-  mounted() {
+  beforeMount() {
+    // We must do this before mounted to use any series configuration options set at the stacked plot level
    this.updateView();
+  },
+  mounted() {
    this.isEditing = this.openmct.editor.isEditing();
    this.openmct.editor.on('isEditing', this.setEditState);
    this.setupClockChangedEvent((domainObject) => {
--- a/src/ui/inspector/InspectorTabs.vue
+++ b/src/ui/inspector/InspectorTabs.vue
@ -28,8 +28,10 @@
      role="tab"
      class="c-inspector__tab c-tab"
      :class="{ 'is-current': isSelected(tab) }"
+      tabindex="0"
      :title="tab.name"
      @click="selectTab(tab)"
+      @keydown.enter="selectTab(tab)"
    >
      <span class="c-inspector__tab-name c-tab__name">{{ tab.name }}</span>
    </div>