[Web UI] Add ARIA labels to NodeCard component

[santoshkumarradha]

Summary

The NodeCard component displays agent node information with status icons and badges that lack proper ARIA labels, making them inaccessible to screen reader users.

Current State

• File: control-plane/web/client/src/components/NodeCard.tsx
• Issue: State icons/badges have no screen reader text

Tasks

1. Add aria-label to status indicator icons
2. Add screen reader text for status badges
3. Ensure interactive elements have proper labels
4. Add role attributes where appropriate

Examples of Needed Changes

// Before
<StatusIcon status={node.status} />

// After
<StatusIcon 
  status={node.status} 
  aria-label={`Node status: ${node.status}`}
/>

// Before
<Badge variant="success">Online</Badge>

// After
<Badge variant="success" aria-label="Node is online">Online</Badge>

Acceptance Criteria

• All status icons have descriptive aria-label attributes
• Status badges have screen reader accessible text
• Component can be navigated with keyboard
• Linting passes (npm run lint)

Files

• control-plane/web/client/src/components/NodeCard.tsx

---

Using AI to solve this issue? Read our AI-Assisted Contributions guide for testing requirements, prompt strategies, and common pitfalls to avoid.

[karanagg166]

Hi @santoshkumarradha , I’d like to work on this issue. Please assign it to me if available. Thanks!

[santoshkumarradha]

Thank you @karanagg166 please go ahead and feel free to submit a PR :)

[github-actions]

Hey @karanagg166! 👋

Just a friendly reminder that you're assigned to this issue. It's been about a week since assignment.

How's it going? We'd love to hear:

• Any progress updates?
• Running into any blockers we can help with?
• Need more time? (Totally fine!)

A quick comment helps us know you're still interested. If your plans have changed, no worries at all - just let us know and we can find another contributor.

Thanks for contributing to AgentField! 🚀

[github-actions]

Hi @karanagg166,

Just checking in again! It's been 14 days since we last heard from you on this issue.

Quick options:

• 💬 Drop a comment with a progress update
• 🔗 Link a draft PR if you've started working on it
• 👋 Let us know if you'd like to be unassigned (no judgment!)

If we don't hear back in 7 days, we'll unassign this issue to give other contributors a chance to help.

Thanks for understanding!