Tuesday August 30, 2005

Textpattern: Hacking the Comment Form's Tabindex

One longstanding frustration among Textpattern users has been the choice of the comment form’s default tabindex order as well as the fact that Textpattern does not assign a tabindex value to both the Preview and Submit buttons. Those who habitually tab through form fields have found themselves inexplicably thrown back to the top of the page after tabbing out of the Comments textarea. Make sense? Of course not! A stroke from the Tab key from the Comments box should naturally go to the Preview or Submit button.

I’m no PHP whiz, so this discovery of mine may be a no-brainer to you accomplished coders out there. Still, I resolved to figure the darn thing out on my own and post my findings here. Click those safety belts, here we go!

The existing tabindex order in Textpattern is totally out of wack, as far as I’m concerned. The Comments field is assigned tabindex="1" which sort of makes sense but creates a potentially confusing tab path. Tabbing out of the Comments field takes you to the Name field, then to Email, and then to URL. After that, you get thrown to the top of the page when logic and usability dictate that a visit to the Preview or Submit button would probably be a more useful next step in the tab order.

Another problem is this: what if you are already using tabindex values in your main navigation, or elsewhere on your page? Should you really have two tabindex="1"? I think not.

So my goal became to find out where I could change the 4 existing tabindex values to whatever I wanted as well as assigning tabindex values to the Preview and Submit buttons. They need love, too.

The fields’ values are easy enough to find. The Comments field’s tabindex is clearly labeled in the code, and the Name, Email, and URL tabindex values are located at the end of their respective code snippets. From /publish/comments.php (this may be a great time to back up a copy of this file… just in case):

Name:
'comment_name_input' => $namewarn.input('text','name', $name, $isize,'comment_name_input',"1"),

Email:
'comment_email_input' => $emailwarn.input('text','email', $email,$isize,'comment_email_input',"2"),

URL:
'comment_web_input' => input('text','web', $web, $isize,'comment_web_input',"3"),

Comment Field:
$textarea = '<textarea class="txpCommentInputMessage" name="message"'.$msgcols.$msgrows.$msgstyle.' tabindex="4">'.htmlspecialchars($message).'</textarea>';

The tabindex is easy to see, as it’s the only number appearing in these snippets.

The buttons were a bit trickier, but not impossible given enough time to tinker with my trademark Trial and Error Methodology™. The Submit button problem was actually solved by Mary on the TXP Forums:

? fInput('submit','submit',gTxt('submit'),'button')
changes to
fInput('submit','submit',gTxt('submit'),'button','','','','6')

The final piece of the puzzle is the Preview button, which proved to be a slippery little devil. After some truly discouraging results, I finally happened upon the correct syntax:

'comment_preview' => input('submit','preview',gTxt('preview'),'comment_preview','button'),
changes to
'comment_preview' => input('submit','preview',gTxt('preview'),'comment_preview','button','5','',''),.

So there you have it. Flexible tabindex values for all. This one goes out to Faruk. Hopefully, future releases of Textpattern will free up more control over the comments area and hacks like these will not be necessary. In case my previous post came off a little harsh, let me take this moment to thank the TXP team for a job well done. I’ve had my share of headaches with Textpattern, but it’s never been anything that a little brainpower and the help of a great community couldn’t solve. Peace out.

Commentary


Nathan Smith » 4892 days ago #

Awesome! I’m glad this problem has finally been solved. I was about to email you back and suggest you write a tutorial, and BAM – there it is. :)

Thanks again, I’ll be putting this into effect on my own site soon, to make the user experience more palettable for everyone. 3 cheers for Jared(igital)!

Matthew Pennell » 4892 days ago #

Actually all that stuff is completely unnecessary. :)

As the form fields and buttons are in a logical order in the source code anyway, all you have to do is remove the tabindex references from the code altogether, either from those function calls you quoted above, or (my personal preference) from the input and fInput functions themselves.

As you alluded to, if you are using your own tabindexes elsewhere on the page, it doesn’t really help to have to keep in mind the fact that you’ve already used tabindex 1 through 5 in the comment form – by removing them altogether, you solve that problem.

Nathan Smith » 4892 days ago #

Matthew: I tried doing that, and while it does have the tab order default to the order of the code, it doesn’t skip from input to input, but skips to the next link.

In my case, it goes from Name to Email, to Gravatar, then to Web, Textile Help, and Message. It also hits the Remember/Forget box before getting to the Preview/Submit button.

So, I think Jared’s way, of forcing the logical order, still works the best.

Nathan Smith » 4892 days ago #

Here’s another interesting question: Why is “preview” always lowercase by default, and “Submit” always uppercase, despite changing them in the php? I’m perplexed.

Jared Christensen » 4892 days ago #

That lowercase “preview” is chapping my hide. I tried changing it to uppercase in the PHP and in the language file, but no dice.

And yes, I’m aware that you could just remove the tabindex values completely. Whatever suits your needs!

Jared Christensen » 4892 days ago #

Actually, on line 566 of the /lang/en-gb file you can change the “preview” button text. I had to reinstall the language manually for the change to take effect.

Nathan Smith » 4891 days ago #

Nice, thanks for the tip! Took me awhile to figure out how to reinstall the language, but I got it. I upped the ante by changing my button to read Publish instead of Submit. ;)

Matthew Pennell » 4891 days ago #

The language file is in the database as of TxP 4.0, so the old /lang files are not used anymore AFAIK.

Nathan: The reason your tab order doesn’t work with the taborders removed is that your form isn’t marked up particularly well – you should use labels for your input headings instead of p tags.

Jared Christensen » 4891 days ago #

The database language can be overwritten by installing the lang file manually in Admin > Manage Languages. It’s pretty handy if you’re looking at customizing a lot of TXP’s generic text output. The only downside is that it appears that the lang file is either appended to or replaces the database, so you have to reinstall the file every time you make a change.

Nathan Smith » 4890 days ago #

Matthew: Thanks, going to get right on that and fix it. I think my P tags are “legacy” from when I went from HTML to XHTML and the validator said “Hey buddy, wrap these inputs in tags such as…” The P stood out as something familiar, and so I put them in, and have kept my same basic comment form for TXP ever since. :)

Matthew Pennell » 4890 days ago #

Nathan: Wrap the whole lot in a fieldset and you no longer have a validation problem. :)

« Older writing is available in the Archives.