Accessibility in EJ2 JavaScript Chips control

10 May 20234 minutes to read

Keyboard interaction

The following shortcut keys are used to access the Chip control without any interruption.

Keyboard shortcuts Actions
Enter Selects the targeted chip from the ChipList/ChipCollection.
Delete Deletes the targeted chip from the ChipList/ChipCollection. 
new ej.buttons.ChipList({  chips: [{
            "text": "Anne",
            "leadingIconCss": "andrew"
        },
        {
            "text": "Janet",
            "leadingIconCss": "janet"
        },
        {
            "text": "Laura",
            "leadingIconCss": "laura"
        },
        {
            "text": "Margaret",
            "leadingIconCss": "margaret"
        }
    ],
 enableDelete: true  }, '#chip');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Chip</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="chip"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
#chip .andrew {
  background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/andrew.png')
  }
  
  #chip .margaret {
  background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/margaret.png')
  }
  
  #chip .laura {
  background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/laura.png')
  }
  
  #chip .janet {
  background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
  }