Skip to content

feat: accessibility improvements and settings reorganization#52

Merged
jesposito merged 1 commit intomainfrom
feature/a11y-and-settings-improvements
Jan 7, 2026
Merged

feat: accessibility improvements and settings reorganization#52
jesposito merged 1 commit intomainfrom
feature/a11y-and-settings-improvements

Conversation

@jesposito
Copy link
Copy Markdown
Owner

Summary

Comprehensive accessibility audit and settings panel improvements:

  • WCAG 2.1 AA compliance - Modal focus trapping, keyboard navigation, screen reader support
  • Missing features from upstream - Schedule settings and Quality (CRF) sliders
  • Settings reorganization - Collapsible sections for cleaner UI

Accessibility Changes

Modals

  • Add role="dialog", aria-modal="true", aria-labelledby to all modals
  • Implement focus trap with inert attribute on background content
  • Restore focus to previously focused element on close
  • Unified Escape key handling for all modals

Keyboard Navigation

  • Skip link for bypassing header content
  • Tab panels support Arrow/Home/End key navigation
  • Preset cards now role="button" with Enter/Space/Arrow key support
  • Collapsible sections keyboard accessible

Screen Reader Support

  • Loading state announcements via aria-live region
  • Proper aria-label on all form inputs and icon buttons
  • Decorative SVGs marked aria-hidden="true"

Visual

  • Improved color contrast for tertiary text (WCAG AA)
  • prefers-reduced-motion CSS media query support
  • 44px minimum touch targets for checkboxes

Settings Panel Changes

New Features (from gwlsn upstream)

  • Schedule - Enable/disable scheduling with time window picker
  • Quality - HEVC and AV1 CRF sliders with numeric inputs
  • Schedule status - Shows active schedule in header

Reorganization

  • Consolidated into logical groups: Transcoding, Schedule, Quality, Notifications, Interface
  • Quality and Notifications sections are collapsible (collapsed by default)
  • Removed duplicate "Transcoding" section headers

Tests

Expanded e2e/accessibility.spec.ts from 3 tests to ~30 tests covering:

  • Document structure and skip link
  • Modal ARIA attributes and keyboard interaction
  • Tab navigation and panel roles
  • Form control labeling
  • Collapsible section accessibility

…ation

Accessibility (WCAG 2.1 AA compliance):
- Add focus trap with inert background for all modals
- Add role=dialog, aria-modal, aria-labelledby to modals
- Add skip link for keyboard navigation
- Add prefers-reduced-motion CSS support
- Add proper ARIA attributes to tabs (tabpanel, arrow key nav)
- Make preset cards keyboard accessible (role=button)
- Improve color contrast for tertiary text
- Add aria-labels to all form inputs and icon buttons
- Add loading state announcements for screen readers

Settings panel improvements:
- Add Schedule settings (enable/disable, time window)
- Add Quality settings (HEVC/AV1 CRF sliders)
- Reorganize into collapsible sections
- Show schedule status in header when active
- Consolidate related settings (Interface section)

Tests:
- Expand e2e/accessibility.spec.ts from 3 to ~30 tests
@jesposito jesposito merged commit 5e790a0 into main Jan 7, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant