28 Oct 2009

AjaxControlToolkit Accessible Tabs

Can't believe it but MS forgot to make Tabs in the Ajax Control Toolkit accessible via the keyboard. Okay, they provide an access key property, but what about just being able to tab to the tab (ho ho) and press enter to open?

My solution is a snippet of JQuery to iterate through all the tabs and update the HeaderText of the TabPanel, turning it into a fake Html Anchor. Works fine in FF3 and IE6+ so I'm happy.

$('.ajax__tab_tab').each(function() { if ($(this).html().indexOf('<a') < 0)
$(this).html('<a href="" onclick="return false;">' + $(this).html() + '</a>'); });

If you want to hide the 'linkiness' of the updated headertext, just add a style directive to your CSS like so:

.ajax__tab_tab a { text-decoration: none; font-weight: normal; }

Probs? Let me know.

No comments:

Post a Comment

Comments are very welcome but are moderated to prevent spam.

If I helped you out today, you can buy me a beer below. Cheers!