Make Role Removal Explicit and Accessible

[Lakes41]

Difficulty: Advanced

Type: Refactor

Summary

Replace click-to-remove role badges with an explicit, accessible role removal control.

Current Behaviour

Roles in the admin member list are rendered as badges with an onClick handler. Clicking the badge removes the role. This can be easy to trigger accidentally, is not clearly communicated as a destructive action, and may not be fully accessible to keyboard and screen reader users.

Expected Behaviour

Role removal should be an intentional action with clear affordance, keyboard support, accessible labels, and optional confirmation for sensitive roles such as admin.

Suggested Implementation

Replace clickable badges with a small remove button inside or beside each role badge. Add aria-label text such as Remove admin role from 0x.... Consider requiring confirmation when removing admin or the last remaining role from a member. Preserve optimistic update and rollback behaviour.

Files or Areas Likely Affected

• app/admin/members/page.tsx
• components/ui/badge.tsx
• components/wallet/address-text.tsx
• lib/api/optimistic.ts
• test/

Acceptance Criteria

• Role badges are no longer the only clickable removal target.
• Each role removal action has an accessible label.
• Keyboard users can trigger role removal.
• Removing sensitive roles requires confirmation or a clearly intentional action.
• Pending and rollback states remain visible after removal attempts.
• Tests cover accessible role removal controls.

Additional Notes

This issue builds on the existing role removal functionality. It should not change the backend role removal contract.

[clintjeff2]

Hello, I have 6 years of experience working on tasks like this and handling similar challenges across backend, frontend, and smart-contract development. I have carefully read and fully understood the task requirements, and I am confident I can deliver a clean, efficient, and well-tested solution promptly. I always ensure high-quality implementation, maintainability, and adherence to best practices.

ETA 10 hours

[clintjeff2]

Hello, I have 6 years of experience working on tasks like this and handling similar challenges across backend, frontend, and smart-contract development. I have carefully read and fully understood the task requirements, and I am confident I can deliver a clean, efficient, and well-tested solution promptly. I always ensure high-quality implementation, maintainability, and adherence to best practices.

ETA 10 hours

Kindly, assign me this. PR in less than 2hours.

[OTobi21]

I'd love to fix this click-to-remove badges are a classic accidental action waiting to happen, and making role removal intentional and accessible is exactly the kind of detail that makes an admin UI feel trustworthy.

I'd replace the onClick badge pattern with an explicit remove button inside each badge, add aria-label text so keyboard and screen reader users have full context, and gate sensitive removals like admin or last-role behind a confirmation step. Optimistic updates and rollback behaviour stay intact. Tests cover accessible controls, keyboard interaction, confirmation flow, and rollback visibility.

[chidii]

Hi Maintainer, haven reviewed the description of the issue, and well experienced with it,
I would like to hop on the issue and sure to deliver at ETA 1hrs

[GBOYEE]

Hi maintainers! Role removal UI — I would like to tackle this. Clicking a badge to remove a role is a recipe for accidental revocations, especially on admin roles. Plan: replace the onClick-on-badge pattern with a dedicated remove button beside each badge, add aria-label like Remove admin role from 0x... for screen readers, make it fully keyboard accessible, add a confirmation step when removing admin or the last remaining role from a member, preserve the existing optimistic update and rollback so the UI stays snappy. This is a CX/accessibility fix that makes the admin panel feel way more trustworthy. Happy to take it on if still available.

[YfengJ]

Hi maintainers, I would like to apply for this issue if it is still available.

If assigned, I will keep the PR focused on the admin member role-removal UX: replace click-to-remove badges with explicit keyboard-accessible remove controls, add clear aria-labels that include the role/member context, preserve optimistic pending/rollback states, and cover the destructive/sensitive-role path with focused tests. I will wait for assignment or explicit confirmation before opening a PR.

[gloskull]

Hello, I have 4 years of experience delivering solutions for projects like this, covering backend, frontend, and smart contract development. After carefully reviewing your requirements, I have a clear understanding of the task and am confident in my ability to deliver a clean, efficient, and thoroughly tested solution on time. I prioritize code quality, maintainability, and industry best practices throughout the development process. My PR will be submitted in under 10hours.

[playmaker410]

Hi Maintainer,

I’d love to take this on. I have hands-on experience with Rust, Soroban, Cairo, and TypeScript, and I’m confident I can deliver a solid solution within 24 hours.

[zeke-codes]

Hi maintainer, can i handle this issue?