fix: improve color contrast to meet WCAG 4.5:1 minimum (#1539)

Assisted-by: Claude Opus 4.6
Signed-off-by: Oleksii Orel <oorel@redhat.com>

Author: olexii4

packages/dashboard-frontend/src/Layout/ErrorReporter/Issue/index.module.css

@@ -54,3 +54,8 @@
   background-color: var(--pf-t--global--color--nonstatus--red--default);
   border-radius: 3px;
 }
+
+:global(.pf-v6-theme-dark) .errorMessage {
+  color: var(--pf-t--global--text--color--regular);
+  background-color: rgb(185 80 80);
+}

packages/dashboard-frontend/src/components/BackupStatusBadge/__tests__/__snapshots__/index.spec.tsx.snap

@@ -25,7 +25,7 @@ exports[`BackupStatusBadge icon rendering should render CheckCircleIcon for succ
   >
     <span
       aria-label="Backup status: Success"
-      className="pf-v6-c-label pf-m-green pf-m-filled backupStatusBadge size-md"
+      className="pf-v6-c-label pf-m-green pf-m-filled backupStatusBadge"
       data-testid="backup-status-badge"
     >
       <span
@@ -93,7 +93,7 @@ exports[`BackupStatusBadge icon rendering should render ExclamationTriangleIcon
   >
     <span
       aria-label="Backup status: Failed"
-      className="pf-v6-c-label pf-m-orange pf-m-filled backupStatusBadge size-md"
+      className="pf-v6-c-label pf-m-orange pf-m-filled backupStatusBadge"
       data-testid="backup-status-badge"
     >
       <span
@@ -164,7 +164,7 @@ exports[`BackupStatusBadge icon rendering should render InfoCircleIcon for never
   >
     <span
       aria-label="Backup status: Never"
-      className="pf-v6-c-label pf-m-filled backupStatusBadge size-md"
+      className="pf-v6-c-label pf-m-filled backupStatusBadge"
       data-testid="backup-status-badge"
     >
       <span
@@ -232,7 +232,7 @@ exports[`BackupStatusBadge icon rendering should render animated InProgressIcon
   >
     <span
       aria-label="Backup status: In Progress"
-      className="pf-v6-c-label pf-m-blue pf-m-filled backupStatusBadge size-md"
+      className="pf-v6-c-label pf-m-blue pf-m-filled backupStatusBadge"
       data-testid="backup-status-badge"
     >
       <span
@@ -304,7 +304,7 @@ exports[`BackupStatusBadge snapshots failed status 1`] = `
   >
     <span
       aria-label="Backup status: Failed"
-      className="pf-v6-c-label pf-m-orange pf-m-filled backupStatusBadge size-md"
+      className="pf-v6-c-label pf-m-orange pf-m-filled backupStatusBadge"
       data-testid="backup-status-badge"
     >
       <span
@@ -372,7 +372,7 @@ exports[`BackupStatusBadge snapshots in-progress status 1`] = `
   >
     <span
       aria-label="Backup status: In Progress"
-      className="pf-v6-c-label pf-m-blue pf-m-filled backupStatusBadge size-md"
+      className="pf-v6-c-label pf-m-blue pf-m-filled backupStatusBadge"
       data-testid="backup-status-badge"
     >
       <span
@@ -444,7 +444,7 @@ exports[`BackupStatusBadge snapshots never status 1`] = `
   >
     <span
       aria-label="Backup status: Never"
-      className="pf-v6-c-label pf-m-filled backupStatusBadge size-md"
+      className="pf-v6-c-label pf-m-filled backupStatusBadge"
       data-testid="backup-status-badge"
     >
       <span
@@ -515,7 +515,7 @@ exports[`BackupStatusBadge snapshots success status 1`] = `
   >
     <span
       aria-label="Backup status: Success"
-      className="pf-v6-c-label pf-m-green pf-m-filled backupStatusBadge size-md"
+      className="pf-v6-c-label pf-m-green pf-m-filled backupStatusBadge"
       data-testid="backup-status-badge"
     >
       <span

packages/dashboard-frontend/src/components/BackupStatusBadge/index.module.css

@@ -11,13 +11,10 @@
  */
 
 .backupStatusBadge {
+  font-weight: bold;
   text-transform: capitalize;
 }
 
-.size-md {
-  font-size: var(--pf-v5-global--FontSize--sm);
-}
-
 .rotate {
   animation-name: spinnerRotate;
   animation-duration: 1s;

packages/dashboard-frontend/src/components/BackupStatusBadge/index.tsx

@@ -122,8 +122,7 @@ export function BackupStatusBadge(props: Props): React.ReactElement {
   const icon = getStatusIcon(status);
   const tooltipContent = getTooltipContent(status, lastBackupTime, backupImageUrl);
 
-  const sizeClassName = styles['size-md'] || '';
-  const className = `${styles.backupStatusBadge} ${sizeClassName}`.trim();
+  const className = styles.backupStatusBadge;
 
   const statusLabel = BACKUP_STATUS_LABELS[status];
 

packages/dashboard-frontend/src/components/BasicViewer/index.module.css

@@ -21,7 +21,3 @@
   height: 100%;
   border: 1px solid var(--pf-t--global--border--color--default);
 }
-
-html:not(.pf-v6-theme-dark) .basicViewer > div > div > div > div {
-  opacity: 0.8;
-}

packages/dashboard-frontend/src/components/DevfileViewer/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`DevfileViewer snapshot with light theme 1`] = `
+<div
+  className="devfileViewer"
+>
+  <div
+    className="cm-theme-light codeMirror"
+    id="devfile-viewer-id"
+  />
+</div>
+`;

packages/dashboard-frontend/src/components/DevfileViewer/__tests__/index.spec.tsx

@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2018-2025 Red Hat, Inc.
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Red Hat, Inc. - initial API and implementation
+ */
+
+import React from 'react';
+
+import { DevfileViewer } from '@/components/DevfileViewer';
+import { useTheme } from '@/contexts/ThemeContext';
+import getComponentRenderer, { screen } from '@/services/__mocks__/getComponentRenderer';
+
+jest.mock('@/contexts/ThemeContext', () => ({
+  useTheme: jest.fn(),
+}));
+
+const mockUseTheme = useTheme as jest.Mock;
+
+const { createSnapshot, renderComponent } = getComponentRenderer(getComponent);
+
+const sampleDevfile = 'schemaVersion: 2.2.0\nmetadata:\n  name: test-workspace';
+
+describe('DevfileViewer', () => {
+  beforeEach(() => {
+    mockUseTheme.mockReturnValue({
+      themePreference: 'LIGHT',
+      isDarkTheme: false,
+      setThemePreference: jest.fn(),
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('snapshot with light theme', () => {
+    const snapshot = createSnapshot(sampleDevfile);
+    expect(snapshot.toJSON()).toMatchSnapshot();
+  });
+
+  test('renders content in light theme', () => {
+    renderComponent(sampleDevfile);
+
+    const textbox = screen.getByRole('textbox');
+    expect(textbox).toHaveTextContent('schemaVersion');
+  });
+
+  test('renders content in dark theme', () => {
+    mockUseTheme.mockReturnValue({
+      themePreference: 'DARK',
+      isDarkTheme: true,
+      setThemePreference: jest.fn(),
+    });
+
+    renderComponent(sampleDevfile);
+
+    const textbox = screen.getByRole('textbox');
+    expect(textbox).toHaveTextContent('schemaVersion');
+  });
+
+  test('handles content change', () => {
+    const { reRenderComponent } = renderComponent(sampleDevfile);
+
+    const textbox = screen.getByRole('textbox');
+    expect(textbox).toHaveTextContent('test-workspace');
+
+    const updatedDevfile = 'schemaVersion: 2.2.0\nmetadata:\n  name: updated-workspace';
+    reRenderComponent(updatedDevfile);
+
+    expect(textbox).toHaveTextContent('updated-workspace');
+  });
+});
+
+function getComponent(value: string): React.ReactElement {
+  return <DevfileViewer id="devfile-viewer-id" isActive={true} isExpanded={true} value={value} />;
+}

packages/dashboard-frontend/src/components/DevfileViewer/index.module.css

@@ -23,7 +23,3 @@
   height: 100%;
   border: 1px solid var(--pf-t--global--border--color--default);
 }
-
-html:not(.pf-v6-theme-dark) .devfileViewer > div > div > div > div {
-  opacity: 0.8;
-}

packages/dashboard-frontend/src/components/DevfileViewer/index.tsx

@@ -40,7 +40,7 @@ const createLightTheme = () => {
       },
       '.cm-gutters': {
         backgroundColor: '#f7f7f7',
-        color: '#999',
+        color: '#636363',
       },
       '.cm-activeLineGutter': {
         backgroundColor: '#f7f7f7',
@@ -50,10 +50,25 @@ const createLightTheme = () => {
   );
 };
 
+const createDarkGutterTheme = () => {
+  return EditorView.theme(
+    {
+      '.cm-gutters': {
+        backgroundColor: '#161b22',
+        color: '#8b949e',
+      },
+      '.cm-activeLineGutter': {
+        backgroundColor: '#161b22',
+      },
+    },
+    { dark: true },
+  );
+};
+
 const createLightHighlightStyle = () => {
   return HighlightStyle.define([
-    { tag: t.keyword, color: '#5e81ac' },
-    { tag: [t.string], color: '#5e81ac' },
+    { tag: t.keyword, color: '#4c7399' },
+    { tag: [t.string], color: '#4c7399' },
     { tag: [t.variableName], color: '#008080' },
     {
       tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
@@ -66,6 +81,7 @@ export const DevfileViewer: React.FC<Props> = ({ value, id }) => {
   const { isDarkTheme } = useTheme();
 
   const lightTheme = useMemo(() => createLightTheme(), []);
+  const darkGutterTheme = useMemo(() => createDarkGutterTheme(), []);
   const lightHighlightStyle = useMemo(() => createLightHighlightStyle(), []);
 
   const extensions = useMemo(() => {
@@ -74,9 +90,9 @@ export const DevfileViewer: React.FC<Props> = ({ value, id }) => {
       yaml(),
     ];
     return isDarkTheme
-      ? baseExtensions
+      ? [darkGutterTheme, ...baseExtensions]
       : [lightTheme, syntaxHighlighting(lightHighlightStyle), ...baseExtensions];
-  }, [isDarkTheme, lightTheme, lightHighlightStyle]);
+  }, [isDarkTheme, darkGutterTheme, lightTheme, lightHighlightStyle]);
 
   return (
     <div className={styles.devfileViewer}>

packages/dashboard-frontend/src/components/ExpandableWarning/__tests__/__snapshots__/index.spec.tsx.snap

@@ -80,7 +80,7 @@ exports[`Expandable warning items should correctly render the component 1`] = `
             className="pf-v6-c-code-block__code"
           >
             <small
-              className="pf-v6-c-content--small hideOverflow"
+              className="pf-v6-c-content--small hideOverflow errorMessage"
               data-ouia-component-id="OUIA-Generated-Content-4"
               data-ouia-component-type="PF6/Content"
               data-ouia-safe={true}