Implemented WCAG 2.1 AA compliant accessibility enhancements:
ARIA & Semantic HTML:
- Added semantic landmarks (main, section, article, role attributes)
- Comprehensive ARIA labels and descriptions throughout
- ARIA live regions for dynamic content updates (polite/assertive)
- Screen reader-only text for context (.sr-only class)
- Proper heading hierarchy with IDs for navigation
Keyboard Navigation:
- Full keyboard support for SWOT cards (Arrow keys, Home, End)
- Skip to main content link for keyboard users
- Focus management: auto-focus results heading after analysis
- Focus visible styles already in place from SCSS
Screen Reader Enhancements:
- announceToScreenReader() function for status updates
- ARIA live regions on spinner, status timeline, results
- Descriptive labels for icons (aria-hidden for decorative)
- Category descriptions (e.g., "Strengths - positive internal factors")
Interactive Elements:
- Enhanced button and link labels
- Progress indicators with aria-busy and role="progressbar"
- Modal dialog attributes for spinner overlay
- Feed role for status timeline updates
Files Modified:
- result.html: SWOT cards, summary section with full ARIA support
- app.js: Screen reader announcements, keyboard nav, focus management
- base.html: Skip link and semantic main element
- EmptyState.jinja: role="status" with aria-live
- ErrorState.jinja: role="alert" for error announcements
- Spinner.jinja: Modal dialog with progress indicator
- status.html: Feed role for timeline updates
- _components.scss: sr-only and skip-link utility classes
These improvements ensure the SWOT analyzer is fully accessible to
visually impaired users using screen readers and keyboard navigation.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Phase 1 Implementation: Enhanced visual design and user experience
## Design System
- Add custom CSS variables for brand colors (purple palette from logo)
- Implement semantic SWOT colors (green/amber/blue/red)
- Add neutral gray scale and shadow system
- Define transition timing functions
## Typography
- Import Inter font for body text with font-feature settings
- Import Space Grotesk for headings with tight letter-spacing
- Add gradient text effect for hero title
- Improve font rendering with antialiasing
## Hero Section
- Redesign with gradient background (purple theme)
- Add animated floating logo icon
- Center-aligned layout with improved hierarchy
- Enhanced subtitle with better readability
## Search Form
- Modern pill-shaped input group with shadows
- Icon integration with proper spacing
- Smooth hover/focus transitions
- Help text with contextual information
- Mobile-responsive stacked layout
## SWOT Result Cards
- Replace basic panels with modern card design
- Add colored top borders and icon badges
- Implement hover lift effects with enhanced shadows
- Add slide-up animations with stagger effect
- Count badges for each category
- Improved list styling with custom bullets
- Executive summary section with branded styling
## Loading States
- Enhanced spinner with backdrop blur
- Progress message display
- Improved loading text hierarchy
- Better visual feedback during analysis
## Responsive Design
- Mobile-first breakpoints (768px, 480px)
- Stacked form layout on mobile
- Single column card grid on small screens
- Adjusted typography sizing for small screens
Files updated:
- src/frontend/static/css/pygentic_ai.css (300+ lines of enhanced styles)
- src/frontend/templates/home.html (hero + search redesign)
- src/frontend/templates/result.html (modern card layout)
- src/frontend/templates/components/snippets/Spinner.jinja (progress messages)
This aligns with Constitution Principle IV (Observability) through better
user feedback, and represents a significant improvement in user experience.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Configure frontend to use public npm registry instead of AWS CodeArtifact
- Fixes authentication errors when running npm commands
- Allows npm-check-updates (ncu) to run without credentials
This resolves the "expired credentials" error by overriding the global
.npmrc configuration with a local setting for this project.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Remove git source dependency for sqlmodel-crud-utilities
- Use PyPI version v0.1.0 (was v0.0.1a1 from git)
- Update uv.lock with resolved PyPI dependencies
- Also updated: python-dotenv v1.0.1 -> v1.2.1, sqlmodel v0.0.22 -> v0.0.32
This simplifies dependency management by using official PyPI releases
instead of git sources where available.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
