with keyboard tab key tabindex element is not showing

Question

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

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

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;
}


   
     content
     
   
   
    
     content
     
   
    
   
     content

user_14526868 · Answer

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{
  opacity: 0;
}

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


   
     content
     
   
   
    
     content
     
   
    
   
     content

user_7203373 · Answer

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

Solution

li .edit{
 opacity: 0;
}

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

function editClicked(){
   alert('editClicked clicked')
   document.activeElement.blur()
}     

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-within .edit, ul li:hover .edit {
  opacity: 1;
}


   
     content
     
   
   
    
     content
     
   
    
   
     content

user_13707878 · Answer

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;
}



   
     content
     
   
   
    
     content
     
   
    
   
     content

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;
}



   
     content
     
   
   
    
     content
     
   
    
   
     content

UPDATE: fix tabindex to 0;

user_6525081 · Answer

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;
}


   
     content
     
   
   
    
     content
     
   
    
   
     content

with keyboard tab key tabindex element is not showing

4 Answers