Comment buttons show wrong hover tooltip "Chat" instead of "Kommentare" #44

Closed
opened 2026-07-10 10:36:57 +00:00 by laoc · 1 comment
Owner

Symptom

Hovering the comment toggle (speech-bubble button with comment count) on a post shows the native browser tooltip "Chat" — but the button opens the comments section, not a chat.

Root cause

src/lib/components/icons/social/ChatIcon.svelte has a default prop title = 'Chat'. Icon.svelte renders that as an SVG <title> child + aria-label, which produces the native hover tooltip. All comment-count surfaces use <ChatIcon /> without overriding title, so they inherit "Chat":

  • src/lib/components/notes/NoteCard.svelte:128 — the comment toggle from the screenshot
  • src/lib/components/article/ArticleCard.svelte:289
  • src/lib/components/calendar/CalendarEventCard.svelte:416
  • src/lib/components/educational/AMBResourceCard.svelte:470
  • src/lib/components/comments/CommentThread.svelte:73,90

Fix direction

Pass a localized title (e.g. existing m.comments_show() → "Kommentare" / "Comments") at the comment-button call sites, or default the icon title to empty and set proper title/aria-label on the buttons. Also affects screen-reader labels (aria-label="Chat").

## Symptom Hovering the comment toggle (speech-bubble button with comment count) on a post shows the native browser tooltip **"Chat"** — but the button opens the comments section, not a chat. ## Root cause `src/lib/components/icons/social/ChatIcon.svelte` has a default prop `title = 'Chat'`. `Icon.svelte` renders that as an SVG `<title>` child + `aria-label`, which produces the native hover tooltip. All comment-count surfaces use `<ChatIcon />` without overriding `title`, so they inherit "Chat": - `src/lib/components/notes/NoteCard.svelte:128` — the comment toggle from the screenshot - `src/lib/components/article/ArticleCard.svelte:289` - `src/lib/components/calendar/CalendarEventCard.svelte:416` - `src/lib/components/educational/AMBResourceCard.svelte:470` - `src/lib/components/comments/CommentThread.svelte:73,90` ## Fix direction Pass a localized title (e.g. existing `m.comments_show()` → "Kommentare" / "Comments") at the comment-button call sites, or default the icon title to empty and set proper `title`/`aria-label` on the buttons. Also affects screen-reader labels (`aria-label="Chat"`).
Author
Owner

Fixed in 06a13b42, merged to dev.

  • NoteCard comment toggle now titles the icon Comments / Hide Comments (localized, DE: Kommentare / Kommentare ausblenden), reflecting the toggle state.
  • ArticleCard, CalendarEventCard, AMBResourceCard comment counts get the Comments title.
  • CommentThread expander buttons suppress the icon title (they already have visible text labels).

Verified in the running app via Playwright: hover title reads "Comments", switches to "Hide Comments" when the section is open.

Fixed in 06a13b42, merged to dev. - NoteCard comment toggle now titles the icon **Comments / Hide Comments** (localized, DE: Kommentare / Kommentare ausblenden), reflecting the toggle state. - ArticleCard, CalendarEventCard, AMBResourceCard comment counts get the **Comments** title. - CommentThread expander buttons suppress the icon title (they already have visible text labels). Verified in the running app via Playwright: hover title reads "Comments", switches to "Hide Comments" when the section is open.
laoc closed this issue 2026-07-14 13:36:57 +00:00
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
edufeed/edufeed-app#44
No description provided.