Accessibility, when pressing Enter on my image the screen reloads

Question

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.