fix(a11y): add aria-labels to all content grid card buttons

Adds descriptive aria-label to card buttons in SongGrid, FilmGrid,
TVSeriesGrid, PlaceGrid, BookGrid, PodcastGrid, NewsGrid, ImageGrid,
and AppsGrid for screen reader accessibility.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/app/src/components/content/AppsGrid.vue

@@ -49,6 +49,7 @@
           :class="isDark
             ? 'bg-white/5 hover:bg-white/10'
             : 'bg-black/3 hover:bg-black/5'"
+          :aria-label="app.name"
           @click="$emit('selectApp', app)"
         >
           <div

packages/app/src/components/content/BookGrid.vue

@@ -49,6 +49,7 @@
           v-for="book in filteredBooks"
           :key="book.id"
           class="group flex flex-col items-stretch text-left w-full path-glass-bubble rounded-2xl overflow-hidden transition-all duration-200 hover:brightness-105"
+          :aria-label="`${book.title} by ${book.author}`"
           @click="$emit('selectBook', book)"
         >
           <div class="cover-card flex-1 min-h-0 relative">

packages/app/src/components/content/FilmGrid.vue

@@ -49,6 +49,7 @@
           v-for="film in filteredFilms"
           :key="film.id"
           class="group flex flex-col items-stretch text-left w-full path-glass-bubble rounded-2xl overflow-hidden transition-all duration-200 hover:brightness-105"
+          :aria-label="`${film.title} (${film.year})`"
           @click="$emit('selectFilm', film)"
         >
           <div class="poster-card flex-1 min-h-0">

packages/app/src/components/content/ImageGrid.vue

@@ -24,6 +24,7 @@
           :key="img.id"
           class="group w-full break-inside-avoid text-left rounded-xl overflow-hidden transition-all duration-200 hover:brightness-110 relative"
           :class="isDark ? 'bg-white/5' : 'bg-black/3'"
+          :aria-label="img.alt || img.title || 'Image'"
           @click="$emit('selectImage', img)"
         >
           <img

packages/app/src/components/content/NewsGrid.vue

@@ -33,6 +33,7 @@
           v-for="(article, i) in filteredArticles"
           :key="i"
           class="group flex flex-col items-stretch text-left w-full path-glass-bubble rounded-2xl overflow-hidden transition-all duration-200 hover:brightness-105"
+          :aria-label="article.title"
           @click="openArticle(article)"
         >
           <div class="cover-card flex-1 min-h-0 relative">

packages/app/src/components/content/PlaceGrid.vue

@@ -43,6 +43,7 @@
           v-for="place in filteredPlaces"
           :key="place.id"
           class="group flex flex-col items-stretch text-left w-full path-glass-bubble rounded-2xl overflow-hidden transition-all duration-200 hover:brightness-105"
+          :aria-label="place.name"
           @click="$emit('selectPlace', place)"
         >
           <div class="aspect-[4/3] relative w-full overflow-hidden rounded-t-[10px]">

packages/app/src/components/content/PodcastGrid.vue

@@ -49,6 +49,7 @@
           v-for="podcast in filteredPodcasts"
           :key="podcast.id"
           class="group flex flex-col items-stretch text-left w-full path-glass-bubble rounded-2xl overflow-hidden transition-all duration-200 hover:brightness-105"
+          :aria-label="podcast.title"
           @click="$emit('selectPodcast', podcast)"
         >
           <div class="cover-card flex-1 min-h-0 relative">

packages/app/src/components/content/SongGrid.vue

@@ -49,6 +49,7 @@
           v-for="song in filteredSongs"
           :key="song.id"
           class="group flex flex-col items-stretch text-left w-full path-glass-bubble rounded-2xl overflow-hidden transition-all duration-200 hover:brightness-105"
+          :aria-label="`${song.title} by ${song.artist}`"
           @click="$emit('selectSong', song)"
         >
           <div class="cover-card flex-1 min-h-0 relative flex items-center justify-center">

packages/app/src/components/content/TVSeriesGrid.vue

@@ -49,6 +49,7 @@
           v-for="s in filteredSeries"
           :key="s.id"
           class="group flex flex-col items-stretch text-left w-full path-glass-bubble rounded-2xl overflow-hidden transition-all duration-200 hover:brightness-105"
+          :aria-label="s.title"
           @click="$emit('selectSeries', s)"
         >
           <div class="cover-card flex-1 min-h-0 relative">