fix(frontend): WCAG AAA contrast fixes, token consistency, and a11y test improvements

- Fix AAA contrast failures across light/dark/high-contrast modes:
  - Override Scale's hsla text color with solid !important values
  - Darken primary button, nav links, chip/tag text for 7:1 ratio
  - Add dark mode overrides for ghost buttons and active nav links
  - Fix reason panel label colors on colored backgrounds
- Tokenize hardcoded border-radius (999px → var(--radius-pill)) across
  ActionButton, ApprovalModalContent, BreakglassCard, NotFoundView,
  SessionBrowser, and base.css global scale-button rules
- Tokenize hardcoded spacing in SessionErrorView (px/rem → design tokens)
- Tokenize TimelineGrid highlight radius (8px → var(--radius-md))
- Add missing .tag-icon CSS class in PendingApprovalsView
- Improve a11y.spec.ts: use .disableRules() for Scale shadow DOM issues
  instead of unreliable element exclusions

Author: MaxRink

frontend/package-lock.json

@@ -20,6 +20,11 @@
   background-color: var(--surface-primary);
   color-scheme: light;
 
+  /* AAA-compliant overrides for Telekom tokens that miss 7:1 on subtle backgrounds.
+   * Scale sets this to hsla(0,0%,0%,0.65) ≈ #595959 on :root in its own stylesheet,
+   * which loads after ours. !important is required to ensure our solid override wins. */
+  --telekom-color-text-and-icon-additional: #4a4a4a !important;
+
   /* ============================================
    * SEMANTIC SPACING ALIASES
    * Maps Scale spacing tokens to semantic names
@@ -78,27 +83,30 @@
   --accent-info: var(--telekom-color-functional-informational-standard, #2238df);
   --accent-critical: var(--telekom-color-functional-danger-standard, #e82010);
 
-  /* Chip/Tag colors - using Telekom additional colors */
+  /* Chip/Tag colors - using Telekom-derived colors
+   * Original Telekom magenta (#e20074) fails WCAG AAA (3.89:1 on light bg).
+   * --chip-text uses a darkened magenta that keeps the brand hue but meets
+   * the 7:1 AAA contrast requirement on the tinted chip background. */
   --chip-bg: color-mix(in srgb, var(--telekom-color-primary-standard) 7%, transparent);
   --chip-border: color-mix(in srgb, var(--telekom-color-primary-standard) 15%, transparent);
-  --chip-text: var(--telekom-color-text-and-icon-primary-standard);
+  --chip-text: #8e004a;
 
-  /* Semantic tone chips using Telekom functional subtle colors */
+  /* Semantic tone chips — text colors darkened from Telekom defaults to meet AAA 7:1 */
   --tone-chip-info-bg: var(--telekom-color-functional-informational-subtle, #d3d7f9);
   --tone-chip-info-border: color-mix(in srgb, var(--telekom-color-functional-informational-standard) 35%, transparent);
-  --tone-chip-info-text: var(--telekom-color-text-and-icon-on-subtle-blue, #2238df);
+  --tone-chip-info-text: #0d1570;
 
   --tone-chip-success-bg: var(--telekom-color-functional-success-subtle, #ccf0e1);
   --tone-chip-success-border: color-mix(in srgb, var(--telekom-color-functional-success-standard) 40%, transparent);
-  --tone-chip-success-text: var(--telekom-color-text-and-icon-on-subtle-green, #005c39);
+  --tone-chip-success-text: #004d30;
 
   --tone-chip-warning-bg: var(--telekom-color-functional-warning-subtle, #fee2d0);
   --tone-chip-warning-border: color-mix(in srgb, var(--telekom-color-functional-warning-standard) 50%, transparent);
-  --tone-chip-warning-text: var(--telekom-color-text-and-icon-on-subtle-orange, #8f4400);
+  --tone-chip-warning-text: #6b3300;
 
   --tone-chip-danger-bg: var(--telekom-color-functional-danger-subtle, #fad2cf);
   --tone-chip-danger-border: color-mix(in srgb, var(--telekom-color-functional-danger-standard) 55%, transparent);
-  --tone-chip-danger-text: var(--telekom-color-text-and-icon-on-subtle-red, #c30a03);
+  --tone-chip-danger-text: #8a0700;
 
   --tone-chip-neutral-bg: var(--telekom-color-ui-subtle, #efeff0);
   --tone-chip-neutral-border: var(--telekom-color-ui-border-standard);
@@ -113,6 +121,8 @@
 :root[data-theme="dark"] {
   color-scheme: dark;
 
+  --telekom-color-text-and-icon-additional: #c0c0c0 !important;
+
   /* Surface colors for dark mode */
   --surface-primary: var(--telekom-color-background-canvas, #000000);
   --surface-elevated: var(--telekom-color-background-surface-subtle, #242426);
@@ -123,10 +133,10 @@
   --border-strong: var(--telekom-color-ui-border-standard);
   --shadow-card: var(--telekom-shadow-raised-standard);
 
-  /* Chip colors adjusted for dark mode */
+  /* Chip colors adjusted for dark mode — lightened magenta for AAA on dark bg */
   --chip-bg: color-mix(in srgb, var(--telekom-color-primary-standard) 15%, transparent);
   --chip-border: color-mix(in srgb, var(--telekom-color-primary-standard) 35%, transparent);
-  --chip-text: var(--telekom-color-text-and-icon-primary-standard);
+  --chip-text: #ff8cc8;
 
   /* Semantic tone chips - dark mode uses subtle backgrounds
    * Text colors are lightened vs Scale defaults to meet WCAG AAA (7:1)
@@ -160,7 +170,7 @@
 :root[data-high-contrast="true"] {
   /* Force maximum text contrast */
   --telekom-color-text-and-icon-standard: #000000;
-  --telekom-color-text-and-icon-additional: #1a1a1a;
+  --telekom-color-text-and-icon-additional: #1a1a1a !important;
   --telekom-color-text-and-icon-disabled: #595959;
 
   /* Solid surfaces — no translucency */
@@ -178,14 +188,17 @@
   --tone-chip-danger-text: #8a0700;
   --tone-chip-neutral-text: #000000;
 
+  --chip-text: #730040;
+  --chip-bg: color-mix(in srgb, #730040 10%, transparent);
+  
   /* Stronger focus indicator */
   --focus-outline: #000000;
 }
 
 /* High contrast + dark mode combination */
 :root[data-high-contrast="true"][data-theme="dark"] {
   --telekom-color-text-and-icon-standard: #ffffff;
-  --telekom-color-text-and-icon-additional: #e0e0e0;
+  --telekom-color-text-and-icon-additional: #e0e0e0 !important;
   --telekom-color-text-and-icon-disabled: #a0a0a0;
 
   --surface-card-subtle: var(--telekom-color-background-surface-subtle, #242426);
@@ -200,6 +213,9 @@
   --tone-chip-danger-text: #ff8a7a;
   --tone-chip-neutral-text: #ffffff;
 
+  --chip-text: #ffa4cc;
+  --chip-bg: color-mix(in srgb, #ffa4cc 12%, transparent);
+  
   --focus-outline: #ffffff;
 }
 
@@ -216,14 +232,43 @@ scale-card {
 
 /* Consistent button styling across all variants - use pill radius */
 scale-button {
-  --radius: 999px;
-  --button-radius: 999px;
+  --radius: var(--radius-pill);
+  --button-radius: var(--radius-pill);
 }
 
 /* Fallback for shadow DOM button parts */
 scale-button::part(button),
 scale-button::part(base) {
-  border-radius: 999px !important;
+  border-radius: var(--radius-pill) !important;
+}
+
+/* AAA contrast: darken primary button bg so white text reaches 7:1 */
+scale-button::part(variant-primary) {
+  background-color: #a8005b !important;
+  border-color: #a8005b !important;
+}
+
+/* AAA contrast: darken active nav link from Telekom magenta */
+scale-telekom-nav-item a[aria-current="true"],
+[role="menuitem"][aria-current="true"] {
+  color: #8e004a !important;
+}
+
+/* Dark mode: lighten active nav link for dark header background (#151517) */
+:root[data-theme="dark"] scale-telekom-nav-item a[aria-current="true"],
+:root[data-theme="dark"] [role="menuitem"][aria-current="true"] {
+  color: #ff8cc8 !important;
+}
+
+/* AAA contrast: Scale combobox label inside subtle surface */
+scale-dropdown::part(label),
+scale-dropdown::part(combobox-label) {
+  color: var(--telekom-color-text-and-icon-additional) !important;
+}
+
+/* AAA contrast: lighten ghost button text in dark mode for 7:1 on dark bg */
+:root[data-theme="dark"] scale-button::part(variant-ghost) {
+  color: #93a8ff !important;
 }
 
 /* ============================================

frontend/src/assets/base.css

@@ -186,7 +186,7 @@ function handleNoteChange(ev: Event) {
   gap: var(--space-2xs);
   margin-top: var(--space-sm);
   padding: var(--space-xs) var(--space-sm);
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   font-weight: 600;
   text-transform: uppercase;
   font-size: 0.85rem;
@@ -237,12 +237,12 @@ function handleNoteChange(ev: Event) {
 
 /* Ensure all buttons have pill shape */
 .modal-actions :deep(scale-button) {
-  --radius: 999px;
+  --radius: var(--radius-pill);
 }
 
 .modal-actions :deep(scale-button)::part(button),
 .modal-actions :deep(scale-button)::part(base) {
-  border-radius: 999px !important;
+  border-radius: var(--radius-pill) !important;
 }
 
 .modal-actions > * {

frontend/src/components/ApprovalModalContent.vue

@@ -774,7 +774,7 @@ function drop() {
 
 .timeline-callout .session-id {
   font-size: 0.8rem;
-  color: var(--telekom-color-text-and-icon-additional);
+  color: inherit;
   word-break: break-all;
   margin-top: var(--space-2xs);
 }
@@ -803,7 +803,7 @@ function drop() {
 }
 
 .breakglass-card__requirement {
-  color: var(--telekom-color-functional-danger-standard);
+  color: var(--tone-chip-danger-text);
   font-weight: 600;
 }
 
@@ -880,12 +880,12 @@ function drop() {
 
 /* Ensure all buttons have pill shape */
 .modal-actions :deep(scale-button) {
-  --radius: 999px;
+  --radius: var(--radius-pill);
 }
 
 .modal-actions :deep(scale-button)::part(button),
 .modal-actions :deep(scale-button)::part(base) {
-  border-radius: 999px !important;
+  border-radius: var(--radius-pill) !important;
 }
 
 :deep(input::placeholder),

frontend/src/components/BreakglassCard.vue

@@ -78,13 +78,13 @@ function handleClick(event: Event) {
 <style scoped>
 .action-button {
   min-width: 6rem;
-  --radius: 999px;
+  --radius: var(--radius-pill);
 }
 
 /* Ensure pill shape for all button variants including danger */
 .action-button::part(button),
 .action-button::part(base) {
-  border-radius: 999px !important;
+  border-radius: var(--radius-pill) !important;
 }
 
 .action-button--loading {

frontend/src/components/common/ActionButton.vue

@@ -94,8 +94,16 @@ const hasReason = computed(() => Boolean(props.reason?.trim()));
   background: var(--telekom-color-functional-success-subtle);
 }
 
+.reason-panel--approval .reason-panel__label {
+  color: var(--tone-chip-success-text);
+}
+
 .reason-panel--rejection {
   border-left: var(--telekom-line-weight-bold, 4px) solid var(--telekom-color-functional-danger-standard);
   background: var(--telekom-color-functional-danger-subtle);
 }
+
+.reason-panel--rejection .reason-panel__label {
+  color: var(--tone-chip-danger-text);
+}
 </style>

frontend/src/components/common/ReasonPanel.vue

@@ -132,7 +132,7 @@ function formatValue(value: string | Date | number | null | undefined): string {
   border: 1px solid var(--tone-chip-info-border);
   border-left: 3px solid var(--telekom-color-functional-informational-standard);
   padding: 0.5rem;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   margin: -0.5rem;
 }
 

frontend/src/components/common/TimelineGrid.vue

@@ -41,7 +41,7 @@
 .not-found__cta {
   display: inline-block;
   padding: var(--space-sm) var(--space-lg);
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--accent-telekom);
   color: var(--telekom-color-text-and-icon-white-standard, #fff);
   font-weight: 600;

frontend/src/views/NotFoundView.vue

@@ -109,11 +109,11 @@
             {{ session.metadata.name }}
           </scale-tag>
           <scale-tag v-if="session.spec?.scheduledStartTime" variant="warning">
-            <scale-icon-content-calendar size="14" decorative style="margin-right: 4px; vertical-align: middle" />
+            <scale-icon-content-calendar size="14" decorative class="tag-icon" />
             Scheduled
           </scale-tag>
           <scale-tag v-if="session.approvalReason?.mandatory" variant="danger">
-            <scale-icon-action-edit size="14" decorative style="margin-right: 4px; vertical-align: middle" />
+            <scale-icon-action-edit size="14" decorative class="tag-icon" />
             Note required
           </scale-tag>
         </template>
@@ -616,6 +616,11 @@ onMounted(fetchPendingApprovals);
 
 /* tone-chip classes are defined globally in base.css */
 
+.tag-icon {
+  margin-right: var(--space-xs);
+  vertical-align: middle;
+}
+
 .mono-tag {
   font-family: var(--telekom-typography-font-family-mono, monospace);
   font-size: 0.8em;

frontend/src/views/PendingApprovalsView.vue

@@ -711,7 +711,7 @@ header p {
 
 .state-pill {
   border: 1px solid var(--session-border);
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   padding: var(--space-2xs) var(--space-sm);
   display: inline-flex;
   gap: var(--space-2xs);