Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tab order in the create form #1483

Closed
DonRichards opened this issue Apr 7, 2020 · 12 comments
Closed

Tab order in the create form #1483

DonRichards opened this issue Apr 7, 2020 · 12 comments

Comments

@DonRichards
Copy link
Member

The tab order doesn't exist and hitting tab jumps around. Tabbing jumps straight to content model then save, skipping everything in the middle.

Screen Shot

To recreate

go to /index.php/node/add/islandora_object
Start filling out the form and hit tab to jump to the next line.

@mjordan
Copy link
Contributor

mjordan commented Apr 7, 2020

Funny, not getting anything useful to address this by googling/duckduckgoing. I would figure there had to be module for that.

@mjordan
Copy link
Contributor

mjordan commented Apr 7, 2020

There's https://www.drupal.org/node/1973218#tabbing, but seems like overkill to have to write JavaScript on a per-form basis, especially on a highly variable form like the add/edit form.

@DonRichards
Copy link
Member Author

DonRichards commented Apr 14, 2020

@mjordan tabindex of a form

$form['sheet_wrapper'][$node->title]['amount'] = array(
	'#type' => 'textfield',
	'#title' => t('amount'),
	'#size' => 3,
	'#maxlength' => 3,
	'#description' => t('amount of errors'),
	'#default_value' => isset($node->sheet_wrapper[$node->nid]['amount']) ? $node->amount : 'abc', // default value
	'#prefix' => '<td>',
	'#suffix' => '</td>',			
	'#attributes' => array('tabindex' => '6'),    //<<<<<---- ADD THIS LINE
	);

Apologies, I copied this right out of a form page. Adding the "attributes/tabindex" should fix this.

@mjordan
Copy link
Contributor

mjordan commented Apr 16, 2020

Given that site admins can add new fields, remove existing ones, etc., any '#attributes' => array('tabindex' => 'x') code we inject with hook_form_alter() or whatever will be very brittle. How would we make sure that whatever we added would continue to work as expected?

@mjordan
Copy link
Contributor

mjordan commented Apr 17, 2020

Was thinking about this. Since you can alter a form to inject the tabindex attribute into any element, if you can get the weight of all the form elements in a rendered form like the node add/edit form, you should then be able to alter that form to inject the tabindex values so they correspond to the ordering of the form elements. That would at least 1) align the tabbing order with the layout of the form and 2) generalize the altering of tabindices so that they are way less brittle than hard-coded ones. Not sure how that would work for multivalued fields like the ones @DonRichards shows above since it appears that the tabindex attribute applies to the entire form element, not to its subelements.

@DonRichards
Copy link
Member Author

I think that's at least a start. Where would this code/config need to be?

@mjordan
Copy link
Contributor

mjordan commented Apr 17, 2020

@DonRichards I'm tabbing through both the node add and edit forms and am not experiencing what you describe. For me (using Firefox and also Chrome on Ubuntu), starting in the title field and tabbing moves focus down the form in the way I'd expect, and doesn't jump around unpredictably.

Can some other people try on different OSs/browser combinations to see what happens?

@manez
Copy link
Member

manez commented Apr 20, 2020

Just tested this on a brand new build in Mac/Chrome and and Mac/Safari, and I'm not reproducing. There is a slight difference, in that Chrome hits "show row weights" and Safari skips it, but they both go in the order I expect.

@DonRichards
Copy link
Member Author

When you use http://future.islandora.ca/ you get the same result?

@manez
Copy link
Member

manez commented Apr 20, 2020

I do - down to Chrome/Safari treating "show row weights" differently

@DonRichards
Copy link
Member Author

ok, I got something odd going on here. I just tested this on my office computer and it's behaving as expected but not on my laptop. So I"m not sure the rhyme or reason. So this could be a "me" issue or a hint to something else. I'm leaning towards a "me" issue right now. I think I'll close this until I can find a way to deliberately cause tab orders to fail on a different machine.

@DonRichards
Copy link
Member Author

@mjordan @manez Thanks for walking through this with me. I hate when it turns out to be nothing but I'm really appreciative when people take the time to "unpack" a problem.

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

No branches or pull requests

3 participants