Accessibility in React Chips component

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

app.jsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
function App() {
    return (<ChipListComponent id="chip-avatar" enableDelete={true}>
          <ChipsDirective>
              <ChipDirective text="Andrew" avatarIconCss="andrew"></ChipDirective>
              <ChipDirective text="Janet" avatarIconCss="janet"></ChipDirective>
              <ChipDirective text="Laura" avatarIconCss="laura"></ChipDirective>
              <ChipDirective text="Margaret" avatarIconCss="margaret"></ChipDirective>
          </ChipsDirective>
      </ChipListComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));

app.tsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To render Chip.
function App(){
  return (
      <ChipListComponent id="chip-avatar" enableDelete={true}>
          <ChipsDirective>
              <ChipDirective text="Andrew" avatarIconCss="andrew"></ChipDirective>
              <ChipDirective text="Janet" avatarIconCss="janet"></ChipDirective>
              <ChipDirective text="Laura" avatarIconCss="laura"></ChipDirective>
              <ChipDirective text="Margaret" avatarIconCss="margaret"></ChipDirective>
          </ChipsDirective>
      </ChipListComponent>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('chip'));