[Accessibility] Fix tab order to match visual/logical reading order

[magic-peach]

Overview

Audit the entire app's tab order to ensure it follows the logical reading order of the UI. Tab should move through: Upload → Preset → Framing → Trim → Rotate → Audio → Quality → Export.

How to Test

1. Open the app
2. Press Tab repeatedly and note the order elements receive focus
3. Compare against expected logical order

Fix Approach

Use natural DOM order for focus (no tabIndex > 0). Rearrange DOM order if visual layout differs from logical order using CSS, not DOM reordering.

Acceptance Criteria

• Tab order matches visual reading order
• No positive tabIndex values used
• All interactive elements reachable by Tab

[vaanni47]

I'll audit the app’s navigation to ensure the tab order follows a logical, sequential path through the editing workflow, specifically moving from Upload through to Export. My approach is to rely on the natural DOM order for focus, removing any positive tabIndex values and using CSS to bridge any gaps between our visual layout and the underlying structure.

pls assign this to me

[Lathika226]

Hi @magic-peach, I’d like to work on this accessibility issue under GSSoC’26.

I reviewed the current UI interaction flow and noticed the tab navigation order can become inconsistent with the visual and logical reading structure of the interface. This may create confusion for keyboard-only users and screen-reader users while navigating through editor controls and interactive sections.

I’d like to improve the tab flow to ensure keyboard navigation follows a consistent and intuitive reading order across the application.

Implementation plan:

• Audit all interactive elements and current tab navigation behavior
• Reorganize focus flow to align with the visual/layout hierarchy
• Remove unintended focus traps or skipped elements
• Ensure logical progression between controls, panels, dialogs, and action buttons
• Review custom components for improper tabIndex usage
• Improve accessibility consistency for keyboard-only navigation
• Validate behavior using manual keyboard testing and accessibility auditing tools

I’ll make sure the updated focus order integrates cleanly with the existing component structure without affecting current functionality or responsiveness.

Please assign this issue to me. Thank you!

[RanadeepVinukonda]

Hi @magic-peach! I reviewed the accessibility flow and noticed the tab navigation order doesn’t fully match the logical reading sequence of the UI. I’d like to work on this issue.

My plan is to:

• Audit the complete keyboard navigation flow
• Ensure focus order follows: Upload → Preset → Framing → Trim → Rotate → Audio → Quality → Export
• Remove any positive tabIndex usage
• Preserve accessibility by relying on natural DOM order and CSS layout adjustments where needed
• Verify every interactive element is reachable via keyboard navigation

I’ve worked on frontend UI/UX improvements and accessibility-focused fixes before, and I’d be happy to take this up if it’s available.