Accessibility in ASP.NET CORE Chips

17 Aug 20261 minute to read

Keyboard interaction

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

Keyboard shortcuts Actions
Enter Selects the targeted Chips from the ChipList/ChipCollection.
Delete Deletes the targeted Chips from the ChipList/ChipCollection. 
<ejs-chiplist id="chip-avatar" enableDelete="true" selection="Single">
        <e-chips>
            <e-chip text="Andrew" avatarIconCss='andrew' enabled="true"></e-chip>
            <e-chip text="Janet" avatarIconCss='janet' enabled="true"></e-chip>
            <e-chip text="Laura" avatarIconCss='laura' enabled="true"></e-chip>
            <e-chip text="Margaret" avatarIconCss='margaret' enabled="true"></e-chip>
        </e-chips>
  </ejs-chiplist>

<style>
  #chip-avatar .andrew {
    background-image: url('./andrew.png')
  }

  #chip-avatar .margaret {
    background-image: url('./margaret.png')
  }

  #chip-avatar .laura {
    background-image: url('./laura.png')
  }

  #chip-avatar .janet {
    background-image: url('./janet.png')
  }
</style>

NOTE

View Sample in GitHub.