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('draft'); const [thumbnailPreview, setThumbnailPreview] = useState(''); + const coverUrlRef = useRef(null); const [categories, setCategories] = useState([]); // Lesson Management @@ -344,6 +345,11 @@ const CourseModal: React.FC<{
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<{ ) : (
-

Add a hosted cover image URL below

+

Clique para informar a URL da imagem de capa

)}
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" />