chore: re-enable a11y checks in visual suite-- minus planning tests

e2e/avpFixtures.js

@@ -34,7 +34,7 @@
  */
 
 import AxeBuilder from '@axe-core/playwright';
-import fs from 'fs';
+import fs from 'fs/promises';
 import path from 'path';
 import { fileURLToPath } from 'url';
 
@@ -87,6 +87,27 @@ const extendedTest = test.extend({
   }
 });
 
+/**
+ * Writes the accessibility report to the specified path.
+ *
+ * @param {string} reportPath - The path to write the report to.
+ * @param {Object} accessibilityScanResults - The results of the accessibility scan.
+ * @returns {Promise<Object>} The accessibility scan results.
+ * @throws Will throw an error if writing the report fails.
+ */
+async function writeAccessibilityReport(reportPath, accessibilityScanResults) {
+  try {
+    await fs.mkdir(path.dirname(reportPath), { recursive: true });
+    const data = JSON.stringify(accessibilityScanResults, null, 2);
+    await fs.writeFile(reportPath, data);
+    console.log(`Accessibility report with violations saved successfully as ${reportPath}`);
+    return accessibilityScanResults;
+  } catch (err) {
+    console.error(`Error writing the accessibility report to file ${reportPath}:`, err);
+    throw err;
+  }
+}
+
 /**
  * Scans for accessibility violations on a page and writes a report to disk if violations are found.
  * Automatically asserts that no violations should be present.
@@ -104,25 +125,29 @@ export async function scanForA11yViolations(page, testCaseName, options = {}) {
   const accessibilityScanResults = await builder.analyze();
 
   // Assert that no violations should be present
-  expect(
-    accessibilityScanResults.violations,
-    `Accessibility violations found in test case: ${testCaseName}`
-  ).toEqual([]);
+  expect
+    .soft(
+      accessibilityScanResults.violations,
+      `Accessibility violations found in test case: ${testCaseName}`
+    )
+    .toEqual([]);
 
   // Check if there are any violations
   if (accessibilityScanResults.violations.length > 0) {
-    let reportName = options.reportName || testCaseName;
-    let sanitizedReportName = reportName.replace(/\//g, '_');
-    const reportPath = path.join(TEST_RESULTS_DIR, `${sanitizedReportName}.json`);
+    const reportName = options.reportName || testCaseName;
+    const sanitizedReportName = reportName.replace(/\//g, '_');
+    const reportPath = path.join(
+      TEST_RESULTS_DIR,
+      'a11y-json-reports',
+      `${sanitizedReportName}.json`
+    );
 
     try {
-      if (!fs.existsSync(TEST_RESULTS_DIR)) {
-        fs.mkdirSync(TEST_RESULTS_DIR);
-      }
+      await page.screenshot({
+        path: path.join(TEST_RESULTS_DIR, 'a11y-screenshots', `${sanitizedReportName}.png`)
+      });
 
-      fs.writeFileSync(reportPath, JSON.stringify(accessibilityScanResults, null, 2));
-      console.log(`Accessibility report with violations saved successfully as ${reportPath}`);
-      return accessibilityScanResults;
+      return await writeAccessibilityReport(reportPath, accessibilityScanResults);
     } catch (err) {
       console.error(`Error writing the accessibility report to file ${reportPath}:`, err);
       throw err;

e2e/helper/useDarkmatterTheme.js

@@ -0,0 +1,29 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// This should be used to install the Darkmatter theme for Open MCT.
+// e.g.
+// await page.addInitScript({ path: path.join(__dirname, 'useDarkmatterTheme.js') });
+document.addEventListener('DOMContentLoaded', () => {
+  const openmct = window.openmct;
+  openmct.install(openmct.plugins.DarkmatterTheme());
+});

e2e/playwright-visual-a11y.config.js

@@ -41,7 +41,7 @@ const config = {
       name: 'darkmatter-theme', //Runs the same visual tests but with darkmatter-theme
       use: {
         browserName: 'chromium',
-        theme: 'darkmatter-theme'
+        theme: 'darkmatter'
       }
     }
   ],

e2e/pluginFixtures.js

@@ -127,6 +127,11 @@ const extendedTest = test.extend({
       await page.addInitScript({
         path: fileURLToPath(new URL('./helper/useSnowTheme.js', import.meta.url))
       });
+    } else if (theme === 'darkmatter') {
+      //inject darkmatter theme
+      await page.addInitScript({
+        path: fileURLToPath(new URL('./helper/useDarkmatterTheme.js', import.meta.url))
+      });
     }
 
     // Attach info about the currently running test and its project.

e2e/tests/visual-a11y/a11y.visual.spec.js

@@ -20,15 +20,14 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { test } from '../../avpFixtures.js';
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
 import { VISUAL_FIXED_URL } from '../../constants.js';
 
-test.describe('a11y - Default', () => {
+test.describe('a11y - Default @a11y', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
   });
   test('main view', async ({ page }, testInfo) => {
-    //Skipping for https://github.com/nasa/openmct/issues/7421
-    //await scanForA11yViolations(page, testInfo.title);
+    await scanForA11yViolations(page, testInfo.title);
   });
 });

e2e/tests/visual-a11y/components/header.visual.spec.js

@@ -27,7 +27,7 @@ Tests the branding associated with the default deployment. At least the about mo
 import percySnapshot from '@percy/playwright';
 import { fileURLToPath } from 'url';
 
-import { expect, test } from '../../../avpFixtures.js';
+import { expect, scanForA11yViolations, test } from '../../../avpFixtures.js';
 import { VISUAL_FIXED_URL } from '../../../constants.js';
 
 //Declare the component scope of the visual test for Percy
@@ -69,14 +69,26 @@ test.describe('Visual - Header @a11y', () => {
   });
 
   test('show snapshot button', async ({ page, theme }) => {
+    test.slow(true, 'We have to wait for the snapshot indicator to stop flashing');
     await page.getByLabel('Open the Notebook Snapshot Menu').click();
 
     await page.getByRole('menuitem', { name: 'Save to Notebook Snapshots' }).click();
 
+    await expect(page.getByLabel('Show Snapshots')).toBeVisible();
+
+    /**
+     * We have to wait for the snapshot indicator to stop flashing. This happens
+     * for a really long time (15 seconds 😳).
+     * TODO: Either reduce the length of the animation, convert this to a
+     * Playwright snapshot test (and disable animations), or augment the `waitForAnimations`
+     * fixture to adjust the timeout.
+     */
+    await expect(page.locator('.has-new-snapshot')).not.toBeAttached({
+      timeout: 30 * 1000
+    });
     await percySnapshot(page, `Notebook Snapshot Show button (theme: '${theme}')`, {
       scope: header
     });
-    await expect(page.getByLabel('Show Snapshots')).toBeVisible();
   });
 });
 
@@ -99,7 +111,6 @@ test.describe('Mission Header @a11y', () => {
     });
   });
 });
-// Skipping for https://github.com/nasa/openmct/issues/7421
-// test.afterEach(async ({ page }, testInfo) => {
-//   await scanForA11yViolations(page, testInfo.title);
-// });
+test.afterEach(async ({ page }, testInfo) => {
+  await scanForA11yViolations(page, testInfo.title);
+});

e2e/tests/visual-a11y/components/inspector.visual.spec.js

@@ -22,7 +22,7 @@
 
 import percySnapshot from '@percy/playwright';
 
-import { test } from '../../../avpFixtures.js';
+import { scanForA11yViolations, test } from '../../../avpFixtures.js';
 import { MISSION_TIME, VISUAL_FIXED_URL } from '../../../constants.js';
 
 //Declare the scope of the visual test
@@ -55,7 +55,6 @@ test.describe('Visual - Inspector @ally @clock', () => {
     });
   });
 });
-// Skipping for https://github.com/nasa/openmct/issues/7421
-// test.afterEach(async ({ page }, testInfo) => {
-//   await scanForA11yViolations(page, testInfo.title);
-// });
+test.afterEach(async ({ page }, testInfo) => {
+  await scanForA11yViolations(page, testInfo.title);
+});

e2e/tests/visual-a11y/notebook.visual.spec.js

@@ -23,7 +23,7 @@
 import percySnapshot from '@percy/playwright';
 
 import { createDomainObjectWithDefaults, expandTreePaneItemByName } from '../../appActions.js';
-import { expect, test } from '../../avpFixtures.js';
+import { expect, scanForA11yViolations, test } from '../../avpFixtures.js';
 import { VISUAL_FIXED_URL } from '../../constants.js';
 import { enterTextEntry, startAndAddRestrictedNotebookObject } from '../../helper/notebookUtils.js';
 
@@ -163,8 +163,7 @@ test.describe('Visual - Notebook @a11y', () => {
     // Take a snapshot
     await percySnapshot(page, `Notebook Selected Entry Text Area Active (theme: '${theme}')`);
   });
-  // Skipping for https://github.com/nasa/openmct/issues/7421
-  // test.afterEach(async ({ page }, testInfo) => {
-  //   await scanForA11yViolations(page, testInfo.title);
-  // });
+  test.afterEach(async ({ page }, testInfo) => {
+    await scanForA11yViolations(page, testInfo.title);
+  });
 });

e2e/tests/visual-a11y/planning.visual.spec.js

@@ -178,8 +178,8 @@ test.describe('Visual - Gantt Chart', () => {
     );
   });
 });
-
-// Skipping for https://github.com/nasa/openmct/issues/7421
+// FIXME: https://github.com/nasa/openmct/issues/7421
+// Currently has contrast failures
 // test.afterEach(async ({ page }, testInfo) => {
 //   await scanForA11yViolations(page, testInfo.title);
 // });

src/plugins/inspectorViews/annotations/tags/tags.scss

@@ -181,3 +181,7 @@
     }
   }
 }
+
+.c-tag-applier__add-btn.c-icon-button.c-icon-button--major.icon-plus {
+  color: $colorKey !important;
+}