🎨 Palette: Add aria-label to notification button

[ldsgroups225]

💡 What: Added an aria-label to the icon-only notification button in the app header and removed the visually hidden sr-only span.
🎯 Why: Using aria-label directly on the <button> element is a cleaner, more robust pattern for icon-only buttons than relying on inner visually hidden spans, ensuring consistent screen reader announcements.
📸 Before/After: Visuals remain unchanged (internal HTML structure update only).
♿ Accessibility: Improves semantic HTML structure and screen reader support for the primary navigation header's notification action.

---

PR created automatically by Jules for task 11415149944284153558 started by @ldsgroups225

Summary by CodeRabbit

• Bug Fixes
  • Improved accessibility for the notifications button to better support screen readers and assistive technologies, ensuring users with visual impairments receive proper announcements when interacting with the notifications control.

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 878c96fd-1043-48b5-92b1-07acfd2861d2

📥 Commits

Reviewing files that changed from the base of the PR and between a2e0816 and dee26f2.

📒 Files selected for processing (2)

• apps/school/src/components/layout/header.tsx
• pr_desc.txt

---

📝 Walkthrough

Walkthrough

Updated the notifications button's accessibility labeling mechanism in the header component by adding an aria-label attribute and removing the visually-hidden sr-only span element. The visual presentation of the button and badge remain unchanged.

Changes

Cohort / File(s)	Summary
Notification Button Accessibility apps/school/src/components/layout/header.tsx	Replaced visually-hidden sr-only span with aria-label for the notifications icon button's accessible name, improving screen reader label delivery.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• 🎨 Palette: Add aria-labels to Header buttons for improved accessibility #110: Modifies the same notifications control button to use aria-label derived from t.common.notifications() for accessible name.
• 🎨 Palette: Add ARIA labels to icon-only buttons #67: Applies similar accessibility refactoring across icon-only buttons, replacing visually-hidden labels with aria-label attributes.

Poem

🐰 A button so small, now speaks up clear,
No hidden text for those who hear,
With aria-label singing out loud,
Notifications reach the whole crowd! 📢

🚥 Pre-merge checks | ✅ 2 | ❌ 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 (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding aria-label to the notification button. It is specific, concise, and directly reflects the primary modification.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette-header-a11y-11415149944284153558

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}