From 3498d471825016ec97c0d60c41e4627b375ee4eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Fri, 4 Sep 2026 11:52:07 -0300
Subject: [PATCH] fix: make course cover control actionable

---
 pages/ManageCourses.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/pages/ManageCourses.tsx b/pages/ManageCourses.tsx
index bff5c2b..ba9076c 100644
--- a/pages/ManageCourses.tsx
+++ b/pages/ManageCourses.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { 
   Plus, 
   Settings, 
@@ -44,6 +44,7 @@ const CourseModal: React.FC<{
   const [category, setCategory] = useState('');
   const [status, setStatus] = useState<Course['status']>('draft');
   const [thumbnailPreview, setThumbnailPreview] = useState<string>('');
+  const coverUrlRef = useRef<HTMLInputElement>(null);
   const [categories, setCategories] = useState<string[]>([]);
   
   // Lesson Management
@@ -344,6 +345,11 @@ const CourseModal: React.FC<{
           <div>
             <label className="text-xs text-gray-400 uppercase font-bold tracking-wider mb-2 block">Imagem de Capa (16:9)</label>
             <div 
+              onClick={() => coverUrlRef.current?.focus()}
+              onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') coverUrlRef.current?.focus(); }}
+              role="button"
+              tabIndex={0}
+              aria-label="Informar URL da imagem de capa"
               className="w-full aspect-video rounded-2xl border-2 border-dashed border-white/10 bg-black/40 flex flex-col items-center justify-center cursor-pointer hover:border-orange-500/50 transition-colors relative overflow-hidden group"
             >
               {thumbnailPreview ? (
@@ -356,15 +362,16 @@ const CourseModal: React.FC<{
               ) : (
                 <div className="text-center p-6">
                   <ImageIcon className="w-10 h-10 text-orange-400/60 mx-auto mb-2" />
-                  <p className="text-gray-300 text-xs font-medium">Add a hosted cover image URL below</p>
+                  <p className="text-gray-300 text-xs font-medium">Clique para informar a URL da imagem de capa</p>
                 </div>
               )}
             </div>
             <input
+              ref={coverUrlRef}
               type="url"
               value={thumbnailPreview}
               onChange={(event) => setThumbnailPreview(event.target.value)}
-              placeholder="Hosted cover image URL"
+              placeholder="Cole a URL pública da imagem de capa"
               className="w-full mt-2 bg-black/50 text-white text-xs border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-orange-500/50"
             />
           </div>