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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
const SkipLinks = {
navigationStatus: 0,
/**
* Displays the skip link navigation after first hitting the tab-key
* @param event: event-object of type keyup
*/
showSkipLinkNavigation: function(event) {
if (event.keyCode === 9) {
//tab-key
SkipLinks.moveSkipLinkNavigationIn();
}
},
/**
* shows the skiplink-navigation window by moving it from the left
*/
moveSkipLinkNavigationIn: function() {
//Show the skip link navigation only if it hasn't been shown before or if it
//is focused after it has been shown.
if (SkipLinks.navigationStatus === 0 ||
SkipLinks.navigationStatus === 2 && jQuery('#skip_link_navigation:focus').length) {
//Make the menu itself unfocusable:
jQuery('#skip_link_navigation').attr('tabindex', '-1');
//Make the skip link items focusable:
jQuery('#skip_link_navigation li button').attr('tabindex', '0');
jQuery('#skip_link_navigation li:first button').focus();
jQuery('#skip_link_navigation').removeClass('inactive');
jQuery('#skip_link_navigation').addClass('active');
SkipLinks.navigationStatus = 1;
}
},
/**
* removes the skiplink-navigation window by moving it out of viewport
*/
moveSkipLinkNavigationOut: function() {
if (SkipLinks.navigationStatus === 1) {
//Make the skip link items unfocusable:
jQuery('#skip_link_navigation li button').attr('tabindex', '-1');
jQuery('#skip_link_navigation').removeClass('active');
jQuery('#skip_link_navigation').addClass('inactive');
//Make the menu focusable:
jQuery('#skip_link_navigation').attr('tabindex', '0');
}
SkipLinks.navigationStatus = 2;
},
/**
* Inserts the list with skip links
*/
insertSkipLinks: function() {
jQuery('#skip_link_navigation').prepend(jQuery('#skiplink_list'));
jQuery('#skiplink_list').show();
jQuery('#skip_link_navigation').attr('aria-busy', 'false');
jQuery('#skip_link_navigation').attr('tabindex', '-1');
SkipLinks.insertHeadLines();
return false;
},
/**
* sets the area (of the id) as the current area for tab-navigation
* and highlights it
*/
setActiveTarget (id) {
let fragment;
// set active area only if skip links are activated
if (!document.getElementById('skip_link_navigation')) {
return false;
}
if (id) {
fragment = id;
} else {
fragment = document.location.hash;
}
let valid_selector;
try {
valid_selector = document.querySelector(fragment) != null;
} catch (e) {
valid_selector = false;
}
if (fragment.length > 0 && fragment !== SkipLinks.activeElement && valid_selector) {
SkipLinks.moveSkipLinkNavigationOut();
if (jQuery(fragment).is(':focusable')) {
jQuery(fragment).click().focus();
} else {
//Set the focus on the first focusable element:
jQuery(fragment).find(':focusable').eq(0).focus();
}
return true;
} else {
jQuery('#skip_link_navigation li button').first().focus();
}
return false;
},
insertHeadLines: function() {
let target = null;
jQuery('#skip_link_navigation a').each(function() {
target = jQuery(this);
if (jQuery(target).is('li,td')) {
jQuery(target).prepend(
'<h2 id="' +
jQuery(target).attr('id') +
'_landmark_label" class="skip_target">' +
jQuery(this).text() +
'</h2>'
);
} else {
jQuery(target).before(
'<h2 id="' +
jQuery(target).attr('id') +
'_landmark_label" class="skip_target">' +
jQuery(this).text() +
'</h2>'
);
}
jQuery(target).attr('aria-labelledby', jQuery(target).attr('id') + '_landmark_label');
});
},
initialize: function() {
SkipLinks.insertSkipLinks();
SkipLinks.setActiveTarget();
}
};
export default SkipLinks;
|
