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

feat: Adjust roadmap priorities to elevate accessibility and implement ARIA attributes in AppHeader for improved screen reader support.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-02-25 16:06:52 -03:00
parent 44b2160590
commit 1868f64415
5 changed files with 100 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/experience/src/components/NotificationCenter.tsx
+36 -11
View File
@@ -60,10 +60,16 @@ export default function NotificationCenter() {
<button
onClick={() => setIsOpen(!isOpen)}
className="relative p-2 rounded-xl glass border-white/10 text-gray-400 hover:text-white transition-all hover:bg-white/5"
aria-label={`Notifications ${unreadCount > 0 ? `(${unreadCount} unread)` : ''}`}
aria-haspopup="true"
aria-expanded={isOpen}
>
<Bell size={20} />
<Bell size={20} aria-hidden="true" />
{unreadCount > 0 && (
<span className="absolute top-0 right-0 w-5 h-5 bg-red-500 text-white text-[10px] font-black rounded-full flex items-center justify-center border-2 border-[#1a1c20] -translate-to-1/4">
<span
className="absolute top-0 right-0 w-5 h-5 bg-red-500 text-white text-[10px] font-black rounded-full flex items-center justify-center border-2 border-[#1a1c20] -translate-to-1/4"
aria-hidden="true"
>
{unreadCount}
</span>
)}
@@ -72,10 +78,18 @@ export default function NotificationCenter() {
{isOpen && (
<>
<div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
<div className="absolute right-0 mt-4 w-96 glass-card border-white/10 z-50 shadow-2xl animate-in fade-in zoom-in-95 duration-200 overflow-hidden bg-[#1a1c20]/95 backdrop-blur-xl">
<div
className="absolute right-0 mt-4 w-96 glass-card border-white/10 z-50 shadow-2xl animate-in fade-in zoom-in-95 duration-200 overflow-hidden bg-[#1a1c20]/95 backdrop-blur-xl"
role="dialog"
aria-label="Notifications Panel"
>
<div className="p-4 border-b border-white/5 flex items-center justify-between bg-white/5">
<h3 className="text-sm font-black uppercase tracking-widest text-white">Notificaciones</h3>
<button onClick={() => setIsOpen(false)} className="text-gray-500 hover:text-white p-1">
<button
onClick={() => setIsOpen(false)}
className="text-gray-500 hover:text-white p-1"
aria-label="Close notifications"
>
<X size={18} />
</button>
</div>
@@ -86,15 +100,23 @@ export default function NotificationCenter() {
) : notifications.length === 0 ? (
<div className="p-12 text-center text-gray-500 text-xs font-bold uppercase tracking-widest italic">No hay notificaciones</div>
) : (
<div className="divide-y divide-white/5">
<ul className="divide-y divide-white/5">
{notifications.map((n) => (
<div
<li
key={n.id}
className={`p-4 hover:bg-white/5 transition-all group ${!n.is_read ? 'bg-blue-500/5' : ''}`}
role="button"
tabIndex={0}
className={`p-4 hover:bg-white/5 transition-all group cursor-pointer outline-none focus:bg-white/5 ${!n.is_read ? 'bg-blue-500/5' : ''}`}
onClick={() => !n.is_read && markAsRead(n.id)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
!n.is_read && markAsRead(n.id);
}
}}
aria-label={`Notification: ${n.title}. ${n.message}`}
>
<div className="flex gap-4">
<div className="mt-1">{getIcon(n.notification_type)}</div>
<div className="mt-1" aria-hidden="true">{getIcon(n.notification_type)}</div>
<div className="flex-1 space-y-1">
<p className="text-sm font-bold text-white leading-tight">{n.title}</p>
<p className="text-xs text-gray-400 leading-relaxed">{n.message}</p>
@@ -106,7 +128,10 @@ export default function NotificationCenter() {
<Link
href={n.link_url}
className="text-[10px] font-black uppercase tracking-widest text-blue-400 hover:text-blue-300 flex items-center gap-1"
onClick={() => setIsOpen(false)}
onClick={(e) => {
e.stopPropagation();
setIsOpen(false);
}}
>
Ver detalles →
</Link>
@@ -114,9 +139,9 @@ export default function NotificationCenter() {
</div>
</div>
</div>
</div>
</li>
))}
</div>
</ul>
)}
</div>