Skip to content

Fixed Sonar issue Use <output> instead of the "status" role and Use N… #3642

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
asifrazadev wants to merge 9 commits into from
Closed

Fixed Sonar issue Use <output> instead of the "status" role and Use N… #3642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8620c97
Fixed Sonar issue Use <output> instead of the "status" role and Use N…
asifrazadev Jan 29, 2026
5fd1fe3
resolved code rabbit review
asifrazadev Jan 29, 2026
3686bd8
Fix sonar issue and coderabit review
asifrazadev Jan 29, 2026
f52fa35
fix security sonar issue
asifrazadev Jan 29, 2026
c330e6e
Fixed related test
asifrazadev Jan 29, 2026
8cff5a1
fixed sonar issue reductand jsx element
asifrazadev Jan 29, 2026
562c349
Update Card.tsx
asifrazadev Feb 3, 2026
1d10911
remove explicit role
asifrazadev Feb 3, 2026
1ef4bb4
added output and remove test id
asifrazadev Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/__tests__/unit/pages/Chapters.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ describe('ChaptersPage Component', () => {
expect(screen.getByText('Next Page')).toBeInTheDocument()
})

expect(screen.queryByTestId('status')).not.toBeInTheDocument()
expect(screen.queryByRole('status')).not.toBeInTheDocument()
})
test('opens window on View Details button click', async () => {
render(<ChaptersPage />)
Expand Down
2 changes: 1 addition & 1 deletion frontend/__tests__/unit/pages/Projects.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ describe('ProjectPage Component', () => {
expect(screen.getByText('Next Page')).toBeInTheDocument()
})

expect(screen.queryByTestId('status')).not.toBeInTheDocument()
expect(screen.queryByRole('status')).not.toBeInTheDocument()
})

test('renders project data correctly', async () => {
Expand Down
2 changes: 1 addition & 1 deletion frontend/__tests__/unit/pages/Users.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ describe('UsersPage Component', () => {
expect(screen.getByText('Next Page')).toBeInTheDocument()
})

expect(screen.queryByTestId('status')).not.toBeInTheDocument()
expect(screen.queryByRole('status')).not.toBeInTheDocument()
})

test('renders user cards correctly', async () => {
Expand Down
126 changes: 71 additions & 55 deletions frontend/src/components/skeletons/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,71 +16,87 @@ const CardSkeleton: React.FC<CardSkeletonProps> = ({
const NUM_CONTRIBUTORS = 8

return (
<div role="status" className="flex w-full justify-center">
<div className="border-border bg-card hover:bg-accent/10 mb-6 w-full rounded-lg border-1 p-6 transition-colors duration-300 ease-linear md:max-w-6xl">
<div className="flex flex-col gap-6">
{/* Header Section */}
<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
<div className="flex items-center gap-4">
{showLevel && <Skeleton className="h-10 w-10 rounded-full" />}
<div className="flex flex-col gap-1">
{showProjectName && <Skeleton className="h-8 w-[180px] sm:w-[250px]" />}
<div>
<output
aria-live="polite"
aria-busy="true"
aria-label="Loading"
className="flex w-full justify-center"
>
<div className="border-border bg-card hover:bg-accent/10 mb-6 w-full rounded-lg border-1 p-6 transition-colors duration-300 ease-linear md:max-w-6xl">
<div className="flex flex-col gap-6">
{/* Header Section */}
<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
<div className="flex items-center gap-4">
{showLevel && <Skeleton className="h-10 w-10 rounded-full" />}
<div className="flex flex-col gap-1">
{showProjectName && <Skeleton className="h-8 w-[180px] sm:w-[250px]" />}
</div>
</div>
</div>
</div>

{showIcons && (
<div className="flex min-w-[30%] grow flex-row items-center justify-start gap-2 overflow-auto">
{/* # NOSONAR As safe to use index as key - static skeleton items with fixed length */}
{Array.from({ length: numIcons }).map((_, i) => (
<Skeleton key={i} className="h-8 w-16" />
))}
<Skeleton />
</div>
)}
{showIcons && (
<div className="flex min-w-[30%] grow flex-row items-center justify-start gap-2 overflow-auto">
{/* # NOSONAR As safe to use index as key - static skeleton items with fixed length */}
{Array.from(
{ length: Math.max(0, Math.floor(numIcons)) },
(_, i) => `icon-${i}`
).map((key) => (
<Skeleton key={key} className="h-8 w-16" />
))}
<Skeleton />
</div>
)}

{/* Link Section */}
{showLink && <Skeleton className="w-[180px] md:w-[350px]" />}
{/* Link Section */}
{showLink && <Skeleton className="w-[180px] md:w-[350px]" />}

{/* Description Section */}
{showSummary && (
<div className="flex flex-col gap-3">
<Skeleton className="h-3 w-full gap-1" />
<Skeleton className="h-3 w-full gap-1" />
<Skeleton className="h-3 w-full gap-1" />
<Skeleton className="h-3 w-full gap-1" />
</div>
)}
{/* Description Section */}
{showSummary && (
<div className="flex flex-col gap-3">
<Skeleton className="h-3 w-full gap-1" />
<Skeleton className="h-3 w-full gap-1" />
<Skeleton className="h-3 w-full gap-1" />
<Skeleton className="h-3 w-full gap-1" />
</div>
)}

{/* Footer Section */}
<div className="flex items-center justify-between gap-4 pt-3">
<div className="flex flex-col justify-start gap-2">
{showContributors && (
<div className="mt-3 flex w-full flex-wrap items-center gap-2">
{/* # NOSONAR As safe to use index as key - static skeleton items with fixed length */}
{[...Array(NUM_CONTRIBUTORS)].map((_, i) => (
<Skeleton key={i} className="border-background h-8 w-8 rounded-full border-2" />
))}
</div>
)}
{showSocial && (
<div className="flex flex-row gap-2">
<Skeleton className="h-8 w-8 rounded-full" />
<Skeleton className="h-8 w-8 rounded-full" />
<Skeleton className="h-8 w-8 rounded-full" />
<Skeleton className="h-8 w-8 rounded-full" />
<Skeleton className="h-8 w-8 rounded-full" />
<Skeleton className="h-8 w-8 rounded-full" />
</div>
)}
</div>
{/* Footer Section */}
<div className="flex items-center justify-between gap-4 pt-3">
<div className="flex flex-col justify-start gap-2">
{showContributors && (
<div className="mt-3 flex w-full flex-wrap items-center gap-2">
{/* # NOSONAR As safe to use index as key - static skeleton items with fixed length */}
{Array.from(
{ length: Math.max(0, Math.floor(NUM_CONTRIBUTORS)) },
(_, i) => `contributor-${i}`
).map((key) => (
<Skeleton
key={key}
className="border-background h-8 w-8 rounded-full border-2"
/>
))}
</div>
)}
{showSocial && (
<div className="flex flex-row gap-2">
<Skeleton className="h-8 w-8 rounded-full" />
<Skeleton className="h-8 w-8 rounded-full" />
<Skeleton className="h-8 w-8 rounded-full" />
<Skeleton className="h-8 w-8 rounded-full" />
<Skeleton className="h-8 w-8 rounded-full" />
<Skeleton className="h-8 w-8 rounded-full" />
</div>
)}
</div>

<div className="ml-auto flex items-center gap-1">
{showActionButton && <Skeleton className="h-9 w-[100px]" />}
<div className="ml-auto flex items-center gap-1">
{showActionButton && <Skeleton className="h-9 w-[100px]" />}
</div>
</div>
</div>
</div>
</div>
</output>
</div>
)
}
Expand Down
40 changes: 22 additions & 18 deletions frontend/src/components/skeletons/UserCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,31 @@ const UserCardSkeleton: React.FC<UserCardSkeletonProps> = ({
showViewProfile = true,
}) => {
return (
<div
role="status"
className="group flex h-64 w-80 flex-col items-center rounded-lg bg-white p-6 text-left shadow-lg dark:bg-gray-800 dark:shadow-gray-900/30"
>
<div className="flex w-full flex-col items-center gap-4">
{showAvatar && (
<div className="relative h-20 w-20 overflow-hidden rounded-full ring-2 ring-gray-100 dark:ring-gray-700">
<Skeleton className="h-full w-full rounded-full" />
</div>
)}
<div>
<output
aria-live="polite"
aria-busy="true"
aria-label="Loading"
className="group flex h-64 w-80 flex-col items-center rounded-lg bg-white p-6 text-left shadow-lg dark:bg-gray-800 dark:shadow-gray-900/30"
>
<div className="flex w-full flex-col items-center gap-4">
{showAvatar && (
<div className="relative h-20 w-20 overflow-hidden rounded-full ring-2 ring-gray-100 dark:ring-gray-700">
<Skeleton className="h-full w-full rounded-full" />
</div>
)}

<div className="flex w-full flex-col items-center gap-2">
{showName && <Skeleton className="h-7 w-40" />}
<div className="flex w-full flex-col items-center gap-2">
{showName && <Skeleton className="h-7 w-40" />}
</div>
</div>
</div>

{showViewProfile && (
<div className="mt-auto flex items-center justify-center">
<Skeleton className="h-5 w-24" />
</div>
)}
{showViewProfile && (
<div className="mt-auto flex items-center justify-center">
<Skeleton className="h-5 w-24" />
</div>
)}
</output>
</div>
)
}
Expand Down