feat: Implement WCAG 2.2 accessibility compliance improvements

[devin-ai-integration]

WCAG 2.2 Accessibility Compliance Implementation

This PR implements comprehensive accessibility improvements to bring Firefly III into compliance with WCAG 2.2 standards across all four principles: Perceivable, Operable, Understandable, and Robust.

Link to Devin run: https://app.devin.ai/sessions/bad34012ff8848ed8e70063873113393
Requested by: @samfert-codeium

Changes in this pull request:

Color Contrast Fixes (Perceivable)

• AdminLTE.css: Replaced problematic colors to meet 4.5:1 contrast ratio requirements
  • #f39c12 → #B8860B (DarkGoldenRod)
  • #00c0ef → #0066CC (darker blue)
• Updated colors across form validation, progress bars, box borders, buttons, text, and gradients

Skip Links & Keyboard Navigation (Operable)

• app.scss: Made skip links visible on focus with proper styling
• Added enhanced focus states for all interactive elements
• Implemented visible outline and box-shadow for keyboard navigation

Semantic HTML5 Structure (Understandable)

• Added ARIA landmarks to main layout templates:
  • role="banner" for headers
  • role="navigation" for sidebars with aria-label
  • role="main" for content areas
  • role="contentinfo" for footers
• Implemented skip links in both v1 (Twig) and v2 (Blade) layouts

Comprehensive ARIA Implementation (Robust)

• Navigation menus: Added role="menuitem", aria-expanded, aria-haspopup for dropdown menus
• Icons: Added aria-hidden="true" to all decorative Font Awesome icons
• Interactive elements: Implemented aria-label for buttons and links without visible text

Form Accessibility Enhancements

• Added aria-describedby for help text association
• Added aria-invalid for error state indication
• Updated all form field types: text, select, textarea, checkbox, amount, password, integer, date, number

Files Modified

• public/v1/lib/adminlte/css/AdminLTE.css - Color contrast fixes
• resources/assets/v2/src/sass/app.scss - Skip links and focus states
• resources/views/layout/default.twig - v1 semantic structure
• resources/views/v2/layout/v2.blade.php - v2 semantic structure
• resources/views/partials/menu-sidebar.twig - v1 navigation ARIA
• resources/views/v2/partials/layout/sidebar.blade.php - v2 navigation ARIA
• All form templates in resources/views/form/ - Form accessibility

⚠️ Critical Review Points

High Priority

1. Color Brand Impact: Verify the color changes don't negatively affect Firefly III's visual brand identity
2. Translation Dependencies: Confirm all new aria-label translation strings exist (e.g., firefly.skip_to_main_content, firefly.toggle_sidebar, firefly.main_navigation)
3. JavaScript Compatibility: Test that AdminLTE and custom JavaScript still function correctly with new ARIA attributes
4. Form Functionality: Validate that form validation and error handling still work properly with new accessibility attributes

Testing Recommendations

1. Keyboard Navigation: Test tab order and skip links functionality
2. Screen Reader: Test with NVDA/JAWS if possible to validate ARIA implementation
3. Color Contrast: Verify contrast ratios with tools like WebAIM's contrast checker
4. Form Testing: Test form submission, validation, and error states
5. Menu Navigation: Ensure dropdown menus still function correctly

Potential Risks

• No actual accessibility testing was performed with screen readers
• Changes span both template systems (v1 Twig and v2 Blade)
• Some translation strings may be missing in certain locales
• Color changes could affect existing custom themes or branding

This implementation addresses WCAG 2.2 compliance systematically, but thorough testing is recommended before merging to ensure no existing functionality is broken.

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring