feat(ui): add focus-visible, skip link, ARIA attributes, and code pan…

[Prag-18]

Summary

This PR improves keyboard accessibility and screen reader support across the entire
DevPath application. Previously, interactive elements such as nav links, skill chips,
form controls, and the code viewer panel had no visible focus indicators, making the
app nearly unusable for keyboard-only users. The changes introduce a consistent
:focus-visible ring system (indigo on light backgrounds, yellow on dark), a
skip-to-main-content link, proper ARIA attributes on all interactive controls, and a
full focus trap with return-focus behaviour on the slide-up code panel — all without
altering any existing hover states or visual design.

Related Issue

Closes #25 [Add keyboard accessibility improvements]

Type of Change

• Bug fix — resolves a broken behaviour
• Feature — adds new functionality
• Data — adds new projects to data/projects.json
• Documentation — updates docs, README, or code comments only
• Style — CSS or visual changes only, no logic change
• Refactor — restructures code without changing behaviour
• Test — adds or updates tests

What Was Changed [required]

File	Change made
static/style.css	Added .skip-link styles; global *:focus-visible ring with dark-context overrides; per-component focus overrides for every interactive element class
templates/index.html	Added skip link, <main id="main-content"> landmark, aria-expanded + aria-controls on mobile nav toggle, role="alert" + aria-live on all error <div>s, aria-required + aria-describedby on all <select>s, aria-live on results section
templates/project.html	Added skip link, <main> landmark, aria-label on <nav>, aria-expanded + aria-controls on both View Code buttons, role="dialog" + aria-modal + aria-label on code panel, aria-hidden on all decorative SVGs
static/script.js	Synced aria-expanded string value on mobile toggle; added Escape key handler to close mobile menu and return focus to toggle; added keydown handler for skill quick-pick chips; wired "Try Different Inputs" via addEventListener (replaced inline onclick) and focuses skills input after scroll; implemented full focus trap (Tab/Shift+Tab wrap) inside code panel; returns focus to trigger button when panel closes; restored fetchStarterCode function

How to Test This PR

1. Clone this branch: git checkout feat/keyboard-navigation
2. Install dependencies: pip install -r requirements.txt
3. Run the app: python app.py
4. Open http://127.0.0.1:5000
   Keyboard navigation tests:

• Press Tab immediately on page load — a "Skip to main content" link should appear at the top
• Press Enter on the skip link — focus should jump past the navbar to the hero section
• Tab through the navbar — each link should show a clear yellow focus ring
• On mobile viewport (≤640px), Tab to the hamburger button and press Enter — menu opens; press Escape — menu closes and focus returns to the button
• Tab into the Skills field, type a skill, press Enter — chip is added
• Tab to a quick-pick skill chip and press Space or Enter — skill is added
• Tab through the three <select> dropdowns — each shows an indigo focus ring
• Tab to "Generate My Projects", press Enter — form submits; if fields are empty, error messages are announced by screen readers
• On the project detail page (/project/1), Tab to "View Code" and press Enter — panel opens; Tab key must stay inside the panel (focus trap active)
• Press Escape — panel closes and focus returns to the "View Code" button that opened it

5. Run the tests: python tests/test_basic.py
   Expected test output:
   27 passed, 0 failed out of 27 tests

Test Results

paste output here

Screenshots (if UI change)

Focus rings are only visible during keyboard navigation — use Tab key to trigger them.
| Element | Focus State |
|--------|-------|
| Nav links (dark bg) | Yellow 2.5px outline ring |
| Skill chips | Indigo 2.5px outline ring, pill-shaped |
| Submit button | Indigo ring + outer glow shadow |
| Code panel close button | Yellow ring (dark panel context) |

Self-Review Checklist [required]

• I have read CONTRIBUTING.md and followed all guidelines
• My branch name follows the convention: feat/, fix/, docs/, data/, style/, test/
• I have run python tests/test_basic.py and all 27 tests pass
• I have run flake8 . locally and there are no errors
• I have not introduced any print() or console.log() debug statements
• Every new function I wrote has a docstring
• I have not modified files outside the scope of the linked issue
• If I changed the UI, I tested it at 375px (mobile) and 1280px (desktop)
• If I added a project to the dataset, it has all required JSON fields

Notes for Reviewer

• The *:focus { outline: none } reset is intentional — it suppresses the default browser
  ring for mouse users only. The :focus-visible rules below it restore a polished custom
  ring for keyboard users, which is the recommended modern pattern (used by GitHub, Stripe, etc.).
• The focus trap in the code panel satisfies WCAG 2.1 SC 2.1.2 (No Keyboard Trap) — Escape
  always exits the trap and returns focus correctly.
• No Python files were modified; flake8 is unaffected by this PR.

[vercel]

@Prag-18 is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[komalharshita]

@Prag-18 resolve the merge conflicts

[komalharshita]

@Prag-18 also mention the linked issue as - Closes #25