Use <output> instead of the "status" role to ensure accessibility across all devices.

[lavanyayadawad30-lab]

The UserCardSkeleton component uses role="status" on a generic

element, even though a semantic HTML tag () exists for this purpose.

This triggers Sonar rule typescript:S6819 and is reported as a major code smell affecting accessibility and maintainability.

File: frontend/src/components/skeletons/UserCard.tsx
Line: 17

Expected Behavior :-
Use semantic HTML tags instead of ARIA roles when available. In this case, replace the

with an element.

Proposed Fix :-
Replace the

element using role="status" with the semantic tag and remove the ARIA role.

I’d be happy to submit a PR for this if approved.

[lavanyayadawad30-lab]

Hi @arkid15r ,
I’ve already reviewed the code and identified the fix for this issue. I’d love to work on it and submit a PR. Could you please assign this issue to me? Thank you for your support!

[arkid15r]

Is it a duplicate of #3557

If not, could you fix all existing cases?