React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Accessibility in React Chips component

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.
Source
Preview
app.tsx
index.html
index.css
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.
class App extends React.Component<{}, {}> {
  render() {
    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>
    );
  }
}
ReactDom.render(<App />,document.getElementById('chip'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='chip'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

#chip-avatar .andrew {
	background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/andrew.png')
}
  
#chip-avatar .margaret {
	background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/margaret.png')
}
  
#chip-avatar .laura {
	background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/laura.png')
}
  
#chip-avatar .janet {
	background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
}
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.
class App extends React.Component {
    render() {
        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>);
    }
}
ReactDom.render(<App />, document.getElementById('chip'));
Previous
Next