TabIndex config only in TextField

[henrique]

In the TextField class, exists a configuration called "tabIndex", to control the tab order of the controls. I guess this configuration must be in the Field config class, is that correct?

[ghulam.ghous]

Hi Henrique,

You can use this in the following manner:

tbar:{
    items    : [
             {
                   type:'textField',
                   tabIndex: 1, placeholder: 'Enter text'
             },
             {
                   type:'textField',placeholder: 'Enter',
                   tabIndex: 3
              },
              {
                   type:'textField',
                   placeholder: 'Enter some text', tabIndex: 2
               },
       ]
},

And if you are asking where this field is defined in the code base, then it is in Core/widget/TextField.js. Hope it helps.

Regards,
Ghous

[henrique]

I know how it works, my point is, the configuration must be in the Field class, no in the TextField class. Because all input elements have the tab index attribute!

[ghulam.ghous]

Hi,

Apologies for the confusion. Got it now, thanks for the clarification. I'll ask about this to our project manager in the morning and will get back to you.

Regards,
Ghous

[ghulam.ghous]

Hi Henrique,

I have discussed this with our project manager and you were right. It should be in the Field class. I have created a ticket to get this done https://github.com/bryntum/support/issues/8010.

Thanks for the feedback.

Regards,
Ghous

[henrique]

Nice! I changed the TS file here.

[henrique]

Now I have another problem, the tabIndex of a button. I guess this configuration must be in the Widget. It is possible?

[marcio]

Hey Henrique,

I created a ticket to implement/discuss that with our team, please check the updates here https://github.com/bryntum/support/issues/8166

[ghulam.ghous]

Hi Henrique,

Moving it to widget is problematic. There are a lot of complexities in hoisting this to Widget due to the complex rendering in many advanced components and the fact that so many are not focusable themselves but contain a number of focusable elements. It is not clear what Widget can really offer as a baseline meaning for this config because it is not clear the element(s) to which it should be applied (if any).

Without a clear use case for when to ignore the general pattern of 0/-1, it seems best to hoist tabIndex to Field as originally requested and do minimal work propagating its value.

For example, DateTime could be configured like so:

    

    {
        type : 'datetimefield',
        tabIndex : 1
    }

and that would be equivalent to:

    {
        type : 'datetimefield',
        dateField : { tabIndex : 1 },
        timeField : { tabIndex : 1 }
    }

Please the comment on the ticket here https://github.com/bryntum/support/issues/8010#issuecomment-1872630513.

Regards,
Ghous

[dongryphon]

There is also code in review to add tabIndex to Button - https://github.com/bryntum/support/issues/8166

As noted, adding this config to Widget is problematic. For all the reasons above plus there are many ways in which derived-class widgets manage their focusability and tabbability that would conflict with general notions of assigning an arbitrary tabIndex value.

Worth considering: as a general rule, assigning tabIndex is discouraged (see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex). Best accessibility is achieved by controlling the order of widgets on the page and allowing natural tab order to play out.

Hopefully, having tabIndex on fields and buttons will work for the use case you have in mind.