ToolJet / ToolJet

Low-code platform for building business applications. Connect to databases, cloud storages, GraphQL, API endpoints, Airtable, Google sheets, OpenAI, etc and build apps using drag and drop application builder. Built using JavaScript/TypeScript. 🚀
https://tooljet.com
GNU Affero General Public License v3.0
26.78k stars 3.29k forks source link

Tab key navigation follows component's addition order, not visual hierarchy #9504

Open GrowwithNaveen opened 2 weeks ago

GrowwithNaveen commented 2 weeks ago

Description: When using the Tab key to navigate between input fields, the focus jumps to the next field based on the order the elements were added to the canvas, rather than their position in the visual layout. This can be confusing and disrupts the expected flow for users.

Current behavior: Tab key navigation iterates through input fields based on the order they were added to the canvas, regardless of their visual placement.

Expected behavior: Tab key navigation should follow the visual order of the input fields on the screen, ensuring a predictable and intuitive user experience.

Steps to reproduce:

  1. Create a user interface with multiple input fields.
  2. Add the input fields to the canvas in a non-sequential order.
  3. Try to navigate between the input fields using the Tab key.
  4. Observe that the focus jumps between fields based on the order of addition, not their visual position.