Skip to content

fix: Update theme toggle aria-label to describe the next action#202

Merged
PRODHOSH merged 1 commit into
PRODHOSH:mainfrom
Aditya8369:143
Jun 25, 2026
Merged

fix: Update theme toggle aria-label to describe the next action#202
PRODHOSH merged 1 commit into
PRODHOSH:mainfrom
Aditya8369:143

Conversation

@Aditya8369

@Aditya8369 Aditya8369 commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

Summary

Updated src/components/layout/Navbar.tsx theme toggle button aria-label to describe the next action dynamically

Related Issue

Closes #143

Type of Change

  • Bug fix
  • New feature
  • Documentation update
  • Refactor
  • Chore / dependency update

Changes Made

  • Replaced the vague aria-label="Toggle theme mode" with a dynamic next-action label

AI Usage

  • I did not use AI for any part of the code in this PR
  • I used AI for coding (specify which tool below) and I fully understand every change I made, including which functions I changed, why I changed them, and what side effects they could create

Checklist

  • I was assigned to the issue before opening this PR
  • My branch is up to date with main
  • Code works locally and I have tested it
  • No console.log left in src/
  • If schema changed — both schema.sql and a new migration file are included
  • If this is a UI change — I read DESIGN.md and followed the design system (colors, spacing, typography, components)
  • Docs updated if needed
  • PR title follows Conventional Commits format (feat:, fix:, docs:, etc.)
  • This PR description is written in my own words

Summary by CodeRabbit

  • Bug Fixes
    • Improved the theme toggle’s accessibility label so it now clearly reflects the action available: switch to light mode or switch to dark mode.

@github-actions github-actions Bot added frontend Related to UI / Next.js UI Visual / design changes labels Jun 25, 2026
@coderabbitai

coderabbitai Bot commented Jun 25, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 4f6c00ca-62bc-4b32-b07a-a2f2c938fdf9

📥 Commits

Reviewing files that changed from the base of the PR and between cd8e915 and 8ffceb4.

📒 Files selected for processing (1)
  • src/components/layout/Navbar.tsx

📝 Walkthrough

Walkthrough

The navbar theme toggle button now uses a state-dependent aria-label that changes between light-mode and dark-mode action text.

Changes

Navbar theme toggle label

Layer / File(s) Summary
Dynamic aria-label
src/components/layout/Navbar.tsx
The theme toggle button’s aria-label now switches based on isDarkMode.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

Suggested reviewers

  • PRODHOSH

Poem

🐰 I hop by the navbar with a cheerful glance,
A toggle now whispers the next mode’s dance.
“Light” or “dark,” it tells the way,
So screen readers know what the click will say.
Flip-flop, thump-thump, the labels bloom bright ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly matches the PR’s main change: making the theme toggle aria-label dynamic and descriptive.
Linked Issues check ✅ Passed The change matches issue #143 by using isDarkMode to switch the aria-label between dark and light mode actions.
Out of Scope Changes check ✅ Passed The PR appears scoped to the requested Navbar aria-label update and does not introduce unrelated changes.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Comment @coderabbitai help to get the list of available commands.

@Aditya8369

Copy link
Copy Markdown
Contributor Author

@PRODHOSH fixed the theme toggle bug and all checks are passing successfully
If there's anything needed from me, ping me here
Thank you

@PRODHOSH PRODHOSH self-requested a review June 25, 2026 05:52
@PRODHOSH PRODHOSH self-assigned this Jun 25, 2026
@PRODHOSH PRODHOSH merged commit a65b63a into PRODHOSH:main Jun 25, 2026
6 checks passed
@github-actions

Copy link
Copy Markdown

🎉 Your PR just got merged, @Aditya8369 — thank you for contributing to OSSfolio!

Your work is now part of the project. Here's what to do next:

  • ⭐ If you haven't already, consider giving the repo a star — it helps us grow.
  • 📢 Share your contribution on LinkedIn, Twitter, or wherever you hang out. You shipped open source!
  • 🔍 Browse other open issues if you want to keep contributing.

We really appreciate you taking the time. See you in the next PR! 🚀

@PRODHOSH PRODHOSH added ELUSOC ELUSOC project submission completed NEWBIE Beginner — 10 pts labels Jun 25, 2026
@PRODHOSH PRODHOSH assigned Aditya8369 and unassigned PRODHOSH Jun 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

completed ELUSOC ELUSOC project submission frontend Related to UI / Next.js NEWBIE Beginner — 10 pts UI Visual / design changes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[GOOD FIRST ISSUE] Update theme toggle aria-label to describe the next action

2 participants