按tab键时带tabindex属性的编辑图标不显示，如何实现按回车触发alert？

最优方案（1步操作实现需求） #

修改说明 #

1. 移除li元素的tabindex属性，让tab焦点直接定位到编辑图标，跳过列表项层级，实现单次tab即可选中编辑图标
2. CSS新增li:focus-within规则，保证焦点落在编辑图标上时，编辑图标正常显示
3. 给编辑图标绑定键盘回车事件，兼容键盘触发交互逻辑
4. 调整alert弹出内容符合需求

完整可运行代码 #

CSS

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

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

li:hover, li:focus-within{
  border:1px solid red;
}   

li span.edit{
  visibility:hidden;
  cursor: pointer;
}

/* 同时兼容hover和焦点状态下显示编辑图标 */
ul li:hover span.edit,
ul li:focus-within span.edit{
   visibility:visible;
}

JS

function editClicked(){
   alert('alert must come')
}

// 监听编辑图标回车键触发交互
document.addEventListener('keydown', (e) => {
  if(e.target.classList.contains('edit') && e.key === 'Enter'){
    editClicked()
  }
})

HTML

<ul>
   <li>
     <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>
     <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>
     <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>

可行方案（2步操作实现需求） #

如果需要保留先选中列表项再选中编辑图标的交互，只需在最优方案基础上做两处调整：

1. 给li元素加回tabindex="0"属性
2. CSS新增规则：ul li:focus span.edit{visibility:visible;}
   即可实现第一次tab选中列表项、编辑图标显示，第二次tab选中编辑图标，按下回车触发弹窗的效果。

内容的提问来源于stack exchange，提问作者EaBengaluru