Accessibility in EJ2 TypeScript Chips control

10 May 20233 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. 
import { ChipList } from '@syncfusion/ej2-buttons';

// Initialize and Render Chip control

 new 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.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="chip"></div>
    </div>
</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')
  }