CODEWITHSUNDEEP
javascripthtmljquerycss
EaBengaluru
EaBengaluru

Reputation: 81

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.

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

enter image description here

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>

Upvotes: 4

Views: 1205

Answers (4)

A. Meshu
A. Meshu

Reputation: 4148

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>

Upvotes: 0

Jesper
Jesper

Reputation: 1096

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

Upvotes: 3

allancoding
allancoding

Reputation: 549

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;

Upvotes: 0

Alpesh Patil
Alpesh Patil

Reputation: 1936

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

Upvotes: 1

Related Questions