These results are based on our legacy PHP analysis, consider migrating to our new PHP analysis engine instead. Learn more
1 | /** |
||
2 | * Check whether or not the tabs are visible |
||
3 | * |
||
4 | * @returns {boolean} |
||
5 | */ |
||
6 | function areTabsVisible() { |
||
7 | return ($('[role="tablist"]:visible').length >= 1); |
||
8 | } |
||
9 | |||
10 | /** |
||
11 | * Toggle the tabs' ARIA visibility based on whether or the tabs are visible via CSS |
||
12 | */ |
||
13 | function toggleTabsAriaVisible() { |
||
14 | $('[role="tablist"]').attr('aria-hidden', (areTabsVisible()) ? 'false' : 'true'); |
||
15 | } |
||
16 | |||
17 | /** |
||
18 | * Toggle the tab panels' ARIA visibility based on whether or not tabs are visible |
||
19 | */ |
||
20 | function toggleAriaTabPanels() { |
||
21 | var $activeTab = $('[aria-selected="true"]'); |
||
22 | |||
23 | $('[role="tabpanel"]').each(function () { |
||
24 | var $this = $(this); |
||
25 | |||
26 | // Don't hide the tab panel for the currently selected tab |
||
27 | if ($this.attr('id') === $activeTab.attr('aria-controls')) { |
||
28 | return; |
||
29 | } |
||
30 | |||
31 | $this.attr('aria-hidden', (areTabsVisible()) ? 'true' : 'false'); |
||
32 | }); |
||
33 | } |
||
34 | |||
35 | // To support responsive behavior, listen for the window resize event and change the tabs' visibility |
||
36 | window.addEventListener('resize', function() { |
||
37 | toggleTabsAriaVisible(); |
||
38 | toggleAriaTabPanels(); |
||
39 | }); |
||
40 | |||
41 | // Our main tabbing functionality. This should all be based on ARIA attributes |
||
42 | module.exports = function() { |
||
43 | var $tab = $('[role="tab"]'); |
||
44 | |||
45 | toggleTabsAriaVisible(); |
||
46 | toggleAriaTabPanels(); |
||
47 | |||
48 | $tab.click(function() { |
||
49 | var $this = $(this); |
||
50 | |||
51 | $tab.attr('aria-selected', 'false'); // deselect all the tabs |
||
52 | $this.attr('aria-selected', 'true'); // select this tab |
||
53 | |||
54 | var tabPanelID = $this.attr('aria-controls'); // find out what tab panel this tab controls |
||
55 | var $tabpan = $('#' + tabPanelID); |
||
56 | |||
57 | $('[role="tabpanel"]').attr('aria-hidden', 'true'); // hide all the panels |
||
58 | |||
59 | $tabpan.attr('aria-hidden', 'false'); // show our panel |
||
60 | |||
61 | $this.trigger('shown.bzion.tab', $tabpan); |
||
62 | }); |
||
63 | |||
64 | $tab.keydown(function(e) { |
||
65 | if (e.which === 13) { |
||
66 | $(this).click(); |
||
67 | } |
||
68 | }) |
||
0 ignored issues
–
show
|
|||
69 | }; |
||
70 |
Requirement of semicolons purely is a coding style issue since JavaScript has specific rules about semicolons which are followed by all browsers.
Further Readings: