I'm trying to convert my JS code in order for me to tab through it and press Enter to show time punches. However after I converted it into a button it stops behaving the way it was suppose to. Whenever I press Enter on the image it reloads the whole page. What did I do wrong here?

Original code

<img tal:condition="python:len(punches)>0" onclick="toggleVisibilityByRow('Swipe_line')" 
ref="javascript:void(0);" src="/AcuStaf/images/fold.gif" id="img_Swipe_line" class="clickable" />
&nbsp;
<span tal:condition="float_swipes" id="swipe_float_units" style="display:none">
<span style="font-weight:bold">Float&nbsp;to&nbsp;</span>
<span tal:replace="structure python:container.util.getUnitSelects(my_form='swipe_form', my_var='float_unit', my_var_value='', unit_type='sch_unit', multiunit=False, use_unit_default=False, text_input=True)"></span>
<input type="button" data-inline="true" data-mini="true" onclick="jQuery('#float_unit').attr('disabled','disabled'); jQuery('#swipe_float_units').hide(); jQuery('#float_swipes_button').show()" style="margin-left:3em" title="Float to a alternate location or work" value="Remove Float" />
<br/>
<span style="font-weight:bold">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
</span>

Converting to button for accessibility

<button class="blend" onclick="toggleVisibilityByRow('Swipe_line')" 
                  title="Show time punches">
                  <img src="/AcuStaf/images/fold.svg" 
                  id="img_Swipe_line" class="clickable" alt=">" tal:condition="python:len(punches)>0" ref="javascript:void(0);">
                  </button>
&nbsp;
<span tal:condition="float_swipes" id="swipe_float_units" style="display:none">
<span style="font-weight:bold">Float&nbsp;to&nbsp;</span>
<span tal:replace="structure python:container.util.getUnitSelects(my_form='swipe_form', my_var='float_unit', my_var_value='', unit_type='sch_unit', multiunit=False, use_unit_default=False, text_input=True)"></span>
<input type="button" data-inline="true" data-mini="true" onclick="jQuery('#float_unit').attr('disabled','disabled'); jQuery('#swipe_float_units').hide(); jQuery('#float_swipes_button').show()" style="margin-left:3em" title="Float to a alternate location or work" value="Remove Float" />
<br/>
<span style="font-weight:bold">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
</span>

I did not change anything after "nbsp;" just providing it in case it matters.