Implement WAI-ARIA accordion accessibility patterns for SectionCard

[kanishka-2007-tech]

Description

This PR improves the accessibility of the SectionCard component by implementing standard WAI-ARIA accordion patterns and updating the accessibility test suite to validate the new behavior.

Changes Made

SectionCard Accessibility Improvements
Editor panel Accessibility had section card components hence it is also improved

• Added aria-expanded to the accordion toggle button to expose expanded/collapsed state to assistive technologies.
• Added aria-controls to associate the toggle button with its corresponding content region.
• Generated unique IDs using useId() for accessibility relationships.
• Added role="region" to the collapsible content container.
• Linked the content region to the accordion header using aria-labelledby.
• Added aria-describedby to connect the toggle button with the section description when present.

Fixes #5359

Pillar

• 🎨 Pillar 1 — New Theme Design
• 📐 Pillar 2 — Geometric SVG Improvement

Checklist before requesting a review:

• I have read the CONTRIBUTING.md file.
• I have tested these changes locally (localhost:3000/api/streak?user=YOUR_USERNAME).
• I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
• My commits follow the Conventional Commits format (e.g., feat(themes): ..., fix(calculate): ...).
• I have updated README.md if I added a new theme or URL parameter.
• I have started the repo.
• I have made sure that i have only one commit to merge in this PR.
• The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts).
• (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

[vercel]

@kanishka-2007-tech is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🚨 Hey @kanishka-2007-tech, the CI Pipeline is failing on this PR and it has been marked as status:blocked.

Please fix the issues before this can be reviewed. Here's how:

1. Run checks locally before pushing:

npm run format:check   # Check Prettier formatting
npm run lint           # Run ESLint
npm run typecheck      # TypeScript type check
npm run test           # Run unit tests (Vitest)
npm run build          # Verify production build passes

2. Auto-fix common issues:

npm run format         # Auto-fix formatting with Prettier
npm run lint -- --fix  # Auto-fix lint errors where possible

3. Check the full failure log here:
👉 View CI Run

Once you push a fix and the CI passes, the status:blocked label will be removed automatically. 💪

[Aamod-Dev]

Thanks for the accessibility improvements. Implementing WAI-ARIA patterns correctly across multiple files is an important step. Applied labels: \level:intermediate\ (touches multiple files), \ ype:accessibility, \quality:clean.

[Aamod-Dev]

Thanks for implementing the WAI-ARIA accordion accessibility patterns for the SectionCard! Ensuring screen readers properly associate the toggle buttons with their collapsible regions is a huge accessibility win for the generator interface.

Your code looks absolutely perfect. However, you will notice the CI pipeline is currently failing due to an unrelated divergence in lib/svg/themes.test.ts that recently occurred natively on the main branch.

To fix this and secure a green build, simply run git pull --rebase origin main and force push your branch. I'll be ready to approve right after!

Labels Applied:

• level:intermediate: ARIA state mapping across component trees.
• type:accessibility: WAI-ARIA pattern implementations.
• quality:clean: Excellent markup bindings.
• mentor:Aamod007

[Aamod-Dev]

Thanks for the contribution. I went through the changes and the overall approach looks good.

[github-actions]

🎉 Congratulations @kanishka-2007-tech! Your PR has been successfully merged. 🚀

Thank you for contributing to CommitPulse. Your work helps us build a better tool for the community.

⚠️ Important for GSSoC Contributors:
You are strictly advised to join our Discord Server as it is mandatory for all GSSoC participants. All important announcements, point claims, and community discussions happen there.

Keep building! 💻✨