I am working on Accessibility and added a "tabindex = 0" inside my "tr" tag. The issue is if I tab into that "tr" and press "Enter" on my keyboard the "onclick" doesn't work, but if I use the mouse to click the link it still works. I tried adding an anchor tag inside the "tr" tag where "onclick" is declared, but that didn't work. This is also being used inside python code where the "tr" is part of a string. Here is my code.
#print open shifts line
personal_table += """ <tr tabindex="0" class="open_shift_line odd clickable"
onclick="pop_over_window('/AcStaf/Home/my_self_schedule?id=%s&bdate=%s&edate=%s','Open Shifts')">
<td>%s%s Open Schedule</td> <td style="color:#EB0000">Closes %s at %s</td></tr>"""
%(id, per_startdate, per_enddate, sch_req_text, container.util.getDateDisplay(bdate=per_startdate, edate=per_enddate, date_format='%m-%d-%Y'),
container.util.getDateTimeStr(date=pub_period['publish_edate'], fmt='%m-%d'), container.util.format_acutime(acutime=pub_period['publish_etime']))
Do I need to replace onclick with "a href"? What are my options?
All elements that are artificially made focusable with tabindex=0 don't automatically react to keyboard in any way. You have to handle keyboard events yourself.
This is confusing for many people.
IN contrast, elements that are naturally focusable, such as links or buttons, have built-in support for keyboard events. Pressing enter triggers the onclick or onsubmit handler, without the need for you do do anything.
This is why it's generally recommanded to use naturally focusable elements whenever possible. For your case however, you can't.
So in short, you must handle the enter key yourself.
You can achieve this by some javascript (with jQuery in this example):
$(document).keyup(function(event) {
if (event.keyCode === 13) { //13 is enter key
$(':focus').trigger('click'); // clicks focused element
}
});