2

The following code is one selected item in a sidebar:

<table cellpadding="0" cellspacing="0" border="0" align="left">
   <tr>
      <td valign="top">
         <ul class="mainsidebar">
            <li class="mainsidebarli">
               <table cellpadding="1" cellspacing="0" border="0" width="100%">
                  <tr>
                     <td class="sidebarIcon" valign="middle"><a class="sidebarLink" href="list.jsp"><img src="/images/sidebar/residents.png" width="28" height="28" border="0" hspace="0" vspace="0"/></a></td>
                     <td class="sidebarLabel" valign="middle"><a class="sidebarLink" href="list.jsp">The List</a></td>
                  </tr>
               </table>
            </li>
         </ul>
      </td>
   </tr>
</table>

The mainsidebar is the main right hand navigation of the application. Currently when the mouse hovers over one of the tables within the list item, thanks to jQuery & CSS, the whole table's style changes.

The problem comes in when using the tab key to navigate through this side bar. Currently the focus goes to each of the href's within the inner most table. The desired effect is for the table itself to get the keyboard focus so that it can give the same color change seen with the mouse hover and to allow the key to be the same as clicking on either of the links.

How is that done?

Sam Carleton
  • 1,339
  • 7
  • 23
  • 45
  • I don't think you can focus a table. Here's some good info http://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus – Turnip Sep 29 '14 at 19:59

1 Answers1

2

You can make the table focusable by adding a tabindex to it.

This works in Chrome, Firefox, Opera, and Safari.

To get it to work in IE, you can add a little jQuery:

$('td,th').on('focus',
  function() {
    $(this).closest('table').focus()
  }
)

Example at: http://jsfiddle.net/5fagh2tf/10/

Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79