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; 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(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 ? ( - - ) : ( - - ), + icon: isSelected ? ( + + ) : ( + + ), onClick: () => handleSubmit(tag.tag), disabled: mutation.isLoading, + ariaChecked: isSelected, }); } } @@ -146,10 +156,10 @@ const BookmarkMenu: FC = () => { if (mutation.isLoading) { return ; } - if ((tags?.length ?? 0) > 0) { - return ; + if (hasBookmarks) { + return