a11y: labels for theme toggle, search, category chips

[KhyFee]

Summary

• Theme toggle: explicit aria-label (closes a11y: add aria-label to interactive elements missing them #38 partially)
• Extensions category chips: type="button" + aria-pressed
• Search inputs: aria-label on extensions + templates filters

Test plan

• Theme control announces Toggle theme
• Category chips expose pressed state
• Search fields not placeholder-only for SRs

Summary by CodeRabbit

• Accessibility Improvements

  • Improved screen reader support for extension and template category controls and search fields.
  • Added clearer pressed-state information for category buttons.
  • Marked decorative theme icons as hidden from assistive technologies.

• Style

  • Reformatted the theme toggle markup without changing its behavior.

[vercel]

@KhyFee is attempting to deploy a commit to the create-node-app Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Important

Review available on request

• 🔍 Trigger review

Reviews should be triggered manually for repositories with fewer than 10 stars. Select Trigger review above or comment @coderabbitai review to review the latest changes. For a full review, comment @coderabbitai full review.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: da4ca268-89a7-4ded-877b-0a4bdf3eacdf

📝 Walkthrough

Walkthrough

The changes add explicit button types, selected-state attributes, accessible labels, and hidden decorative icon attributes to extension, template, and theme controls.

Changes

Interactive control accessibility

Layer / File(s)	Summary
Catalog category and search controls src/app/extensions/ExtensionsPageClient.tsx, src/app/templates/TemplatesPageClient.tsx	Category buttons now declare type="button" and aria-pressed. Search inputs now include accessible labels.
Theme toggle icon semantics src/components/theme-toggle.tsx	The Sun and Moon icons now include aria-hidden="true".

Estimated code review effort: 1 (Trivial) | ~5 minutes

Suggested reviewers: ulises-jeremias

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The changes improve accessibility in catalog controls but do not cover all header, footer, and catalog controls requested by issue #38.	Audit the remaining interactive elements in the header, footer, and catalog, then add accessible names and complete the keyboard accessibility pass.

✅ 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 identifies the accessibility changes for the theme toggle, search fields, and category chips.
Out of Scope Changes check	✅ Passed	All changes are accessibility improvements for interactive controls and remain within the scope of issue #38.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

Actionable comments posted: 2

🤖 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 `@src/app/templates/TemplatesPageClient.tsx`:
- Around line 111-113: Update the category buttons rendered by categories.map in
TemplatesPageClient so each chip includes type="button" and aria-pressed
reflecting whether its category is selected, matching the existing All button
behavior.
- Around line 111-113: Update the All-category button handler in
TemplatesPageClient so it clears categoryParam through the existing
URL/query-state mechanism as well as resetting selectedCategory to ''. Keep
aria-pressed aligned with the cleared local and URL category state.

🪄 Autofix

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 Plus

Run ID: 30eec269-4062-4eb0-bc53-d86a44a7c4b4

📥 Commits

Reviewing files that changed from the base of the PR and between f669593 and bfae278.

📒 Files selected for processing (3)

• src/app/extensions/ExtensionsPageClient.tsx
• src/app/templates/TemplatesPageClient.tsx
• src/components/theme-toggle.tsx

[ulises-jeremias]

Theme toggle, search aria-labels, and the extensions chips look good.

One gap vs this PR’s own scope: named template chips in TemplatesPageClient.tsx still lack type="button" and aria-pressed, so a selected category is visual-only. The extensions page already has both. Please apply the same attributes on the categories.map buttons:

{categories.map((cat) => (
  <button
    type="button"
    key={cat.slug}
    onClick={() => setSelectedCategory(cat.slug)}
    aria-pressed={selectedCategory === cat.slug}

After that this can squash-merge. Vercel “Authorization required” on the fork is not a content blocker.

[KhyFee]

Thanks @ulises-jeremias — really appreciate the clear review.

Applied type="button" and aria-pressed on the named template category chips in TemplatesPageClient.tsx so they match the All / extensions chips. Ready for squash-merge whenever you are.

[KhyFee]

Thanks for merging #43, @ulises-jeremias — #44 now follows your single-shell <main> guidance (no nested landmarks).