rich text editor tab straight to textarea

Question

Hi all,

I have been using a couple of rich text/wysiwyg editors in one of my project (tinyMCE and markitup). I am currently running the latest version of markitup and its great, however it makes the mouse a must have in form navigation due to not being able to tab from the input above into the actual textarea, it just starts tabbing along the options like bold, italic etc.

I can see that here in stackoverflow you can tab from title input to body textarea with one tab, also the same in gmail. Is there a way to do this with JQuery/javascript or is there something simple Im missing.

Regards

Luke

Answer 1

I think Stack Overflows uses <li>'s + javascript for the buttons.

Of course <li>'s don't have tabindex, therefore they aren't an 'accessible' element.

You could try setting tabindex="-1" on the buttons in the toolbar but I'm not 100% sure that's a good idea from an accessibility point of view.

Others may have different solutions.

Answer 2

Thanks to Marko for giving me the idea, It was a very simple solution in the end, around line 160 of jquery.markitup.css there is this code

li = $('<li class="markItUpButton markItUpButton'+t+(i)+' '+(button.className||'')+'"><a href="" '+key+' title="'+title+'">'+(button.name||'')+'</a></li>')
    .bind("contextmenu", function() { // prevent contextmenu on mac and allow ctrl+click
    return false;
    }).click(function() {

Changing the <a href="" and </a> to <span and </span> respectivly and then changing all references to "a" in the stylesheet to "span" and adding cursor:pointer seems to have done the trick.

I hope anyone using markitup will find this useful and thanks again to Marko for the tip in the right direction