Accessibility in Vue Listview component

16 Mar 202324 minutes to read

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.
<template>
  <div class="control-section">
    <!-- ListView element -->
    <ejs-listview
      id="listview"
      :dataSource="continent"
      :fields="fields"
      :headerTitle="headerTitle"
      showHeader="true"
    ></ejs-listview>
  </div>
</template>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
export default {
  data: function() {
    return {
      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"
                }
              ]
            }
          ]
        }
      ],
      fields: { tooltip: "text" },
      headerTitle: "Continent",
      showHeader: true
    };
  }
};
</script>
<style>
#listview {
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}
</style>

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.