Edit button on the task card is only announced as "pencil" ✏️
File: devboard/client/src/components/Board/TaskCard.jsx
What I expected
The ✏️ button in the card footer says what it does — a tooltip on hover, and a meaningful name for screen readers — the way the copy button next to the title already does.
What actually happens
The button has neither aria-label nor title. Its accessible name therefore falls back to its own content, the ✏️ emoji, so a screen reader announces "pencil, button" instead of "edit task". Sighted users get no tooltip at all, and since the button only fades in on hover there is nothing else to go by.
Steps to reproduce
- Open the board with at least one task
- Hover a card so the ✏️ button appears in the bottom-right corner
- Keep hovering — no tooltip appears
- Inspect the button in DevTools → Elements → Accessibility: the computed name is the emoji, not a description of the action
Cause
Line ~380, no label of any kind:
<button
onClick={(e) => {
e.stopPropagation();
onSelect(task);
}}
className="opacity-0 group-hover:opacity-100 text-[10px] px-2 py-1 rounded bg-gray-600 text-white hover:bg-gray-700 transition-opacity"
>
✏️
</button>The copy button above it already handles this correctly (line ~173):
aria-label={copied ? "Task title copied" : "Copy task title"}
title={copied ? "Copied!" : "Copy title"}Suggested fix
Give the edit button the same two attributes:
aria-label="Edit task"
title="Edit task"
Scope note: the context menu entries (✏️ Edit, 🗑️ Delete, 📄 Duplicate) have visible text next to their icons, so they already have proper names. This is only about the icon-only button in the card footer.
Edit button on the task card is only announced as "pencil" ✏️
File:
devboard/client/src/components/Board/TaskCard.jsxWhat I expected
The ✏️ button in the card footer says what it does — a tooltip on hover, and a meaningful name for screen readers — the way the copy button next to the title already does.
What actually happens
The button has neither
aria-labelnortitle. Its accessible name therefore falls back to its own content, the ✏️ emoji, so a screen reader announces "pencil, button" instead of "edit task". Sighted users get no tooltip at all, and since the button only fades in on hover there is nothing else to go by.Steps to reproduce
Cause
Line ~380, no label of any kind:
The copy button above it already handles this correctly (line ~173):
Suggested fix
Give the edit button the same two attributes:
Scope note: the context menu entries (
✏️ Edit,🗑️ Delete,📄 Duplicate) have visible text next to their icons, so they already have proper names. This is only about the icon-only button in the card footer.