fix(a11y): fix 4 Lighthouse accessibility failures blocking CI

Based on Lighthouse report artifact analysis, 4 weighted audits were
failing on /playground:

1. aria-input-field-name (weight=7): CodeMirror's cm-content[role=textbox]
   had no accessible name. Fixed with EditorView.contentAttributes.of()
   to pass aria-label directly to the cm-content element.

2. color-contrast (weight=7): oneDark theme's coral (#e06c75) on #282c34
   background yields 4.38:1 ratio (fails WCAG AA 4.5:1). Override with
   custom HighlightStyle (#e87980 → ~5.07:1 contrast) placed before
   oneDark for higher CM6 precedence.

3. heading-order (weight=3): Footer h3 elements skipped h2 after h1 in
   Playground, failing sequential heading order. Changed footer section
   labels from h3 to h2.

4. image-redundant-alt (weight=1): Logo images had alt="GoSQLX" while
   parent links also contained "GoSQLX" text (redundant). Changed to
   alt="" (decorative) in Navbar and Footer.

Also adds @lezer/highlight as direct dependency (was transitive).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 2 people

website/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@codemirror/lang-sql": "^6.10.0",
+    "@lezer/highlight": "^1.2.3",
     "@codemirror/state": "^6.6.0",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.40.0",

website/src/components/layout/Footer.tsx

@@ -38,7 +38,7 @@ export function Footer() {
             {/* Logo column */}
             <div className="col-span-2 md:col-span-1">
               <Link href="/" className="flex items-center gap-2.5">
-                <Image src="/images/logo.webp" alt="GoSQLX" width={28} height={28} />
+                <Image src="/images/logo.webp" alt="" width={28} height={28} />
                 <span className="text-lg font-semibold text-white">GoSQLX</span>
               </Link>
               <p className="mt-3 text-sm text-zinc-400 max-w-xs">
@@ -49,7 +49,7 @@ export function Footer() {
             {/* Link columns */}
             {Object.entries(FOOTER_LINKS).map(([category, links]) => (
               <div key={category}>
-                <h3 className="text-sm font-medium text-zinc-300 mb-3">{category}</h3>
+                <h2 className="text-sm font-medium text-zinc-300 mb-3">{category}</h2>
                 <ul className="space-y-2">
                   {links.map((link) => (
                     <li key={link.label}>

website/src/components/layout/Navbar.tsx

@@ -60,7 +60,7 @@ export function Navbar() {
       <nav className="mx-auto max-w-7xl flex items-center justify-between px-4 sm:px-6 lg:px-8 h-16">
         {/* Logo */}
         <Link href="/" className="flex items-center gap-2.5 shrink-0">
-          <Image src="/images/logo.webp" alt="GoSQLX" width={32} height={32} priority />
+          <Image src="/images/logo.webp" alt="" width={32} height={32} priority />
           <span className="text-lg font-semibold text-white">GoSQLX</span>
         </Link>
 

website/src/components/playground/SqlEditor.tsx

@@ -9,7 +9,15 @@ import {
   syntaxHighlighting,
   defaultHighlightStyle,
   bracketMatching,
+  HighlightStyle,
 } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+
+// Override oneDark's coral (#e06c75) which fails WCAG AA (4.38:1 on #282c34).
+// #e87980 achieves ~5.07:1 contrast against #282c34.
+const accessibleHighlight = HighlightStyle.define([
+  { tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName], color: "#e87980" },
+]);
 
 interface SqlEditorProps {
   value: string;
@@ -88,12 +96,14 @@ export default function SqlEditor({
     const extensions = [
       baseTheme,
       minHeightTheme,
+      syntaxHighlighting(accessibleHighlight),
       oneDark,
       sql(),
       syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
       bracketMatching(),
       history(),
       keymap.of([...defaultKeymap, ...historyKeymap]),
+      EditorView.contentAttributes.of({ "aria-label": ariaLabel }),
       updateListener,
     ];