with keyboard tab key tabindex element is not showing

Hi i want to show edit icon with tab key press(keyboard accessibility) and once enter key is pressed from keyboard alert must come.

STILL I'M LOOKING FOR AN ANSWER !!

expected solution (can be either of below one):

1. best: on tab button press, directly highlight the edit icon on list and on enter key press alert must come - 1 step

2. Ok: on tab button press, highlight list item then on next tab press highlight the edit icon and on enter key press alert must come - 2 step

Note: i tried best solution approach but did not work

Below image shows non working demo

Below is what i have tried:

function editClicked(){
   alert('tab and enter key pressed')
}

ul{
 list-style:none;
 margin:0;
 padding:0;
}

li{
  width:100%;
  height:80px;
  display:flex;
  justify-content:space-between;
  margin-top:20px;
}

li{
  border:1px solid yellow;
}

li:hover{
  border:1px solid red;
}   

li span.edit{
  visibility:hidden;
}

ul li:hover span.edit{
   visibility:visible;
}

<ul>
   <li tabindex="0">
     <span>content</span>
     <span onclick="editClicked()" class="edit" tabindex="0" ><svg  width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="bi bi-pen-fill"><path  fill-rule="evenodd" d="M13.498.795l.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001z"></path></svg></span>
   </li>
   
    <li tabindex="0">
     <span>content</span>
     <span onclick="editClicked()" class="edit" tabindex="0"><svg  width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="bi bi-pen-fill"><path  fill-rule="evenodd" d="M13.498.795l.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001z"></path></svg></span>
   </li>
    
   <li tabindex="0">
     <span>content</span>
     <span onclick="editClicked()" class="edit" tabindex="0"><svg  width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="bi bi-pen-fill"><path  fill-rule="evenodd" d="M13.498.795l.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001z"></path></svg></span>
   </li>
<ul>

Please help me thanks in advance !!

from with keyboard tab key tabindex element is not showing