feat: improve roadmap accessibility and WCAG 2.1 compliance#319
Conversation
📝 WalkthroughWalkthroughThis PR enhances accessibility across six roadmap UI components by adding ARIA attributes, focus management, semantic HTML elements, and keyboard navigation indicators. Changes include automatic focus handling for modal close buttons, semantic progress bar and list markup, focus-visible ring styling for keyboard navigation, dynamic aria-labels reflecting component state, and proper heading hierarchy for content structure. ChangesRoadmap Accessibility Improvements
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Suggested labels
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Implemented focused WCAG-oriented accessibility improvements across roadmap pages, including keyboard navigation enhancements, semantic structure fixes, visible focus states, and screen-reader support while preserving the existing UI and functionality. Looking forward to your feedback and review. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
client/src/module/student/roadmap/RoadmapCompletionModal.tsx (2)
222-222: 🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick winReplace arbitrary text size with standard Tailwind scale class.
The
text-[10px]utility uses an arbitrary bracket size, which violates the coding guidelines. Use the standardtext-xsclass instead (12px is the closest standard size).As per coding guidelines, "Do not use arbitrary bracket sizes like
text-[17px], use standard scale classes instead".♻️ Proposed fix
- <p className="text-[10px] font-mono uppercase tracking-[0.28em] text-lime-400 mb-2"> + <p className="text-xs font-mono uppercase tracking-[0.28em] text-lime-400 mb-2"> roadmap complete </p>- <p className="text-[10px] font-mono uppercase tracking-[0.22em] text-stone-500 mb-4"> + <p className="text-xs font-mono uppercase tracking-[0.22em] text-stone-500 mb-4"> share your achievement </p>Also applies to: 253-253
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@client/src/module/student/roadmap/RoadmapCompletionModal.tsx` at line 222, There are Tailwind arbitrary text-size utilities used in RoadmapCompletionModal (className containing "text-[10px]" on the paragraph elements); replace those arbitrary sizes with the standard scale class "text-xs" in the affected elements (e.g., the <p> with className including "text-[10px] font-mono ..." and the other occurrence around line 253) so the components use the approved Tailwind scale.
181-181: 🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick winReplace
bg-gradient-*withbg-linear-*for Tailwind v4 compliance.Tailwind CSS v4 requires using
bg-linear-to-*instead of the deprecatedbg-gradient-to-*shorthand.As per coding guidelines, "Use
bg-linear-to-*instead ofbg-gradient-*shorthand in TailwindCSS".♻️ Proposed fix
- <div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-lime-400/60 to-transparent" /> + <div className="absolute top-0 inset-x-0 h-px bg-linear-to-r from-transparent via-lime-400/60 to-transparent" />- className="my-6 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" + className="my-6 h-px bg-linear-to-r from-transparent via-white/10 to-transparent"Also applies to: 243-243
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@client/src/module/student/roadmap/RoadmapCompletionModal.tsx` at line 181, Update the Tailwind utility class used in RoadmapCompletionModal: replace any occurrences of the deprecated "bg-gradient-to-r" shorthand (e.g., the div with className containing "bg-gradient-to-r from-transparent via-lime-400/60 to-transparent") with the Tailwind v4 compliant "bg-linear-to-r" variant; search for the same pattern in RoadmapCompletionModal (also appears around the other occurrence noted) and change each "bg-gradient-to-*" to "bg-linear-to-*" while keeping the color stops and opacity parts intact.
🧹 Nitpick comments (1)
client/src/module/student/roadmap/RoadmapsLandingPage.tsx (1)
495-503: 🏗️ Heavy liftRefactor FilterChip onClick to use stable callback reference for effective memoization.
FilterChipis rendered in mapped filter lists (category, tags, level). To implementReact.memoeffectively, the inlineonClickarrow functions need to be stabilized—currently they're recreated every parent render, defeating memoization benefits. UseuseCallbackto memoize the handlers, then wrap the component withReact.memo(named function form).
RoadmapCardcan be memoized with stable props, but verify enrollment data stability first.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@client/src/module/student/roadmap/RoadmapsLandingPage.tsx` around lines 495 - 503, The FilterChip onClick handlers are created inline inside the mapped lists, preventing React.memo from working; update RoadmapCard to use named function component form and wrap it with React.memo, and change each inline onClick passed to FilterChip to a stable, memoized callback via useCallback (e.g., create handleCategoryClick, handleTagClick, handleLevelClick inside RoadmapCard), ensuring their dependency arrays only include the minimal stable values they need (like the filter dispatch or setter). Also ensure any props passed into RoadmapCard (including enrollment) are stable or normalized before memoizing the component so memoization is effective.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@client/src/module/student/roadmap/RoadmapsLandingPage.tsx`:
- Line 610: Replace the non-standard pill and arbitrary text-size classes in the
FilterChip styling: in the FilterChip component (the JSX using className={`px-3
py-1 rounded-full text-[10px] ...`}) change rounded-full to rounded-md and
change text-[10px] to the standard Tailwind v4 class text-xs so the filter pills
follow the guideline and use supported utility classes.
- Line 318: In the RoadmapsLandingPage React component, replace all uses of the
arbitrary Tailwind class text-[10px] with the standard text-xs class; search for
occurrences of className values containing "text-[10px]" (for example the span
element currently rendering Category: and other spans) and swap the token to
"text-xs" so the JSX className strings conform to Tailwind v4 canonical scale
while preserving the rest of each className and attributes like aria-hidden.
---
Outside diff comments:
In `@client/src/module/student/roadmap/RoadmapCompletionModal.tsx`:
- Line 222: There are Tailwind arbitrary text-size utilities used in
RoadmapCompletionModal (className containing "text-[10px]" on the paragraph
elements); replace those arbitrary sizes with the standard scale class "text-xs"
in the affected elements (e.g., the <p> with className including "text-[10px]
font-mono ..." and the other occurrence around line 253) so the components use
the approved Tailwind scale.
- Line 181: Update the Tailwind utility class used in RoadmapCompletionModal:
replace any occurrences of the deprecated "bg-gradient-to-r" shorthand (e.g.,
the div with className containing "bg-gradient-to-r from-transparent
via-lime-400/60 to-transparent") with the Tailwind v4 compliant "bg-linear-to-r"
variant; search for the same pattern in RoadmapCompletionModal (also appears
around the other occurrence noted) and change each "bg-gradient-to-*" to
"bg-linear-to-*" while keeping the color stops and opacity parts intact.
---
Nitpick comments:
In `@client/src/module/student/roadmap/RoadmapsLandingPage.tsx`:
- Around line 495-503: The FilterChip onClick handlers are created inline inside
the mapped lists, preventing React.memo from working; update RoadmapCard to use
named function component form and wrap it with React.memo, and change each
inline onClick passed to FilterChip to a stable, memoized callback via
useCallback (e.g., create handleCategoryClick, handleTagClick, handleLevelClick
inside RoadmapCard), ensuring their dependency arrays only include the minimal
stable values they need (like the filter dispatch or setter). Also ensure any
props passed into RoadmapCard (including enrollment) are stable or normalized
before memoizing the component so memoization is effective.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2e85fcb5-1516-4848-97ec-4795fdf24f6c
📒 Files selected for processing (6)
client/src/module/student/roadmap/RoadmapCompletionModal.tsxclient/src/module/student/roadmap/RoadmapDashboardPage.tsxclient/src/module/student/roadmap/RoadmapDetailPage.tsxclient/src/module/student/roadmap/RoadmapEnrollPage.tsxclient/src/module/student/roadmap/RoadmapTopicPage.tsxclient/src/module/student/roadmap/RoadmapsLandingPage.tsx
| <div className="flex flex-wrap items-center gap-2"> | ||
| <span className="text-[10px] font-mono uppercase tracking-widest text-stone-400 mr-2">Category:</span> | ||
| <div className="flex flex-wrap items-center gap-2" role="group" aria-label="Filter by category"> | ||
| <span className="text-[10px] font-mono uppercase tracking-widest text-stone-400 mr-2" aria-hidden="true">Category:</span> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify arbitrary text-size utilities in TS/TSX files
rg -n --type=tsx --type=ts 'text-\[[0-9]+px\]'Repository: Sachinchaurasiya360/InternHack
Length of output: 102
🏁 Script executed:
# Corrected script - search for arbitrary text sizes in the target file
rg 'text-\[[0-9]+px\]' client/src/module/student/roadmap/RoadmapsLandingPage.tsxRepository: Sachinchaurasiya360/InternHack
Length of output: 2045
🏁 Script executed:
# Also check for rounded-full usage in the same file
rg 'rounded-full' client/src/module/student/roadmap/RoadmapsLandingPage.tsxRepository: Sachinchaurasiya360/InternHack
Length of output: 280
🏁 Script executed:
# Check the file size and then read specific line ranges
wc -l client/src/module/student/roadmap/RoadmapsLandingPage.tsxRepository: Sachinchaurasiya360/InternHack
Length of output: 136
🏁 Script executed:
# Read the file to check context around the mentioned lines and React.memo usage
sed -n '310,330p' client/src/module/student/roadmap/RoadmapsLandingPage.tsxRepository: Sachinchaurasiya360/InternHack
Length of output: 1079
🏁 Script executed:
# Check context around rounded-full usage
sed -n '605,620p' client/src/module/student/roadmap/RoadmapsLandingPage.tsxRepository: Sachinchaurasiya360/InternHack
Length of output: 661
🏁 Script executed:
# Check for React.memo usage and list rendering patterns
rg -n 'React\.memo|\.map\(' client/src/module/student/roadmap/RoadmapsLandingPage.tsx | head -20Repository: Sachinchaurasiya360/InternHack
Length of output: 573
🏁 Script executed:
# Check imports to see if Button component is being used
head -50 client/src/module/student/roadmap/RoadmapsLandingPage.tsxRepository: Sachinchaurasiya360/InternHack
Length of output: 1783
Replace arbitrary text-[10px] with standard scale class text-xs.
Lines 318, 331, 373, 476, 484, 526, 556, 557, and 578 use the arbitrary size text-[10px]. Switch to text-xs (Tailwind's standard 12px scale) to comply with the canonical TailwindCSS v4 class policy.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@client/src/module/student/roadmap/RoadmapsLandingPage.tsx` at line 318, In
the RoadmapsLandingPage React component, replace all uses of the arbitrary
Tailwind class text-[10px] with the standard text-xs class; search for
occurrences of className values containing "text-[10px]" (for example the span
element currently rendering Category: and other spans) and swap the token to
"text-xs" so the JSX className strings conform to Tailwind v4 canonical scale
while preserving the rest of each className and attributes like aria-hidden.
| <button | ||
| onClick={onClick} | ||
| aria-pressed={active} | ||
| className={`px-3 py-1 rounded-full text-[10px] font-mono uppercase tracking-widest transition-all ${ |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify rounded-full usage in roadmap landing file
rg -n 'rounded-full' client/src/module/student/roadmap/RoadmapsLandingPage.tsxRepository: Sachinchaurasiya360/InternHack
Length of output: 288
🏁 Script executed:
sed -n '600,620p' client/src/module/student/roadmap/RoadmapsLandingPage.tsxRepository: Sachinchaurasiya360/InternHack
Length of output: 699
🏁 Script executed:
sed -n '550,650p' client/src/module/student/roadmap/RoadmapsLandingPage.tsx | head -100Repository: Sachinchaurasiya360/InternHack
Length of output: 3065
🏁 Script executed:
# Find where FilterChip is used to understand its location on the page
rg -n 'FilterChip' client/src/module/student/roadmap/RoadmapsLandingPage.tsx | head -20Repository: Sachinchaurasiya360/InternHack
Length of output: 289
🏁 Script executed:
sed -n '310,360p' client/src/module/student/roadmap/RoadmapsLandingPage.tsxRepository: Sachinchaurasiya360/InternHack
Length of output: 2749
Replace rounded-full and text-[10px] with standard TailwindCSS v4 classes in FilterChip component.
The FilterChip component (line 610) uses rounded-full for filter pills (Category, Tags, Level), which violates the guideline against pill badges. Replace rounded-full with rounded-md and replace the arbitrary bracket size text-[10px] with the standard class text-xs.
Code location
className={`px-3 py-1 rounded-full text-[10px] font-mono uppercase tracking-widest transition-all ${
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@client/src/module/student/roadmap/RoadmapsLandingPage.tsx` at line 610,
Replace the non-standard pill and arbitrary text-size classes in the FilterChip
styling: in the FilterChip component (the JSX using className={`px-3 py-1
rounded-full text-[10px] ...`}) change rounded-full to rounded-md and change
text-[10px] to the standard Tailwind v4 class text-xs so the filter pills follow
the guideline and use supported utility classes.
Sachinchaurasiya360
added
enhancement
2 participants
Summary
This PR improves accessibility across roadmap-related pages and components to better align with WCAG 2.1 AA standards.
Accessibility Improvements Included
Areas Covered
Validation Performed
This PR preserves the existing UI and functionality while improving accessibility and usability for keyboard and assistive technology users.
Summary by CodeRabbit
Refactor