Showing posts with label Accessibility AJAX TabPanel. Show all posts
Showing posts with label Accessibility AJAX TabPanel. Show all posts

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.
If I helped you out today, you can buy me a beer below. Cheers!