Fixes WCAG 2.1 AA contrast failure (#341): text-accent (#a1dcd8) on light PDF control bar was 1.52:1 — well below the 4.5:1 AA minimum. text-primary resolves to #012851 in light mode (14.5:1) and #a1dcd8 in dark mode (9:1) — both states pass AA in both themes. Adds PdfControls.svelte.spec.ts with 5 tests covering toggle visibility, label strings, and the contrast-safe class assertion. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
66 lines
2.4 KiB
JavaScript
66 lines
2.4 KiB
JavaScript
import prettier from 'eslint-config-prettier';
|
|
import { fileURLToPath } from 'node:url';
|
|
import { includeIgnoreFile } from '@eslint/compat';
|
|
import js from '@eslint/js';
|
|
import svelte from 'eslint-plugin-svelte';
|
|
import { defineConfig } from 'eslint/config';
|
|
import globals from 'globals';
|
|
import ts from 'typescript-eslint';
|
|
import svelteConfig from './svelte.config.js';
|
|
|
|
const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
|
|
|
|
export default defineConfig(
|
|
includeIgnoreFile(gitignorePath),
|
|
{ ignores: ['src/paraglide/**'] },
|
|
js.configs.recommended,
|
|
...ts.configs.recommended,
|
|
...svelte.configs.recommended,
|
|
prettier,
|
|
...svelte.configs.prettier,
|
|
{
|
|
languageOptions: {
|
|
globals: { ...globals.browser, ...globals.node }
|
|
},
|
|
rules: {
|
|
// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
|
|
// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
|
|
'no-undef': 'off',
|
|
// This rule is designed for Svelte 5's own routing system using resolve().
|
|
// In SvelteKit, <a href> and goto() from $app/navigation are the correct patterns — resolve() is not needed.
|
|
'svelte/no-navigation-without-resolve': 'off'
|
|
}
|
|
},
|
|
{
|
|
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
|
|
languageOptions: {
|
|
parserOptions: {
|
|
projectService: true,
|
|
extraFileExtensions: ['.svelte'],
|
|
parser: ts.parser,
|
|
svelteConfig
|
|
}
|
|
},
|
|
rules: {
|
|
// text-accent resolves to #a1dcd8 in light mode (1.52:1 on white — WCAG fail).
|
|
// layout.css documents it as decorative-only (borders, icon tints, bg fills).
|
|
// For any text label use text-primary or text-ink instead. This rule catches
|
|
// the pattern where text-accent appears inside a JavaScript string literal
|
|
// (e.g. conditional ternary class expressions in Svelte templates).
|
|
'no-restricted-syntax': [
|
|
'error',
|
|
{
|
|
selector: 'Literal[value=/\\btext-accent\\b/]',
|
|
message:
|
|
'text-accent is decorative-only (#a1dcd8 in light mode = 1.52:1 contrast — WCAG fail). Use text-primary or text-ink-2 for text labels.'
|
|
},
|
|
{
|
|
selector: 'TemplateLiteral > TemplateElement[value.raw=/\\btext-accent\\b/]',
|
|
message:
|
|
'text-accent is decorative-only (#a1dcd8 in light mode = 1.52:1 contrast — WCAG fail). Use text-primary or text-ink-2 for text labels.'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
);
|