Search results

Accessibility

Keyboard interaction

The following key shortcuts are used to access the ListView component without any interruption.

Keyboard shortcuts Actions
Arrow Up Move to the previous list item.
Arrow Down Move to the next list item.
Select Select the targeted list from the whole list.
Back Get back to the previous lists if it is in nested list.
Source
Preview
index.js
index.html
//define the array of JSON
var continent = [
    {
        'text': 'Asia',
        'id': '01',
        'category': 'Continent',
        'child': [{
                'text': 'India',
                'id': '1',
                'category': 'Asia',
                'child': [{
                        'text': 'Delhi',
                        'id': '1001',
                        'category': 'India',
                    },
                    {
                        'text': 'Kashmir',
                        'id': '1002',
                        'category': 'India',
                    },
                    {
                        'text': 'Goa',
                        'id': '1003',
                        'category': 'India',
                    },
                ]
            },
            {
                'text': 'China',
                'id': '2',
                'category': 'Asia',
                'child': [{
                        'text': 'Zhejiang',
                        'id': '2001',
                        'category': 'China',
                    },
                    {
                        'text': 'Hunan',
                        'id': '2002',
                        'category': 'China',
                    },
                    {
                        'text': 'Shandong',
                        'id': '2003',
                        'category': 'China',
                    }]
            }]
    },
    {
        'text': 'North America',
        'id': '02',
        'category': 'Continent',
        'child': [{
                'text': 'USA',
                'id': '3',
                'category': 'North America',
                'child': [{
                        'text': 'California',
                        'id': '3001',
                        'category': 'USA',
                    },
                    {
                        'text': 'New York',
                        'id': '3002',
                        'category': 'USA',
                    },
                    {
                        'text': 'Florida',
                        'id': '3003',
                        'category': 'USA',
                    }]
            },
            {
                'text': 'Canada',
                'id': '4',
                'category': 'North America',
                'child': [{
                        'text': 'Ontario',
                        'id': '4001',
                        'category': 'Canada',
                    },
                    {
                        'text': 'Alberta',
                        'id': '4002',
                        'category': 'Canada',
                    },
                    {
                        'text': 'Manitoba',
                        'id': '4003',
                        'category': 'Canada',
                    }]
            }]
    },
    {
        'text': 'Europe',
        'id': '03',
        'category': 'Continent',
        'child': [{
                'text': 'Germany',
                'id': '5',
                'category': 'Europe',
                'child': [{
                        'text': 'Berlin',
                        'id': '5001',
                        'category': 'Germany',
                    },
                    {
                        'text': 'Bavaria',
                        'id': '5002',
                        'category': 'Germany',
                    },
                    {
                        'text': 'Hesse',
                        'id': '5003',
                        'category': 'Germany',
                    }]
            }, {
                'text': 'France',
                'id': '6',
                'category': 'Europe',
                'child': [{
                        'text': 'Paris',
                        'id': '6001',
                        'category': 'France',
                    },
                    {
                        'text': 'Lyon',
                        'id': '6002',
                        'category': 'France',
                    },
                    {
                        'text': 'Marseille',
                        'id': '6003',
                        'category': 'France',
                    }]
            }]
    },
    {
        'text': 'Australia',
        'id': '04',
        'category': 'Continent',
        'child': [{
                'text': 'Australia',
                'id': '7',
                'category': 'Australia',
                'child': [{
                        'text': 'Sydney',
                        'id': '7001',
                        'category': 'Australia',
                    },
                    {
                        'text': 'Melbourne',
                        'id': '7002',
                        'category': 'Australia',
                    },
                    {
                        'text': 'Brisbane',
                        'id': '7003',
                        'category': 'Australia',
                    }]
            }, {
                'text': 'New Zealand',
                'id': '8',
                'category': 'Australia',
                'child': [{
                        'text': 'Milford Sound',
                        'id': '8001',
                        'category': 'New Zealand',
                    },
                    {
                        'text': 'Tongariro National Park',
                        'id': '8002',
                        'category': 'New Zealand',
                    },
                    {
                        'text': 'Fiordland National Park',
                        'id': '8003',
                        'category': 'New Zealand',
                    }]
            }]
    },
    {
        'text': 'Africa',
        'id': '05',
        'category': 'Continent',
        'child': [{
                'text': 'Morocco',
                'id': '9',
                'category': 'Africa',
                'child': [{
                        'text': 'Rabat',
                        'id': '9001',
                        'category': 'Morocco',
                    },
                    {
                        'text': 'Toubkal',
                        'id': '9002',
                        'category': 'Morocco',
                    },
                    {
                        'text': 'Todgha Gorge',
                        'id': '9003',
                        'category': 'Morocco',
                    }]
            }, {
                'text': 'South Africa',
                'id': '10',
                'category': 'Africa',
                'child': [{
                        'text': 'Cape Town',
                        'id': '10001',
                        'category': 'South Africa',
                    },
                    {
                        'text': 'Pretoria',
                        'id': '10002',
                        'category': 'South Africa',
                    },
                    {
                        'text': 'Bloemfontein',
                        'id': '10003',
                        'category': 'South Africa',
                    }]
            }]
    }
];
//Initialize ListView component
var listviewInstance = new ej.lists.ListView({
    //set the data to datasource property
    dataSource: continent,
    // map the groupBy field with category column
    fields: { tooltip: 'text' },
    headerTitle: 'Continent',
    showHeader: true
});
//Render initialized ListView
listviewInstance.appendTo("#element");
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for ListView </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for ListView UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>


<body>
    
    <div id="container">
        <div id="element"></div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

ARIA attributes

The following ARIA attributes are applicable for ListView component based on its state.

Properties Functionality
aria-selected It indicates the selected list from the whole list.
aria-level It defines the hierarchical structure of a list item.