style: enhance accessibility for bookmark components; update translations for bookmark actions

client/src/components/SidePanel/Bookmarks/BookmarkCard.tsx

@@ -96,8 +96,16 @@ export default function BookmarkCard({ bookmark, position, moveRow }: BookmarkCa
         description={`${bookmark.count} ${localize(bookmark.count === 1 ? 'com_ui_conversation' : 'com_ui_conversations')}`}
         side="top"
         render={
-          <span className="shrink-0 rounded-full bg-surface-tertiary px-2 py-0.5 text-xs text-text-secondary">
-            {bookmark.count}
+          <span className="shrink-0">
+            <span
+              aria-hidden="true"
+              className="rounded-full bg-surface-tertiary px-2 py-0.5 text-xs text-text-secondary"
+            >
+              {bookmark.count}
+            </span>
+            <span className="sr-only">
+              {localize('com_ui_bookmarks_count', { 0: bookmark.count, 1: bookmark.tag })}
+            </span>
           </span>
         }
       />

client/src/components/SidePanel/Bookmarks/BookmarkCardActions.tsx

@@ -63,13 +63,13 @@ export default function BookmarkCardActions({ bookmark }: BookmarkCardActionsPro
           <TooltipAnchor
             description={localize('com_ui_edit')}
             side="top"
+            aria-label={localize('com_ui_bookmarks_edit_label', { 0: bookmark.tag })}
             render={
               <Button
                 ref={editTriggerRef}
                 variant="ghost"
                 size="icon"
                 className="size-7"
-                aria-label={localize('com_ui_bookmarks_edit')}
                 onClick={() => setEditOpen(true)}
               >
                 <Pencil className="size-4" aria-hidden="true" />
@@ -85,13 +85,13 @@ export default function BookmarkCardActions({ bookmark }: BookmarkCardActionsPro
           <TooltipAnchor
             description={localize('com_ui_delete')}
             side="top"
+            aria-label={localize('com_ui_bookmarks_delete_label', { 0: bookmark.tag })}
             render={
               <Button
                 ref={deleteTriggerRef}
                 variant="ghost"
                 size="icon"
                 className="size-7"
-                aria-label={localize('com_ui_bookmarks_delete')}
                 onClick={() => setDeleteOpen(true)}
               >
                 <Trash2 className="size-4" aria-hidden="true" />

client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx

@@ -70,12 +70,12 @@ const BookmarkTable = () => {
               <TooltipAnchor
                 description={localize('com_ui_bookmarks_new')}
                 side="bottom"
+                aria-label={localize('com_ui_bookmarks_new')}
                 render={
                   <Button
                     variant="outline"
                     size="icon"
                     className="shrink-0 bg-transparent"
-                    aria-label={localize('com_ui_bookmarks_new')}
                     onClick={() => setCreateOpen(true)}
                   >
                     <Plus className="size-4" aria-hidden="true" />

client/src/locales/en/translation.json

@@ -762,11 +762,14 @@
   "com_ui_bookmarks_create_error": "There was an error creating the bookmark",
   "com_ui_bookmarks_create_exists": "This bookmark already exists",
   "com_ui_bookmarks_create_success": "Bookmark created successfully",
+  "com_ui_bookmarks_count": "{{0}} conversations in {{1}}",
   "com_ui_bookmarks_delete": "Delete Bookmark?",
   "com_ui_bookmarks_delete_error": "There was an error deleting the bookmark",
+  "com_ui_bookmarks_delete_label": "Delete bookmark {{0}}",
   "com_ui_bookmarks_delete_success": "Bookmark deleted successfully",
   "com_ui_bookmarks_description": "Description",
   "com_ui_bookmarks_edit": "Edit Bookmark",
+  "com_ui_bookmarks_edit_label": "Edit bookmark {{0}}",
   "com_ui_bookmarks_filter": "Filter bookmarks...",
   "com_ui_bookmarks_new": "New Bookmark",
   "com_ui_bookmarks_tag_exists": "A bookmark with this title already exists",