Return key click doesn't work on elements with onClick()

I wonder should a return key click work on a element when it has an onclick function? I have icon in a "a" tag and when I have tabindex active on that element and I hit the return key it doesn't work, it works only when it has an href="" tag.

      <div class="ssm d-flex justify-content-end">
        <ul class=" navbar-nav  flex-row ">
          <li class="nav-item"><a><i id="sounds"  class="ssm-icon" style="margin-right: 7px; background-size: 20px;"></i><span style="display:none"><?php echo $lang['sound-off-txt'] ?></span></a></li>
          <li class="nav-item"><a><i id="font_size" class="font_size ssm-icon" style="margin-right: 7px"></i><span style="display:none"><?php echo $lang['font-size-txt'] ?></span></a></li>
          <li class="nav-item"><a><i id="contrast" onClick="rotateImg()" class="contrast_icon ssm-icon fa-sm" style="margin-right: 7px"></i><span style="display:none"><?php echo $lang['contrast-txt'] ?></span></a></li>
          <li class="nav-item"><a><i id="infoBtn" class="ssm-icon" style="margin-right: 7px"></i><span style="display:none"><?php echo $lang['info-f-txt'] ?></span></a></li>
        </ul>
      </div>

this are the icons I use in a navbar they got different functions on click.

JS code for third icon for example.

 let rotation = 0;

rotateImg = () => {
    rotation += 180;
    contrastToggle.style.transform = `rotate(${rotation}deg)`;
};