mirror of
https://github.com/hoornet/vega.git
synced 2026-05-07 20:59:12 -07:00
Harden accessibility: ARIA roles, semantic buttons, alt text, form labels
- Replace clickable divs with semantic <button> elements (NoteCard, SearchView) - Add role="dialog", aria-modal, aria-labelledby on all modals (Login, Quote, Zap, Lightbox) - Add role="presentation" on overlay backdrops (NoteCard menu, emoji pickers) - Add aria-label to all icon-only buttons (close, nav arrows, context menu) - Add aria-expanded to context menu toggle - Add meaningful alt text to all 35+ images (avatars, covers, thumbnails, media) - Add aria-label to form inputs (search, onboarding login)
This commit is contained in:
@@ -71,7 +71,7 @@ export function ArticleCard({ event }: { event: NDKEvent }) {
|
||||
{profile?.picture ? (
|
||||
<img
|
||||
src={profile.picture}
|
||||
alt=""
|
||||
alt={`${authorName}'s avatar`}
|
||||
className="w-5 h-5 rounded-sm object-cover"
|
||||
onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
|
||||
/>
|
||||
@@ -108,7 +108,7 @@ export function ArticleCard({ event }: { event: NDKEvent }) {
|
||||
<div className="shrink-0 w-24 h-20 rounded-sm overflow-hidden bg-bg-raised">
|
||||
<img
|
||||
src={image}
|
||||
alt=""
|
||||
alt={`Cover image for ${title || "article"}`}
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
|
||||
/>
|
||||
|
||||
@@ -43,7 +43,7 @@ function AuthorRow({ pubkey, publishedAt, readingTime }: { pubkey: string; publi
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<button className="shrink-0" onClick={() => openProfile(pubkey)}>
|
||||
{profile?.picture ? (
|
||||
<img src={profile.picture} alt="" className="w-9 h-9 rounded-sm object-cover hover:opacity-80 transition-opacity"
|
||||
<img src={profile.picture} alt={`${name}'s avatar`} className="w-9 h-9 rounded-sm object-cover hover:opacity-80 transition-opacity"
|
||||
onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
|
||||
) : (
|
||||
<div className="w-9 h-9 rounded-sm bg-bg-raised border border-border flex items-center justify-center text-text-dim text-sm">
|
||||
@@ -361,7 +361,7 @@ export function ArticleView() {
|
||||
<div className="mb-6 -mx-2">
|
||||
<img
|
||||
src={image}
|
||||
alt=""
|
||||
alt={`Cover image for ${title || "article"}`}
|
||||
className="w-full aspect-video object-cover rounded-sm"
|
||||
onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user