|
1 YUI().use("*", function (Y) { |
|
2 |
|
3 var tabView = Y.one("#tabview-1"), |
|
4 tabList = tabView.one("ul"), |
|
5 tabHeading = Y.one("#tabview-heading"), |
|
6 sInstructionalText = tabHeading.get("innerHTML"); |
|
7 selectedTabAnchor = tabView.one(".yui-tab-selected>a"), |
|
8 bGeckoIEWin = ((Y.UA.gecko || Y.UA.ie) && navigator.userAgent.indexOf("Windows") > -1), |
|
9 panelMap = {}; |
|
10 |
|
11 |
|
12 tabView.addClass("yui-tabview"); |
|
13 |
|
14 // Remove the "yui-loading" class from the documentElement |
|
15 // now that the necessary YUI dependencies are loaded and the |
|
16 // tabview has been skinned. |
|
17 |
|
18 tabView.get("ownerDocument").get("documentElement").removeClass("yui-loading"); |
|
19 |
|
20 // Apply the ARIA roles, states and properties. |
|
21 |
|
22 // Add some instructional text to the heading that will be read by |
|
23 // the screen reader when the first tab in the tabview is focused. |
|
24 |
|
25 tabHeading.set("innerHTML", (sInstructionalText + " <em>Press the enter key to load the content of each tab.</em>")); |
|
26 |
|
27 tabList.setAttrs({ |
|
28 "aria-labelledby": "tabview-heading", |
|
29 role: "tablist" |
|
30 }); |
|
31 |
|
32 tabView.one("div").set("role", "presentation"); |
|
33 |
|
34 |
|
35 tabView.plug(Y.Plugin.NodeFocusManager, { |
|
36 descendants: ".yui-tab>a", |
|
37 keys: { next: "down:39", // Right arrow |
|
38 previous: "down:37" }, // Left arrow |
|
39 focusClass: { |
|
40 className: "yui-tab-focus", |
|
41 fn: function (node) { |
|
42 return node.get("parentNode"); |
|
43 } |
|
44 }, |
|
45 circular: true |
|
46 }); |
|
47 |
|
48 |
|
49 // If the list of tabs loses focus, set the activeDescendant |
|
50 // attribute to the currently selected tab. |
|
51 |
|
52 tabView.focusManager.after("focusedChange", function (event) { |
|
53 |
|
54 if (!event.newVal) { // The list of tabs has lost focus |
|
55 this.set("activeDescendant", selectedTabAnchor); |
|
56 } |
|
57 |
|
58 }); |
|
59 |
|
60 |
|
61 tabView.all(".yui-tab>a").each(function (anchor) { |
|
62 |
|
63 var sHref = anchor.getAttribute("href", 2), |
|
64 sPanelID = sHref.substring(1, sHref.length), |
|
65 panel; |
|
66 |
|
67 // Apply the ARIA roles, states and properties to each tab |
|
68 |
|
69 anchor.set("role", "tab"); |
|
70 anchor.get("parentNode").set("role", "presentation"); |
|
71 |
|
72 |
|
73 // Remove the "href" attribute from the anchor element to |
|
74 // prevent JAWS and NVDA from reading the value of the "href" |
|
75 // attribute when the anchor is focused |
|
76 |
|
77 if (bGeckoIEWin) { |
|
78 anchor.removeAttribute("href"); |
|
79 } |
|
80 |
|
81 // Cache a reference to id of the tab's corresponding panel |
|
82 // element so that it can be made visible when the tab |
|
83 // is clicked. |
|
84 panelMap[anchor.get("id")] = sPanelID; |
|
85 |
|
86 |
|
87 // Apply the ARIA roles, states and properties to each panel |
|
88 |
|
89 panel = Y.one(("#" + sPanelID)); |
|
90 |
|
91 panel.setAttrs({ |
|
92 role: "tabpanel", |
|
93 "aria-labelledby": anchor.get("id") |
|
94 }); |
|
95 |
|
96 }); |
|
97 |
|
98 |
|
99 // Use the "delegate" custom event to listen for the "click" event |
|
100 // of each tab's <A> element. |
|
101 |
|
102 tabView.delegate("click", function (event) { |
|
103 |
|
104 var selectedPanel, |
|
105 sID = this.get("id"); |
|
106 |
|
107 // Deselect the currently selected tab and hide its |
|
108 // corresponding panel. |
|
109 |
|
110 if (selectedTabAnchor) { |
|
111 selectedTabAnchor.get("parentNode").removeClass("yui-tab-selected"); |
|
112 Y.one(("#" + panelMap[selectedTabAnchor.get("id")])).removeClass("yui-tabpanel-selected"); |
|
113 } |
|
114 |
|
115 selectedTabAnchor = this; |
|
116 selectedTabAnchor.get("parentNode").addClass("yui-tab-selected"); |
|
117 |
|
118 selectedPanel = Y.one(("#" + panelMap[sID])); |
|
119 selectedPanel.addClass("yui-tabpanel-selected"); |
|
120 |
|
121 creatingPaging(selectedPanel); |
|
122 |
|
123 // Prevent the browser from following the URL specified by the |
|
124 // anchor's "href" attribute when clicked. |
|
125 |
|
126 event.preventDefault(); |
|
127 |
|
128 }, ".yui-tab>a"); |
|
129 |
|
130 |
|
131 // Since the anchor's "href" attribute has been removed, the |
|
132 // element will not fire the click event in Firefox when the |
|
133 // user presses the enter key. To fix this, dispatch the |
|
134 // "click" event to the anchor when the user presses the |
|
135 // enter key. |
|
136 |
|
137 if (bGeckoIEWin) { |
|
138 |
|
139 tabView.delegate("keydown", function (event) { |
|
140 |
|
141 if (event.charCode === 13) { |
|
142 this.simulate("click"); |
|
143 } |
|
144 |
|
145 }, ">ul>li>a"); |
|
146 |
|
147 } |
|
148 |
|
149 |
|
150 var creatingPaging = function (panel) { |
|
151 |
|
152 var listitem, |
|
153 sHTML = ""; |
|
154 |
|
155 if (!panel.one(".paging")) { |
|
156 |
|
157 listitem = selectedTabAnchor.get("parentNode"); |
|
158 |
|
159 if (listitem.previous()) { |
|
160 sHTML += '<button type="button" class="yui-tabview-prevbtn">Previous Tab Panel</button>'; |
|
161 } |
|
162 |
|
163 if (listitem.next()) { |
|
164 sHTML += '<button type="button" class="yui-tabview-nextbtn">Next Tab Panel</button>'; |
|
165 } |
|
166 |
|
167 panel.append('<div class="paging">' + sHTML + '</div>'); |
|
168 |
|
169 } |
|
170 |
|
171 }; |
|
172 |
|
173 creatingPaging(Y.one(".yui-tabpanel-selected")); |
|
174 |
|
175 |
|
176 tabView.delegate("click", function (event) { |
|
177 |
|
178 var node = selectedTabAnchor.get("parentNode").previous().one("a"); |
|
179 |
|
180 tabView.focusManager.focus(node); |
|
181 node.simulate("click"); |
|
182 |
|
183 }, ".yui-tabview-prevbtn"); |
|
184 |
|
185 |
|
186 tabView.delegate("click", function (event) { |
|
187 |
|
188 var node = selectedTabAnchor.get("parentNode").next().one("a"); |
|
189 |
|
190 tabView.focusManager.focus(node); |
|
191 node.simulate("click"); |
|
192 |
|
193 }, ".yui-tabview-nextbtn"); |
|
194 |
|
195 }); |