diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..a65a8ec --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2024-04-22 - Missing ARIA Labels on Icon-Only Buttons +**Learning:** Common pattern found across UI components (`graph-tab.tsx`, `code-block-codemirror.tsx`) where icon-only buttons using `HugeiconsIcon` are missing `aria-label` attributes. While they often include a `title` attribute for mouse users, screen readers require the `aria-label` for proper accessibility context. +**Action:** When adding new icon-only buttons, consistently include `aria-label` alongside `title`. diff --git a/src/components/editor/extensions/code-block-codemirror.tsx b/src/components/editor/extensions/code-block-codemirror.tsx index cbc217e..731d719 100644 --- a/src/components/editor/extensions/code-block-codemirror.tsx +++ b/src/components/editor/extensions/code-block-codemirror.tsx @@ -446,6 +446,7 @@ const CodeMirrorComponent = ({ > @@ -485,6 +487,7 @@ const CodeMirrorComponent = ({ onClick={handleCopy} className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground" title="Copy Code" + aria-label="Copy Code" > {copied ? ( setPanel(DEFAULT_PANEL)} className="size-7" > @@ -1328,6 +1329,7 @@ interface ForceGraphInstance { variant="ghost" size="icon" title="Close panel" + aria-label="Close panel" onClick={() => setPaneOpen(false)} className="size-7" > @@ -1431,6 +1433,8 @@ interface ForceGraphInstance {