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. |
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'));
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'));