DevExtreme Accessibility Compliance
DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo's accessibility level, click the Run AXE® Validation button to launch the AXE® web accessibility evaluation tool.
All trademarks or registered trademarks are property of their respective owners. AXE® Terms of Use
The overall accessibility level of your application depends on the Toolbar features used.
Backend API
import React from 'react';
import Toolbar, { Item } from 'devextreme-react/toolbar';
import List from 'devextreme-react/list';
import { DataSource } from 'devextreme-react/common/data';
import notify from 'devextreme/ui/notify';
import 'devextreme/ui/select_box';
import { productTypes, products } from './data.ts';
const renderLabel = () => <div className="toolbar-label"><b>Tom's Club</b> Products</div>;
const App = () => (
<React.Fragment>
<Toolbar>
<Item location="before"
widget="dxButton"
options={backButtonOptions} />
<Item location="before"
widget="dxButton"
options={refreshButtonOptions} />
<Item location="center"
locateInMenu="never"
render={renderLabel} />
<Item location="after"
locateInMenu="auto"
widget="dxSelectBox"
options={selectBoxOptions} />
<Item location="after"
locateInMenu="auto"
widget="dxButton"
options={addButtonOptions} />
<Item locateInMenu="always"
widget="dxButton"
options={saveButtonOptions} />
<Item locateInMenu="always"
widget="dxButton"
options={printButtonOptions} />
<Item locateInMenu="always"
widget="dxButton"
options={settingsButtonOptions} />
</Toolbar>
<List id="products" dataSource={productsStore} />
</React.Fragment>
);
const productsStore = new DataSource(products);
const backButtonOptions = {
icon: 'back',
onClick: () => {
notify('Back button has been clicked!');
},
};
const refreshButtonOptions = {
icon: 'refresh',
onClick: () => {
notify('Refresh button has been clicked!');
},
};
const selectBoxOptions = {
width: 140,
items: productTypes,
valueExpr: 'id',
displayExpr: 'text',
value: productTypes[0].id,
inputAttr: { 'aria-label': 'Categories' },
onValueChanged: (args) => {
if (args.value > 1) {
productsStore.filter(['type', '=', args.value]);
} else {
productsStore.filter(null);
}
productsStore.load();
},
};
const addButtonOptions = {
icon: 'plus',
onClick: () => {
notify('Add button has been clicked!');
},
};
const saveButtonOptions = {
text: 'Save',
onClick: () => {
notify('Save option has been clicked!');
},
};
const printButtonOptions = {
text: 'Print',
onClick: () => {
notify('Print option has been clicked!');
},
};
const settingsButtonOptions = {
text: 'Settings',
onClick: () => {
notify('Settings option has been clicked!');
},
};
export default App;
import React from 'react';
import Toolbar, { Item } from 'devextreme-react/toolbar';
import List from 'devextreme-react/list';
import { DataSource } from 'devextreme-react/common/data';
import notify from 'devextreme/ui/notify';
import 'devextreme/ui/select_box';
import { productTypes, products } from './data.js';
const renderLabel = () => (
<div className="toolbar-label">
<b>Tom's Club</b> Products
</div>
);
const App = () => (
<React.Fragment>
<Toolbar>
<Item
location="before"
widget="dxButton"
options={backButtonOptions}
/>
<Item
location="before"
widget="dxButton"
options={refreshButtonOptions}
/>
<Item
location="center"
locateInMenu="never"
render={renderLabel}
/>
<Item
location="after"
locateInMenu="auto"
widget="dxSelectBox"
options={selectBoxOptions}
/>
<Item
location="after"
locateInMenu="auto"
widget="dxButton"
options={addButtonOptions}
/>
<Item
locateInMenu="always"
widget="dxButton"
options={saveButtonOptions}
/>
<Item
locateInMenu="always"
widget="dxButton"
options={printButtonOptions}
/>
<Item
locateInMenu="always"
widget="dxButton"
options={settingsButtonOptions}
/>
</Toolbar>
<List
id="products"
dataSource={productsStore}
/>
</React.Fragment>
);
const productsStore = new DataSource(products);
const backButtonOptions = {
icon: 'back',
onClick: () => {
notify('Back button has been clicked!');
},
};
const refreshButtonOptions = {
icon: 'refresh',
onClick: () => {
notify('Refresh button has been clicked!');
},
};
const selectBoxOptions = {
width: 140,
items: productTypes,
valueExpr: 'id',
displayExpr: 'text',
value: productTypes[0].id,
inputAttr: { 'aria-label': 'Categories' },
onValueChanged: (args) => {
if (args.value > 1) {
productsStore.filter(['type', '=', args.value]);
} else {
productsStore.filter(null);
}
productsStore.load();
},
};
const addButtonOptions = {
icon: 'plus',
onClick: () => {
notify('Add button has been clicked!');
},
};
const saveButtonOptions = {
text: 'Save',
onClick: () => {
notify('Save option has been clicked!');
},
};
const printButtonOptions = {
text: 'Print',
onClick: () => {
notify('Print option has been clicked!');
},
};
const settingsButtonOptions = {
text: 'Settings',
onClick: () => {
notify('Settings option has been clicked!');
},
};
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
export const productTypes = [{
id: 1,
text: 'All',
}, {
id: 2,
text: 'Video Players',
}, {
id: 3,
text: 'Televisions',
}, {
id: 4,
text: 'Monitors',
}, {
id: 5,
text: 'Projectors',
}];
export const products = [{
text: 'HD Video Player',
type: 2,
}, {
text: 'SuperHD Video Player',
type: 2,
}, {
text: 'SuperLCD 42',
type: 3,
}, {
text: 'SuperLED 42',
type: 3,
}, {
text: 'SuperLED 50',
type: 3,
}, {
text: 'SuperLCD 55',
type: 3,
}, {
text: 'DesktopLCD 19',
type: 4,
}, {
text: 'DesktopLCD 21',
type: 4,
}, {
text: 'DesktopLED 21',
type: 4,
}, {
text: 'Projector Plus',
type: 5,
}, {
text: 'Projector PlusHD',
type: 5,
}];
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://cdn.jsdelivr.net/npm/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.6/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.24/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.64/dist/dx-gantt.js',
'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@8.2.3/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'@preact/signals-core': 'npm:@preact/signals-core@1.8.0/dist/signals-core.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme-react/common': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/common/core/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
// eslint-disable-next-line
const useTgzInCSB = ['openai'];
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const productTypes = [
{
id: 1,
text: 'All',
},
{
id: 2,
text: 'Video Players',
},
{
id: 3,
text: 'Televisions',
},
{
id: 4,
text: 'Monitors',
},
{
id: 5,
text: 'Projectors',
},
];
export const products = [
{
text: 'HD Video Player',
type: 2,
},
{
text: 'SuperHD Video Player',
type: 2,
},
{
text: 'SuperLCD 42',
type: 3,
},
{
text: 'SuperLED 42',
type: 3,
},
{
text: 'SuperLED 50',
type: 3,
},
{
text: 'SuperLCD 55',
type: 3,
},
{
text: 'DesktopLCD 19',
type: 4,
},
{
text: 'DesktopLCD 21',
type: 4,
},
{
text: 'DesktopLED 21',
type: 4,
},
{
text: 'Projector Plus',
type: 5,
},
{
text: 'Projector PlusHD',
type: 5,
},
];
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.tsx");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
.toolbar-label,
.toolbar-label > b {
font-size: 16px;
}
#products {
margin-top: 10px;
}
Configure Toolbar Items
You can display Toolbar items from an items array or a dataSource. A Toolbar item may be plain text or a UI component. You should specify the text or the widget property depending on the item. If the item is a UI component, declare its options.
Specify Item Location
You can set the dataSource with location fields or specify the location property for each item. The location value can be one of the following:
-
"center"
Places the item in the center of the toolbar. -
"before"
Places the item before the central element(s). -
"after"
Places the item after the central element(s).
Additionally, the Toolbar can render its items in the overflow menu. Specify the locateInMenu property for each item with one of the following values:
-
"always"
Always places the item in the overflow menu. -
"never"
Places the item outside of the overflow menu. -
"auto"
Places the item outside of the overflow menu. If all items cannot fit within the width of the Toolbar, it renders this item in the overflow menu.
Note that you cannot specify the order of the items with locateinMenu="auto" placed in the overflow menu.
Customize Item Appearance
You can define the itemTemplate to customize item appearance. To customize the items in the overflow menu, use the menuItemTemplate.