a11y: fix CSS foundation - contrast, overflow, focus ring, reduced motion

This commit is contained in:
TypoGenie
2026-02-18 23:22:04 +02:00
parent 3b8e80c3a3
commit 7d5af9e39c
7 changed files with 58 additions and 26 deletions

View File

@@ -149,7 +149,7 @@ export const FileUpload: React.FC<FileUploadProps> = ({ onFileLoaded }) => {
transition={{ duration: 0.3 }}
>
<motion.div
className={`p-4 rounded-full mb-4 ${dragActive ? 'bg-indigo-500/20 text-indigo-400' : 'bg-zinc-800 text-zinc-500'}`}
className={`p-4 rounded-full mb-4 ${dragActive ? 'bg-indigo-500/20 text-indigo-400' : 'bg-zinc-800 text-zinc-400'}`}
animate={dragActive ? {
scale: [1, 1.2, 1],
rotate: [0, 10, -10, 0]
@@ -174,7 +174,7 @@ export const FileUpload: React.FC<FileUploadProps> = ({ onFileLoaded }) => {
or drag and drop
</motion.p>
<motion.p
className="text-sm text-zinc-500"
className="text-sm text-zinc-400"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.7 }}
@@ -182,7 +182,7 @@ export const FileUpload: React.FC<FileUploadProps> = ({ onFileLoaded }) => {
Markdown or Plain Text files
</motion.p>
<motion.p
className="text-xs text-zinc-600 mt-2"
className="text-xs text-zinc-400 mt-2"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.8 }}