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 List features used.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
import React, { useCallback, useState } from 'react';
import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box';
import CheckBox, { CheckBoxTypes } from 'devextreme-react/check-box';
import List, { ListTypes } from 'devextreme-react/list';
import { tasks, deleteModeLabel } from './data.ts';
const itemDeleteModes = ['static', 'toggle', 'slideButton', 'slideItem', 'swipe', 'context'];
const App = () => {
const [allowDeletion, setAllowDeletion] = useState(false);
const [itemDeleteMode, setItemDeleteMode] = useState<ListTypes.Properties['itemDeleteMode']>('toggle');
const onAllowDeletionChange = useCallback((args: CheckBoxTypes.ValueChangedEvent) => {
setAllowDeletion(args.value);
}, [setAllowDeletion]);
const onItemDeleteModeChange = useCallback((args: SelectBoxTypes.ValueChangedEvent) => {
setItemDeleteMode(args.value);
}, [setItemDeleteMode]);
return (
<React.Fragment>
<div className="widget-container">
<List
dataSource={tasks}
height={400}
allowItemDeleting={allowDeletion}
itemDeleteMode={itemDeleteMode}
/>
</div>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<CheckBox
text="Allow deletion"
value={allowDeletion}
onValueChanged={onAllowDeletionChange}
/>
</div>
<div className="option">
<span>Item delete mode </span>
<SelectBox
disabled={!allowDeletion}
items={itemDeleteModes}
inputAttr={deleteModeLabel}
value={itemDeleteMode}
onValueChanged={onItemDeleteModeChange}
/>
</div>
</div>
</React.Fragment>
);
};
export default App;
import React, { useCallback, useState } from 'react';
import SelectBox from 'devextreme-react/select-box';
import CheckBox from 'devextreme-react/check-box';
import List from 'devextreme-react/list';
import { tasks, deleteModeLabel } from './data.js';
const itemDeleteModes = ['static', 'toggle', 'slideButton', 'slideItem', 'swipe', 'context'];
const App = () => {
const [allowDeletion, setAllowDeletion] = useState(false);
const [itemDeleteMode, setItemDeleteMode] = useState('toggle');
const onAllowDeletionChange = useCallback(
(args) => {
setAllowDeletion(args.value);
},
[setAllowDeletion],
);
const onItemDeleteModeChange = useCallback(
(args) => {
setItemDeleteMode(args.value);
},
[setItemDeleteMode],
);
return (
<React.Fragment>
<div className="widget-container">
<List
dataSource={tasks}
height={400}
allowItemDeleting={allowDeletion}
itemDeleteMode={itemDeleteMode}
/>
</div>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<CheckBox
text="Allow deletion"
value={allowDeletion}
onValueChanged={onAllowDeletionChange}
/>
</div>
<div className="option">
<span>Item delete mode </span>
<SelectBox
disabled={!allowDeletion}
items={itemDeleteModes}
inputAttr={deleteModeLabel}
value={itemDeleteMode}
onValueChanged={onItemDeleteModeChange}
/>
</div>
</div>
</React.Fragment>
);
};
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 tasks = ['Prepare 2016 Financial', 'Prepare 2016 Marketing Plan', 'Update Personnel Files', 'Review Health Insurance Options Under the Affordable Care Act', 'New Brochures', '2016 Brochure Designs', 'Brochure Design Review', 'Website Re-Design Plan', 'Rollout of New Website and Marketing Brochures',
'Update Sales Strategy Documents', 'Create 2012 Sales Report', 'Direct vs Online Sales Comparison Report', 'Review 2012 Sales Report and Approve 2016 Plans', 'Deliver R&D Plans for 2016',
'Create 2016 R&D Plans', '2016 QA Strategy Report', '2016 Training Events', 'Approve Hiring of John Jeffers', 'Non-Compete Agreements', 'Update NDA Agreement', 'Update Employee Files with New NDA', 'Sign Updated NDA',
'Submit Questions Regarding New NDA', 'Submit Signed NDA', 'Update Revenue Projections', 'Review Revenue Projections', 'Comment on Revenue Projections', 'Provide New Health Insurance Docs',
'Review Changes to Health Insurance Coverage', 'Scan Health Insurance Forms', 'Sign Health Insurance Forms', 'Follow up with West Coast Stores', 'Follow up with East Coast Stores',
'Send Email to Customers about Recall', 'Submit Refund Report for 2016 Recall', 'Give Final Approval for Refunds', 'Prepare Product Recall Report', 'Review Product Recall Report by Engineering Team',
'Create Training Course for New TVs', 'Review Training Course for any Omissions', 'Review Overtime Report', 'Submit Overtime Request Forms', 'Overtime Approval Guidelines', 'Refund Request Template',
'Recall Rebate Form', 'Create Report on Customer Feedback', 'Review Customer Feedback Report', 'Customer Feedback Report Analysis', 'Prepare Shipping Cost Analysis Report', 'Provide Feedback on Shippers',
'Select Preferred Shipper', 'Complete Shipper Selection Form', 'Upgrade Server Hardware', 'Upgrade Personal Computers', 'Approve Personal Computer Upgrade Plan', 'Decide on Mobile Devices to Use in the Field',
'Upgrade Apps to Windows RT or stay with WinForms', 'Estimate Time Required to Touch-Enable Apps', 'Report on Tranistion to Touch-Based Apps', 'Try New Touch-Enabled WinForms Apps',
'Rollout New Touch-Enabled WinForms Apps', 'Site Up-Time Report', 'Review Site Up-Time Report', 'Review Online Sales Report', 'Determine New Online Marketing Strategy', 'New Online Marketing Strategy',
'Approve New Online Marketing Strategy', 'Submit New Website Design', 'Create Icons for Website', 'Review PSDs for New Website', 'Create New Shopping Cart', 'Create New Product Pages', 'Review New Product Pages',
'Approve Website Launch', 'Launch New Website', 'Update Customer Shipping Profiles', 'Create New Shipping Return Labels', 'Get Design for Shipping Return Labels', 'PSD needed for Shipping Return Labels',
'Request Bandwidth Increase from ISP', 'Submit D&B Number to ISP for Credit Approval', 'Contact ISP and Discuss Payment Options', 'Prepare Year-End Support Summary Report', 'Analyze Support Traffic for 2016',
'Review New Training Material', 'Distribute Training Material to Support Staff', 'Training Material Distribution Schedule', 'Provide New Artwork to Support Team', 'Publish New Art on the Server',
'Replace Old Artwork with New Artwork', 'Ship New Brochures to Field', 'Ship Brochures to Todd Hoffman', 'Update Server with Service Packs', 'Install New Database', 'Approve Overtime for HR',
'Review New HDMI Specification', 'Approval on Converting to New HDMI Specification', 'Create New Spike for Automation Server', 'Report on Retail Sales Strategy for 2014', 'Code Review - New Automation Server',
'Feedback on New Training Course', 'Send Monthly Invoices from Shippers', 'Schedule Meeting with Sales Team', 'Confirm Availability for Sales Meeting', 'Reschedule Sales Team Meeting', 'Send 2 Remotes for Giveaways',
'Ship 2 Remotes Priority to Clark Morgan', 'Discuss Product Giveaways with Management', 'Follow Up Email with Recent Online Purchasers', 'Replace Desktops on the 3rd Floor', 'Update Database with New Leads',
'Mail New Leads for Follow Up', 'Send Territory Sales Breakdown', 'Territory Sales Breakdown Report', 'Return Merchandise Report', 'Report on the State of Engineering Dept', 'Staff Productivity Report',
'Review HR Budget Company Wide', 'Sales Dept Budget Request Report', 'Support Dept Budget Report', 'IT Dept Budget Request Report', 'Engineering Dept Budget Request Report', '1Q Travel Spend Report',
'Approve Benefits Upgrade Package', 'Final Budget Review', 'State of Operations Report', 'Online Sales Report', 'Reprint All Shipping Labels', 'Shipping Label Artwork', 'Specs for New Shipping Label',
'Move Packaging Materials to New Warehouse', 'Move Inventory to New Warehouse', 'Take Forklift to Service Center', 'Approve Rental of Forklift', 'Give Final Approval to Rent Forklift', 'Approve Overtime Pay',
'Approve Vacation Request', 'Approve Salary Increase Request', 'Review Complaint Reports', 'Review Website Complaint Reports', 'Test New Automation App', 'Fix Synchronization Issues', 'Free Up Space for New Application Set',
'Install New Router in Dev Room', 'Update Your Profile on Website', 'Schedule Conf Call with SuperMart', 'Support Team Evaluation Report', 'Create New Installer for Company Wide App Deployment',
'Pickup Packages from the Warehouse', 'Sumit Travel Expenses for Recent Trip', 'Make Travel Arrangements for Sales Trip to San Francisco', 'Book Flights to San Fran for Sales Trip',
'Collect Customer Reviews for Website', 'Submit New W4 for Updated Exemptions', 'Get New Frequent Flier Account', 'Review New Customer Follow Up Plan', 'Submit Customer Follow Up Plan Feedback',
'Review Issue Report and Provide Workarounds', 'Contact Customers for Video Interviews', 'Resubmit Request for Expense Reimbursement', 'Approve Vacation Request Form', 'Email Test Report on New Products',
'Send Receipts for all Flights Last Month'];
export const deleteModeLabel = { 'aria-label': 'Delete Mode' };
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,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.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@15.8.1/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@24.1.7/cjs',
'devextreme-react': 'npm:devextreme-react@24.1.7/cjs',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.12/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/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',
'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/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',
'npm:@devextreme/runtime@3.0.13/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const tasks = [
'Prepare 2016 Financial',
'Prepare 2016 Marketing Plan',
'Update Personnel Files',
'Review Health Insurance Options Under the Affordable Care Act',
'New Brochures',
'2016 Brochure Designs',
'Brochure Design Review',
'Website Re-Design Plan',
'Rollout of New Website and Marketing Brochures',
'Update Sales Strategy Documents',
'Create 2012 Sales Report',
'Direct vs Online Sales Comparison Report',
'Review 2012 Sales Report and Approve 2016 Plans',
'Deliver R&D Plans for 2016',
'Create 2016 R&D Plans',
'2016 QA Strategy Report',
'2016 Training Events',
'Approve Hiring of John Jeffers',
'Non-Compete Agreements',
'Update NDA Agreement',
'Update Employee Files with New NDA',
'Sign Updated NDA',
'Submit Questions Regarding New NDA',
'Submit Signed NDA',
'Update Revenue Projections',
'Review Revenue Projections',
'Comment on Revenue Projections',
'Provide New Health Insurance Docs',
'Review Changes to Health Insurance Coverage',
'Scan Health Insurance Forms',
'Sign Health Insurance Forms',
'Follow up with West Coast Stores',
'Follow up with East Coast Stores',
'Send Email to Customers about Recall',
'Submit Refund Report for 2016 Recall',
'Give Final Approval for Refunds',
'Prepare Product Recall Report',
'Review Product Recall Report by Engineering Team',
'Create Training Course for New TVs',
'Review Training Course for any Omissions',
'Review Overtime Report',
'Submit Overtime Request Forms',
'Overtime Approval Guidelines',
'Refund Request Template',
'Recall Rebate Form',
'Create Report on Customer Feedback',
'Review Customer Feedback Report',
'Customer Feedback Report Analysis',
'Prepare Shipping Cost Analysis Report',
'Provide Feedback on Shippers',
'Select Preferred Shipper',
'Complete Shipper Selection Form',
'Upgrade Server Hardware',
'Upgrade Personal Computers',
'Approve Personal Computer Upgrade Plan',
'Decide on Mobile Devices to Use in the Field',
'Upgrade Apps to Windows RT or stay with WinForms',
'Estimate Time Required to Touch-Enable Apps',
'Report on Tranistion to Touch-Based Apps',
'Try New Touch-Enabled WinForms Apps',
'Rollout New Touch-Enabled WinForms Apps',
'Site Up-Time Report',
'Review Site Up-Time Report',
'Review Online Sales Report',
'Determine New Online Marketing Strategy',
'New Online Marketing Strategy',
'Approve New Online Marketing Strategy',
'Submit New Website Design',
'Create Icons for Website',
'Review PSDs for New Website',
'Create New Shopping Cart',
'Create New Product Pages',
'Review New Product Pages',
'Approve Website Launch',
'Launch New Website',
'Update Customer Shipping Profiles',
'Create New Shipping Return Labels',
'Get Design for Shipping Return Labels',
'PSD needed for Shipping Return Labels',
'Request Bandwidth Increase from ISP',
'Submit D&B Number to ISP for Credit Approval',
'Contact ISP and Discuss Payment Options',
'Prepare Year-End Support Summary Report',
'Analyze Support Traffic for 2016',
'Review New Training Material',
'Distribute Training Material to Support Staff',
'Training Material Distribution Schedule',
'Provide New Artwork to Support Team',
'Publish New Art on the Server',
'Replace Old Artwork with New Artwork',
'Ship New Brochures to Field',
'Ship Brochures to Todd Hoffman',
'Update Server with Service Packs',
'Install New Database',
'Approve Overtime for HR',
'Review New HDMI Specification',
'Approval on Converting to New HDMI Specification',
'Create New Spike for Automation Server',
'Report on Retail Sales Strategy for 2014',
'Code Review - New Automation Server',
'Feedback on New Training Course',
'Send Monthly Invoices from Shippers',
'Schedule Meeting with Sales Team',
'Confirm Availability for Sales Meeting',
'Reschedule Sales Team Meeting',
'Send 2 Remotes for Giveaways',
'Ship 2 Remotes Priority to Clark Morgan',
'Discuss Product Giveaways with Management',
'Follow Up Email with Recent Online Purchasers',
'Replace Desktops on the 3rd Floor',
'Update Database with New Leads',
'Mail New Leads for Follow Up',
'Send Territory Sales Breakdown',
'Territory Sales Breakdown Report',
'Return Merchandise Report',
'Report on the State of Engineering Dept',
'Staff Productivity Report',
'Review HR Budget Company Wide',
'Sales Dept Budget Request Report',
'Support Dept Budget Report',
'IT Dept Budget Request Report',
'Engineering Dept Budget Request Report',
'1Q Travel Spend Report',
'Approve Benefits Upgrade Package',
'Final Budget Review',
'State of Operations Report',
'Online Sales Report',
'Reprint All Shipping Labels',
'Shipping Label Artwork',
'Specs for New Shipping Label',
'Move Packaging Materials to New Warehouse',
'Move Inventory to New Warehouse',
'Take Forklift to Service Center',
'Approve Rental of Forklift',
'Give Final Approval to Rent Forklift',
'Approve Overtime Pay',
'Approve Vacation Request',
'Approve Salary Increase Request',
'Review Complaint Reports',
'Review Website Complaint Reports',
'Test New Automation App',
'Fix Synchronization Issues',
'Free Up Space for New Application Set',
'Install New Router in Dev Room',
'Update Your Profile on Website',
'Schedule Conf Call with SuperMart',
'Support Team Evaluation Report',
'Create New Installer for Company Wide App Deployment',
'Pickup Packages from the Warehouse',
'Sumit Travel Expenses for Recent Trip',
'Make Travel Arrangements for Sales Trip to San Francisco',
'Book Flights to San Fran for Sales Trip',
'Collect Customer Reviews for Website',
'Submit New W4 for Updated Exemptions',
'Get New Frequent Flier Account',
'Review New Customer Follow Up Plan',
'Submit Customer Follow Up Plan Feedback',
'Review Issue Report and Provide Workarounds',
'Contact Customers for Video Interviews',
'Resubmit Request for Expense Reimbursement',
'Approve Vacation Request Form',
'Email Test Report on New Products',
'Send Receipts for all Flights Last Month',
];
export const deleteModeLabel = { 'aria-label': 'Delete Mode' };
<!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/24.1.7/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/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>
.options {
margin-top: 20px;
padding: 20px;
background: rgba(191, 191, 191, 0.15);
}
.options .caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
.option > span {
margin-right: 10px;
}
.option > .dx-selectbox {
display: inline-block;
vertical-align: middle;
max-width: 350px;
width: 100%;
}
The "Deletion UI type" drop-down menu under the List allows you to switch between the different deletion behaviors described below. Menu items correspond to itemDeleteMode property values.
-
"static" (default for desktops)
Click an X button next to a list item to delete it. -
"toggle"
Click a minus icon next to a list item to display the Delete button. -
"slideButton"
Swipe left or right to show the Delete button next to the list item. The content of the list item does not move. -
"slideItem" (default for iOS)
Slide list items left. The content of the list item shifts to make space for the Delete button. -
"swipe" (default for Android)
Swipe items to delete them. -
"context"
Right-click or touch and hold the list item to call a context menu that contains the Delete option.
To get started with the DevExtreme List component, refer to the following tutorial for step-by-step instructions: Getting Started with List.