Skip to content

[Feat]: GUI editor support for ordering the input components #304

Closed
@gtqgtq

Description

@gtqgtq

Is your feature request related to a problem? Please describe.
The GUI editor should enable the user to specify the tab order of the input components. This enables the user to use the keyboard to navigate between input components.

Describe the solution you'd like
The following is taken straight from the MDN Docs for the tabIndex attribute:

Add a tabIndex property to all input components. It accepts an integer as a value, with different results depending on the integer's value:

  • A negative value (the exact negative value doesn't actually matter, usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation.
  • tabindex="0" means that the element should be focusable in sequential keyboard navigation, after any positive tabindex values. The focus navigation order of these elements is defined by their order in the document source.
  • A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex="4" is focused before tabindex="5" and tabindex="0", but after tabindex="3". If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source. The maximum value for tabindex is 32767.

The part of the Lowcoder client that renders HTML from the GUI definition, should attach the tabIndex attribute to the generated HTML code defining the input components.

Describe alternatives you've considered
The alternative would be to enable the GUI to specify the order of the element structure generated by the Lowcoder client API.

I believe this is not a workable solution. Components are not aware of their relative location with respect to the document structure. The document structure is closely related to CSS and visual layout. The input order logic may be quite different.

Additional context
Suggested location for the TabIndex attribute:
CleanShot 2023-07-24 at 16 30 42

Metadata

Metadata

Labels

EnhancementNew feature or request

Type

No type

Projects

Status

✅ Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions