键盘选项卡键 tabindex 元素未显示

Question

. Answers to this question are eligible for a +50 reputation bounty. EaBengaluru is looking for an :

Must solve my problem without affecting html structure

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 !!

Answer 1

Having visibility: hidden; really messes with your ability to focus those items. Even after adding a focus event to the children, it still won't focus on the kids. So i've changed the visibility to visible . Maybe someone can make it work with hidden , but i don't know how.

Fixing your tabindexes and adding a keydown event to the document made the 2nd expected solution possible.

 function editClicked(){ alert('editClicked clicked') } document.addEventListener('keydown', logKey); function logKey(e) { if (e.code != "Enter") return; let a = document.activeElement; // active element if (a.className == "edit") { editClicked(); } }

 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:focus{ border:1px solid red; } li .edit{ visibility:visible; } ul li:focus .edit, ul li .edit:focus { visibility:visible; }

 <ul> <li tabindex="1"> <span>content</span> <span tabindex="2" onclick="editClicked()" class="edit"><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="3"> <span>content</span> <span tabindex="4" onclick="editClicked()" class="edit"><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="5"> <span>content</span> <span tabindex="6" onclick="editClicked()" class="edit"><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>

Answer 2

1. You can control the visibility of the edit icon using the CSS Opacity style
2. You only need to set tab-index for the edit icons

Solution

li .edit{
 opacity: 0;
}

ul li:focus .edit, ul li .edit:focus {
  opacity: 1;
}

 function editClicked(){ alert('editClicked clicked') } document.addEventListener('keydown', logKey); function logKey(e) { if (e.code != "Enter") return; let a = document.activeElement; // active element if (a.className == "edit") { editClicked(); } }

 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:focus{ border:1px solid red; } li .edit{ opacity: 0; } ul li:focus .edit, ul li .edit:focus { opacity: 1; }

 <ul> <li> <span>content</span> <span tabindex="1" onclick="editClicked()" class="edit"><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 tabindex="2" onclick="editClicked()" class="edit"><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 tabindex="3" onclick="editClicked()" class="edit"><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>

Answer 3

Try this:

Option 1: fill color!

 function editClicked(){ alert('tab and enter key pressed') } function handleEnter(e){ var keycode = (e.keyCode ? e.keyCode : e.which); if (keycode == '13') { document.activeElement.click(); } }

 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; background-color:#fff; } li:hover{ border:1px solid red; } li span svg.editc{ fill: #fff; } ul li:hover span svg.editc{ fill: black; } .edit:focus .editc{ fill: black; } .edit{ height: 1em; }

 <body onkeypress="handleEnter(event)"> <ul> <li> <span>content</span> <span onclick="editClicked()" class="edit" tabindex="0" ><svg class="editc" width="1em" height="1em" viewBox="0 0 16 16" 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" class="editc" 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" class="editc" 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>

Option 2: Opacity!

 function editClicked(){ alert('tab and enter key pressed') } function handleEnter(e){ var keycode = (e.keyCode ? e.keyCode : e.which); if (keycode == '13') { document.activeElement.click(); } }

 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; background-color:#fff; } li:hover{ border:1px solid red; } li span svg.editc{ opacity: 0; } ul li:hover span svg.editc{ opacity: 1; } .edit:focus .editc{ opacity: 1; } .edit{ height: 1em; }

 <body onkeypress="handleEnter(event)"> <ul> <li> <span>content</span> <span onclick="editClicked()" class="edit" tabindex="0" ><svg class="editc" width="1em" height="1em" viewBox="0 0 16 16" 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" class="editc" 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" class="editc" 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>

UPDATE: fix tabindex to 0;

Answer 4

Hope i understand your question correct. I removed tabindex from spans and added notes inside code.

 function editClicked(){ alert('tab and enter key pressed') } /***********************/ // iterate list items document.querySelectorAll('li').forEach(element => { // on focus event: element.addEventListener('focus', function() { // color borders this.classList.add('liHover'); // show current pencil this.querySelectorAll('.edit')[0].classList.add('editHover'); // listen to keyboard this.addEventListener('keypress',editThis); }); // on blur event - do the opposite. element.addEventListener('blur', function() { this.classList.remove('liHover'); this.querySelectorAll('.edit')[0].classList.remove('editHover'); this.removeEventListener('keypress',editThis); }); }); // this will activate when list item is on focus function editThis(e) { if (e.key === 'Enter') { editClicked(); } }

 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; } .liHover, li:hover{ border:1px solid red; } li span.edit{ visibility:hidden; } .editHover, ul li:hover span.edit{ visibility:visible!important; }

 <ul> <li tabindex="0"> <span>content</span> <span onclick="editClicked()" class="edit"><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"><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"><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>