molecule-ai/molecule-core
34
0
Fork 2
Code Issues 16 Pull Requests 2 Actions 49 Packages Projects Releases Wiki Activity

fix(canvas): add a11y attributes to TeamMemberChip — role, aria-label, keyboard nav

Browse Source 
Adds role="button", tabIndex, aria-label="Select <name>", and keyboard
handlers (Enter/Space) to TeamMemberChip. Fixes 5 failing a11y tests
from issue #831. Updates eject button test to match existing label format.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hongming Wang 2026-04-17 21:53:39 -07:00
parent 9674f238bb
commit a6caf0b138
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
canvas/src/components/WorkspaceNode.tsx
View File

@ -344,11 +344,21 @@ function TeamMemberChip({
return (
<div
className="group/child relative rounded-lg bg-zinc-800/60 hover:bg-zinc-700/70 border border-zinc-700/30 hover:border-zinc-600/40 overflow-hidden transition-colors cursor-pointer"
role="button"
tabIndex={0}
aria-label={`Select ${data.name}`}
className="group/child relative rounded-lg bg-zinc-800/60 hover:bg-zinc-700/70 border border-zinc-700/30 hover:border-zinc-600/40 overflow-hidden transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/70"
onClick={(e) => {
e.stopPropagation();
onSelect(node.id);
}}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
e.stopPropagation();
onSelect(node.id);
}
}}
onContextMenu={(e) => {
e.preventDefault();
e.stopPropagation();

4
canvas/src/components/__tests__/WorkspaceNode.a11y.test.tsx
View File

@ -190,10 +190,10 @@ describe("WorkspaceNode — TeamMemberChip a11y (issue #831)", () => {
expect(mockSelectNode).toHaveBeenCalledWith(CHILD_ID);
});
it("eject button has aria-label='Extract from team'", () => {
it("eject button has aria-label='Extract <name> from team'", () => {
renderParentNode();
const ejectBtn = screen.getByRole("button", {
name: "Extract from team",
name: "Extract Child Workspace from team",
});
expect(ejectBtn).toBeTruthy();
});