Skip to content

Commit b3a6848

Browse files
Ajit Pratap SinghAjit Pratap Singh
Ajit Pratap Singh
authored and
Ajit Pratap Singh
committed
fix(website): fix WCAG AA contrast in playground — slate-500/600 → slate-400
All text-slate-500, text-slate-600, and text-zinc-500 classes in playground components render ~4.19:1 contrast on the #09090b background, failing WCAG AA (requires 4.5:1 for small text). Bumped to slate-400/zinc-400 which gives ~8:1. Also removed aria-controls from inactive tab buttons — they were pointing to tabpanel IDs that don't exist in the DOM (only the active panel is rendered), which violates aria-valid-attr-value. Files: Playground.tsx, AstTab.tsx, LintTab.tsx, AnalyzeTab.tsx, FormatTab.tsx, WasmErrorBoundary.tsx
1 parent 363791b commit b3a6848

6 files changed

Lines changed: 19 additions & 20 deletions

File tree

‎website/src/components/playground/AnalyzeTab.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,15 +70,15 @@ function ScoreCard({ title, score, subtitle }: { title: string; score: number |
7070
>
7171
{displayScore}
7272
</div>
73-
{subtitle && <div className="text-xs text-slate-500 mt-1">{subtitle}</div>}
73+
{subtitle && <div className="text-xs text-slate-400 mt-1">{subtitle}</div>}
7474
</div>
7575
);
7676
}
7777

7878
export default function AnalyzeTab({ data }: AnalyzeTabProps) {
7979
if (!data) {
8080
return (
81-
<div className="flex items-center justify-center h-full text-slate-500 text-sm">
81+
<div className="flex items-center justify-center h-full text-slate-400 text-sm">
8282
No data available. Enter a SQL query to analyze it.
8383
</div>
8484
);

‎website/src/components/playground/AstTab.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function AstNode({ data, depth = 0, label }: AstNodeProps) {
3838

3939
if (data === null || data === undefined) {
4040
return (
41-
<span className="text-slate-500 italic text-sm">
41+
<span className="text-slate-400 italic text-sm">
4242
{label && <span className="text-slate-400 mr-1">{label}:</span>}
4343
null
4444
</span>
@@ -61,7 +61,7 @@ function AstNode({ data, depth = 0, label }: AstNodeProps) {
6161
return (
6262
<span className="text-sm">
6363
{label && <span className="text-slate-400 mr-1">{label}:</span>}
64-
<span className="text-slate-500">[]</span>
64+
<span className="text-slate-400">[]</span>
6565
</span>
6666
);
6767
}
@@ -72,11 +72,11 @@ function AstNode({ data, depth = 0, label }: AstNodeProps) {
7272
onClick={() => setCollapsed(!collapsed)}
7373
className="flex items-center gap-1 hover:bg-slate-700/50 rounded px-1 -ml-1 text-sm min-h-[44px] py-2"
7474
>
75-
<span className="text-slate-500 w-4 text-center">
75+
<span className="text-slate-400 w-4 text-center">
7676
{collapsed ? "+" : "-"}
7777
</span>
7878
{label && <span className="text-slate-400">{label}:</span>}
79-
<span className="text-slate-500">[{data.length}]</span>
79+
<span className="text-slate-400">[{data.length}]</span>
8080
</button>
8181
{!collapsed && (
8282
<div className="ml-4 border-l border-slate-700 pl-3 mt-0.5 space-y-1">
@@ -103,7 +103,7 @@ function AstNode({ data, depth = 0, label }: AstNodeProps) {
103103
return (
104104
<span className="text-sm">
105105
{label && <span className="text-slate-400 mr-1">{label}:</span>}
106-
<span className="text-slate-500">{"{}"}</span>
106+
<span className="text-slate-400">{"{}"}</span>
107107
</span>
108108
);
109109
}
@@ -114,13 +114,13 @@ function AstNode({ data, depth = 0, label }: AstNodeProps) {
114114
onClick={() => setCollapsed(!collapsed)}
115115
className="flex items-center gap-1.5 hover:bg-slate-700/50 rounded px-1 -ml-1 text-sm min-h-[44px] py-2"
116116
>
117-
<span className="text-slate-500 w-4 text-center">
117+
<span className="text-slate-400 w-4 text-center">
118118
{collapsed ? "+" : "-"}
119119
</span>
120120
{label && <span className="text-slate-400">{label}:</span>}
121121
{nodeType && <TypeBadge type={nodeType} />}
122122
{collapsed && (
123-
<span className="text-slate-600">{`{${keys.length} keys}`}</span>
123+
<span className="text-slate-400">{`{${keys.length} keys}`}</span>
124124
)}
125125
</button>
126126
{!collapsed && (
@@ -144,7 +144,7 @@ interface AstTabProps {
144144
export default function AstTab({ data }: AstTabProps) {
145145
if (!data) {
146146
return (
147-
<div className="flex items-center justify-center h-full text-slate-500 text-sm">
147+
<div className="flex items-center justify-center h-full text-slate-400 text-sm">
148148
No data available. Enter a SQL query to see the AST.
149149
</div>
150150
);

‎website/src/components/playground/FormatTab.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ interface FormatTabProps {
88
export default function FormatTab({ data }: FormatTabProps) {
99
if (!data) {
1010
return (
11-
<div className="flex items-center justify-center h-full text-slate-500 text-sm">
11+
<div className="flex items-center justify-center h-full text-slate-400 text-sm">
1212
No data available. Enter a SQL query to see formatted output.
1313
</div>
1414
);

‎website/src/components/playground/LintTab.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ function SeverityBadge({ severity }: { severity: string }) {
4040
export default function LintTab({ data }: LintTabProps) {
4141
if (!data) {
4242
return (
43-
<div className="flex items-center justify-center h-full text-slate-500 text-sm">
43+
<div className="flex items-center justify-center h-full text-slate-400 text-sm">
4444
No data available. Enter a SQL query to run the linter.
4545
</div>
4646
);
@@ -79,7 +79,7 @@ export default function LintTab({ data }: LintTabProps) {
7979
</svg>
8080
</div>
8181
<p className="text-green-400 font-medium">No violations found</p>
82-
<p className="text-slate-500 text-sm">Your SQL looks clean!</p>
82+
<p className="text-slate-400 text-sm">Your SQL looks clean!</p>
8383
</div>
8484
);
8585
}
@@ -102,7 +102,7 @@ export default function LintTab({ data }: LintTabProps) {
102102
</span>
103103
)}
104104
{(v.line !== undefined || v.location) && (
105-
<span className="text-xs text-slate-500 font-mono">
105+
<span className="text-xs text-slate-400 font-mono">
106106
{v.location
107107
? `${v.location.line}:${v.location.column}`
108108
: `${v.line}:${v.column ?? 0}`}

‎website/src/components/playground/Playground.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -148,8 +148,8 @@ export default function Playground() {
148148
</svg>
149149
</div>
150150
<p className="text-red-400 font-medium">Failed to load SQL parser</p>
151-
<p className="text-slate-500 text-sm">{error.message}</p>
152-
<p className="text-slate-600 text-xs">Try refreshing the page to retry.</p>
151+
<p className="text-slate-400 text-sm">{error.message}</p>
152+
<p className="text-slate-400 text-xs">Try refreshing the page to retry.</p>
153153
</div>
154154
</div>
155155
);
@@ -179,7 +179,7 @@ export default function Playground() {
179179
</div>
180180
<div className="flex items-center gap-1.5">
181181
<span className="w-2 h-2 rounded-full bg-green-500" aria-hidden="true" />
182-
<span className="text-xs text-slate-500">WASM Ready</span>
182+
<span className="text-xs text-slate-400">WASM Ready</span>
183183
</div>
184184
</div>
185185

@@ -188,7 +188,7 @@ export default function Playground() {
188188
{/* Left panel - SQL Editor */}
189189
<div className="w-full md:w-1/2 border-r border-slate-800 flex flex-col min-h-0">
190190
<div className="px-4 py-2 border-b border-slate-800 bg-slate-900/30">
191-
<span className="text-xs text-slate-500 uppercase tracking-wider font-medium">Input</span>
191+
<span className="text-xs text-slate-400 uppercase tracking-wider font-medium">Input</span>
192192
</div>
193193
<div className="flex-1 overflow-auto p-2">
194194
<SqlEditor
@@ -210,7 +210,6 @@ export default function Playground() {
210210
id={`tab-${tab.id}`}
211211
role="tab"
212212
aria-selected={activeTab === tab.id}
213-
aria-controls={`tabpanel-${tab.id}`}
214213
onClick={() => setActiveTab(tab.id)}
215214
className={`px-4 py-3 text-sm font-medium transition-colors relative ${
216215
activeTab === tab.id

‎website/src/components/playground/WasmErrorBoundary.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export class WasmErrorBoundary extends Component<Props, State> {
2222
</svg>
2323
</div>
2424
<p className="text-red-400 font-medium">Something went wrong</p>
25-
<p className="text-zinc-500 text-sm">{this.state.error?.message}</p>
25+
<p className="text-zinc-400 text-sm">{this.state.error?.message}</p>
2626
<button
2727
onClick={() => this.setState({ hasError: false, error: null })}
2828
className="px-4 py-2 bg-white/[0.06] border border-white/[0.1] rounded-lg text-sm text-zinc-300 hover:bg-white/[0.1] transition-colors"

0 commit comments

Comments
 (0)