Tab component is designed by considering WAI-ARIA standard. Tab is supported with ARIA Accessibility which is accessible by on-screen readers, and other assistive technology devices. The following list of attributes are added in the Tab.
Roles and Attributes | Functionalities |
---|---|
tablist |
This is set to role attribute in the Tab element that describes actual role of the element. |
tabpanel |
This is set to role attribute for the Tab content that describes the role for viewing the active content. |
presentation | This is set to role attribute for nested elements in the Tab. |
aria-orientation | It indicates the Tab header orientation. Default value of this attribute is horizontal . |
aria-activedescendant | It indicates the current active child of the Tab component. |
aria-haspopup | It indicates the popup mode in the Tab. The default value of this attribute is false. If popup mode is enabled, the attribute value is set to true. |
aria-disabled | It indicates the disabled state of the Tab. |
aria-selected | It indicates the selection state for Tab items. Active Tab is set to true for this attribute. |
aria-hidden | It indicates the hidden element of the Tab. |
aria-controls | It indicates the associated Tabpanel for the header. |
aria-labelledby | It indicates the associated Tab header for the content. |
By default, keyboard navigation is enabled. This component implements keyboard navigation support by following the WAI-ARIA practices. Once focused on the active Tab element, you can use the following key combination for interacting with the Tab.
Key | Description |
---|---|
Left | Moves focus to the previous Tab. If focus is on the first Tab, the focus will not move to any Tab. |
Right | Moves focus to the next Tab. If focus is on the last Tab element, the focus will not move to any Tab. |
Enter or Space | Selects the Tab if it is not selected. Opens the popup dropdown icon if it is focussed. Select the Tab item as active when popup item is focussed. |
Esc(Escape) | Closes the popup if popup is in opened state. |
Down or Up | When the popup is open and focused, it will move to previous/next Tab items of the popup in the vertical direction. |
Home | Moves focus to the first Tab. |
End | Moves focus to the last Tab. |
Shift + F10 | If popup mode is enabled, it opens the popup when the Tab is focused. |
Delete | Deletes the Tab, if close button is enabled in Tab header. |
ej.base.enableRipple(true);
//Initialize Tab component
var tabObj = new ej.navigations.Tab({
heightAdjustMode: 'Auto',
overflowMode: 'Popup',
items: [
{
header: { 'text': 'HTML' },
content: 'HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web ' +
'pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually ' +
'engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web ' +
'browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a ' +
'website semantically along with cues for presentation, making it a markup language, rather than a programming language.'
},
{
header: { 'text': 'C Sharp(C#)' },
content: 'C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its development ' +
'team is led by Anders Hejlsberg. The most recent version is C# 5.0, which was released on August 15, 2012.'
},
{
header: { 'text': 'Java' },
content: 'Java is a set of computer software and specifications developed by Sun Microsystems, later acquired by Oracle ' +
'Corporation, that provides a system for developing application software and deploying it in a cross-platform computing ' +
'environment. Java is used in a wide variety of computing platforms from embedded devices and mobile phones to ' +
'enterprise servers and supercomputers. While less common, Java applets run in secure, sandboxed environments to ' +
'provide many features of native applications and can be embedded in HTML pages.'
},
{
header: { 'text': 'VB.Net' },
content: 'The command-line compiler, VBC.EXE, is installed as part of the freeware .NET Framework SDK. Mono also ' +
'includes a command-line VB.NET compiler. The most recent version is VB 2012, which was released on August 15, 2012.'
},
{
header: { 'text': 'Xamarin' },
content: 'Xamarin is a San Francisco, California based software company created in May 2011[3] by the engineers that ' +
'created Mono,[4] Mono for Android and MonoTouch that are cross-platform implementations of the Common Language ' +
'Infrastructure (CLI) and Common Language Specifications (often called Microsoft .NET). With a C#-shared codebase, ' +
'developers can use Xamarin tools to write native Android, iOS, and Windows apps with native user interfaces and share ' +
'code across multiple platforms.[5] Xamarin has over 1 million developers in more than 120 countries around the World ' +
'as of May 2015.'
},
{
header: { 'text': 'ASP.NET' },
content: 'ASP.NET is an open-source server-side web application framework designed for web development to produce ' +
'dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications ' +
'and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor ' +
'to Microsoft\'\s Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing ' +
'programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ' +
'ASP.NET components to process SOAP messages.'
},
{
header: { 'text': 'ASP.NET MVC' },
content: 'The ASP.NET MVC is a web application framework developed by Microsoft, which implements the ' +
'model–view–controller (MVC) pattern. It is open-source software, apart from the ASP.NET Web Forms component which is ' +
'proprietary. In the later versions of ASP.NET, ASP.NET MVC, ASP.NET Web API, and ASP.NET Web Pages (a platform using ' +
'only Razor pages) will merge into a unified MVC 6.The project is called ASP.NET vNext.'
},
{
header: { 'text': 'JavaScript' },
content: 'JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of ' +
'web browsers so that client-side scripts could interact with the user, control the browser, communicate ' +
'asynchronously, and alter the document content that was displayed.[5] More recently, however, it has become common in ' +
'both game development and the creation of desktop applications.'
}
]
});
//Render initialized Tab component
tabObj.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Tab</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Tab">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.55/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.1.55/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element">
</div>
<br><br>
<div id="result"></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>