I have a bootstrap card that contains info from an API. In my JS file, I am dynamically rendering the card into my HTML file. Right now I am trying to make an icon accessible by making it clickable with the enter key but I can't get it to work.
I tried wrapping the i tag in a button but it didn't work. I also tried wrapping it in an a tag and adding a href but that also didn't work. Does anyone have any ideas or know what to do?
In the code below you will see I added the tabindex=0 attribute which is at least allowing the user to select the i tag but doesn't help make it clickable with the enter key.
<i
id="heartBTN-${data.date}"
class="fas fa-heart hidden heart fa-lg p-1 my-1 mr-3"
tabindex="0"
aria-label="like content"
title="I like it"
><span class="likeSpan likeSpan${data.date}">Like Me</span></i
>You can do something like this but as the query selector is body, so it will fire up the trigger every time someone presses the Enter key in the page.
document.querySelector('body').addEventListener('keypress', function (e)
{
if (e.key === 'Enter') {
// triggering the click
$('.fa-heart').click();
}
});
The recommended way is to bind the event listener to an input field. Like document.querySelector('#myInputField').addEventListener