From 12ec64b9880378469b93913ae79cc74ed989a839 Mon Sep 17 00:00:00 2001
From: Dustin Healy <54083382+dustinhealy@users.noreply.github.com>
Date: Wed, 21 Jan 2026 10:49:50 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=96=20fix:=20Announce=20Bookmark=20Sel?=
 =?UTF-8?q?ection=20State=20(#11450)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: bookmarks announce selection state

* chore: address Copilot comments
---
 client/src/common/menus.ts                    |  2 ++
 .../components/Chat/Menus/BookmarkMenu.tsx    | 33 ++++++++++++-------
 .../components/Nav/Bookmarks/BookmarkNav.tsx  | 11 ++++++-
 client/src/locales/en/translation.json        |  1 +
 packages/client/src/common/menus.ts           |  2 ++
 .../client/src/components/DropdownPopup.tsx   |  3 ++
 6 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/client/src/common/menus.ts b/client/src/common/menus.ts
index 97c2d1b11b..ee7d7292c9 100644
--- a/client/src/common/menus.ts
+++ b/client/src/common/menus.ts
@@ -15,6 +15,8 @@ export interface MenuItemProps {
   separate?: boolean;
   hideOnClick?: boolean;
   dialog?: React.ReactElement;
+  ariaLabel?: string;
+  ariaChecked?: boolean;
   ref?: React.Ref<any>;
   className?: string;
   render?:
diff --git a/client/src/components/Chat/Menus/BookmarkMenu.tsx b/client/src/components/Chat/Menus/BookmarkMenu.tsx
index bb0dd464c2..ac7b17985e 100644
--- a/client/src/components/Chat/Menus/BookmarkMenu.tsx
+++ b/client/src/components/Chat/Menus/BookmarkMenu.tsx
@@ -99,6 +99,16 @@ const BookmarkMenu: FC = () => {
 
   const newBookmarkRef = useRef<HTMLButtonElement>(null);
 
+  const tagsCount = tags?.length ?? 0;
+  const hasBookmarks = tagsCount > 0;
+
+  const buttonAriaLabel = useMemo(() => {
+    if (tagsCount > 0) {
+      return localize('com_ui_bookmarks_count_selected', { count: tagsCount });
+    }
+    return localize('com_ui_bookmarks_add');
+  }, [tagsCount, localize]);
+
   const dropdownItems: t.MenuItemProps[] = useMemo(() => {
     const items: t.MenuItemProps[] = [
       {
@@ -114,19 +124,19 @@ const BookmarkMenu: FC = () => {
 
     if (data) {
       for (const tag of data) {
-        const isSelected = tags?.includes(tag.tag);
+        const isSelected = tags?.includes(tag.tag) === true;
         items.push({
           id: tag.tag,
           label: tag.tag,
           hideOnClick: false,
-          icon:
-            isSelected === true ? (
-              <BookmarkFilledIcon className="size-4" />
-            ) : (
-              <BookmarkIcon className="size-4" />
-            ),
+          icon: isSelected ? (
+            <BookmarkFilledIcon className="size-4" />
+          ) : (
+            <BookmarkIcon className="size-4" />
+          ),
           onClick: () => handleSubmit(tag.tag),
           disabled: mutation.isLoading,
+          ariaChecked: isSelected,
         });
       }
     }
@@ -146,10 +156,10 @@ const BookmarkMenu: FC = () => {
     if (mutation.isLoading) {
       return <Spinner aria-label="Spinner" />;
     }
-    if ((tags?.length ?? 0) > 0) {
-      return <BookmarkFilledIcon className="icon-lg" aria-label="Filled Bookmark" />;
+    if (hasBookmarks) {
+      return <BookmarkFilledIcon className="icon-lg" aria-hidden="true" />;
     }
-    return <BookmarkIcon className="icon-lg" aria-label="Bookmark" />;
+    return <BookmarkIcon className="icon-lg" aria-hidden="true" />;
   };
 
   return (
@@ -168,7 +178,8 @@ const BookmarkMenu: FC = () => {
             render={
               <Ariakit.MenuButton
                 id="bookmark-menu-button"
-                aria-label={localize('com_ui_bookmarks_add')}
+                aria-label={buttonAriaLabel}
+                aria-pressed={hasBookmarks}
                 className={cn(
                   'mt-text-sm flex size-10 flex-shrink-0 items-center justify-center gap-2 rounded-xl border border-border-light bg-presentation text-sm transition-colors duration-200 hover:bg-surface-hover',
                   isMenuOpen ? 'bg-surface-hover' : '',
diff --git a/client/src/components/Nav/Bookmarks/BookmarkNav.tsx b/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
index a68b078b1b..ea12fafe5b 100644
--- a/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
+++ b/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
@@ -25,6 +25,13 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps)
     [tags, localize],
   );
 
+  const buttonAriaLabel = useMemo(() => {
+    if (tags.length === 0) {
+      return localize('com_ui_bookmarks');
+    }
+    return localize('com_ui_bookmarks_count_selected', { count: tags.length });
+  }, [tags.length, localize]);
+
   const bookmarks = useMemo(() => data?.filter((tag) => tag.count > 0) ?? [], [data]);
 
   const handleTagClick = useCallback(
@@ -73,6 +80,7 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps)
             <BookmarkIcon className="size-4" />
           ),
           onClick: () => handleTagClick(bookmark.tag),
+          ariaChecked: isSelected,
         });
       }
     }
@@ -96,7 +104,8 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps)
           render={
             <Ariakit.MenuButton
               id="bookmark-nav-menu-button"
-              aria-label={localize('com_ui_bookmarks')}
+              aria-label={buttonAriaLabel}
+              aria-pressed={tags.length > 0}
               className={cn(
                 'flex items-center justify-center',
                 'size-10 border-none text-text-primary hover:bg-accent hover:text-accent-foreground',
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index cd3f3151c7..bdee7c5ea3 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -771,6 +771,7 @@
   "com_ui_bookmarks_title": "Title",
   "com_ui_bookmarks_update_error": "There was an error updating the bookmark",
   "com_ui_bookmarks_update_success": "Bookmark updated successfully",
+  "com_ui_bookmarks_count_selected": "Bookmarks, {{count}} selected",
   "com_ui_branch_created": "Branch created successfully",
   "com_ui_branch_error": "Failed to create branch",
   "com_ui_branch_message": "Create branch from this response",
diff --git a/packages/client/src/common/menus.ts b/packages/client/src/common/menus.ts
index 9d6c2174c7..99f98c1a49 100644
--- a/packages/client/src/common/menus.ts
+++ b/packages/client/src/common/menus.ts
@@ -27,6 +27,8 @@ export interface MenuItemProps {
     | 'grid'
     | undefined;
   ariaControls?: string;
+  ariaLabel?: string;
+  ariaChecked?: boolean;
   ref?: React.Ref<any>;
   className?: string;
   render?:
diff --git a/packages/client/src/components/DropdownPopup.tsx b/packages/client/src/components/DropdownPopup.tsx
index 7ba018f441..fa628ce89f 100644
--- a/packages/client/src/components/DropdownPopup.tsx
+++ b/packages/client/src/components/DropdownPopup.tsx
@@ -148,6 +148,9 @@ const Menu: React.FC<MenuProps> = ({
               hideOnClick={item.hideOnClick}
               aria-haspopup={item.ariaHasPopup}
               aria-controls={item.ariaControls}
+              aria-label={item.ariaLabel}
+              aria-checked={item.ariaChecked}
+              {...(item.ariaChecked !== undefined ? { role: 'menuitemcheckbox' } : {})}
               onClick={(event) => {
                 event.preventDefault();
                 if (item.onClick) {