[A11y] Add aria-expanded and aria-controls to Navigation Menu Triggers

• Labels: good first issue, accessibility, difficulty:beginner, area:core
• Target File: src/components/settings/settings-nav.tsx
• Estimated Time: 10–15 minutes
• Difficulty: Level 1 (Beginner)

Why This Matters

Collapsible navigation components require clear state indicators so screen reader users understand whether navigation panels are expanded or collapsed.

Current Behavior

Navigation triggers in src/components/settings/settings-nav.tsx toggle sub-menus but do not declare aria-expanded or aria-controls attributes.

Requested Change

Add aria-expanded={isExpanded} and aria-controls="nav-section-id" to collapsible navigation buttons in src/components/settings/settings-nav.tsx.

Acceptance Criteria

• aria-expanded dynamic state attribute added.
• aria-controls target ID attribute added.
• Verification command succeeds: npm run test:file -- tests/settings-domain-validation.test.ts.

Verification

npm run test:file -- tests/settings-domain-validation.test.ts

Contributor Notes

Accessibility improvement.

🚀 How to Claim and Implement an Issue

1. Choose an Issue: Browse our open issues and pick one matching your interest and available time.
2. Comment on GitHub: Leave a comment on the corresponding GitHub issue: "I would like to work on this issue. Please assign it to me."
3. Follow the Guide: Review our Beginner's Contribution Guide for step-by-step Git instructions.
4. Verify Locally: Run the specific verification command listed on the issue before opening your PR.
5. Submit PR: Open a pull request against main referencing this issue number!

Start with src/components/settings/settings-nav.tsx and inspect the collapsible navigation buttons and their existing isExpanded state. Add the requested ARIA attributes for each trigger, then run npm run test:file -- tests/settings-domain-validation.test.ts. Done means the test command succeeds and both attributes are present on the collapsible navigation triggers.