From a7c4189abb327a11971c66f212a38a9e749c5c1a Mon Sep 17 00:00:00 2001
From: Anurag Yadav <anuragyadav2787@gmail.com>
Date: Wed, 14 Jan 2026 04:46:36 +0530
Subject: [PATCH 1/3] remove data-testid from production components

---
 .../components/EntityActions.a11y.test.tsx    |  2 +-
 .../a11y/components/Footer.a11y.test.tsx      |  2 +-
 .../components/RepositoryCard.a11y.test.tsx   |  2 +-
 .../components/ContributionStats.test.tsx     | 10 +--
 .../unit/components/EntityActions.test.tsx    | 62 +++++++++----------
 .../unit/components/ProgramCard.test.tsx      |  6 +-
 .../unit/components/RepositoryCard.test.tsx   | 14 ++---
 .../__tests__/unit/components/Search.test.tsx |  8 +--
 .../unit/components/ToggleableList.test.tsx   | 10 +--
 .../unit/pages/OrganizationDetails.test.tsx   |  2 +-
 .../pages/ProgramDetailsMentorship.test.tsx   |  4 +-
 .../__tests__/unit/pages/UserDetails.test.tsx |  4 +-
 frontend/src/app/members/[memberKey]/page.tsx |  2 +-
 .../organizations/[organizationKey]/page.tsx  |  2 +-
 frontend/src/components/Badges.tsx            |  2 +-
 frontend/src/components/ContributionStats.tsx |  2 +-
 frontend/src/components/EntityActions.tsx     |  1 -
 frontend/src/components/Footer.tsx            |  1 -
 frontend/src/components/Search.tsx            |  1 -
 frontend/src/components/ShowMoreButton.tsx    |  1 -
 20 files changed, 67 insertions(+), 71 deletions(-)

diff --git a/frontend/__tests__/a11y/components/EntityActions.a11y.test.tsx b/frontend/__tests__/a11y/components/EntityActions.a11y.test.tsx
index ee85711ccf..78e422ac67 100644
--- a/frontend/__tests__/a11y/components/EntityActions.a11y.test.tsx
+++ b/frontend/__tests__/a11y/components/EntityActions.a11y.test.tsx
@@ -34,7 +34,7 @@ describe('EntityActions a11y', () => {
       />
     )
 
-    const toggleButton = screen.getByTestId('program-actions-button')
+    const toggleButton = screen.getByRole('button', { name: /Program actions menu/ })
     fireEvent.click(toggleButton)
 
     const results = await axe(container)
diff --git a/frontend/__tests__/a11y/components/Footer.a11y.test.tsx b/frontend/__tests__/a11y/components/Footer.a11y.test.tsx
index 48443c4ab5..23d79de291 100644
--- a/frontend/__tests__/a11y/components/Footer.a11y.test.tsx
+++ b/frontend/__tests__/a11y/components/Footer.a11y.test.tsx
@@ -16,7 +16,7 @@ describe('Footer a11y', () => {
   it('should not have any accessibility violations when section is opened', async () => {
     const { container } = render(<Footer />)
 
-    const button = screen.getByTestId('footer-section-button-Resources')
+    const button = screen.getByRole('button', { name: /Resources/ })
     fireEvent.click(button)
 
     const results = await axe(container)
diff --git a/frontend/__tests__/a11y/components/RepositoryCard.a11y.test.tsx b/frontend/__tests__/a11y/components/RepositoryCard.a11y.test.tsx
index 9690ef47db..e394607e39 100644
--- a/frontend/__tests__/a11y/components/RepositoryCard.a11y.test.tsx
+++ b/frontend/__tests__/a11y/components/RepositoryCard.a11y.test.tsx
@@ -45,7 +45,7 @@ describe('RepositoryCard a11y', () => {
     const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
     const { container } = render(<RepositoryCard repositories={repositories} />)
 
-    const showMoreButton = screen.getByTestId('show-more-button')
+    const showMoreButton = screen.getByRole('button', { name: /show more/i })
     fireEvent.click(showMoreButton)
 
     const results = await axe(container)
diff --git a/frontend/__tests__/unit/components/ContributionStats.test.tsx b/frontend/__tests__/unit/components/ContributionStats.test.tsx
index a2512b3f8b..06c278ede8 100644
--- a/frontend/__tests__/unit/components/ContributionStats.test.tsx
+++ b/frontend/__tests__/unit/components/ContributionStats.test.tsx
@@ -57,12 +57,12 @@ describe('ContributionStats', () => {
     it('renders all react-icons correctly', () => {
       render(<ContributionStats {...defaultProps} />)
 
-      const container = screen.getByTestId('contribution-stats')
+      const container = screen.getByRole('region')
       const icons = container.querySelectorAll('svg')
       expect(icons).toHaveLength(5) // Title icon + 4 stat icons
 
       // Verify specific icon data attributes
-      expect(screen.getByTestId('contribution-stats')).toBeInTheDocument()
+      expect(screen.getByRole('region')).toBeInTheDocument()
       expect(screen.getByText('Test Contribution Activity')).toBeInTheDocument()
     })
 
@@ -229,7 +229,7 @@ describe('ContributionStats', () => {
       render(<ContributionStats {...defaultProps} />)
 
       // Check that the container exists and the grid has proper classes
-      const container = screen.getByTestId('contribution-stats')
+      const container = screen.getByRole('region')
       expect(container).toBeInTheDocument()
 
       // The mb-6 class is on the grid div, not the container
@@ -293,7 +293,7 @@ describe('ContributionStats', () => {
     it('renders with proper CSS classes for styling', () => {
       render(<ContributionStats {...defaultProps} />)
 
-      const container = screen.getByTestId('contribution-stats')
+      const container = screen.getByRole('region')
       expect(container).toBeInTheDocument()
 
       const heading = container.querySelector('h2')
@@ -307,7 +307,7 @@ describe('ContributionStats', () => {
     it('renders all required icons with proper attributes', () => {
       render(<ContributionStats {...defaultProps} />)
 
-      const container = screen.getByTestId('contribution-stats')
+      const container = screen.getByRole('region')
       const icons = container.querySelectorAll('svg')
       expect(icons).toHaveLength(5)
 
diff --git a/frontend/__tests__/unit/components/EntityActions.test.tsx b/frontend/__tests__/unit/components/EntityActions.test.tsx
index dac23e12be..d94d430dcd 100644
--- a/frontend/__tests__/unit/components/EntityActions.test.tsx
+++ b/frontend/__tests__/unit/components/EntityActions.test.tsx
@@ -20,7 +20,7 @@ describe('EntityActions', () => {
   describe('Program Actions - Create Module', () => {
     it('navigates to create module page when Add Module is clicked', () => {
       render(<EntityActions type="program" programKey="test-program" />)
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       const addModuleButton = screen.getByText('Add Module')
@@ -31,7 +31,7 @@ describe('EntityActions', () => {
 
     it('closes dropdown after clicking Add Module', () => {
       render(<EntityActions type="program" programKey="test-program" />)
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
       expect(button).toHaveAttribute('aria-expanded', 'true')
 
@@ -45,7 +45,7 @@ describe('EntityActions', () => {
   describe('Module Actions - Edit Module', () => {
     it('navigates to edit module page when Edit is clicked with moduleKey', () => {
       render(<EntityActions type="module" programKey="test-program" moduleKey="test-module" />)
-      const button = screen.getByTestId('module-actions-button')
+      const button = screen.getByRole('button', { name: /Module actions menu/ })
       fireEvent.click(button)
 
       const editButton = screen.getByText('Edit')
@@ -58,7 +58,7 @@ describe('EntityActions', () => {
 
     it('does not navigate when moduleKey is missing for edit action', () => {
       render(<EntityActions type="module" programKey="test-program" />)
-      const button = screen.getByTestId('module-actions-button')
+      const button = screen.getByRole('button', { name: /Module actions menu/ })
       fireEvent.click(button)
 
       const editButton = screen.getByText('Edit')
@@ -69,7 +69,7 @@ describe('EntityActions', () => {
 
     it('closes dropdown after clicking Edit', () => {
       render(<EntityActions type="module" programKey="test-program" moduleKey="test-module" />)
-      const button = screen.getByTestId('module-actions-button')
+      const button = screen.getByRole('button', { name: /Module actions menu/ })
       fireEvent.click(button)
       expect(button).toHaveAttribute('aria-expanded', 'true')
 
@@ -83,7 +83,7 @@ describe('EntityActions', () => {
   describe('Module Actions - View Issues', () => {
     it('navigates to view issues page when View Issues is clicked with moduleKey', () => {
       render(<EntityActions type="module" programKey="test-program" moduleKey="test-module" />)
-      const button = screen.getByTestId('module-actions-button')
+      const button = screen.getByRole('button', { name: /Module actions menu/ })
       fireEvent.click(button)
 
       const viewIssuesButton = screen.getByText('View Issues')
@@ -96,7 +96,7 @@ describe('EntityActions', () => {
 
     it('does not navigate when moduleKey is missing for view issues action', () => {
       render(<EntityActions type="module" programKey="test-program" />)
-      const button = screen.getByTestId('module-actions-button')
+      const button = screen.getByRole('button', { name: /Module actions menu/ })
       fireEvent.click(button)
 
       const viewIssuesButton = screen.getByText('View Issues')
@@ -107,7 +107,7 @@ describe('EntityActions', () => {
 
     it('closes dropdown after clicking View Issues', () => {
       render(<EntityActions type="module" programKey="test-program" moduleKey="test-module" />)
-      const button = screen.getByTestId('module-actions-button')
+      const button = screen.getByRole('button', { name: /Module actions menu/ })
       fireEvent.click(button)
       expect(button).toHaveAttribute('aria-expanded', 'true')
 
@@ -129,7 +129,7 @@ describe('EntityActions', () => {
           setStatus={mockSetStatus}
         />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       const publishButton = screen.getByText('Publish')
@@ -142,7 +142,7 @@ describe('EntityActions', () => {
       render(
         <EntityActions type="program" programKey="test-program" status={ProgramStatusEnum.Draft} />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       expect(screen.getByText('Publish')).toBeInTheDocument()
@@ -156,7 +156,7 @@ describe('EntityActions', () => {
           status={ProgramStatusEnum.Published}
         />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       expect(screen.queryByText('Publish')).not.toBeInTheDocument()
@@ -172,7 +172,7 @@ describe('EntityActions', () => {
           setStatus={mockSetStatus}
         />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
       expect(button).toHaveAttribute('aria-expanded', 'true')
 
@@ -194,7 +194,7 @@ describe('EntityActions', () => {
           setStatus={mockSetStatus}
         />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       const unpublishButton = screen.getByText('Unpublish')
@@ -213,7 +213,7 @@ describe('EntityActions', () => {
           setStatus={mockSetStatus}
         />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       const unpublishButton = screen.getByText('Unpublish')
@@ -230,7 +230,7 @@ describe('EntityActions', () => {
           status={ProgramStatusEnum.Published}
         />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       expect(screen.getByText('Unpublish')).toBeInTheDocument()
@@ -244,7 +244,7 @@ describe('EntityActions', () => {
           status={ProgramStatusEnum.Completed}
         />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       expect(screen.getByText('Unpublish')).toBeInTheDocument()
@@ -254,7 +254,7 @@ describe('EntityActions', () => {
       render(
         <EntityActions type="program" programKey="test-program" status={ProgramStatusEnum.Draft} />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       expect(screen.queryByText('Unpublish')).not.toBeInTheDocument()
@@ -270,7 +270,7 @@ describe('EntityActions', () => {
           setStatus={mockSetStatus}
         />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
       expect(button).toHaveAttribute('aria-expanded', 'true')
 
@@ -292,7 +292,7 @@ describe('EntityActions', () => {
           setStatus={mockSetStatus}
         />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       const completedButton = screen.getByText('Mark as Completed')
@@ -309,7 +309,7 @@ describe('EntityActions', () => {
           status={ProgramStatusEnum.Published}
         />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       expect(screen.getByText('Mark as Completed')).toBeInTheDocument()
@@ -319,7 +319,7 @@ describe('EntityActions', () => {
       render(
         <EntityActions type="program" programKey="test-program" status={ProgramStatusEnum.Draft} />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       expect(screen.queryByText('Mark as Completed')).not.toBeInTheDocument()
@@ -333,7 +333,7 @@ describe('EntityActions', () => {
           status={ProgramStatusEnum.Completed}
         />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       expect(screen.queryByText('Mark as Completed')).not.toBeInTheDocument()
@@ -349,7 +349,7 @@ describe('EntityActions', () => {
           setStatus={mockSetStatus}
         />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
       expect(button).toHaveAttribute('aria-expanded', 'true')
 
@@ -363,7 +363,7 @@ describe('EntityActions', () => {
   describe('Click Outside Behavior', () => {
     it('closes dropdown when clicking outside', async () => {
       render(<EntityActions type="program" programKey="test-program" />)
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
       expect(button).toHaveAttribute('aria-expanded', 'true')
 
@@ -376,7 +376,7 @@ describe('EntityActions', () => {
 
     it('does not close dropdown when clicking inside', () => {
       render(<EntityActions type="program" programKey="test-program" />)
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
       expect(button).toHaveAttribute('aria-expanded', 'true')
 
@@ -403,7 +403,7 @@ describe('EntityActions', () => {
       render(
         <EntityActions type="program" programKey="test-program" status={ProgramStatusEnum.Draft} />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       const publishButton = screen.getByText('Publish')
@@ -419,7 +419,7 @@ describe('EntityActions', () => {
           status={ProgramStatusEnum.Published}
         />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       const unpublishButton = screen.getByText('Unpublish')
@@ -434,7 +434,7 @@ describe('EntityActions', () => {
           status={ProgramStatusEnum.Published}
         />
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       const completedButton = screen.getByText('Mark as Completed')
@@ -443,7 +443,7 @@ describe('EntityActions', () => {
 
     it('handles undefined status gracefully', () => {
       render(<EntityActions type="program" programKey="test-program" />)
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       // Should still show Edit and Add Module
@@ -461,7 +461,7 @@ describe('EntityActions', () => {
           <EntityActions type="program" programKey="test-program" />
         </div>
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       expect(mockParentClick).not.toHaveBeenCalled()
@@ -475,7 +475,7 @@ describe('EntityActions', () => {
           <EntityActions type="program" programKey="test-program" />
         </div>
       )
-      const button = screen.getByTestId('program-actions-button')
+      const button = screen.getByRole('button', { name: /Program actions menu/ })
       fireEvent.click(button)
 
       const editButton = screen.getByText('Edit')
diff --git a/frontend/__tests__/unit/components/ProgramCard.test.tsx b/frontend/__tests__/unit/components/ProgramCard.test.tsx
index 487d4dcb58..4cb26cff81 100644
--- a/frontend/__tests__/unit/components/ProgramCard.test.tsx
+++ b/frontend/__tests__/unit/components/ProgramCard.test.tsx
@@ -147,7 +147,7 @@ describe('ProgramCard', () => {
         />
       )
 
-      const actionsButton = screen.getByTestId('program-actions-button')
+      const actionsButton = screen.getByRole('button', { name: /Program actions menu/ })
 
       await act(async () => {
         fireEvent.click(actionsButton)
@@ -416,7 +416,7 @@ describe('ProgramCard', () => {
         />
       )
 
-      expect(screen.getByTestId('program-actions-button')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /Program actions menu/ })).toBeInTheDocument()
     })
   })
 
@@ -431,7 +431,7 @@ describe('ProgramCard', () => {
         />
       )
 
-      expect(screen.getByTestId('program-actions-button')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /Program actions menu/ })).toBeInTheDocument()
     })
 
     it('handles program with minimal data', () => {
diff --git a/frontend/__tests__/unit/components/RepositoryCard.test.tsx b/frontend/__tests__/unit/components/RepositoryCard.test.tsx
index 5919a0bfb5..2c0240a5cf 100644
--- a/frontend/__tests__/unit/components/RepositoryCard.test.tsx
+++ b/frontend/__tests__/unit/components/RepositoryCard.test.tsx
@@ -75,7 +75,7 @@ describe('RepositoryCard', () => {
 
   it('renders without crashing with empty repositories', () => {
     render(<RepositoryCard repositories={[]} />)
-    expect(screen.queryByTestId('show-more-button')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /Show/ })).not.toBeInTheDocument()
   })
 
   it('shows first 4 repositories initially when there are more than 4', () => {
@@ -104,7 +104,7 @@ describe('RepositoryCard', () => {
 
     render(<RepositoryCard repositories={repositories} />)
 
-    expect(screen.getByTestId('show-more-button')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Show/ })).toBeInTheDocument()
   })
 
   it('does not display ShowMoreButton when there are 4 or fewer repositories', () => {
@@ -112,7 +112,7 @@ describe('RepositoryCard', () => {
 
     render(<RepositoryCard repositories={repositories} />)
 
-    expect(screen.queryByTestId('show-more-button')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /Show/ })).not.toBeInTheDocument()
   })
 
   it('toggles between showing 4 and all repositories when clicked', () => {
@@ -125,14 +125,14 @@ describe('RepositoryCard', () => {
     expect(screen.queryByText('Repository 4')).not.toBeInTheDocument()
 
     // Click show more
-    fireEvent.click(screen.getByTestId('show-more-button'))
+    fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
     // Now shows all repositories
     expect(screen.getByText('Repository 4')).toBeInTheDocument()
     expect(screen.getByText('Repository 5')).toBeInTheDocument()
 
     // Click show less
-    fireEvent.click(screen.getByTestId('show-more-button'))
+    fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
     // Back to showing first 4
     expect(screen.queryByText('Repository 4')).not.toBeInTheDocument()
@@ -316,11 +316,11 @@ describe('RepositoryCard', () => {
 
       expect(screen.getAllByText('Archived')).toHaveLength(2)
 
-      fireEvent.click(screen.getByTestId('show-more-button'))
+      fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
       expect(screen.getAllByText('Archived')).toHaveLength(3)
 
-      fireEvent.click(screen.getByTestId('show-more-button'))
+      fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
       expect(screen.getAllByText('Archived')).toHaveLength(2)
     })
diff --git a/frontend/__tests__/unit/components/Search.test.tsx b/frontend/__tests__/unit/components/Search.test.tsx
index 3b378b6e32..e425a25663 100644
--- a/frontend/__tests__/unit/components/Search.test.tsx
+++ b/frontend/__tests__/unit/components/Search.test.tsx
@@ -372,10 +372,10 @@ describe('SearchBar Component', () => {
       )
     })
 
-    it('has the correct class names for search icon', () => {
-      render(<SearchBar {...defaultProps} isLoaded={true} />)
-      const searchIcon = screen.getByTestId('search-icon')
-      expect(searchIcon).toBeInTheDocument()
+    it('renders the search input', () => {
+      render(<SearchBar {...defaultProps} isLoaded />)
+
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
     })
 
     it('maintains proper DOM structure with all elements', () => {
diff --git a/frontend/__tests__/unit/components/ToggleableList.test.tsx b/frontend/__tests__/unit/components/ToggleableList.test.tsx
index e6be542cad..55876d51d8 100644
--- a/frontend/__tests__/unit/components/ToggleableList.test.tsx
+++ b/frontend/__tests__/unit/components/ToggleableList.test.tsx
@@ -77,7 +77,7 @@ describe('ToggleableList', () => {
   it('shows Show More button when items exceed limit', () => {
     render(<ToggleableList items={mockItems} label="test-label" limit={5} />)
 
-    expect(screen.getByTestId('show-more-button')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /show more/i })).toBeInTheDocument()
   })
 
   it('expands to show all items when ShowMoreButton is clicked', () => {
@@ -88,7 +88,7 @@ describe('ToggleableList', () => {
     expect(screen.queryByText('Item 15')).not.toBeInTheDocument()
 
     // Click Show More
-    fireEvent.click(screen.getByTestId('show-more-button'))
+    fireEvent.click(screen.getByRole('button', { name: /show more/i }))
 
     // All items should now be visible
     expect(screen.getByText('Item 6')).toBeInTheDocument()
@@ -99,11 +99,11 @@ describe('ToggleableList', () => {
     render(<ToggleableList items={mockItems} label="Collapsible Items" limit={5} />)
 
     // Expand
-    fireEvent.click(screen.getByTestId('show-more-button'))
+    fireEvent.click(screen.getByRole('button', { name: /show more/i }))
     expect(screen.getByText('Item 10')).toBeInTheDocument()
 
     // Collapse
-    fireEvent.click(screen.getByTestId('show-more-button'))
+    fireEvent.click(screen.getByRole('button', { name: /show more/i }))
     expect(screen.queryByText('Item 6')).not.toBeInTheDocument()
     expect(screen.getByText('Item 5')).toBeInTheDocument()
   })
@@ -140,7 +140,7 @@ describe('ToggleableList', () => {
   it('handles limit of 0', () => {
     render(<ToggleableList items={mockItems} label="test-label" limit={0} />)
     // Should show ShowMoreButton since limit is exceeded
-    expect(screen.getByTestId('show-more-button')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /show more/i })).toBeInTheDocument()
     for (const item of mockItems) {
       expect(screen.queryByText(item)).not.toBeInTheDocument()
     }
diff --git a/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx b/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx
index 4d89222941..eb9a72076d 100644
--- a/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx
@@ -55,7 +55,7 @@ describe('OrganizationDetailsPage', () => {
 
     // Use semantic role query instead of CSS selectors for better stability
     await waitFor(() => {
-      expect(screen.getByTestId('org-loading-skeleton')).toBeInTheDocument()
+      expect(screen.getByRole('status')).toBeInTheDocument()
     })
   })
 
diff --git a/frontend/__tests__/unit/pages/ProgramDetailsMentorship.test.tsx b/frontend/__tests__/unit/pages/ProgramDetailsMentorship.test.tsx
index a636d3973a..8e4789b855 100644
--- a/frontend/__tests__/unit/pages/ProgramDetailsMentorship.test.tsx
+++ b/frontend/__tests__/unit/pages/ProgramDetailsMentorship.test.tsx
@@ -93,7 +93,7 @@ describe('ProgramDetailsPage', () => {
       expect(screen.getByText('Test Program')).toBeInTheDocument()
       expect(screen.getByText('Sample summary')).toBeInTheDocument()
       expect(screen.getByText('Draft')).toBeInTheDocument()
-      expect(screen.queryByTestId('program-actions-button')).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: /Program actions menu/ })).not.toBeInTheDocument()
     })
   })
 
@@ -129,7 +129,7 @@ describe('ProgramDetailsPage', () => {
       mockUpdateProgram.mockResolvedValue({})
       render(<ProgramDetailsPage />)
 
-      const actionsButton = await screen.findByTestId('program-actions-button')
+      const actionsButton = await screen.findByRole('button', { name: /Program actions menu/ })
       fireEvent.click(actionsButton)
 
       const publishButton = await screen.findByRole('menuitem', { name: 'Publish' })
diff --git a/frontend/__tests__/unit/pages/UserDetails.test.tsx b/frontend/__tests__/unit/pages/UserDetails.test.tsx
index 5f29316b20..7b76c9a112 100644
--- a/frontend/__tests__/unit/pages/UserDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/UserDetails.test.tsx
@@ -104,9 +104,9 @@ describe('UserDetailsPage', () => {
 
     render(<UserDetailsPage />)
 
-    // Use semantic role query instead of CSS selectors for better stability
+    // Check that the loading state is rendered using semantic role
     await waitFor(() => {
-      expect(screen.getByTestId('user-loading-skeleton')).toBeInTheDocument()
+      expect(screen.getByRole('status')).toBeInTheDocument()
     })
   })
 
diff --git a/frontend/src/app/members/[memberKey]/page.tsx b/frontend/src/app/members/[memberKey]/page.tsx
index e01dcbc638..1f2c2b4859 100644
--- a/frontend/src/app/members/[memberKey]/page.tsx
+++ b/frontend/src/app/members/[memberKey]/page.tsx
@@ -83,7 +83,7 @@ const UserDetailsPage: React.FC = () => {
 
   if (isLoading) {
     return (
-      <div data-testid="user-loading-skeleton">
+      <div role="status">
         <MemberDetailsPageSkeleton />
       </div>
     )
diff --git a/frontend/src/app/organizations/[organizationKey]/page.tsx b/frontend/src/app/organizations/[organizationKey]/page.tsx
index 76d07911c4..7b76ff8ff4 100644
--- a/frontend/src/app/organizations/[organizationKey]/page.tsx
+++ b/frontend/src/app/organizations/[organizationKey]/page.tsx
@@ -29,7 +29,7 @@ const OrganizationDetailsPage = () => {
 
   if (isLoading) {
     return (
-      <div data-testid="org-loading-skeleton">
+      <div role="status">
         <OrganizationDetailsPageSkeleton />
       </div>
     )
diff --git a/frontend/src/components/Badges.tsx b/frontend/src/components/Badges.tsx
index d8f6b868df..e87548f038 100644
--- a/frontend/src/components/Badges.tsx
+++ b/frontend/src/components/Badges.tsx
@@ -29,7 +29,7 @@ const Badges = ({ name, cssClass, showTooltip = true }: BadgeProps) => {
   return (
     <div className="inline-flex items-center">
       <Tooltip content={name} isDisabled={!showTooltip}>
-        <IconWrapper icon={icon} className="h-4 w-4" data-testid="badge-icon" />
+        <IconWrapper icon={icon} className="h-4 w-4" />
       </Tooltip>
     </div>
   )
diff --git a/frontend/src/components/ContributionStats.tsx b/frontend/src/components/ContributionStats.tsx
index b3a7b69655..04f53cb9ec 100644
--- a/frontend/src/components/ContributionStats.tsx
+++ b/frontend/src/components/ContributionStats.tsx
@@ -12,7 +12,7 @@ export default function ContributionStats({ title, stats }: Readonly<Contributio
   }
 
   return (
-    <div data-testid="contribution-stats" className="">
+    <div role="region" className="">
       <h2 className="mb-4 flex items-center gap-2 text-lg font-semibold text-gray-800 sm:text-xl md:text-2xl dark:text-gray-200">
         <FaChartLine className="h-5 w-5 text-gray-600 sm:h-6 sm:w-6 dark:text-gray-400" />
         {title}
diff --git a/frontend/src/components/EntityActions.tsx b/frontend/src/components/EntityActions.tsx
index b9b9ae19ee..f4e2dd9ea1 100644
--- a/frontend/src/components/EntityActions.tsx
+++ b/frontend/src/components/EntityActions.tsx
@@ -96,7 +96,6 @@ const EntityActions: React.FC<EntityActionsProps> = ({
   return (
     <div className="relative" ref={dropdownRef}>
       <button
-        data-testid={`${type}-actions-button`}
         type="button"
         onClick={handleToggle}
         className="cursor-pointer rounded px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index e0b0877920..54e98b3bd2 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -31,7 +31,6 @@ export default function Footer() {
                 className="flex w-full items-center justify-between bg-transparent pl-0 text-left text-lg font-semibold focus:ring-slate-400 focus:outline-hidden lg:cursor-default"
                 aria-expanded={openSection === section.title}
                 aria-controls={`footer-section-${section.title}`}
-                data-testid={`footer-section-button-${section.title}`}
               >
                 <h3>{section.title}</h3>
                 <div className="transition-transform duration-200 lg:hidden">
diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx
index 7848aa4d80..1882e7c945 100644
--- a/frontend/src/components/Search.tsx
+++ b/frontend/src/components/Search.tsx
@@ -79,7 +79,6 @@ const SearchBar: React.FC<SearchProps> = ({
         {isLoaded ? (
           <>
             <FaSearch
-              data-testid="search-icon"
               className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400"
               aria-hidden="true"
             />
diff --git a/frontend/src/components/ShowMoreButton.tsx b/frontend/src/components/ShowMoreButton.tsx
index a3f9e4eed0..54f01a3ff1 100644
--- a/frontend/src/components/ShowMoreButton.tsx
+++ b/frontend/src/components/ShowMoreButton.tsx
@@ -13,7 +13,6 @@ const ShowMoreButton = ({ onToggle }: { onToggle: () => void }) => {
   return (
     <div className="mt-4 flex justify-start">
       <Button
-        data-testid="show-more-button"
         type="button"
         disableAnimation
         onPress={handleToggle}

From c68841693e2a7410bab43346cb25938577ff0c89 Mon Sep 17 00:00:00 2001
From: Anurag Yadav <anuragyadav2787@gmail.com>
Date: Wed, 14 Jan 2026 05:16:00 +0530
Subject: [PATCH 2/3] fixed sonarqube warning

---
 frontend/src/app/members/[memberKey]/page.tsx             | 4 ++--
 frontend/src/app/organizations/[organizationKey]/page.tsx | 4 ++--
 frontend/src/components/ContributionStats.tsx             | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/members/[memberKey]/page.tsx b/frontend/src/app/members/[memberKey]/page.tsx
index 1f2c2b4859..38c07bbe20 100644
--- a/frontend/src/app/members/[memberKey]/page.tsx
+++ b/frontend/src/app/members/[memberKey]/page.tsx
@@ -83,9 +83,9 @@ const UserDetailsPage: React.FC = () => {
 
   if (isLoading) {
     return (
-      <div role="status">
+      <output>
         <MemberDetailsPageSkeleton />
-      </div>
+      </output>
     )
   }
 
diff --git a/frontend/src/app/organizations/[organizationKey]/page.tsx b/frontend/src/app/organizations/[organizationKey]/page.tsx
index 7b76ff8ff4..95350011fa 100644
--- a/frontend/src/app/organizations/[organizationKey]/page.tsx
+++ b/frontend/src/app/organizations/[organizationKey]/page.tsx
@@ -29,9 +29,9 @@ const OrganizationDetailsPage = () => {
 
   if (isLoading) {
     return (
-      <div role="status">
+      <output>
         <OrganizationDetailsPageSkeleton />
-      </div>
+      </output>
     )
   }
 
diff --git a/frontend/src/components/ContributionStats.tsx b/frontend/src/components/ContributionStats.tsx
index 04f53cb9ec..e7e5397266 100644
--- a/frontend/src/components/ContributionStats.tsx
+++ b/frontend/src/components/ContributionStats.tsx
@@ -12,7 +12,7 @@ export default function ContributionStats({ title, stats }: Readonly<Contributio
   }
 
   return (
-    <div role="region" className="">
+    <section aria-labelledby="contribution-stats-title" className="">
       <h2 className="mb-4 flex items-center gap-2 text-lg font-semibold text-gray-800 sm:text-xl md:text-2xl dark:text-gray-200">
         <FaChartLine className="h-5 w-5 text-gray-600 sm:h-6 sm:w-6 dark:text-gray-400" />
         {title}
@@ -59,6 +59,6 @@ export default function ContributionStats({ title, stats }: Readonly<Contributio
           </div>
         </div>
       </div>
-    </div>
+    </section>
   )
 }

From fee9dda672832d2b7cce57c65901a41af93ef5cf Mon Sep 17 00:00:00 2001
From: Arkadii Yakovets <arkadii.yakovets@owasp.org>
Date: Tue, 13 Jan 2026 17:25:31 -0800
Subject: [PATCH 3/3] Update code

---
 frontend/src/components/ContributionStats.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ContributionStats.tsx b/frontend/src/components/ContributionStats.tsx
index e7e5397266..e68071e20e 100644
--- a/frontend/src/components/ContributionStats.tsx
+++ b/frontend/src/components/ContributionStats.tsx
@@ -12,7 +12,7 @@ export default function ContributionStats({ title, stats }: Readonly<Contributio
   }
 
   return (
-    <section aria-labelledby="contribution-stats-title" className="">
+    <section aria-labelledby="contribution-stats-title">
       <h2 className="mb-4 flex items-center gap-2 text-lg font-semibold text-gray-800 sm:text-xl md:text-2xl dark:text-gray-200">
         <FaChartLine className="h-5 w-5 text-gray-600 sm:h-6 sm:w-6 dark:text-gray-400" />
         {title}