feat(ui): standardize accessibility, contrast, and spacing by MaxRink · Pull Request #719 · telekom/k8s-breakglass

MaxRink · 2026-05-14T00:55:27Z

This PR standardizes the UI across all views to meet WCAG AAA accessibility requirements, except documented Telekom magenta brand elements retained at WCAG AA by product decision, and Telekom Scale Design System guidelines.

Key changes:

Refactored high-contrast mode for AAA compliance (7:1 contrast ratios).
Standardized layout spacing and alignment using global ui- utility classes.
Added programmatically accessible labels (sr-only) to all toolbar filters and toggles.
Unified modal action layouts and information grids.
Ensured theme/contrast toggles are available on the login page.
Fixed regressions in unit tests caused by header refactoring.

github-actions · 2026-05-14T00:55:58Z

⚠️ Deprecation Warning: The deny-licenses option is deprecated for possible removal in the next major release. For more information, see issue 997.

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

github-actions · 2026-05-14T00:56:31Z

Manifest Changes vs v0.1.0-beta.28

base

⚠️ Changes detected (28 diff lines)

Show diff

--- manifests-previous/base.yaml	2026-06-23 14:38:43.781833424 +0000
+++ manifests-current/base.yaml	2026-06-23 14:38:36.030649904 +0000
@@ -22788,8 +22788,10 @@
                     - namespace
                     type: object
                   insecureSkipVerify:
-                    description: InsecureSkipVerify allows skipping TLS verification
-                      (NOT for production!)
+                    description: |-
+                      InsecureSkipVerify is not supported for Keycloak group synchronization.
+                      Admission and runtime auth/OIDC proxy paths reject this setting; configure
+                      certificateAuthority for private or self-signed Keycloak certificates.
                     type: boolean
                   realm:
                     description: Realm is the Keycloak realm name
@@ -22844,8 +22846,10 @@
                     pattern: ^\S+$
                     type: string
                   insecureSkipVerify:
-                    description: InsecureSkipVerify allows skipping TLS verification
-                      (NOT for production!)
+                    description: |-
+                      InsecureSkipVerify is deprecated for IdentityProvider OIDC/JWKS authentication.
+                      Admission and runtime auth/OIDC proxy paths reject this setting; configure
+                      certificateAuthority for private or self-signed issuer certificates.
                     type: boolean
                   jwksEndpoint:
                     description: |-

debug

⚠️ Changes detected (28 diff lines)

Show diff

--- manifests-previous/debug.yaml	2026-06-23 14:38:44.136842022 +0000
+++ manifests-current/debug.yaml	2026-06-23 14:38:36.404658712 +0000
@@ -22788,8 +22788,10 @@
                     - namespace
                     type: object
                   insecureSkipVerify:
-                    description: InsecureSkipVerify allows skipping TLS verification
-                      (NOT for production!)
+                    description: |-
+                      InsecureSkipVerify is not supported for Keycloak group synchronization.
+                      Admission and runtime auth/OIDC proxy paths reject this setting; configure
+                      certificateAuthority for private or self-signed Keycloak certificates.
                     type: boolean
                   realm:
                     description: Realm is the Keycloak realm name
@@ -22844,8 +22846,10 @@
                     pattern: ^\S+$
                     type: string
                   insecureSkipVerify:
-                    description: InsecureSkipVerify allows skipping TLS verification
-                      (NOT for production!)
+                    description: |-
+                      InsecureSkipVerify is deprecated for IdentityProvider OIDC/JWKS authentication.
+                      Admission and runtime auth/OIDC proxy paths reject this setting; configure
+                      certificateAuthority for private or self-signed issuer certificates.
                     type: boolean
                   jwksEndpoint:
                     description: |-

crds

⚠️ Changes detected (28 diff lines)

Show diff

--- manifests-previous/crds.yaml	2026-06-23 14:38:45.184867407 +0000
+++ manifests-current/crds.yaml	2026-06-23 14:38:36.732666437 +0000
@@ -22780,8 +22780,10 @@
                     - namespace
                     type: object
                   insecureSkipVerify:
-                    description: InsecureSkipVerify allows skipping TLS verification
-                      (NOT for production!)
+                    description: |-
+                      InsecureSkipVerify is not supported for Keycloak group synchronization.
+                      Admission and runtime auth/OIDC proxy paths reject this setting; configure
+                      certificateAuthority for private or self-signed Keycloak certificates.
                     type: boolean
                   realm:
                     description: Realm is the Keycloak realm name
@@ -22836,8 +22838,10 @@
                     pattern: ^\S+$
                     type: string
                   insecureSkipVerify:
-                    description: InsecureSkipVerify allows skipping TLS verification
-                      (NOT for production!)
+                    description: |-
+                      InsecureSkipVerify is deprecated for IdentityProvider OIDC/JWKS authentication.
+                      Admission and runtime auth/OIDC proxy paths reject this setting; configure
+                      certificateAuthority for private or self-signed issuer certificates.
                     type: boolean
                   jwksEndpoint:
                     description: |-

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

codecov-commenter · 2026-05-14T00:58:13Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 69.45%. Comparing base (8e93c94) to head (5431b8a).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #719      +/-   ##
==========================================
- Coverage   69.46%   69.45%   -0.01%     
==========================================
  Files         160      160              
  Lines       33892    33892              
==========================================
- Hits        23542    23540       -2     
- Misses       8801     8802       +1     
- Partials     1549     1550       +1

Flag	Coverage Δ
cli	`62.78% <ø> (ø)`
controller	`71.99% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.
see 1 file with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

github-actions · 2026-05-14T00:59:04Z

📸 UI Screenshots

Captured 44 screenshots (11 light, 11 dark, 22 high-contrast mode)

📥 Download

View Screenshots Gallery - Download the ui-screenshots artifact
View Playwright Report - Download the playwright-report artifact

Pages Captured

Page	Light	Dark	High Contrast
Home	✅	✅	✅
Session Browser	✅	✅	✅
Pending Approvals	✅	✅	✅
My Requests	✅	✅	✅
Session Review	✅	✅	✅
Debug Sessions	✅	✅	✅
Create Debug Session	✅	✅	✅
404 Not Found	✅	✅	✅
Mobile Views	✅	✅	✅
Tablet Views	✅	✅	✅

Screenshots are generated automatically on each PR that modifies frontend code.

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot

Pull request overview

Copilot reviewed 20 out of 20 changed files in this pull request and generated 2 comments.

Copilot

Pull request overview

Copilot reviewed 21 out of 21 changed files in this pull request and generated 3 comments.

Copilot

Pull request overview

Copilot reviewed 21 out of 21 changed files in this pull request and generated no new comments.

Copilot

Pull request overview

Copilot reviewed 21 out of 21 changed files in this pull request and generated 2 comments.

Copilot

Pull request overview

Copilot reviewed 22 out of 22 changed files in this pull request and generated 1 comment.

Copilot

Pull request overview

Copilot reviewed 22 out of 22 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

frontend/src/views/DebugSessionDetails.vue:806

These action bars were renamed to modal-actions, but the <style scoped> section still contains .form-actions and .dialog-actions rules that are no longer referenced anywhere in this file. Keeping unused per-view layout rules increases maintenance burden and can conflict with the new global action-bar utilities in base.css.

            <scale-text-field
              v-model="ephemeralForm.command"
              label="Command (optional)"
              placeholder="sh"
              helper-text="Command to run in the container (space-separated)"
            />
            <div class="modal-actions">
              <scale-button variant="secondary" size="small" @click="showKubectlDebugForm = false">
                Cancel
              </scale-button>
              <scale-button
                variant="primary"
                size="small"
                :disabled="kubectlDebugLoading"
                @click="handleInjectEphemeralContainer"
              >
                {{ kubectlDebugLoading ? "Injecting..." : "Inject Container" }}
              </scale-button>
            </div>

+  scaleMobileFlyoutDefined.value = isScaleMobileFlyoutDefined();
+  if (!scaleMobileFlyoutDefined.value && typeof customElements !== "undefined" && "whenDefined" in customElements) {
+    void customElements.whenDefined("scale-telekom-nav-flyout").then(() => {
+      scaleMobileFlyoutDefined.value = true;
+    });
+  }


      <!-- Show status message for failed/rejected sessions -->
      <div
        v-if="session.statusMessage && (session.state === 'Failed' || session.state === 'Rejected')"
-        class="status-message error"
+        class="status-message tone-chip tone-chip--danger"
        data-testid="status-message"
      >
-        <scale-icon-alert-error size="16"></scale-icon-alert-error>
+        <scale-icon-alert-error size="16" decorative></scale-icon-alert-error>
        <span>{{ session.statusMessage }}</span>


Copilot AI review requested due to automatic review settings May 14, 2026 00:55

MaxRink requested a review from a team as a code owner May 14, 2026 00:55

github-actions Bot added documentation Improvements or additions to documentation api pkg tests frontend size/XL and removed documentation Improvements or additions to documentation api pkg tests frontend labels May 14, 2026

Copilot started reviewing on behalf of MaxRink May 14, 2026 00:56 View session

Copilot AI reviewed May 14, 2026

github-actions Bot added documentation Improvements or additions to documentation api pkg tests frontend labels May 14, 2026

Copilot AI review requested due to automatic review settings May 14, 2026 01:22

Copilot started reviewing on behalf of MaxRink May 14, 2026 01:22 View session

Copilot AI reviewed May 14, 2026

MaxRink force-pushed the feature/ui-accessibility-remediation branch 2 times, most recently from b5c32a3 to d0332f8 Compare May 14, 2026 18:26

Copilot AI review requested due to automatic review settings May 14, 2026 18:26

MaxRink added 15 commits June 23, 2026 14:04

fix: address accessibility review follow-ups

188a015

fix(ui): restore debug session expiry styling

0bc1699

fix(ui): honor debug session renew duration

2165e33

fix(ci): upload frontend coverage from frontend dir

52f091f

fix(ui): format debug session browser

7fe4be1

fix(ui): address accessibility review nits

ecd0147

fix(ui): address toggle and card review nits

dc8a3c1

fix(ui): keep theme toggles out of scale nav

c79afeb

fix(ui): address session card review findings

edf3478

fix(ui): remove unused debug session form actions css

86b96bb

fix: remove duplicate dark neutral token

57be100

fix(ui): harden debug renew duration handling

3fd1299

fix: align theme toggle aria state

394f036

fix(ui): align toggle state and icon toolbar sizing

594038a

docs(ui): align scale theme deviations

d97360b