Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve accessibility with semantic HTML, ARIA attributes, and visible focus states across components.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-02-25 16:09:54 -03:00
parent 1868f64415
commit 59732f3706
7 changed files with 123 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/experience/src/app/globals.css
+8 -2
View File
@@ -13,8 +13,8 @@
--accent-primary: var(--primary-color); --accent-primary: var(--primary-color);
--accent-secondary: var(--secondary-color); --accent-secondary: var(--secondary-color);
--glass-bg: rgba(255, 255, 255, 0.03); --glass-bg: rgba(255, 255, 255, 0.05); /* Increased slightly for contrast */
--glass-border: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.1);
--glass-blur: blur(16px); --glass-blur: blur(16px);
} }
@@ -32,6 +32,12 @@ body {
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
} }
/* Ensure focus states are visible for keyboard navigation */
:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 4px;
}
.glass-card { .glass-card {
@apply glass rounded-2xl p-4 md:p-6 transition-all duration-300; @apply glass rounded-2xl p-4 md:p-6 transition-all duration-300;
} }
web/experience/src/components/blocks/AudioResponsePlayer.tsx
+31 -18
View File
@@ -183,7 +183,7 @@ export default function AudioResponsePlayer({
<Mic className="w-6 h-6 text-purple-400" /> <Mic className="w-6 h-6 text-purple-400" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-xl font-bold text-gray-100">{prompt}</p> <h3 id={`audio-prompt-${id}`} className="text-xl font-bold text-gray-100">{prompt}</h3>
{keywords.length > 0 && !submitted && ( {keywords.length > 0 && !submitted && (
<div className="flex flex-wrap gap-2 mt-3"> <div className="flex flex-wrap gap-2 mt-3">
<span className="text-xs text-gray-500 uppercase tracking-wider">Expected topics:</span> <span className="text-xs text-gray-500 uppercase tracking-wider">Expected topics:</span>
@@ -205,16 +205,23 @@ export default function AudioResponsePlayer({
<button <button
onClick={startRecording} onClick={startRecording}
className="flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 rounded-2xl font-bold text-white shadow-lg shadow-purple-500/30 transition-all" className="flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 rounded-2xl font-bold text-white shadow-lg shadow-purple-500/30 transition-all"
aria-label="Start Recording"
aria-describedby={`audio-prompt-${id}`}
> >
<Mic className="w-5 h-5" /> <Mic className="w-5 h-5" aria-hidden="true" />
Start Recording Start Recording
</button> </button>
)} )}
{isRecording && ( {isRecording && (
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<div className="flex items-center gap-3 px-6 py-3 bg-red-500/20 border-2 border-red-500 rounded-2xl animate-pulse"> <div
<div className="w-3 h-3 bg-red-500 rounded-full animate-pulse" /> className="flex items-center gap-3 px-6 py-3 bg-red-500/20 border-2 border-red-500 rounded-2xl animate-pulse"
role="timer"
aria-live="polite"
aria-label={`Recording time: ${formatTime(recordingTime)}`}
>
<div className="w-3 h-3 bg-red-500 rounded-full animate-pulse" aria-hidden="true" />
<span className="font-mono text-xl font-bold text-red-400">{formatTime(recordingTime)}</span> <span className="font-mono text-xl font-bold text-red-400">{formatTime(recordingTime)}</span>
{timeLimit && ( {timeLimit && (
<span className="text-sm text-gray-400">/ {formatTime(timeLimit)}</span> <span className="text-sm text-gray-400">/ {formatTime(timeLimit)}</span>
@@ -222,9 +229,10 @@ export default function AudioResponsePlayer({
</div> </div>
<button <button
onClick={stopRecording} onClick={stopRecording}
className="flex items-center gap-2 px-6 py-3 bg-red-600 hover:bg-red-700 rounded-xl font-bold text-white transition-all" className="flex items-center gap-2 px-6 py-3 bg-red-600 hover:bg-red-700 rounded-xl font-bold text-white transition-all outline-none focus:ring-2 focus:ring-red-500"
aria-label="Stop Recording"
> >
<Square className="w-4 h-4" /> <Square className="w-4 h-4" aria-hidden="true" />
Stop Recording Stop Recording
</button> </button>
</div> </div>
@@ -234,16 +242,18 @@ export default function AudioResponsePlayer({
<div className="flex gap-3"> <div className="flex gap-3">
<button <button
onClick={playRecording} onClick={playRecording}
className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-xl font-bold text-white transition-all" className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-xl font-bold text-white transition-all outline-none focus:ring-2 focus:ring-blue-500"
aria-label="Play back your recording"
> >
<Play className="w-4 h-4" /> <Play className="w-4 h-4" aria-hidden="true" />
Play Recording Play Recording
</button> </button>
<button <button
onClick={reset} onClick={reset}
className="flex items-center gap-2 px-6 py-3 glass hover:bg-white/10 rounded-xl font-bold text-gray-300 transition-all" className="flex items-center gap-2 px-6 py-3 glass hover:bg-white/10 rounded-xl font-bold text-gray-300 transition-all outline-none focus:ring-2 focus:ring-white/20"
aria-label="Delete and re-record"
> >
<RotateCcw className="w-4 h-4" /> <RotateCcw className="w-4 h-4" aria-hidden="true" />
Re-record Re-record
</button> </button>
</div> </div>
@@ -258,11 +268,11 @@ export default function AudioResponsePlayer({
</div> </div>
)} )}
{/* Submit Button */}
{audioBlob && transcript && ( {audioBlob && transcript && (
<button <button
onClick={evaluateResponse} onClick={evaluateResponse}
className="w-full py-4 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 rounded-xl font-bold text-white shadow-lg shadow-green-500/30 transition-all" className="w-full py-4 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 rounded-xl font-bold text-white shadow-lg shadow-green-500/30 transition-all outline-none focus:ring-2 focus:ring-green-500"
aria-label="Submit recording for AI evaluation"
> >
Submit Response Submit Response
</button> </button>
@@ -273,12 +283,15 @@ export default function AudioResponsePlayer({
{/* Evaluation Results */} {/* Evaluation Results */}
{submitted && evaluation && ( {submitted && evaluation && (
<div className="space-y-4"> <div className="space-y-4">
<div className={`p-6 rounded-2xl border-2 ${evaluation.score >= 70 <div
? 'bg-green-500/10 border-green-500' className={`p-6 rounded-2xl border-2 ${evaluation.score >= 70
: evaluation.score >= 40 ? 'bg-green-500/10 border-green-500'
? 'bg-yellow-500/10 border-yellow-500' : evaluation.score >= 40
: 'bg-red-500/10 border-red-500' ? 'bg-yellow-500/10 border-yellow-500'
}`}> : 'bg-red-500/10 border-red-500'
}`}
aria-live="assertive"
>
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<span className="text-sm font-bold uppercase tracking-wider text-gray-400">Your Score</span> <span className="text-sm font-bold uppercase tracking-wider text-gray-400">Your Score</span>
<span className="text-3xl font-black">{evaluation.score}%</span> <span className="text-3xl font-black">{evaluation.score}%</span>
web/studio/src/app/globals.css
+8 -2
View File
@@ -13,11 +13,17 @@
/* blue-500 */ /* blue-500 */
--accent-secondary: #6366f1; --accent-secondary: #6366f1;
/* indigo-500 */ /* indigo-500 */
--glass-bg: rgba(255, 255, 255, 0.03); --glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.1);
--glass-blur: blur(16px); --glass-blur: blur(16px);
} }
/* Ensure focus states are visible for keyboard navigation */
:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 4px;
}
body { body {
color: rgb(var(--foreground-rgb)); color: rgb(var(--foreground-rgb));
background: var(--background-start-rgb); background: var(--background-start-rgb);
web/studio/src/components/BrandingSettings.tsx
+20 -12
View File
@@ -79,7 +79,7 @@ export default function BrandingSettings() {
{/* Logo Section */} {/* Logo Section */}
<div className="space-y-4"> <div className="space-y-4">
<label className="block text-sm font-medium text-gray-400">Logo</label> <span className="block text-sm font-medium text-gray-400">Logo</span>
<div className="p-4 bg-black/20 rounded-xl border border-white/5 flex items-center justify-center min-h-[120px] relative"> <div className="p-4 bg-black/20 rounded-xl border border-white/5 flex items-center justify-center min-h-[120px] relative">
{org.logo_url ? ( {org.logo_url ? (
<Image <Image
@@ -110,7 +110,7 @@ export default function BrandingSettings() {
{/* Favicon Section */} {/* Favicon Section */}
<div className="space-y-4"> <div className="space-y-4">
<label className="block text-sm font-medium text-gray-400">Favicon</label> <span className="block text-sm font-medium text-gray-400">Favicon</span>
<div className="p-4 bg-black/20 rounded-xl border border-white/5 flex items-center justify-center min-h-[120px] relative"> <div className="p-4 bg-black/20 rounded-xl border border-white/5 flex items-center justify-center min-h-[120px] relative">
{org.favicon_url ? ( {org.favicon_url ? (
<div className="w-8 h-8 relative"> <div className="w-8 h-8 relative">
@@ -143,56 +143,64 @@ export default function BrandingSettings() {
</div> </div>
</div> </div>
<div className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm"> <fieldset className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm">
<h3 className="text-xl font-bold mb-6 flex items-center gap-2"> <legend className="px-2 text-xl font-bold flex items-center gap-2">
<span>🌈</span> Brand Colors <span aria-hidden="true">🌈</span> Brand Colors
</h3> </legend>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Primary Color */} {/* Primary Color */}
<div> <div>
<label className="block text-sm font-medium text-gray-400 mb-2">Primary Color</label> <label htmlFor="primary-color" className="block text-sm font-medium text-gray-400 mb-2">Primary Color</label>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<input <input
id="primary-color-picker"
type="color" type="color"
value={formData.primary_color} value={formData.primary_color}
onChange={(e) => setFormData({ ...formData, primary_color: e.target.value })} onChange={(e) => setFormData({ ...formData, primary_color: e.target.value })}
aria-label="Primary color picker"
className="w-12 h-12 rounded-lg cursor-pointer bg-transparent border-none p-0" className="w-12 h-12 rounded-lg cursor-pointer bg-transparent border-none p-0"
/> />
<div className="flex-1"> <div className="flex-1">
<input <input
id="primary-color"
type="text" type="text"
value={formData.primary_color} value={formData.primary_color}
onChange={(e) => setFormData({ ...formData, primary_color: e.target.value })} onChange={(e) => setFormData({ ...formData, primary_color: e.target.value })}
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white font-mono uppercase" className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white font-mono uppercase"
aria-describedby="primary-color-desc"
/> />
</div> </div>
</div> </div>
<p className="text-xs text-gray-500 mt-2">Used for main buttons, active states, and highlights.</p> <p id="primary-color-desc" className="text-xs text-gray-500 mt-2">Used for main buttons, active states, and highlights.</p>
</div> </div>
{/* Secondary Color */} {/* Secondary Color */}
<div> <div>
<label className="block text-sm font-medium text-gray-400 mb-2">Secondary Color</label> <label htmlFor="secondary-color" className="block text-sm font-medium text-gray-400 mb-2">Secondary Color</label>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<input <input
id="secondary-color-picker"
type="color" type="color"
value={formData.secondary_color} value={formData.secondary_color}
onChange={(e) => setFormData({ ...formData, secondary_color: e.target.value })} onChange={(e) => setFormData({ ...formData, secondary_color: e.target.value })}
aria-label="Secondary color picker"
className="w-12 h-12 rounded-lg cursor-pointer bg-transparent border-none p-0" className="w-12 h-12 rounded-lg cursor-pointer bg-transparent border-none p-0"
/> />
<div className="flex-1"> <div className="flex-1">
<input <input
id="secondary-color"
type="text" type="text"
value={formData.secondary_color} value={formData.secondary_color}
onChange={(e) => setFormData({ ...formData, secondary_color: e.target.value })} onChange={(e) => setFormData({ ...formData, secondary_color: e.target.value })}
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white font-mono uppercase" className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white font-mono uppercase"
aria-describedby="secondary-color-desc"
/> />
</div> </div>
</div> </div>
<p className="text-xs text-gray-500 mt-2">Used for accents and gradients.</p> <p id="secondary-color-desc" className="text-xs text-gray-500 mt-2">Used for accents and gradients.</p>
</div> </div>
</div> </div>
</div> </fieldset>
<div className="flex justify-end"> <div className="flex justify-end">
<button <button
web/studio/src/components/Combobox.tsx
+30 -9
View File
@@ -38,24 +38,31 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
return ( return (
<div className="relative" ref={containerRef}> <div className="relative" ref={containerRef}>
<div <button
type="button"
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
className="flex items-center justify-between w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 cursor-pointer hover:border-white/20 transition-all focus-within:ring-2 focus-within:ring-blue-500/50" aria-haspopup="listbox"
aria-expanded={isOpen}
className="flex items-center justify-between w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 cursor-pointer hover:border-white/20 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50"
> >
<span className={selectedOption ? "text-white" : "text-gray-500"}> <span className={selectedOption ? "text-white" : "text-gray-500"}>
{selectedOption ? selectedOption.name : placeholder} {selectedOption ? selectedOption.name : placeholder}
</span> </span>
<ChevronDown size={18} className={`text-gray-500 transition-transform ${isOpen ? "rotate-180" : ""}`} /> <ChevronDown size={18} className={`text-gray-500 transition-transform ${isOpen ? "rotate-180" : ""}`} aria-hidden="true" />
</div> </button>
{isOpen && ( {isOpen && (
<div className="absolute top-full left-0 right-0 mt-2 z-[110] bg-[#1a1d23] border border-white/10 rounded-lg shadow-2xl overflow-hidden glass-card animate-in fade-in slide-in-from-top-2 duration-200"> <div className="absolute top-full left-0 right-0 mt-2 z-[110] bg-[#1a1d23] border border-white/10 rounded-lg shadow-2xl overflow-hidden glass-card animate-in fade-in slide-in-from-top-2 duration-200">
<div className="p-2 border-b border-white/5 bg-white/5"> <div className="p-2 border-b border-white/5 bg-white/5">
<div className="relative"> <div className="relative">
<Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" /> <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" aria-hidden="true" />
<input <input
autoFocus autoFocus
type="text" type="text"
role="combobox"
aria-autocomplete="list"
aria-expanded="true"
aria-controls="combobox-options"
className="w-full bg-black/20 border-none rounded-md pl-9 pr-4 py-2 text-sm focus:ring-0 placeholder:text-gray-600" className="w-full bg-black/20 border-none rounded-md pl-9 pr-4 py-2 text-sm focus:ring-0 placeholder:text-gray-600"
placeholder="Search..." placeholder="Search..."
value={search} value={search}
@@ -63,23 +70,37 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
/> />
</div> </div>
</div> </div>
<div className="max-h-60 overflow-y-auto p-1 custom-scrollbar"> <div
id="combobox-options"
role="listbox"
className="max-h-60 overflow-y-auto p-1 custom-scrollbar"
>
{filteredOptions.length === 0 ? ( {filteredOptions.length === 0 ? (
<div className="px-4 py-3 text-sm text-gray-500 text-center">No results found</div> <div className="px-4 py-3 text-sm text-gray-500 text-center" role="option" aria-disabled="true">No results found</div>
) : ( ) : (
filteredOptions.map(option => ( filteredOptions.map(option => (
<div <div
key={option.id} key={option.id}
role="option"
aria-selected={value === option.id}
tabIndex={0}
onClick={() => { onClick={() => {
onChange(option.id); onChange(option.id);
setIsOpen(false); setIsOpen(false);
setSearch(""); setSearch("");
}} }}
className={`flex items-center justify-between px-3 py-2 rounded-md cursor-pointer transition-colors ${value === option.id ? "bg-blue-600 text-white" : "hover:bg-white/5 text-gray-300" onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
onChange(option.id);
setIsOpen(false);
setSearch("");
}
}}
className={`flex items-center justify-between px-3 py-2 rounded-md cursor-pointer transition-colors outline-none focus:bg-blue-600 focus:text-white ${value === option.id ? "bg-blue-600 text-white" : "hover:bg-white/5 text-gray-300"
}`} }`}
> >
<span className="text-sm font-medium">{option.name}</span> <span className="text-sm font-medium">{option.name}</span>
{value === option.id && <Check size={14} />} {value === option.id && <Check size={14} aria-hidden="true" />}
</div> </div>
)) ))
)} )}
web/studio/src/components/CourseEditorLayout.tsx
+17 -15
View File
@@ -32,27 +32,29 @@ export default function CourseEditorLayout({ children, activeTab }: CourseEditor
return ( return (
<div className="space-y-8"> <div className="space-y-8">
{/* Tabs Navigation */} {/* Tabs Navigation */}
<div className="glass p-1"> <nav className="glass p-1" aria-label="Course editor tabs">
<div className="flex border-b border-white/10 overflow-x-auto scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent"> <ul className="flex border-b border-white/10 overflow-x-auto scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
{tabs.map((tab) => { {tabs.map((tab) => {
const Icon = tab.icon; const Icon = tab.icon;
const isActive = tab.key === activeTab; const isActive = tab.key === activeTab;
return ( return (
<Link <li key={tab.key} className="flex-shrink-0">
key={tab.key} <Link
href={tab.href} href={tab.href}
className={`flex items-center gap-1.5 px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap flex-shrink-0 ${isActive aria-current={isActive ? "page" : undefined}
? "border-b-2 border-blue-500 bg-white/5 text-white" className={`flex items-center gap-1.5 px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap flex-shrink-0 ${isActive
: "text-gray-500 hover:text-white" ? "border-b-2 border-blue-500 bg-white/5 text-white"
}`} : "text-gray-500 hover:text-white"
> }`}
<Icon className="w-4 h-4 flex-shrink-0" /> >
{tab.label} <Icon className="w-4 h-4 flex-shrink-0" aria-hidden="true" />
</Link> {tab.label}
</Link>
</li>
); );
})} })}
</div> </ul>
</div> </nav>
{/* Content */} {/* Content */}
<div className="space-y-6"> <div className="space-y-6">
web/studio/src/components/Navbar.tsx
+9 -6
View File
@@ -12,7 +12,7 @@ export function Navbar() {
return ( return (
<nav className="fixed top-0 w-full z-50 glass border-b border-white/10 bg-black/20"> <nav className="fixed top-0 w-full z-50 glass border-b border-white/10 bg-black/20">
<div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between"> <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
<Link href="/" className="flex items-center gap-2"> <Link href="/" className="flex items-center gap-2" aria-label="OpenCCB Studio - Inicio">
<h1 className="text-xl font-bold tracking-tight"> <h1 className="text-xl font-bold tracking-tight">
Open<span className="gradient-text">CCB</span> Studio Open<span className="gradient-text">CCB</span> Studio
</h1> </h1>
@@ -32,7 +32,7 @@ export function Navbar() {
href="/library/assets" href="/library/assets"
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2" className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
> >
<Library className="w-4 h-4" /> <Library className="w-4 h-4" aria-hidden="true" />
{t('nav.library') || 'Library'} {t('nav.library') || 'Library'}
</Link> </Link>
@@ -43,7 +43,7 @@ export function Navbar() {
href="/admin" href="/admin"
className="text-sm font-black text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-2 bg-indigo-500/10 px-3 py-1.5 rounded-lg border border-indigo-500/20 shadow-glow-sm" className="text-sm font-black text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-2 bg-indigo-500/10 px-3 py-1.5 rounded-lg border border-indigo-500/20 shadow-glow-sm"
> >
<ShieldCheck className="w-4 h-4" /> <ShieldCheck className="w-4 h-4" aria-hidden="true" />
{t('nav.globalControl')} {t('nav.globalControl')}
</Link> </Link>
)} )}
@@ -77,10 +77,12 @@ export function Navbar() {
{/* Language Switcher */} {/* Language Switcher */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Globe className="w-4 h-4 text-gray-500" /> <Globe className="w-4 h-4 text-gray-500" aria-hidden="true" />
<select <select
id="studio-language-selector"
value={language} value={language}
onChange={(e) => setLanguage(e.target.value)} onChange={(e) => setLanguage(e.target.value)}
aria-label={t('nav.selectLanguage') || 'Select Language'}
className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-400 hover:text-white transition-colors focus:outline-none cursor-pointer" className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-400 hover:text-white transition-colors focus:outline-none cursor-pointer"
> >
<option value="en" className="bg-gray-900">EN</option> <option value="en" className="bg-gray-900">EN</option>
@@ -100,9 +102,10 @@ export function Navbar() {
<button <button
onClick={logout} onClick={logout}
className="p-2 hover:bg-red-500/10 hover:text-red-400 rounded-lg transition-all text-gray-500" className="p-2 hover:bg-red-500/10 hover:text-red-400 rounded-lg transition-all text-gray-500"
title="Sign Out" title={t('nav.signOut') || "Sign Out"}
aria-label={t('nav.signOut') || "Sign Out"}
> >
<LogOut className="w-4 h-4" /> <LogOut className="w-4 h-4" aria-hidden="true" />
</button> </button>
</div> </div>
) : ( ) : (