feat: enhance accessibility by adding descriptive label to theme toggle

[arbirali]

📄 Description

This PR enhances the accessibility of the theme toggle switch in the shared header component by improving how it is announced to screen readers. This update ensures users who rely on assistive technologies can understand the purpose of the toggle and interact with it effectively.

The change aligns with WCAG Success Criterion 4.1.2 – Name, Role, Value, which requires that user interface elements expose meaningful names and roles programmatically.

---

🎯 Issue

• Actual Result:
  The theme toggle (used to switch between light and dark modes) did not have an accessible name. As a result, screen readers could not interpret or announce its function, making it difficult for visually impaired users to understand its purpose.

• Expected Behaviour:
  The toggle should expose a descriptive label to screen readers that clearly communicates its action — for example, “Switch to dark theme.”

---

✅ Fix

• Improved screen reader accessibility by programmatically exposing a meaningful name for the theme toggle control.

---

🔗 Related

• Live Preview: [Learner Dashboard – Home](https://apps.sandbox.openedx.edly.io/learner-dashboard/)
• Taiga Ticket (if you have access): [US 80 – Add accessible name to theme toggle](https://tree.taiga.io/project/zaraahmed-tutor-indigo-accessibility/us/80)
• Related GitHub Issue: [tutor-indigo/#146]([EPIC] Accessibility compliance overhangio/tutor-indigo#146)

[codecov]

Codecov Report

Attention: Patch coverage is 75.00000% with 1 line in your changes missing coverage. Please review.

Project coverage is 68.45%. Comparing base (6b98d10) to head (89ed493).
Report is 2 commits behind head on sumac/indigo.

Files with missing lines	Patch %	Lines
src/ThemeToggleButton.jsx	75.00%	1 Missing ⚠️

Additional details and impacted files

@@               Coverage Diff                @@
##           sumac/indigo      #29      +/-   ##
================================================
+ Coverage         68.39%   68.45%   +0.05%     
================================================
  Files                49       49              
  Lines               481      485       +4     
  Branches            107      107              
================================================
+ Hits                329      332       +3     
- Misses              149      150       +1     
  Partials              3        3              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[wittjeff]

looks good to me

[DawoudSheraz]

Why is there a need for a state? This file already uses themeCookie/cookie to manage the dark theme toggle across sessions. Can't the same be followed for a11y?

[arbirali]

@DawoudSheraz The state ensures the UI updates immediately when toggled, while the cookie handles persistence. Without state, the toggle’s visual feedback and screen reader announcements wouldn’t sync until a page reload, hurting both UX and accessibility.