From 5f77b87644d7d72e222de3502b9069448a4b3ee4 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Tue, 4 Aug 2026 03:54:46 +0000 Subject: [PATCH 1/2] =?UTF-8?q?UX:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EC=A0=84=EC=9A=A9=20=EB=B2=84=ED=8A=BC=EC=97=90=20title=20?= =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .jules/palette.md | 4 ++++ apps/desktop/src/features/score/ScoreView.tsx | 1 + apps/desktop/src/features/score/ScoreViewer.tsx | 5 +++++ 3 files changed, 10 insertions(+) diff --git a/.jules/palette.md b/.jules/palette.md index c05638899..0885301fd 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -1,3 +1,7 @@ ## 2024-05-19 - Replace HTML disabled with aria-disabled="true" for Accessible Tooltips **Learning:** Native HTML `disabled` attributes completely hide elements from screen readers and block all pointer/hover events, preventing tooltips from functioning for disabled elements. **Action:** Replace `disabled` with `aria-disabled="true"`, enforce block click handlers via `e.preventDefault()`, and add a title tooltip directly to the element to maintain full tooltip accessibility and keyboard focus support for visually impaired and mouse users. + +## 2024-05-20 - Adding titles to icon-only buttons +**Learning:** Icon-only buttons (like those with just lucide-react icons) often have `aria-label`s for screen readers but lack tooltips for mouse users, making their function unclear. +**Action:** Always add a `title` attribute matching the `aria-label` to icon-only buttons so standard browser tooltips appear on hover, improving usability for sighted users. diff --git a/apps/desktop/src/features/score/ScoreView.tsx b/apps/desktop/src/features/score/ScoreView.tsx index 72732450f..53cab32fc 100644 --- a/apps/desktop/src/features/score/ScoreView.tsx +++ b/apps/desktop/src/features/score/ScoreView.tsx @@ -198,6 +198,7 @@ export function ScoreView({ song, projectId, onSongUpdate }: ScoreViewProps) { onClick={projectId ? () => void handleRemove(projectId, attachment) : undefined} disabled={!projectId} aria-label={`${t("scoreRemove")}: ${attachment.fileName}`} + title={`${t("scoreRemove")}: ${attachment.fileName}`} className="size-10 border-rose-300/25 text-rose-200 hover:bg-rose-400/10" >