Skip to content

fix(a11y): Correct color contrast for WCAG AA compliance (#3797) #3798

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
Srizdebnath wants to merge 3 commits into from
Closed

fix(a11y): Correct color contrast for WCAG AA compliance (#3797) #3798

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
067e62d
fix(a11y): Correct color contrast for WCAG compliance
Srizdebnath Feb 6, 2026
f24ee14
fix: resolve conflicts and correct light mode contrast regression
Srizdebnath Feb 6, 2026
5046e49
fix: resolve conflicts and correct light mode contrast regression
Srizdebnath Feb 6, 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
18 changes: 9 additions & 9 deletions frontend/__tests__/unit/components/CalendarButton.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,14 @@ describe('CalendarButton', () => {
jest.clearAllMocks()
globalThis.URL.createObjectURL = jest.fn(() => 'mock-url')
globalThis.URL.revokeObjectURL = jest.fn()
;(getIcsFileUrl as jest.Mock).mockResolvedValue(mockUrl)
; (getIcsFileUrl as jest.Mock).mockResolvedValue(mockUrl)

appendSpy = jest.spyOn(document.body, 'appendChild')
createSpy = jest.spyOn(document, 'createElement')

clickSpy = jest.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
clickSpy = jest.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => { })

jest.spyOn(globalThis, 'alert').mockImplementation(() => {})
jest.spyOn(globalThis, 'alert').mockImplementation(() => { })
})

afterEach(() => {
Expand Down Expand Up @@ -121,9 +121,9 @@ describe('CalendarButton', () => {
})

it('handles errors gracefully when generation fails', async () => {
const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => { })
const errorMock = new Error('Failed to generate')
;(getIcsFileUrl as jest.Mock).mockRejectedValueOnce(errorMock)
; (getIcsFileUrl as jest.Mock).mockRejectedValueOnce(errorMock)

render(<CalendarButton event={mockEvent} />)
const button = screen.getByRole('button')
Expand Down Expand Up @@ -305,13 +305,13 @@ describe('CalendarButton', () => {
startDate: '2025-12-02',
endDate: '2025-12-03',
}}
className="text-gray-600 hover:text-gray-800 dark:text-gray-400"
className="text-gray-800 hover:text-gray-800 dark:text-gray-200"
iconClassName="h-4 w-4"
/>
)
const button = screen.getByRole('button')
expect(button).toHaveClass('text-gray-600')
expect(button).toHaveClass('dark:text-gray-400')
expect(button).toHaveClass('text-gray-800')
expect(button).toHaveClass('dark:text-gray-200')
})

it('works in poster page context with label', () => {
Expand Down Expand Up @@ -358,7 +358,7 @@ describe('CalendarButton', () => {
title: 'Very Long Event Title That Could Potentially Cause Overflow Issues',
startDate: '2025-12-01',
}}
className="flex-shrink-0 text-gray-600"
className="flex-shrink-0 text-gray-800"
/>
)
const button = screen.getByRole('button')
Expand Down
4 changes: 2 additions & 2 deletions frontend/__tests__/unit/components/Card.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -537,7 +537,7 @@ describe('Card', () => {
expect(titleElement).toHaveClass(
'text-base',
'font-semibold',
'text-blue-400',
'text-blue-300',
'hover:text-blue-600',
'sm:text-lg',
'lg:text-2xl'
Expand All @@ -548,7 +548,7 @@ describe('Card', () => {
render(<Card {...baseProps} />)

const markdown = screen.getByTestId('markdown')
expect(markdown).toHaveClass('mt-2', 'w-full', 'text-gray-600', 'dark:text-gray-300')
expect(markdown).toHaveClass('mt-2', 'w-full', 'text-gray-800', 'dark:text-gray-300')
})

it('filters and passes icons correctly to DisplayIcon components', () => {
Expand Down
6 changes: 3 additions & 3 deletions frontend/__tests__/unit/components/CardDetailsPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ jest.mock('components/ChapterMapWrapper', () => ({

jest.mock('components/HealthMetrics', () => ({
__esModule: true,
default: ({ data, ...props }: { data: unknown[]; [key: string]: unknown }) => (
default: ({ data, ...props }: { data: unknown[];[key: string]: unknown }) => (
<div data-testid="health-metrics" {...props}>
Health Metrics ({data.length} items)
</div>
Expand Down Expand Up @@ -262,7 +262,7 @@ jest.mock('components/RecentPullRequests', () => ({

jest.mock('components/MentorshipPullRequest', () => ({
__esModule: true,
default: ({ pr, ...props }: { pr: PullRequest; [key: string]: unknown }) => (
default: ({ pr, ...props }: { pr: PullRequest;[key: string]: unknown }) => (
<div data-testid="pull-request-item" {...props}>
MentorshipPullRequest: {pr.title}
</div>
Expand Down Expand Up @@ -957,7 +957,7 @@ describe('CardDetailsPage', () => {
'min-h-screen',
'bg-white',
'p-8',
'text-gray-600',
'text-gray-800',
'dark:bg-[#212529]',
'dark:text-gray-300'
)
Expand Down
2 changes: 1 addition & 1 deletion frontend/__tests__/unit/components/ContributionStats.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ describe('ContributionStats', () => {

// Verify icons have proper styling classes
icons.forEach((icon) => {
expect(icon).toHaveClass('text-gray-600', 'dark:text-gray-400')
expect(icon).toHaveClass('text-gray-800', 'dark:text-gray-200')
})

// Verify specific viewBox attributes for different react-icons
Expand Down
4 changes: 2 additions & 2 deletions frontend/__tests__/unit/components/ContributorsList.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ jest.mock('components/ShowMoreButton', () => ({
<div className="mt-4 flex justify-start">
<button
onClick={handleClick}
className="flex items-center bg-transparent px-0 text-blue-400"
className="flex items-center bg-transparent px-0 text-blue-300"
>
{isExpanded ? (
<>
Expand Down Expand Up @@ -727,7 +727,7 @@ describe('ContributorsList Component', () => {
'text-ellipsis',
'whitespace-nowrap',
'font-semibold',
'text-blue-400',
'text-blue-300',
'hover:underline'
)
}
Expand Down
4 changes: 2 additions & 2 deletions frontend/__tests__/unit/components/DisplayIcon.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,13 +288,13 @@ describe('DisplayIcon', () => {
it('applies correct icon classes', () => {
render(<DisplayIcon item="starsCount" icons={mockIcons} />)
const icon = screen.getByTestId('font-awesome-icon')
expect(icon).toHaveClass('text-gray-600', 'dark:text-gray-300', 'icon-rotate')
expect(icon).toHaveClass('text-gray-800', 'dark:text-gray-300', 'icon-rotate')
})

it('applies correct text span classes', () => {
render(<DisplayIcon item="license" icons={mockIcons} />)
const textSpan = screen.getByText('MIT')
expect(textSpan).toHaveClass('text-gray-600', 'dark:text-gray-300')
expect(textSpan).toHaveClass('text-gray-800', 'dark:text-gray-300')
})
})

Expand Down
2 changes: 1 addition & 1 deletion frontend/__tests__/unit/components/LeadersList.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ describe('LeadersList Component', () => {
it('applies correct CSS classes to links', () => {
render(<LeadersList entityKey="test" leaders="John Doe" />)
const link = screen.getByTestId('leader-link')
expect(link).toHaveClass('text-gray-600', 'hover:underline', 'dark:text-gray-400')
expect(link).toHaveClass('text-gray-800', 'hover:underline', 'dark:text-gray-200')
})

it('generates correct href for each leader', () => {
Expand Down
8 changes: 4 additions & 4 deletions frontend/__tests__/unit/components/Milestones.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,8 +272,8 @@ describe('Milestones', () => {
'flex-wrap',
'items-center',
'text-sm',
'text-gray-600',
'dark:text-gray-400'
'text-gray-800',
'dark:text-gray-200'
)
})

Expand All @@ -285,9 +285,9 @@ describe('Milestones', () => {
'overflow-hidden',
'text-ellipsis',
'whitespace-nowrap',
'text-gray-600',
'text-gray-800',
'hover:underline',
'dark:text-gray-400'
'dark:text-gray-200'
)
})

Expand Down
42 changes: 21 additions & 21 deletions frontend/__tests__/unit/pages/About.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ jest.mock('components/ShowMoreButton', () => ({
<div className="mt-4 flex justify-start">
<button
onClick={handleClick}
className="flex items-center bg-transparent px-0 text-blue-400"
className="flex items-center bg-transparent px-0 text-blue-300"
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
>
{isExpanded ? (
<>
Expand Down Expand Up @@ -222,7 +222,7 @@ const mockTopContributorsData = {
describe('About Component', () => {
let mockRouter: { push: jest.Mock }
beforeEach(() => {
;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
; (useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
const key = options?.variables?.key

if (query === GetProjectMetadataDocument) {
Expand All @@ -240,7 +240,7 @@ describe('About Component', () => {
return { loading: true }
})
mockRouter = { push: jest.fn() }
;(useRouter as jest.Mock).mockReturnValue(mockRouter)
; (useRouter as jest.Mock).mockReturnValue(mockRouter)
})

afterEach(() => {
Expand Down Expand Up @@ -451,7 +451,7 @@ describe('About Component', () => {
})

test('handles null project in data response gracefully', async () => {
;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
; (useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
if (options?.variables?.key === 'nest') {
return { data: { project: null }, loading: false, error: null }
} else if (['arkid15r', 'kasya', 'mamicidal'].includes(options?.variables?.key)) {
Expand Down Expand Up @@ -501,18 +501,18 @@ describe('About Component', () => {
error: null,
}

;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
if (query === GetProjectMetadataDocument && options?.variables?.key === 'nest') {
return mockProjectData
} else if (query === GetTopContributorsDocument && options?.variables?.key === 'nest') {
return mockTopContributorsData
} else if (options?.variables?.key === 'arkid15r') {
return partialUserData
} else if (options?.variables?.key === 'kasya' || options?.variables?.key === 'mamicidal') {
return mockUserData(options?.variables?.key)
}
return { loading: true }
})
; (useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
if (query === GetProjectMetadataDocument && options?.variables?.key === 'nest') {
return mockProjectData
} else if (query === GetTopContributorsDocument && options?.variables?.key === 'nest') {
return mockTopContributorsData
} else if (options?.variables?.key === 'arkid15r') {
return partialUserData
} else if (options?.variables?.key === 'kasya' || options?.variables?.key === 'mamicidal') {
return mockUserData(options?.variables?.key)
}
return { loading: true }
})

await act(async () => {
render(<About />)
Expand All @@ -526,7 +526,7 @@ describe('About Component', () => {
})

test('renders LoadingSpinner when project data is loading', async () => {
;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
; (useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
if (options?.variables?.key === 'nest') {
return { loading: true, data: null, error: null }
}
Expand All @@ -550,7 +550,7 @@ describe('About Component', () => {
})

test('renders ErrorDisplay when project is null', async () => {
;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
; (useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
if (options?.variables?.key === 'nest') {
return { loading: false, data: { project: null }, error: null }
}
Expand All @@ -572,7 +572,7 @@ describe('About Component', () => {
})

test('triggers toaster error when GraphQL request fails for project', async () => {
;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
; (useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
if (query === GetProjectMetadataDocument && options?.variables?.key === 'nest') {
return { loading: false, data: null, error: new Error('GraphQL error') }
}
Expand All @@ -598,7 +598,7 @@ describe('About Component', () => {
})

test('triggers toaster error when GraphQL request fails for topContributors', async () => {
;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
; (useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
if (query === GetTopContributorsDocument && options?.variables?.key === 'nest') {
return { loading: false, data: null, error: new Error('GraphQL error') }
}
Expand Down Expand Up @@ -686,7 +686,7 @@ describe('About Component', () => {
})
Comment on lines +635 to +695

@coderabbitai coderabbitai Bot Feb 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Duplicate test cases — six tests are repeated verbatim.

The following tests at lines 635–695 duplicate earlier tests in the same describe block:

Duplicate (line) Original (line) Test name
635 228 renders mission and who its for sections correctly
649 242 renders mission section
657 250 renders 'Who It's For' section
665 258 renders key features section correctly / renders key features section
676 272 renders get involved section correctly / renders get involved section
687 286 renders project history timeline correctly / renders project history timeline section

Jest will run both copies (last one wins for name collisions), which wastes CI time, produces confusing output, and masks whether the "real" test is passing. Remove the duplicates.

🤖 Prompt for AI Agents 
In `@frontend/__tests__/unit/pages/About.test.tsx` around lines 635 - 695, Remove
the duplicated Jest tests in the About.test.tsx file by deleting the repeated
test blocks with these names: "renders mission and who its for sections
correctly", "renders mission section", "renders 'Who It's For' section",
"renders key features section" (or "renders key features section correctly"),
"renders get involved section" (or "renders get involved section correctly"),
and "renders project history timeline section" (or "renders project history
timeline correctly"); keep only the original instances of these tests (the first
occurrences) so each assertion set (render(<About />) + screen.getByText(...)
expectations) appears exactly once.


test('triggers toaster error when GraphQL request fails for a leader', async () => {
;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
; (useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
if (query === GetLeaderDataDocument && options?.variables?.key === 'arkid15r') {
return { loading: false, data: null, error: new Error('GraphQL error for leader') }
}
Expand Down
4 changes: 2 additions & 2 deletions frontend/__tests__/unit/pages/ModuleIssueDetailsPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,12 +217,12 @@ describe('ModuleIssueDetailsPage', () => {
{
dayOffset: 10,
expectedText: /\(10 days left\)/,
expectedColor: 'text-gray-600 dark:text-gray-300',
expectedColor: 'text-gray-800 dark:text-gray-300',
},
{
dayOffset: null,
expectedText: /No deadline set/,
expectedColor: 'text-gray-600 dark:text-gray-300',
expectedColor: 'text-gray-800 dark:text-gray-300',
},
])(
'renders deadline text for deadline with offset $dayOffset',
Expand Down
Loading