(HACK WEEK 2025) Dark mode a11y audit rules (#2939)

* chore: 🤖 change axe runOptions based on color theme

* fix: 🐛 fix background-color and color styles application

addons/rose/app/styles/rose/_typography.scss

@@ -16,8 +16,20 @@ body {
   // and link list panel
   font-family: typography.$family-primary;
 
-  // these 3 are used across the app
+  // this is used across the app
   line-height: typography.line-height(m);
+}
+
+// This is use to set the color and background color
+// of the body and/or the ember application depending
+// on where the ember application is mounted
+// When running the tests, the ember application
+// is mounted on a div element with the class 'ember-application'
+// When running the app, the ember application
+// is mounted on the body element
+body,
+.ember-application {
+  // these are used across the app
   color: var(--stark);
   background-color: var(--subtle);
 }

ui/admin/config/environment.js

@@ -15,6 +15,7 @@ const {
 const APP_NAME = process.env.APP_NAME || 'Boundary';
 const API_HOST = process.env.API_HOST || '';
 const ENABLE_A11Y_AUDIT = process.env.ENABLE_A11Y_AUDIT || false;
+const COLOR_THEME = process.env.COLOR_THEME ?? 'light';
 
 const clone = (obj) => v8.deserialize(v8.serialize(obj));
 
@@ -171,6 +172,7 @@ module.exports = function (environment) {
     });
 
     ENV.ENABLE_A11Y_AUDIT = ENABLE_A11Y_AUDIT;
+    ENV.COLOR_THEME = COLOR_THEME;
   }
 
   if (environment === 'test') {
@@ -192,6 +194,7 @@ module.exports = function (environment) {
     ENV.enableConfirmService = false;
 
     ENV.ENABLE_A11Y_AUDIT = ENABLE_A11Y_AUDIT;
+    ENV.COLOR_THEME = COLOR_THEME;
   }
 
   if (environment === 'production') {

ui/admin/tests/test-helper.js

@@ -35,18 +35,23 @@ setupGlobalA11yHooks(() => true, {
 
 setupQUnitA11yAuditToggle(QUnit);
 
+const runOnly =
+  config.COLOR_THEME === 'dark'
+    ? 'color-contrast'
+    : {
+        type: 'tag',
+        values: [
+          'wcag2a',
+          'wcag2aa',
+          'wcag21a',
+          'wcag21aa',
+          'wcag22aa',
+          'best-practice',
+        ],
+      };
+
 setRunOptions({
-  runOnly: {
-    type: 'tag',
-    values: [
-      'wcag2a',
-      'wcag2aa',
-      'wcag21a',
-      'wcag21aa',
-      'wcag22aa',
-      'best-practice',
-    ],
-  },
+  runOnly,
   include: [['#ember-testing-container']],
   exclude: [['.flight-sprite-container']],
 });

ui/desktop/config/environment.js

@@ -8,6 +8,7 @@
 const APP_NAME = process.env.APP_NAME || 'Boundary';
 const locationType = process.env.EMBER_CLI_ELECTRON ? 'hash' : 'history';
 const ENABLE_A11Y_AUDIT = process.env.ENABLE_A11Y_AUDIT || false;
+const COLOR_THEME = process.env.COLOR_THEME ?? 'light';
 
 module.exports = function (environment) {
   const ENV = {
@@ -83,6 +84,7 @@ module.exports = function (environment) {
       : true;
 
     ENV.ENABLE_A11Y_AUDIT = ENABLE_A11Y_AUDIT;
+    ENV.COLOR_THEME = COLOR_THEME;
   }
 
   if (environment === 'test') {
@@ -111,6 +113,7 @@ module.exports = function (environment) {
     };
 
     ENV.ENABLE_A11Y_AUDIT = ENABLE_A11Y_AUDIT;
+    ENV.COLOR_THEME = COLOR_THEME;
   }
 
   if (environment === 'production') {

ui/desktop/tests/test-helper.js

@@ -35,18 +35,23 @@ setupGlobalA11yHooks(() => true, {
 
 setupQUnitA11yAuditToggle(QUnit);
 
+const runOnly =
+  config.COLOR_THEME === 'dark'
+    ? 'color-contrast'
+    : {
+        type: 'tag',
+        values: [
+          'wcag2a',
+          'wcag2aa',
+          'wcag21a',
+          'wcag21aa',
+          'wcag22aa',
+          'best-practice',
+        ],
+      };
+
 setRunOptions({
-  runOnly: {
-    type: 'tag',
-    values: [
-      'wcag2a',
-      'wcag2aa',
-      'wcag21a',
-      'wcag21aa',
-      'wcag22aa',
-      'best-practice',
-    ],
-  },
+  runOnly,
   include: [['#ember-testing-container']],
   exclude: [['.flight-sprite-container']],
 });