TabPanel
Accessibility
The TabPanel control implements WAI-ARIA accessibility guidelines.
Features
Settings
Description
The TabPanel implements WAI-ARIA accessibility guidelines. All tab elements have the proper role attributes as well as all applicable ARIA attributes.
The example below assigns unique IDs to the tab headers and panes, which the TabPanel automatically uses to generate "aria-controls" and "aria-labelledby" attributes.
The example also adds a "wj-state-active" class to the "America" pane in markup to define the tab that is initially selected. Without that, the first tab would have been selected by default.
Finally, the example shows the effect of the AutoSwitch property, which affects how the control handles the tab and cursor keys. For a detailed discussion of this topic, please see the W3C ARIA practices and SimplyAccessible article.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; using System.Linq; using System.Collections.Generic; using Microsoft.AspNetCore.Http; namespace MvcExplorer.Controllers { public partial class TabPanelController : Controller { // GET: Accessibility public ActionResult Accessibility(IFormCollection collection) { var settings = new ClientSettingsModel("tabAccessibility") { Settings = CreateAccessibilitySettings(), DefaultValues = GetAccessibilityDefaultValues() }; ViewBag.DemoSettingsModel = settings; return View(); } private static IDictionary<string, object[]> CreateAccessibilitySettings() { var settings = new Dictionary<string, object[]> { {"AutoSwitch", new object[]{false, true}} }; return settings; } private static IDictionary<string, object> GetAccessibilityDefaultValues() { var defaultValues = new Dictionary<string, object> { {"AutoSwitch",true} }; return defaultValues; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | @{ ClientSettingsModel demoSettingModel = ViewBag.DemoSettingsModel; ViewBag.DemoSettings = true; } <c1-tab-panel id="@demoSettingModel.ControlId"> <div> <a id="hdr-africa"> Africa </a> <div id="pane-africa"> <ul> <li>Algeria</li> <li>Angola</li> <li>Benin</li> <li>Botswana</li> </ul> </div> </div> <div> <a id="hdr-america" class="wj-state-active"> America </a> <div id="pane-america"> <ul> <li>Canada</li> <li>Chile</li> <li>Mexico</li> <li>United States</li> </ul> </div> </div> <div> <a id="hdr-asia"> Asia </a> <div id="pane-asia"> <ul> <li>China</li> <li>Korea</li> <li>India</li> <li>Japan</li> </ul> </div> </div> <div> <a id="hdr-europe"> Europe </a> <div id="pane-europe"> <ul> <li>Austria</li> <li>England</li> <li>France</li> <li>Germany</li> <li>Netherlands</li> <li>Switzerland</li> </ul> </div> </div> <div> <a id="hdr-oceania"> Oceania </a> <div id="pane-oceania"> <ul> <li>Australia</li> <li>Fiji</li> <li>New Zealand</li> <li>Samoa</li> </ul> </div> </div> </c1-tab-panel> @section Summary{ <p>@Html.Raw(TabPanelRes.Accessibility_Text0)</p> } @section Description{ <p>@Html.Raw(TabPanelRes.Accessibility_Text1)</p> <p>@Html.Raw(TabPanelRes.Accessibility_Text2)</p> <p>@Html.Raw(TabPanelRes.Accessibility_Text3)</p> <p>@Html.Raw(TabPanelRes.Accessibility_Text4)</p> } |