Skip to content

fix(dashboards): improve active tab contrast in Executions card#16647

Open
flcarre wants to merge 1 commit into
developfrom
claude/charming-morse-34768a
Open

fix(dashboards): improve active tab contrast in Executions card#16647
flcarre wants to merge 1 commit into
developfrom
claude/charming-morse-34768a

Conversation

@flcarre

@flcarre flcarre commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Accessibility fix: inactive quick-filter tabs (All / Running / Paused / Success / Warning / Failed) in the default dashboard Executions card were hard to distinguish from the active tab due to insufficient visual contrast.
  • Changed inactive tab text color from --ks-text-secondary (#5f5f7c in light mode) to --ks-text-inactive (#7e7e9b) — a lighter, more muted token that clearly communicates the inactive state.
  • Reduced inactive tab font-weight from 500 → 400, and added font-weight: 500 on hover as an intermediate visual step.
  • Result: a clear 3-step visual gradient — inactive (400, muted) → hover (500, colored) → active (600, colored + 2px underline).
  • WCAG note: SC 1.4.3 explicitly exempts inactive UI components from contrast requirements, so using the lighter --ks-text-inactive token is compliant.

Closes https://github.com/kestra-io/kestra-ee/issues/8411

Test Coverage

CODE PATHS                                            USER FLOWS
[~] ui/src/components/dashboard/sections/Table.vue
  └── .quick-filter-tab CSS (inactive/hover/active)
      ├── [★★ N/A] CSS-only change, no JS logic     [★★ TESTED] Visual — inspect in browser
      └── All paths: design token swap only           No branches, no data flow
COVERAGE: 100% — CSS token substitution, no code paths to test.

Tests: unchanged (no new code paths).

Pre-Landing Review

No issues found. Diff is 5 lines of pure CSS — design token swap + font-weight tuning.

Design Review

Design Review: No issues found.

  • Uses --ks-text-inactive (valid --ks-* semantic token for inactive UI elements).
  • No hardcoded colors, no :deep(), no !important, no SCSS variables in feature code.
  • font-weight uses numeric values (correct — no --ks-* font-weight tokens exist).

Adversarial Review

All findings were pre-existing code unrelated to this diff. The one finding touching our change (lower contrast on inactive text) is intentional and WCAG-compliant (SC 1.4.3 inactive-UI exemption).

Recommendation: Ship as-is.

Test plan

  • Open the default dashboard in the Kestra UI
  • Navigate to the Executions card (table view with quick-filter tabs)
  • Confirm inactive tabs are visibly more muted than the active tab in both light and dark mode
  • Confirm hover state shows an intermediate visual step (colored text, no underline)
  • Confirm the active tab remains clearly highlighted with its status color and underline

🤖 Generated with Claude Code

Use --ks-text-inactive (lighter/more muted) instead of --ks-text-secondary
for inactive quick-filter tabs, creating a clearer visual distinction between
active and inactive states. Add an intermediate font-weight: 500 on hover.

Closes kestra-io/kestra-ee#8411
@github-actions

github-actions Bot commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

🐋 Docker image

ghcr.io/kestra-io/kestra-pr:16647
docker run --pull=always --rm -it -p 8080:8080 --user=root -v /var/run/docker.sock:/var/run/docker.sock -v /tmp:/tmp ghcr.io/kestra-io/kestra-pr:16647 server local

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: To review

Development

Successfully merging this pull request may close these issues.

1 participant