Accessibility in Chips Control

22 Jan 20251 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.

CSHTML

<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.